> 美食
jquey怎么获取(jquey中获取元素的三种方法)
导语：jQuery-通过jquery的方法获取元素 279
概述获取页面元素不仅可以通过jQuery的选择器/过滤器得到,在jQuery内部还有几个不错的方法用于获取指定的元素,通过一个小案例运用这些方法
获取方法1 parent()/parents()获取当前元素的父元素/获取当前元素的父辈,爷辈..直至html节点
$(function () { console.log($(&sp3&dv2 //由内而外直至根节点的html console.log($(&sp3&dv2,39;39;).find(&39;));//sp1,sp3,sp2});3 children(selector)获取一个元素的直接子元素,与类似于 $(‘ul > li’)
$(function () { console.log($(&dv1&39;span&39;ul~li&39;39;).siblings());//dv2,sp2});5 prev()/prevAll()获取当前元素紧挨的一个兄弟元素/获取当前元素前面的所有兄弟元素
$(function () { console.log($(&sp2&39;39;).prevAll());//dv2,sp1 });6 next()/nextAll()获取当前元素的下一个兄弟元素/获取当前元素后面所有的兄弟元素
$(function () { console.log($(&sp1&39;39;).nextAll());//dv2,sp2});页面中有一个ul列表,实现要求:
1)当鼠标移动到某个li上的时候指针变为小手并且改变其背景颜色变红
$(function(){ $(&39;).mouseover(function () { //实现思路:自己变红,其余兄弟节点设置为默认色 //this表示当前触发事件的js对象 //$(this)包装为JQ对象,否则无法使用JQ的css方法 $(this).css({ &39;: &39;, &39;: &39; }) $(this).siblings().css(&39;, &39;); //还可以使用链式编程,之后说说其原理 //$(this).css({ &39;: &39;, &39;: &39; }).siblings().css(&39;, &39;); });});2)当点击某个li时自己变黄,让该li之前的所有li背景色变红,之后的所有li背景色变蓝。
$(function(){ $(&39;).click(function () { //自己变为黄色 $(this).css({ &39;: &39;, &39;: &39; }); //之前所有兄弟元素变为红色 $(this).prevAll().css({ &39;: &39; }); //之后所有兄弟元素变为蓝色 $(this).nextAll().css({ &39;: &39; }); });});单击后效果图
章节全部代码
<!DOCTYPE html><html xmlns=&34;><head> <title></title> <style type=&34;> ul li { list-style: none; width: 500px; height: 30px; line-height: 30px; } </style></head> <!-- 测试方法 --> <!--<div id=&34;> <span id=&34;>sp1</span> <div id=&34;> <span id=&34;>sp3</span> </div> <span id=&34;>sp2</span> </div>--> <!-- 测试案例 --> <ul> <li class=&34;>乒乓球</li> <li class=&34;>跳水</li> <li class=&34;>体操</li> <li class=&34;>女排</li> <li class=&34;>女足</li> </ul> <script src=&34;></script> <script type=&34;> $(function () { //console.log($(&sp3&dv2 //console.log($(&sp3&dv2,39;39;).find(&39;));//sp1,sp3,sp2 //console.log($(&dv1&39;span&39;39;).siblings());//dv2,sp2 //console.log($(&sp2&39;39;).prevAll());//dv2,sp1 //console.log($(&sp1&39;39;).nextAll());//dv2,sp2 $(&39;).mouseover(function () { $(this).css({ &39;: &39;, &39;: &39; }); $(this).siblings().css(&39;, &39;); }); $(&39;).click(function () { //自己变为黄色 $(this).css({ &39;: &39;, &39;: &39; }); //之前所有兄弟元素变为红色 $(this).prevAll().css({ &39;: &39; }); //之后所有兄弟元素变为蓝色 $(this).nextAll().css({ &39;: &39; }); }); }); </script>本文内容由小媛整理编辑！