2、jQuery-选择器

概要

使用jQuery 选择器选取元素，并封装为jQuery对象。在JS原生DOM中，我们想要对DOM元素进行操作，首先得获取到对应的元素(getElementById()、 getElementsByTagName()等)，然后再对这些元素进行操作。同样的，jQuery也需要先选取所需的DOM元素，然后再针对这些元素进行操作。

基础选择器(重点)

1、ID选择器

作用

通过元素的id属性的值获取元素

语法

$('#id')

栗子

    
这个是p标签

2、标签选择器

语法

$('标签名')

举个栗子

这个是p标签

3、类选择器

语法

$(".class")

示例代码

4、组合选择器(并集)

语法

$('id|class|标签,id|class|标签')

栗子

$(function () {
  var $elements = $(".cls1,.cls2,#title,p");
  $elements.text("测试一下");
});

5、通配符选择器

语法

$("*")

栗子

$(function () {
  // 遍历所有元素，将字体颜色设置为红色
  $('*').css('color', '#FF0000');
});

6、标签+类选择器

语法

$('标签.类选择器')

栗子

层级选择器(重点)

1 、后代选择器

语法

$('选择器 选择器')

栗子

    
第一个列表
    

        

        
 
        
这个有点屌啊
        
 
    
    
第二个列表
    

        

        

        

        

    

2、子类选择器

语法

$('选择器 > 选择器')

栗子

$(function () {
  //返回四个li标签
  var $li = $(".parent > li");
});

3、相邻的元素

语法

('选择器').nextAll('选择器')	当前元素后面所有指定的兄弟
$('div ~ *')	当前元素后面所有的兄弟
('选择器').next('选择器')	当前元素后面紧挨的第一个指定兄弟
$('选择器').prevAll('选择器')	当前元素前面所有指定的兄弟
$('选择器').prev('选择器')	当前元素前面紧挨的指定兄弟
$('选择器').siblings()	当前元素的所有兄弟元素

示例代码

    

        
1
        
1
    
    

        
1
        
1
    
    

    

   $(function () {
               var $div1 = $("div ~ p");
               $div1.text("当前元素后面所有指定的兄弟")
       });

过滤选择器

语法

