jQuery-选择器

jQuery-选择器

1. jQuery选择器

   —选择器本身只是一个有特定语法规则的字符串，没有实质用处；用于查找页面中特定元素；

   —他的基本语法规则为CSS选择器语法，并进行扩展；

   —只用调用$()，并将选择器作为参数传入才能起作用；

   —$(selector)：根据选择器规则在整个文档中查找所有匹配的标签的伪数组，并封装jQuery对象返回；

   —选择器分类：基本选择器、层次选择器、过滤选择器、表单选择器；

2. 基本选择器

   1. id选择器：$('#id名')；
   2. 元素选择器：$('元素名')
   3. 属性选择器：$('.属性名')；
   4. 任意标签：$('*')；
   5. 组合选择器（取多个选择器的并集）：$('selector1,selector2,selector3,...')；
   6. 相交选择器（取多个选择器的交集）：$('selector1selector2selectorN')；

3. 层次选择器

   1. 查找后代元素，在给定的祖先元素下匹配所有的后代元素：$('ancestor descendant')；
   2. 查找子代元素，在给定的父元素下匹配所有的子元素：$('parent>child')；
   3. 查找兄弟元素，匹配紧接在prev元素后的一个next元素：$('prev+next')；
   4. 匹配prev元素之后的所有siblings元素：$('prev~siblings')；

4. 过滤选择器

   —作用：在原有选择器匹配的元素中进一步进行过滤的选择器；

   1. 选择第一个元素：$('基本选择器:first')；

   2. 选择最后一个元素：$('基本选择器:last')；

   3. 选择其中某一个元素：$('基本选择器:eq(index)')；

   4. 选择除去特定元素以外的元素（没有特定元素下的元素也包含在内）：$('基本选择器:not(特定基本选择器)')；

   5. 选择指定索引下的元素：$('基本选择器:gt(index1):lt(index2)')；

      —:gt(index)匹配所有大于给定索引值的元素；

      —:lt(index)匹配所有小于给定索引值的元素；

      —一定要注意多个过滤选择器不是同时执行的，而是依次执行，例如选择第二个和第三个li元素：$('li:gt(0):lt(2).css('background','red')')或者$('li:lt(3):gt(0)')；

   6. 选择奇数元素：$('基本选择器:odd')；选择偶数元素：$('基本选择器:even')

   7. 选择内部含有指定内容的元素：$('基本选择器:contains("text")')；

   8. 选择隐藏的元素（即CSS样式为display:hidden的元素）：$('基本选择器:hidden').length；

   9. 选择有特定属性的元素：$('基本选择器[特定属性]')；

   10. 选择有特定属性名的元素：$('基本选择器[属性="属性名"]')；

5. 表单选择器

   —一般通过表单进行选择，常见的表单和表单属性可以查看jQuery中文手册；以下举几个简单的例子：

   1. 选择不可用的文本输入框：$(':text:disabled')；

   2. 选择选中个数：$(':checkbox:checked').length；

   3. 显示提交以后选择的内容：

      <script>
      	$(':submit').click(function(){
              var city = $('select>option:seleced').html()//选择选中的option的标签文本
              //另一种方式，通过value属性只是得到value属性值
              $('select').val()
              alert(city)
          })
      </script>
      

6. $工具方法

   具体详细的可以查看中文参考手册；

   1. $.each(obj/array,function(i,v){})：遍历数组或对象中的数据；

   2. $.trim()：去除字符串两边的空格；

   3. $.type(obj)：返回数据的类型；

   4. $.isArray(obj)：判断是否为数组；

   5. $.isFunction(obj)：判断是否为函数；

   6. $.parseJSON(json)：解析JSON字符串转换为js对象/数组；

   json对象：var json = '{"name":"Tom","age":12}'

   json数组：var jsonArray = '[{"name":"Tom","age":12},{"name":"Jack","age":18}]'

7. 属性

   —操作任意属性

   1. $('selector').attr('属性名')：返回属性值；可以同时传递两个参数，这样第二个参数为设置属性的属性值；其用于操作属性值为非布尔型的属性；
   2. $('selector').removeAttr('属性名')/removeProp('name')：移除属性；
   3. $('selector').prop('属性名')：专门用于操作属性值为布尔值的属性

   —操作class属性

   1. $('selector').addClass('class属性')：添加class属性；
   2. $('selector').removeClass('class属性')：移除class属性；

   —操作HTML代码/文本/值

   1. $('selector').html()：返回选择器的标签体文本；可以在html()中传递参数，加载为标签内容；
   2. $(':text').val()：返回value属性值；同时也可以传递参数，实现写入操作；

   相关例子

   1. 点击全选按钮实现全选功能：

      <script>
          //通过表单选择器获取元素
      	var $checkboxs = $(':checkbox')
          $('button:first').click(function(){
              //修改checkbox中的属性为选中状态
              //但是这样会出现问题
              $checkboxs.attr('checked',true)
              //修改使用prop()
              $checkboxs.prop('checked',true)
          })
      </script>