jquery选择器

jquery

jquery跟DOM模型的区别和转换

//创建jquery对象;
$('#d1') 
//创建DOM对象
var a = document.getElementById('d1');
//DOM对象转换成jquery对象
$(a);
//jquery对象转换成DOM模型;
$('#d1')[0];
//jquery 对象只能使用jquery的方法,DOM对象只能使用DOM对象的方法;

基本选择器

$('#id') -- 找到对应id的标签
$('.classname') --找到对应class名的标签
$('tagname') --标签选择器
//配合使用:
$('div.c1') -- 找到有c1 class类的div标签
$('*') --找到所有选择器
$('#id .classname,tagname') --组合选择器 
选择器可能找到多个标签,会放到数组里,可以通过索引取到DOM对象
$('.c1')[0];//取到类名为c1的DOM标签
$($('.c1')[0]); //转换成jquery对象

层级选择器

跟css后代选择器一样

筛选器

<ul>
    <li>蔡世楠</li>
    <li>尤立阳</li>
    <li id="l3">
        <span>张雷</span>
    </li>
    <li>沈开奇</li>
    <li id="l5">
        <a href="">程德浩</a>
    </li>
    <li>罗新宇</li>
    <li>曾凡星</li>
</ul>
$('li:first'); //找到第一个li标签
$('li:last'); //找到最后一个li标签
$('li:eq(3)'); //找到索引为3的标签
$('li:eq(-1)');//索引可以倒着取
$('li:even');//找到索引为偶数的标签
$('li:odd');//找到索引为奇数的标签
$('li:not(#l3)');//找到id不为l3的标签
$('li:has(a)');//找到后代含有a标签的li标签
$('li:not(:has(.c1))');//找到后代不含class =c1 的li标签

属性选择器

//多用于input标签
$('[title]') //找到属性为title的标签;
$('[title = 'text']') ;//找到属性title = 'xx';的标签;
$('input[title = 'xx']');//找到input标签中属性title ='title'的标签;

表单筛选器

找到的是input标签中type属性找到的值
:text
:password
:radio
:checkbox
:submit
:reset
:button
示例: $(':text') //找到input标签中type = 'text'的标签

表单对象属性

$(':disabled') //找到被禁用的
$(':checked') //input标签找到被选中的
$(':enabled') //找到可用的
$(':selected') //select框找到选中的
​

筛选器方法

下一个:
next();//找下一个兄弟标签
$('#l3').next().next().next()//链式表达
nextall();//找到下面所有的兄弟标签
nextUntil('#l5') //直到找到标签为l5的标签
上一个:
prev() //上一个
prevall() //上面所有
prevUntil('#l3') //上一个直到找到id为l5的标签
父亲:
parent();
parents(); //找父辈,祖辈
parentsUntil('body');找父辈一直到body
儿子和兄弟元素;
children();  儿子们
siblings(); 兄弟们
children('#l3') 儿子为l3的那个标签
sibling('#l3') 兄弟为l3的那个标签
​
find 相当于后代选择器 $('div').find('#l3') 找到后代id = l3的标签
$('div').filter('.c1') //筛选class ='c1' 的div标签
.first() //找到第一个
.last()
.eq(3)
.has(标签)
.not(标签)