$()下的常用方法
has() 包含 not() 与filter相反 filter() 过滤 next() 下一个兄弟节点 prev() 上一个兄弟节点 fild() 寻找子级节点 eq() 一组元素中的第几个 index() 一组元素中的索引 attr() 设置元素 class属性或样式 //filter:过滤 //not:过滤的反义词 //--针对本身元素 $('div').filter('.box'); //选中带有class属性为box的div标签 $('div').not('.box'); //选中不包含[class="box"]属性的标签 html: <div></div> <div class="box"></div> //has:包含 //--针对子元素 $('div').has('span'); //包含span元素的 div元素 【易错】$('div').has('.box'); //子元素拥有[class='box']属性的 div元素 html: <div class="box"></div> <div><span calss="box"><span></div> <div><span></span></div> //next() 下一个兄弟'节点'[其余元素] //prev() 上一个兄弟'节点'[其余元素] $('div').next(); //html页面所有div元素的下一个兄弟节点 $('div').prev(); //html页面所有div元素的上一个兄弟节点 html: <div></div> <span></span> <p></p> //find:找到 $('div').find('h2'); //找到div元素下的【所有】h2元素 html: <div> <h3>h3<h3> <h2>h2</h2> <h2>h2</h2> <h3>h3</h3> <h2>h2</h2> <h3>h3</h3> </div> <h2>h2</h2> //eq() 一组元素的第几个,从0开始计数 $('div').eq(0); //一组div元素 当中的【第一个】div元素 //index: 索引 $('#h').index() //2 当前元素在所有【兄弟节点】中的位置 <h3>h3</h3> <div> <h3>h3</h3> <h3>h3</h3> <h2 id="h">h2</h2> <h2>h2</h2> <h3>h2</h3> </div> //attr() 设置或返回被选中的属性值 $(selector).attr(attribute); //selector 元素 attribute属性 【特殊】$(selector).attr(attribute,value[or function(index,oldvalue)]); //value 属性值 or 返回属性值的函数,该函数接受并使用选择器的index值以及索引值 $(selector).attr({attribute:value,attribute:value ...}) //规定多个属性/值对 【易忘】$(selector).attr('class','active'); //设置元素的class属性
制作一个选项卡--不明白的JQuery方法百度即可
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1 div{ width:200px;height:200px;border: 1px solid red; display:none; } .active{background:red;} </style> </head> <body> <script src="js/jquery-2.1.0.js"></script> <div id="div1"> <input class="active" type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <div>1111</div> <div>2222</div> <div>3333</div> </div> <script> $(function(){ $('#div1').find('input').click(function(){ $('#div1').find('input').attr('class',''); $('#div1').find('div').css('display','none') $(this).attr('class','active'); $('#div1').find('div').eq( $(this).index() ).css('display','block'); }); }) </script> </body> </html>