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标签,则标签的"<"、">"会变成符号实体,<-----< >-----> 空格----- css样式操作:样式分类:行内样式、内部样式、外部样式行内样式:写在html标签内的样式内部样式:写在<script type="text/css"></script>内的样式外部样式:使用<link>引入的样式$('div').css("color");//获取样式。