jquery常用的选择器整理

jquery:基本的选择器：$('#id').css('color','blue');//根据id属性为id，设置css样式颜色设置成蓝色$('h2').css('background-color','pink');$('input').css('width','500px');$('.apple').css('background-color','lightgreen');//class属性值查找$('*').css('background-color','gray');//通配符$('h2,#usertel,#userqq').css('color','lightblue');//联合选择器层次选择器：$('div span');//在div内部获得span节点，不考虑层次,只获得div内第一个span节点，，注意不考虑层次$('div > span')//在div内部获得子元素span节点$('div+span')//在div后边获得紧紧挨着的第一个兄弟关系的span节点，获得的是span节点$('div~span')//在div后边后边获得全部兄弟关系的span节点并且选择器：$('li').css('color','red');$('li:first');//:first第一个 :last 最后一个$('li:eq(3)').css('color','red')//eq(下标索引号码) 获得节点的下标索引值与给定索引值相等gt(索引号) great than 节点索引值，大于某个范围lt(索引值) less than 节点索引值，小于某个范围$('li:gt(5)').css('background-color','pink');$('li:lt(5)').css('background-color','orange');:even 匹配到下标索引值为偶数的节点:odd 匹配到下标索引值为奇数的节点$('li:odd').css('background-color','lightblue');$('li:even').css('background-color','lightgreen');:not(selector选择器) 去除某个节点$('li:not(#yun)').css('color','blue');$(':header').css('background-color','yello');//:header 是一个选择器可以单独使用，选择所有的H标签并且选择器的注意：1、并且选择器可以单独使用$(':header.pear').css('color','red');//找出H标签，并且class属性为pear的标签2、$('li:gt(1):lt(3)') 各种选择器都可以构造“并且”关系3、并且关系的选择器可以使用多个，每个选择器使用前，已经获得节点的下标要“归位”（归零），这点是什么意思？20150816-jQuery-07-并且选择器(复杂用法)4、多个并且关系的选择器，没有前后顺序要求，但是要避免产生歧义$('li.pear').css('background-color','orange');内容过滤选择器：1、 :contains(内容)包含内容选择器，获得的节点内部必须包含指定的内容$('div:contains(beijing)')<div>I like <span>beijing</span></div>//<span>标签不构成影响<div>xiaoming like shanghai</div>2、:empty获得空元素（内部没有任何元素/文本（空））节点对象$('div:empty')<div>I like <span>beijing</span></div><div> </div><div>hgello</div><div><img/></div><div></div>//选中的是这个3、:has(选择器)节点内部必须包含指定选择器对应的元素$('div:has(#apple)');<div><p></p></div><div><span id='apple'>apple</span></div>//选中的是这个4、 :parent寻找的节点必须作为父元素节点存在$('div:parent')<div> </div> //选中这个<div><input type="text"></div> //选中这个<div>sun</div>//选中这个小东西：console.log($('div:parent'));表单域选中选择器：复选框、单选框、下拉框选中//获得被选中的复选框： :checkedconsole.log($('.hby:checked'));//获得被选中的单选框 :checkedconsole.log($('.sx:checked'));//获得被选中的下拉列表 :selectedconsole.log($('option:selected'));属性操作：获得属性值、修改属性值、删除属性值$().attr(属性名称); //获得属性信息值 console.log($('input:first')).attr('type');$().attr(属性名称，值); //设置属性的信息 $('input:first').attr('class','roange'); jquery是不让修改type属性的$().remoreAttr(属性名称); //删除属性，除了type属性不能删除，其他属性都可以删除 $('input:first').removeAttr('id');$().attr(json对象); //同时为多个属性设置信息值，json对象的键值对就是名称和值$().attr(属性名称，fn);//通过fn函数执行的return返回值对属性进行复制//document.getElement('apple').type='checkbox';//这是js底层代码，对有的浏览器可以修改function f4(){var jn={class:'pear',id:'usermail',name:'usermail'};$('input:first').attr(jn);//批量修改属性}function f5(){//通过函数执行后return的返回值对属性进行修改复制操作$('input:first').attr('value',function(){return 12+30;//代码紧凑，可读性不好});}快捷操作：$().addclass();$().removeclass();//删除class属性的某一个值，要区别$().removeAttr$().toggleClass(class属性值);//开关效果，有就删除，没有就添加<style type='text/css'>.apple{width:300px;height:200px;background-color:pink;} </style>function f1(){//attr()对同一个属性进行多次设置修改，后者要覆盖前者$('div').attr('class','apple');$('div').attr('class','pear');$('div').attr('class','banana');//addClass()给class属性“追加”信息值//以下三个class共同起作用，同时存在$('div').addClass('class','apple');$('div').addClass('class','pear');$('div').addClass('class','banana');$('div').attr('class','apple pear banana');//是欧克的}function f2(){$('div').removeClass('pear');//删除class属性值为pear$('div').removeAttr('class');//删除整个class}function f3(){$('div').toggleClass('apple');}标签包含内容操作：$('div').html();//获取<div> <span></span> </div>中间的内容，标签<span>也会显示$('div').html('百度');//设置<div><div/>中间的内容，字符串和html标签都可以$('div').html('请访问<a href=''>百度<a/>');$('div').text();//过滤html标签，获得字符串内容$('div').text('<p>hell</p>o');//--><p>hell</p>o最好设置普通字符串内容，如果有html标签，则标签的"<"、">"会变成符号实体，<-----&lt >-----&gt 空格-----&nbsp;css样式操作：样式分类：行内样式、内部样式、外部样式行内样式：写在html标签内的样式内部样式：写在<script type="text/css"></script>内的样式外部样式：使用<link>引入的样式$('div').css("color");//获取样式。