JQuery学习笔记（一）

来源：互联网发布：好看围巾知乎编辑：程序博客网时间：2024/04/28 06:27

$("#myDiv")：选择文档里id为"myDiv"的指定元素对象。

$(".myCss"):选择文档里样式名为"myCss"的指定元素对象。

$("#myDiv p"):在给定的祖先元素下匹配所有的后代元素。

$("#myDiv>p")：在给定的父元素下匹配所有的子元素。

$("*"):选取所有元素。

$("div+p")：匹配所有紧接在 div 元素后的第一个同辈p 元素。也可以用$("div").next("p")。

$("div~p")：匹配 Div 元素之后的所有同辈p 元素。也可以用$("div").nextAll("p")。

+与~的异同：+为同辈并且紧跟, ~为同辈不需要一定紧跟;+为同辈并且第一个, ~为同辈多个。

siblings()方法与前后位置无关，只要同辈节点就能匹配。

简单折叠导航栏效果

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <mce:script type="text/javascript" src="jquery-1.3.2.min-vsdoc.js" mce_src="jquery-1.3.2.min-vsdoc.js"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> #menu {width:300px;} .has_children{background:#555;color:#fff;cursor:pointer;} .highlight{color:#fff; background:green;} div{padding:0;margin:10px 0;} div a{background:#888;display:none;float:left;width:300px;} </style> </head><body> <div id="menu"> <div class="has_children"> <span>第一章</span> <a>目录1</a> <a>目录2</a> <a>目录3</a> </div> <div class="has_children"> <span>第二章</span> <a>目录1</a> <a>目录2</a> <a>目录3</a> </div> </div> <mce:script type="text/javascript"></mce:script></body></html>

JQuery与其它库的冲突

<mce:script type="text/javascript"></mce:script>