大佬教程收集整理的这篇文章主要介绍了jQuery操作和选择器，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
事件三要素：事件源、事件类型、事件处理程序@H_403_13@
语法：jQuery对象.事件名不加on(事件处理程序);@H_403_13@
jQuery可以给组注册事件。但是在DOM中不能给组注册事件。@H_403_13@
1 <body> 2 <button>按钮</button> 3 <ul> 4 <li>我是列表项1</li> 5 <li>我是列表项2</li> 6 <li>我是列表项3</li> 7 <li>我是列表项4</li> 8 <li>我是列表项5</li> 9 </ul> 10 <script src="lib/jquery-1.12.4.js"></script> 11 <script> 12 $(‘li‘).click( function() { 13 //在事件处理程序中，this是DOM对象 14 alert( $(this).text() ); //text内不传参数表示获取内容 15 }); 16 </script> 17 </body>@H_618_209@
这里存在隐式迭代现象：jQuery内部自动循环，为每一个元素注册事件。@H_403_13@
@H_403_13@ @H_262_222@二、jQuery操作样式
语法：jQuery对象.css(name,value);@H_403_13@
1 <body> 2 <div></div> 3 <script src="lib/jquery-1.12.4.js"></script> 4 <script> 5 //分次设置样式 6 $(‘div‘).css(‘width‘,500); //值可以直接写数字不用加px单位，也可以写成字符串‘500px’ 7 $(‘div‘).css(‘height‘,‘500px‘); 8 $(‘div‘).css(‘BACkground‘,‘red‘); 9 10 //一次设置多个样式 11 $(‘div‘).css({ 12 width: 500,13 height: 500,14 BACkground: ‘red‘ 15 }) 16 </script> 17 </body>@H_618_209@
@H_403_13@
语法：jQuery对象.css(Name);@H_403_13@
1 <body> 2 <div></div> 3 <script src="lib/jquery-1.12.4.js"></script> 4 <script> 5 var w = $(‘div‘).css(‘width‘); 6 console.log(w); //字符串 500px。 7 console.log(parseInt(w)); //转成数字 500。 8 </script> 9 </body>@H_618_209@
@H_403_13@
1 <script> 2 //索引为奇数的tr设置为灰色。对于用户是偶数行 3 $(‘tbody tr:odd‘).css(‘BACkground‘,‘#ccc‘); 4 //索引为偶数的tr设置为蓝色 5 $(‘tbody tr:even‘).css(‘BACkground‘,‘skyblue‘); 6 //筛选第三个tr设置字体颜色为红色 7 $(‘tbody tr:eq(2)‘).css(‘color‘,‘red‘); 8 </script>@H_618_209@
@H_403_13@
只有jQuery才能 . 出这些方法，DOM不能。@H_403_13@
@H_403_13@
1 <body> 2 <ul> 3 <li>列表项1</li> 4 <li>列表项2</li> 5 <li>列表项3</li> 6 </ul> 7 <script src="lib/jquery-1.12.4.js"></script> 8 <script> 9 console.log( $(‘ul>li‘) ); 10 console.log( $(‘ul‘).children() ); //获取ul父子关系下的子元素li 11 </script> 12 </body>@H_618_209@
@H_403_13@
1 <script> 2 //获得list类名下的所有li，包括子元素和孙元素 3 console.log( $(‘.list‘).find(‘li‘) ); 4 </script>@H_618_209@
@H_403_13@
1 <script src="lib/jquery-1.12.4.js"></script> 2 <script> 3 var $lis = $(‘#menu‘).children(); 4 $lis.mouseenter(function() { 5 //给当前的li 内部的ul 更改样式display 6 $(this).find(‘ul‘).css(‘display‘,‘block‘); 7 }); 8 $lis.mouSELEave(function() { 9 $(this).find(‘ul‘).css(‘display‘,‘none‘); //find方法也可以换成children 10 }); 11 </script>@H_618_209@
@H_403_13@ @H_262_1110@4）其他选择器筛选方法@H_403_13@
1 <script> 2 $(‘span‘).click(function() { 3 //让当前点击的span 的下一个兄弟元素 的div 变为显示 4 $(this).next().css(‘display‘,‘block‘); 5 //当前点击的span的 父元素的 li的兄弟们 中的div 变为隐藏 6 $(this).parent().siblings().find(‘div‘).css(‘display‘,‘none‘); 7 }); 8 </script>@H_618_209@
@H_403_13@
1 <body> 2 <ul> 3 <li>列表项1</li> 4 <li>列表项2</li> 5 <li>列表项3</li> 6 </ul> 7 <script src="lib/jquery-1.12.4.js"></script> 8 <script> 9 //选择器：eq(indeX) 10 $(‘li:eq(1)‘).css(‘color‘,‘red‘); 11 //方法： jQuery对象.eq(indeX) 12 $(‘ul li‘).eq(1).css(‘color‘,‘red‘); 13 </script> 14 </body>@H_618_209@
当索引保存在变量中时，推荐用方法，不要用选择器@H_403_13@
1 var index = 1; 2 $(‘li:eq(‘ + index + ‘)‘).css(‘color‘,‘red‘); 3 $(‘ul li‘).eq(indeX).css(‘color‘,‘red‘);@H_618_209@
@H_403_13@
jQuery对象.index(); 获取元素在同级元素中的索引@H_403_13@
1 <body> 2 <ul> 3 <li>列表项1</li> 4 <li>列表项2</li> 5 <li>列表项3</li> 6 <li>列表项4</li> 7 <li>列表项5</li> 8 </ul> 9 <script src="lib/jquery-1.12.4.js"></script> 10 <script> 11 $(‘li‘),click(function() { 12 alert( $(this).index ); 13 }); 14 </script> 15 </body>@H_618_209@
以上是大佬教程为你收集整理的jQuery操作和选择器全部内容，希望文章能够帮你解决jQuery操作和选择器所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