语法	说明
("选择器").first()	选取第一个元素
("选择器").last()	选取最后一个元素
$("选择器:even")	选取所有偶数个元素
$("选择器:odd")	选取所有奇数个元素
$("选择器:not(选择器)")	选取对象，然后从中剔除相应元素
$("选择器:header")	选取所有的h1...h6元素
$("选择器:eq(index))	等于索引
$("选择器:gt(index))	大于索引
$("选择器:lt(index))	小于索引

栗子

 

   
0
   
1
   
2
   
3
 

1. 基本过滤器-选取第一个元素
        $(function () {
            //var $first = $("ul>li").first();
            //等同于
            var $first = $("li:first");
            $first.text("基本过滤器,获取第一个子元素");
            //运行结构改变
0
的内容被改变
基本过滤器,第一个子元素
        });
2. 基本过滤器-选取最后一个元素
        $(function () {
            //var $last = $("ul>li").last();
            //等同于
            var $first = $("li:last");
            $first.text("基本过滤器,获取最后一个子元素");
            //运行结构改变
3
的内容被改变
基本过滤器,取最后一个子元素
        });
3. 基本过滤器-取所有偶数个数的元素
   $(function () {
            var $li_even = $("ul > li:even");
            $li_even.text("获取所有偶数个数");
            // 
0
 
2
 的内容被改变
        });
4. 基本过滤器-
   $(function () {
            var $li_even = $("ul > li:odd");
            $li_even.text("获取所有偶数个数");
            // 
1
 
3
 的内容被改变
        });
5. 基本过滤器-取所有奇数个数的元素
   $(function () {
            var $li_even = $("ul > li:odd");
            $li_even.text("取所有奇数个数的元素");
            // 
1
 
3
 的内容被改变
        });
6    基本过滤器-索引来选取元素
    $(function () {
            var $li_even = $("ul > li:eq(0)");
            $li_even.text("通过索引来获取元素");
            //
0
 被修改
        });

属性过滤器选择器

语法

语法	说明
$("选择器[attribute]")	获取attribute属性的元素
$("选择器[attribute = value]")	获取attribute属性值等于value
$("选择器[attribute != value])	获取不等于value的元素
$("选择器[attribute ^= value] )	获取以value开头
= value]")	获取以value结尾
$("选择器[attribute *= value])	获取包含value

栗子

    
title=t1 和 class = t1
    
title=t1 和 class = t2
    
title=t2 和 class = t3
    
title=t3 和 class = t4
    
title=t4 和 class = t5
    
其他

1.取拥有title属性的元素
$(function () {
   $("a[title]").text("有title属性的全部给我改!!!!")
   //除了a标签是其他的其他的内容都会改变
});
2.取title属性值等于t1
$(function () {
    $("a[title=t1]").text("有title属性的t1全部给我改!!!!")
    //前面两个a标签改变
});
3.取title属性值不等于t1的元素
$(function () {
   $("a[title!=t1]").text("有title属性的值不等于 t1 全部给我改!!!!")
    //除前面两个a标签其他都会改变
});
4.选择通用匹配
$(function () {
    $("a[title*=ti7]").text("有title属性的值包含t全部给我改!!!!")
   //倒数第二项被改变
   //必须是连续,不能ti17 这样是配配不上的
 });
5.复合型属性过滤器，同时满足多个条件
$(function () {
   $("[href][class=item]").text("多匹配");
   //最后一项被改变
});

在属性选择器中，^$符号和正则表达式的开始结束符号表示的含义是一致的，模糊匹配，类似于sql中的like '%t%'*

表单过滤选择器

语法

语法	说明
$(":input")	选择所有的表单输入元素，包括input, textarea, select 和 button
$(":text")	选择所有的text input元素
$(":password")	选择所有的password input元素
$(":radio")	选择所有的radio input元素
$(":checkbox")	选择所有的checkbox input元素
$(":submit")	选择所有的submit input元素
$(":reset")	选择所有的reset input元素
$(":button")	选择所有的button input元素
(":file")	选择所有的file input元素
$(":hidden")	选择所有类型为hidden的input元素或表单的隐藏域

栗子

    
    

    

    主修技术选择:

    JAVA

    PHP

    H5

    Android

    IOS

    选修技术选择

    JAVA

    PHP 

    H5

    Android

    IOS

    选择上传的文件: 

    

    选择:
        
            
                1
                2
                3
                4
                5
            
            
            10
            20
            30
            40
            50
        
    

    
    

// 1.取input,textarea,select,button元素
$(function () {
  //选择所有的input标签
  // $("input").css("padding", "10px");
  // 取input,textarea,select,button元素
  $(":input").css("padding", "10px");
});
//选择所有的input type=text属性的标签
$(function () {
  $(":text").height("500px");
});
$(function () {
  $(":button").click(function () {
    var $checked = $(":checkbox").length;
    alert($checked);
  });
});

jquery操作复选框常用操作
1、获取单个checkbox选中项(三种写法)
$("input:checkbox:checked").val()
或者
$("input:[type='checkbox']:checked").val();
或者
$("input:[name='ck']:checked").val();
2、 获取多个checkbox选中项
var $checks = $("input:checkbox:checked");
$checks.each(function () {
  var val = $(this).val();
})
3、设置第一个checkbox 为选中值
$('input:checkbox:first').attr("checked",'checked');
或者
$('input:checkbox').eq(0).attr("checked",'true');
4、设置最后一个checkbox为选中值
$('input:radio:last').attr('checked', 'checked');
或者
$('input:radio:last').attr('checked', 'true');
5、根据索引值设置任意一个checkbox为选中值
$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2....
  或者
  $('input:radio').slice(1,2).attr('checked', 'true');
6、选中多个checkbox同时选中第1个和第2个的checkbox
$('input:radio').slice(0,2).attr('checked','true');
7、根据Value值设置checkbox为选中值
$("input:checkbox[value='1']").attr('checked','true');
8、删除Value=1的checkbox
$("input:checkbox[value='1']").remove();
9、删除第几个checkbox
$("input:checkbox").eq(索引值).remove();索引值=0,1,2....
如删除第3个checkbox:
$("input:checkbox").eq(2).remove();
10、遍历checkbox
$('input:checkbox').each(function (index, domEle) {
  //写入代码
});
11、全部选中
$('input:checkbox').each(function() {
  $(this).attr('checked', true);
});
12、全部取消选择
$('input:checkbox').each(function () {
  $(this).attr('checked',false);
});

表单属性过滤选择器(重点)

语法

选择器	说明
$(":enabled")	选择所有的可操作的表单元素
$(":disabled")	选择所有的不可操作的表单元素
$(":checked")	选择所有的被checked的表单元素
$("select option:selected")	选择所有的select 的子元素中被selected的元素

示例代码

    
    
    

    

    

    主修技术选择:

    JAVA

    PHP

    H5

    Android

    IOS

    选修技术选择

    JAVA

    PHP 

    H5

    Android

    IOS

    选择上传的文件: 

       

    选择:
        
            
                1
                2
                3
                4
                5
            
            
            10
            20
            30
            40
            50
        
    

    
    
    

$(function () {
       $(":button").click(function () {
        var $checked = $("input[type=checkbox]");
        alert($checked.length);
      });
 });

可见性过滤器(重点)

语法

语法	说明
$('选择器:hidden')	选取所有不可见元素
$('选择器:visable')	选取所有可见元素

• 表单元素type="hidden"
• 设置样式display:none
• 设置样式宽高为0：width:0；height:0
• 父元素隐藏，子元素也是隐藏的

栗子

    
display: none
    
visibility: hidden
    
    
可见的元素

 $(function() {
            $('div:hidden').show(1000);
            alert($('input:hidden').val());
  });
$(function() {
  $('div:visible')..css('background', '#BBB);
});

3. jQuery至1.3.2之后的:hidden选择器仅匹配display:none元素或高宽:0的元素，而不匹配visibility: hidden,
   hidden只匹配那些“隐藏的”并且不占空间的元素

内容过滤

语法

• 过滤出包含给定文本的元素。(innerText中包含) -- :contains(text)
• 过滤出所有不包含子元素或者文本的空元素 -- :empty
• 过滤出元素中包含（即子元素中）selector选择器能选择到的元素 -- :has(selector)
• 过滤出可以当做父元素的元素（即该元素有子元素或者元素中包含文本。） -- :parent

示例代码

    
技术
    
JAVA PHP,H5,Android,IOS
    
SEO
    
关键字排名
    
其他
    



    
测试 has 过滤


    

    
parent（取包含子元素或文本的元素
    

    

// 1. 过滤出所有不包含子元素或者文本的空元素
$(function () {
    $('dd:empty').html('没有内容');
});
// 2. 过滤出元素中包含（不是直系子元素也会生效）selector选择器能选择到的元素
$(function () {
  $("div:has(span)")
  .css("border", "1px solid black");
});
// 3. 取包含子元素或文本的元素
$(function () {
  $('ol li:parent').css('border', '1px solid #000');
});

总结

1. 基本过滤选择

   选择器	说明	返回
   :first	匹配找到的第1个元素	单个元素
   :last	匹配找到的最后一个元素	单个元素
   :eq	匹配一个给定索引值的元素	单个元素
   :even	匹配所有索引值为偶数的元素	集合元素
   : odd	匹配所有索引值为奇数的元素	集合元素
   :gt(index)	匹配所有大于给定索引值的元素	集合元素
   :lt(index)	匹配所有小于给定索引值的元素	集合元素
   :not	去除所有与给定选择器匹配的元素	集合元素
   :animated	选取当前正在执行动画的所有元素	集合元素
   focus	选取当前正在获取焦点的元素	集合元素

2. 内容过滤选择器

   选择器	描述	返回
   :contains(text)	选取含有文本内容为text的元素	集合元素
   :empty	选取不包含子元素获取文本的空元素	集合元素
   :has(selector)	选择含有选择器所匹配的元素的元素	集合元素
   :parent	选取含有子元素或者文本的元素	集合元素

3. 可见过滤选择器

   选择器	描述	返回
   :hidden	选择所有不可见的元素	集合元素
   :visible	选取所有可见的元素	集合元素

4. 属性过滤选择器

   选择器	说明	返回
   [attribute]	选取拥有此属性的元素	集合元素
   [attribute=value]	选取属性值为value值的元素	集合元素
   [attribue^=value]	选取属性的值以value开始的元素	集合元素
   [attribue$=value]	选取属性的值以value结束的元素	集合元素

5. 子元素过滤选择器

   选择器	说明	返回
   :nth-child(index/even/odd)	选取每个父元素下的第index个子元素或者奇偶元素（index从1算起）	集合元素
   :first-child	选取每个元素的第一个子元素	集合元素
   :last-child	选取每个元素的最后一个子元素	集合元素

   • :nth-child()选择器是很常用的子元素过滤选择器，如下
     • :nth-child(even)选择每个父元素下的索引值是偶数的元素
     • :nth-child(odd)选择每个父元素下的索引值是奇数的元素
     • :nth-child(2)选择每个父元素下的索引值是2的元素
     • :nth-child(3n)选择每个父元素下的索引值是3的倍数的元素 (n从1开始)
6. 表单对象属性过滤选择器

   选择器	说明	返回
   :enabled	选取所有可用元素	集合元素
   :disabled	选取所有不可用元素	集合元素
   :checked	选取所有被选中的元素（单选框、复选框）	集合元素
   :selected	选取所有被选中的元素（下拉列表）	集合元素

7. 表单选择器

   选择器	说明
   :input	选取所有input textarea select button元素
   :text	选取所有单行文本框
   :password	选取所有密码框
   :radio	选取所有单选框
   :checkbox	选取所有多选框
   :submit	选取所有的提交按钮
   :image	选取所有的图像按钮
   :reset	选取所有的重置按钮
   :button	选取所有的按钮
   :file	选取所有的上传域
   :hidden	选取所有的不可见元素

优化原则

1. 尽量ID选择器。其背后机理其实是调用原生的document.getElementById()，所以速度较其他选择器快。
2. 使用类选择器时不要指定元素的类型。不信你看这个性能比较

   var $products = $("div.products"); // 慢
   var $products = $(".products"); // 快
   

3. ID父亲容器下面再查找子元素请用.find()方法。这样做快的原因是通过id选择元素不会使用Sizzle引擎(选择器查询底层算法)
4. 多级查找中，右边尽量指定得详细点而左边则尽量简单点

   $(".data td.gonzalez");
   

5. 避免冗余。

   $(".data table.attendees td.gonzalez");
   好的方式：去掉了中间的冗余
   $(".data td.tb");
   $(".data td.gonzalez");
   

6. 指定选择的上下文。

    // 劣质的代码：因为需要遍历整个DOM来找到.class
    $('.class');
    // 高品代码：因为只需在指定容器范围内进行查找
    $('.class', '#class-container');
   

7. 不要使用万能选择器

   $('div.container > *'); // 差
   $('div.container').children();
   

8. 警惕隐式的万能选择器。省略的情况下其实使用的就是*号通配符

   $('div.someclass :radio'); // 差
   $('div.someclass input:radio'); // 棒
   

9. ID已经表示唯一了，背后使用的是document.getElementById()， 所以别跟其他选择器混搭了。

   $('#outer #inner'); // 脏
   $('div#inner'); // 乱
   $('.outer-container #inner'); // 差
   $('#inner'); // 干净利落，后台只需调用document.getElementById()