JQuery选择器和方法2
2013-07-02 21:08
204 查看
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function () {
//简介:"."的时候是针对上一步的返回值的节点集合的操作。链式编程就是对象一棒棒向下传,能不能正确传下来要看返回值
//===============================1=================================================
//之后紧邻的第一个兄弟节点(紧挨着的)
$("#d4").next().css("background-color", "pink");
//这个参数意义不大 因为紧挨着的是啥就是啥 你没有选择
$("#d4").next("div").css("background-color", "pink");
//找之后的所有兄弟节点 不包含自己
$("#d4").nextAll().css("background-color", "pink");
//找之后的所有兄弟节点中的div
$("#d4").nextAll("div").css("background-color", "pink");
//找除自己之外的兄弟姐妹节点
$("#d4").siblings().css("background-color", "pink");
//可选参数
$("#d4").siblings("p").css("background-color", "pink");
//end返回上一次Jquery对象被破坏之前的状态 类似撤销
$("#d4").nextAll().css("background-color", "yellow").end().css("background-color", "yellow");
//andSelf 是Jquery对象破坏之前
$("#d4").nextAll().css("background-color", "pink").andSelf().css("background-color", "yellow");
//d4->d4后面的->d4 遇到end撤销 所以结果是d4后面的
$("#d4").nextAll().andSelf().end().css("background-color", "yellow");
//d4后面的加上d4 果然是加上自己
$("#d4").nextAll().andSelf().css("background-color", "yellow");
//======================================2光棒=======================================
//光棒效果
$("#menu li").click(function () {
$(this).css("background-color", "red").siblings().css("background-color", "white");
});
//光棒效果的第二种写法(效率高于第一种写法不用隐士迭代)
$("#menu li").mousemove(function () {
$(this).css("background-color", "red");
}).mouseout(function () {
$(this).css("background-color", "white");
});
//==========================================3评分============================================
$("#pf li").mouseover(function () {
$(this).prevAll().andSelf().text("★").end().end().nextAll().text("☆");
});
});
</script>
</head>
<body>
<%--1--%>
<div>11111111111111111111111111111</div>
<div>2222222222222222222222222222</div>
<div>3333333333333333333333333333</div>
<div id="d4">4444444444444444444444444444</div>
<p>ppppppppppppppppppppppppppppppppppppp</p>
<div>5555555555555555555555555555555555555</div>
<div>66666666666666666666666666666666666666</div>
<%--2--%>
<ul id="menu">
<li>首页</li>
<li>博客</li>
<li>相册</li>
<li>其他</li>
</ul>
<%--3 --%>
<ul id="pf">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function () {
//简介:"."的时候是针对上一步的返回值的节点集合的操作。链式编程就是对象一棒棒向下传,能不能正确传下来要看返回值
//===============================1=================================================
//之后紧邻的第一个兄弟节点(紧挨着的)
$("#d4").next().css("background-color", "pink");
//这个参数意义不大 因为紧挨着的是啥就是啥 你没有选择
$("#d4").next("div").css("background-color", "pink");
//找之后的所有兄弟节点 不包含自己
$("#d4").nextAll().css("background-color", "pink");
//找之后的所有兄弟节点中的div
$("#d4").nextAll("div").css("background-color", "pink");
//找除自己之外的兄弟姐妹节点
$("#d4").siblings().css("background-color", "pink");
//可选参数
$("#d4").siblings("p").css("background-color", "pink");
//end返回上一次Jquery对象被破坏之前的状态 类似撤销
$("#d4").nextAll().css("background-color", "yellow").end().css("background-color", "yellow");
//andSelf 是Jquery对象破坏之前
$("#d4").nextAll().css("background-color", "pink").andSelf().css("background-color", "yellow");
//d4->d4后面的->d4 遇到end撤销 所以结果是d4后面的
$("#d4").nextAll().andSelf().end().css("background-color", "yellow");
//d4后面的加上d4 果然是加上自己
$("#d4").nextAll().andSelf().css("background-color", "yellow");
//======================================2光棒=======================================
//光棒效果
$("#menu li").click(function () {
$(this).css("background-color", "red").siblings().css("background-color", "white");
});
//光棒效果的第二种写法(效率高于第一种写法不用隐士迭代)
$("#menu li").mousemove(function () {
$(this).css("background-color", "red");
}).mouseout(function () {
$(this).css("background-color", "white");
});
//==========================================3评分============================================
$("#pf li").mouseover(function () {
$(this).prevAll().andSelf().text("★").end().end().nextAll().text("☆");
});
});
</script>
</head>
<body>
<%--1--%>
<div>11111111111111111111111111111</div>
<div>2222222222222222222222222222</div>
<div>3333333333333333333333333333</div>
<div id="d4">4444444444444444444444444444</div>
<p>ppppppppppppppppppppppppppppppppppppp</p>
<div>5555555555555555555555555555555555555</div>
<div>66666666666666666666666666666666666666</div>
<%--2--%>
<ul id="menu">
<li>首页</li>
<li>博客</li>
<li>相册</li>
<li>其他</li>
</ul>
<%--3 --%>
<ul id="pf">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
相关文章推荐
- jQuery基础学习8——层次选择器children()方法
- jQuery选择器总结 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法
- “jquery中each方法和选择器”的学习笔记
- jquery的children方法和css3选择器配合使用
- Jquery选择器和css选择器的3中表示方法
- jquery常用选择器和常用方法
- jQuery选择器,操作元素,工具方法,事件操作
- 【jQuery】选择器与一些常用方法应用详解
- JQuery的使用方法汇总(2)——JQuery选择器
- jquery选择器排除某个DOM元素的方法(实例演示)
- JQuery的常用选择器、过滤器、方法祥细介绍
- 【jQuery】方法和选择器的双重使用详解
- jQuery选择器源码解读(三):tokenize方法
- 解决自定义$(id)的方法与jquery选择器冲突的问题
- jQuery选择器和选取方法
- JQuery中的id选择器含有特殊字符时,不能选中dom元素的解决方法
- jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
- jQuery选择器代码详解(一)——Sizzle方法
- jQuery选择器和选取方法
- jquery中each方法示例和常用选择器