获取页面元素不仅可以通过jQuery的选择器/过滤器得到,在jQuery内部还有几个不错的方法用于获取指定的元素,通过一个小案例运用这些方法
1 parent()/parents()获取当前元素的父元素/获取当前元素的父辈,爷辈..直至html节点
$(function () {
console.log($('#sp3').parent());//#dv2
//由内而外直至根节点的html
console.log($('#sp3').parents());//#dv2,#dv1,body,html
});
2 find(selector)获取一个元素的某种所有子元素,与类似于 $(‘ul li’)
注意:获取的元素在集合中的位置(下标),不再是Dom树中由外而内的先子后孙排序
$(function () {
console.log($('#dv1').find('span'));//sp1,sp3,sp2
});
3 children(selector)获取一个元素的直接子元素,与类似于 $(‘ul > li’)
$(function () {
console.log($('#dv1').children('span'));//sp1,sp2
});
4 siblings()获取当前元素的所有兄弟元素,与$('ul~li')有些不同
$(function () {
console.log($('#sp1').siblings());//dv2,sp2
});
5 prev()/prevAll()获取当前元素紧挨的一个兄弟元素/获取当前元素前面的所有兄弟元素
$(function () {
console.log($('#sp2').prev());//dv2
console.log($('#sp2').prevAll());//dv2,sp1
});
6 next()/nextAll()获取当前元素的下一个兄弟元素/获取当前元素后面所有的兄弟元素
$(function () {
console.log($('#sp1').next());//dv2
console.log($('#sp1').nextAll());//dv2,sp2
});
页面中有一个ul列表,实现要求:
1)当鼠标移动到某个li上的时候指针变为小手并且改变其背景颜色变红
$(function(){
$('ul li').mouseover(function () {
//实现思路:自己变红,其余兄弟节点设置为默认色
//this表示当前触发事件的js对象
//$(this)包装为JQ对象,否则无法使用JQ的css方法
$(this).css({ 'background-color': 'red', 'cursor': 'pointer' })
$(this).siblings().css('background-color', 'white');
//还可以使用链式编程,之后说说其原理
//$(this).css({ 'background-color': 'red', 'cursor': 'pointer' }).siblings().css('background-color', 'white');
});
});
2)当点击某个li时自己变黄,让该li之前的所有li背景色变红,之后的所有li背景色变蓝。
$(function(){
$('ul li').click(function () {
//自己变为黄色
$(this).css({ 'background-color': 'yellow', 'cursor': 'pointer' });
//之前所有兄弟元素变为红色
$(this).prevAll().css({ 'background-color': 'red' });
//之后所有兄弟元素变为蓝色
$(this).nextAll().css({ 'background-color': 'blue' });
});
});
章节全部代码
- 乒乓球
- 跳水
- 体操
- 女排
- 女足
更新时间:2024-09-05
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号