jQuery选择器及jquery案例详解(必看).pdfVIP

本文给大家介绍 jquery 选择器的相关知识，并通过案例给大家介绍 jquery 知识，本文 介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起学习吧 JQuery 选择器 解析：为了更好的或者是更快的从复杂的 DOM 树中找到我们需要的一类标签 1.层次选择器 lt;!-- 当点击 h2 元素时，为 #menu 下的 lt;spangt; 元素添加色为 #09F 的颜色背景 --gt; lt;!-- lt;script type=text/javascriptgt; $(function () { $(h2).click(function () { $(#menu span).css(background-color,#09F); }); }); lt;/scriptgt;--gt; 2.基本选择器 lt;!-- 为标签选择器添加样式 --gt; lt;script type=text/javascriptgt; $(function () { $(h2).click(function () { $(h3).css(background-color, #09F); }); }); lt;/scriptgt; 3.基本过滤选择器 lt;script type=text/javascriptgt; $(function () { $(h2).click(function () { //$(li:first).css(background-color, #09F);// 第一个 //$(li:last).css(background-color, #09F);// 最后一个 //$(li:not(.three)).css(background-color, #09F);//class 不为 three 的元素 // $(li:even).css(background-color, #09F);// 索引值为偶数的元素 // $(li:eq(1)).css(background-color, #09F);// 索引值为 1 的元素 //$(li:gt(1)).css(background-color, #09F);// 索引值大于 1 的元素 //$(li:lt(1)).css(background-color, #09F);// 索引值小于 1 的元素 //$(:header).css(background-color, #09F);// 所有标题的元素 $(:focus).css(background-color, #09F);// 获取焦点的元素 }); }); lt;/scriptgt; 4.可见性过滤选择器 lt;script src=js/jquery-1.8.3.jsgt;lt;/scriptgt; lt;script type=text/javascriptgt; $(function () { // $(p:hidden).show();// 显示文字 $(p:visible).hide();// 隐藏文字 }); lt;/scriptgt; lt;style type=text/cssgt; #txt_show { display:none;color:#00C; } #txt_hide { display:block;color:#F30; } lt;/stylegt; lt;/headgt; lt;bodygt; lt;p id=txt_hidegt; 点击按钮，我会被隐藏哦