前端之jQuery的选择器

JQuery

jquery的语法

• $(“#id") id选择器
  id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素.

• $( “.class” ) 类选择器 Class可以同时支持多个元素 标记名称选择所有的元素，元素节点是可以重复多个的 查找文档中的每一个元素

• $( “element” )元素选择器

• $( “*” ) 全选择器
  
  
  注:jQuery合集都是从0开始索引。
  

• contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素

• 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。

• parent与:empty是相反的，两者所涉及的子元素，包括文本节点

eg:[attr=“value”]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type=“text”],input[type=“checkbox”]等
[attr*=“value”]能在网站中帮助我们匹配不同类型的文件。

子元素筛选选择器

1. first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
2. last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素如果子元素只有一个的话，:first-child与:last-child是同一个。
3. only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的。
4. nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算。

表单元素选择器

表单对象属性筛选选择器

• 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器。
• 在某些浏览器中，选择器:checked可能会错误选取到元素，所以保险起见换用选择器input:checked，确保只会选取元素。

特殊选择器this
$(‘p’).click(function(){
//把p元素转化成jQuery的对象
var $this= $(this)
$this.css(‘color’,‘red’)
})