jquery选择器

标签：div   element   one   class   bsp   not   对象   round   列表项   

1.基本选择器

2.dom对象与jQuery对象的转换

$(‘p‘)[0].style.color = ‘pink‘;

var pp = document.getElementById(‘id1‘);
 $(pp).css(‘backgroundColor‘,‘red‘);

3.层次选择器

$(‘div>span‘)  直接后代 

  $(‘div+span‘).css(‘color‘,‘pink‘);
 $(‘div‘).next(‘span‘);                               上两个是选取div元素的下一个<span>同辈元素

$(‘div~span‘).css(‘color‘,‘pink‘);       选取div元素的元素后面的所有<span>同辈元素   

$(#one).siblings("div")  获取id为one的元素的所有<div>同辈元素（不管前后）

 $(#one).prev("div")  获取id为one的元素的前面紧邻的同辈<div>元素

4.并且过滤选择器

1).:first  :last
// $(‘li:first‘).css(‘color‘,‘pink‘);
// $(‘li:last‘).css(‘color‘,‘pink‘);

2).$(‘li:eq(1)‘) 下标索引  
// $(‘li:eq(1)‘).css(‘color‘,‘pink‘);

3.：gt(索引号) 大于某个范围    :lt(索引号) 小于某个范围
// $(‘li:gt(4)‘).css(‘color‘,‘pink‘);
// $(‘li:lt(5)‘).css(‘color‘,‘pink‘);

4):even 索引为偶数的所有元素
//:odd 索引为奇数的所有元素
// $(‘li:even‘).css(‘color‘,‘pink‘);
// $(‘li:odd‘).css(‘color‘,‘pink‘);

5).：not 反选li当中除了class为test当中的所有元素
 // $(‘li:not(#zhu)‘).css(‘color‘,‘pink‘);

6)获取所有 h1-h6
 // $(‘:header‘).css(‘color‘,‘pink‘);

7)多个并且关系的选择器，没有前后顺序，但是要避免歧义
 // $(‘.hli‘)

5.内容过滤选择器

1).:contains(bei)   获得节点内部必须包含指定的内容。不考虑层级关系
// $(‘div:contains(bei)‘).css(‘color‘,‘pink‘);

2).空节点选择器：获得空元素（内部没有任何元素/文本）的节点对象
// $(‘div:empty‘).css(‘background‘,‘green‘);

3).has选择器：节点内部必须包含指定的选择器元素
// $(‘div:has(span)‘).css(‘background‘,‘green‘);

4). parent选择器： 获取作为父节点存在的节点
$(‘div:parent‘).css(‘background‘,‘green‘);

6.表单域选中选择器

1.:checked 获得被选中的复选框
// console.log($(‘.ch:checked‘));

2.:checked 获得被选中的单选框
// console.log($(‘.sex:checked‘));

3.select 获得被选中的下拉列表项目
console.log($(‘option:selected‘));   

jquery选择器

标签：div   element   one   class   bsp   not   对象   round   列表项   

原文地址：http://www.cnblogs.com/ikongXY/p/6012598.html