jQuery学习之------选择器

Posted 2020-10-13 NotFoundObject

a.id选择器

<div id=”test1”></div>

var div1=$(“#test1”);                //同css的写法一样id选择器用#号实现

div1.css(‘color’,’red’);

b.class选择器：

<div class=”test2”></div>

var div2=$(“.test2”);                  //同css的写法一样class选择器用.号实现

div2.css(‘color’,’red’);

c. 元素选择器

搜索指定元素标签名的所有节点，这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持

javascript的实现方法

var divs = document.getElementsByTagName(\'div\');      //获取页面中的所有的div元素

jQuery的实现：

$("div");//对比发现jQuery的选择器功能要比原生的JavaScript简便的多

选择name属性为\'setColor\'的a标签

  $("#menu_con a[name=\'setColor\']").css(\'color\',\'blue\');

d. 全选择器（*选择器）

全选择我们早在css中使用过，如：

*{padding:0px;margin:0px}

同样在jQuery和原生JS中全选择也被使用：

js:

var elements1 = document.getElementsByTagName(\'*\');

jQuery：

var elements2 = $("*");

 

e.层级选择器

子元素

$(\'div > p\')      //div下的第一个p元素

后代元素

$(\'div  p\')       //表示div下的所有p元素

兄弟元素

$(".prev + div")         //选取prev后面的第一个的div兄弟节点

相邻元素

$(".prev ~ div")         //选取prev后面的所有的div兄弟节点

 

f.基本筛选选择器

 

 

g.内容选择器

 

    $(".tag:first a:contains(\'更多\')").css(\'color\',\'#C71585\');

h. jQuery选择器之子元素筛选选择器

$(\'.first-div a:first-child\')

//查找该div下的所有的父级元素的第一个a标签

$(\'.first-div a:last-child\')

查找该div下的所有的父级元素的最后一个a标签

$(\'.first-div a:only-child\')

查找该div下所有父级元素下只有一个a标签的元素

$(".last-div a:nth-child(2)")

//查找class="last-div"下的第二个a元素

$(\'.last-div a:nth-last-child(2)\')

查找class="last-div"下的倒数第二个a元素

例子：

<div class="left first-div">

        <div class="div">

            <a>:first-child将被选中</a>

            <a>第二个元素</a>

            <a>:last-child</a>

        </div>

        <div class="div">

            <a>:first-child将被选中</a>

        </div>

        <div class="div">

            <a>:first-child将被选中</a>

            <a>第二个元素</a>

            <a>:last-child</a>

        </div>

</div>

 

//查找class="first-div"下的第一个a元素

        //针对所有父级下的第一个

        $(\'.first-div a:first-child\').css("color", "#CD00CD");

i.表单元素选择器

<script type="text/javascript">

        //查找所有 input, textarea, select 和 button 元素

        //:input 选择器基本上选择所有表单控件

        $(":input").css("border", "1px groove red");

    </script>

 

    <script type="text/javascript">

        //匹配所有input元素中类型为text的input元素

        $(":text").css("background", "#A2CD5A");

    </script>

 

    <script type="text/javascript">

        //匹配所有input元素中类型为password的input元素

        $(":password").css("background", "yellow");

    </script>

 

    <script type="text/javascript">

        //匹配所有input元素中的单选按钮,并选中

        $(":radio").attr(\'checked\',\'true\');

    </script>

 

    <script type="text/javascript">

        //匹配所有input元素中的复选按钮,并选中

        $(":checkbox").attr(\'checked\',\'true\');

    </script>

 

    <script type="text/javascript">

        //匹配所有input元素中的提交的按钮,修改背景颜色

        $(":submit").css("background", "#C6E2FF");

    </script>

 

    <script type="text/javascript">

        //匹配所有input元素中的图像类型的元素,修改背景颜色

        $(":image").css("background", "#F4A460");

    </script>

 

    <script type="text/javascript">

        //匹配所有input元素中类型为按钮的元素

        $(":button").css("background", "red");

    </script>

 

    <script type="text/javascript">

        //匹配所有input元素中类型为file的元素

        $(":file").css("background", "#CD1076");

    </script>