jQuery选择器

jQuery选择器
选择器
举个例子：
js的写法是：var obj = document.getElementById(“dom-id”);
但是JQ的写法就是 var obj = $(“#dom-id”);
基本选择器：
1.＃Id放在$里就好
e.g.

$(document).ready(function(){
    var first = $(‘#first’);
    console.log(first);
});

2.element选择器

$(document).ready(function(){
    var div = $(‘div’);
    console.log(div);
});

遍历的话可以用$(this).index();
来读取选中的是第几个
如果想要对他做其他操作的话，我们可以迭代一个数组
$(‘div’)[index]
3.class选择器

$(document).ready(function(){
    var div = $(‘.div’);
    var first - $(‘.first’);
    var second = $(‘.second’);
    var third = $(‘.third’);
});

4.通配符选择器
*
多项选择器：
$(“selector1,selector2,selectorN”);
将每一个选择器匹配到的元素合并后一起返回
可以指定任意多个选择器，并将匹配到的元素合并到一个结果内
顺序完全跟着html的顺序走
e.g.

$(document).ready(function(){
    var firstAndThird = $(‘#fist,third’);
    console.log(firstAndThird);
});

层级选择器：
1.$(‘ancestor descendant’);
直接匹配所有后代
2.$(‘祖先 后代’);
3.$(‘parent > child’);
在给定的父元素下匹配所有子元素
4.$(‘prev + next’);
匹配所有紧接在prev元素后面的next元素，必须是同级的
5.$(‘prev~siblings’);
匹配所有prev元素之后的所有siblings元素，必须是同级的
属性选择器：
1.［attribute]，包含这种属性的选择器
2.［attribute = value]属性值为这个value的

1. ［attribute!=value]

4.［attribute^=value]在某个属性中，它的值是以value开头
5.［attribute$=value]以value结尾
6.［attribute＊＝value]整个属性的值只要包含value就行
7.［selector1］［selector2］［selectorN]所有条件要同时都满足
e.g.
var jq = $(‘[class][class*=lang][class$=y]’);
8.$("div[id]")表示匹配所有的包含id的div元素。
过滤器：
   过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单 对象属性过滤选择器共六种选择器。

:empty()(可以匹配不包含子元素或文本为空的元素)  例如：$("td:empty")  可以选择内容为空的表格单元格；
:has()(可以匹配包含指定子元素的元素)  例如： $("div:has(p)")可以选择包含p元素的div元素；
:parent()(可以匹配至少包含一个子元素或文本的元素) 例如： $("div:parent(p)")可以选择包含p元素的div元素
可见性过滤器：

    `:hidden`(可以匹配到所有不可见元素)  例如：`$("input:hidden")` 匹配所有不可见的input元素；
    `:visible`(可以匹配所有的可见元素)

child过滤器：
1、:nth-child(index)从1开始的，而eq(index)是从0开始的，就是说  $("ul li:nth-child(0)").css("color","red")是获取不到相匹配的元素，只能从1开始，即  $("ul li:nth-child(1)").css("color","red")，而eq(0)可以获得，同样都是获得第一个子元素
    :nth-child(even)是获得偶数子元素，即第二个，第四个，第六个...,而:even则是从索引0开始，匹配第二个索引，第四个索引...,也就是第一个，第三个，第五个...,看上去貌似都是获得奇数项，同样:nth-child(odd)和:odd同样也是如此 
2、   :first-child匹配每个父类的子元素，而:first则是匹配一个子元素， :last-child和last也是这样
3、only-child:匹配某个元素是父元素中唯一的子元素，就是说当前子元素是类中唯一的元素，则匹配！
type:
1.first-of-type
2.last-of-type
3.nth-of-type(n | even | odd | formula)
4.nth-of-type(n | even | odd | formula)
5.only-of-type
first-of-type：选择所有限制条件下的第一个冒号前面的标签元素，此标签可以不是第一个
1Hello2Hello4

过滤器：
1.n 匹配子元素序号，必须为整数，从1开始
2.even匹配所有偶数元素
3.odd匹配所有奇数元素
4.formula使用特殊公式(an+b)进行选择
表单过滤器

•    :input 　　　　　　所有表单元素(<input>/<select>/<textarea>/<button>)
•    :text 　　　　 　　文本框<input type='text'>
•    :password　　 　　 密码框<input type='password'>
•    :radio　　　　 　　 单选框<input type='radio'>
•    :checkbox 　　　　 复选框<input type='checkbox'>
•    :submit 　　 　　　　提交按钮<input type='submit'>
•    :image 　　 　　　　图片按钮<input type='image' src=''>
•    :reset 　　 　　　　重置按钮<input type='text'>
•    :file 　　　　 　　文本上传<input type='file'>
•    :hidden 　　　　 隐藏域<input type='hidden'> <xxx style='display:none'>
•    :button 　　 　　所有普通按钮 或者<input type='button'/>

 

•    :enabled 　　　　　　可用
•    :disabled 　　　　　　 不可用
•    :checked 　　　　　　 选中（单选框redio，复选框checkbox）
•    :selected　　　　　　 选择（下拉列表 select option）

:text 匹配所有的单行文本框，和input[type=‘text’]一样
:enabled,:disable
enabled匹配所有可用元素，disabled匹配所有不可用的元素
：checked 匹配所有选中的元素（复选框，单选框，select中的option）
：selected 匹配所有选中的option元素

1. $("form :input") 返回form中的所有表单对象，包括textarea、select、button等

    $("form input")返回form中的所有input标签对象

1. form input 是属于层级选择器(将每一个选择器匹配到的元素合并后一起返回)

   form :input是属于表单选择器(匹配所有input,textarea,select,button等）
jQuery 为最常用的过滤器提供了专用的方法，已达到提到性能和效率的作用：

1 $('li').eq(2).css('background', '#ccc');               //第三个li元素，负数从后开始
2 
3 $('li').first().css('background', '#ccc');               //第一个li元素
4 
5 $('li').last().css('background', '#ccc');               //元素 li 的最后一个元素
6 
7 $('li').not('.red').css('background', '#ccc');       //元素 li 不含 class 为 red 的元素

其它方法

slice(start,end):end不包含
$('li').filter('.red').css('background','#ccc'); 　　　　　　　　
//选择 li 的 class 为 red 的元素