Jquery基础知识

1、jQuery 选择器详解一、基础选择器主要包括标签选择器，id选择器，类选择器，通用选择器，组选择器$("#divId") 获取ID为divId的元素 $("a") 获取所有<a>元素$(".bgRed") 获取所用CSS类为bgRed的元素$("*")获取页面所有元素$("#divId, a, .bgRed")获取三个满足条件的选择器2、 层级选择器（主要包括子元素选择器、后代元素选择器、紧邻同辈元素选择器、相邻同辈元素选择器）1.子元素选择器> =选择儿子元素例如：<

2、ul class="topnav"> <li>Item 1</li> <li>Item 2 <ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul> </li> <li>Item 3</li> </ul> <script>$("ul.topnav > li").

3、css("border", "3px double red");</script> 此处用“>”号表示只选择儿子集的元素2后代选择器 直接用空格表示 不仅包括儿子还包括孙子.=选择后代元素例如： <form> <div>Form is surrounded by the green outline</div> <label>Child:</label> <input name="name" /> <fieldset> <labe

4、l>Grandchild:</label> <input name="newsletter" /> </fieldset> </form> Sibling to form: <input name="none" /> <script> $("form input").css("border", "2px dotted blue");</script>3 紧邻同辈元素选择器 所有符合条件的都可以会被选择 主要

5、是选择一个元素之后的平行元素 =选择指定元素的下一个平辈元素 <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> <script>$

6、("label + input").css("color", "blue").val("Labeled!")</script> 4 相邻同辈元素选择器 =选择指定元素的所有指定的平辈元素，可以隔几个不是指定的元素<div>div (doesn't match since before #prev)</div> <span id="prev">span#prev</span> <div>div sibling</

7、div> <div>div sibling <div id="small">div niece</div></div> <span>span sibling (not div)</span> <div>div sibling</div> <script>$("#prev div").css("border", "3px groove blue");</script> 三、基本过滤器主要包括名

8、称说明举例:first匹配找到的第一个元素查找表格的第一行:$("tr:first"):last匹配找到的最后一个元素查找表格的最后一行:$("tr:last"):not(selector)去除所有与给定选择器匹配的元素查找所有未选中的 input 元素: $("input:not(:checked)"):even匹配所有索引值为偶数的元素，从 0 开始计数查找表格的1、3、5.行:$("tr:even"):odd匹配所有索引值为奇数的元素，从 0 开始计数查找表格的2、4、6行:$("tr:odd&qu

9、ot;):eq(index)匹配一个给定索引值的元素注:index从 0 开始计数查找第二行:$("tr:eq(1)"):gt(index)匹配所有大于给定索引值的元素注:index从 0 开始计数查找第二第三行，即索引值是1和2，也就是比0大:$("tr:gt(0)"):lt(index)选择结果集中索引小于 N 的 elements注:index从 0 开始计数查找第一第二行，即索引值是0和1，也就是比2小:$("tr:lt(2)"):header选择所有h1,h2,h3一类的header标签.给页面内所有标题加上背景色: $(&

10、quot;:header").css("background", "#EEE");:animated匹配所有正在执行动画效果的元素只有对不在执行动画效果的元素执行一个动画特效: $("#run").click(function() $("div:not(:animated)").animate( left: "+=20" , 1000); ); 四、内容过滤器（主节点的子节点为文本节点）名称说明举例:contains(text)匹配包含给定文本的元素查找所有包含 "John&

11、quot; 的 div 元素:$("div:contains('John')"):empty匹配所有不包含子元素或者文本的空元素查找所有不包含子元素或者文本的空元素:$("td:empty"):has(selector)匹配含有选择器所匹配的元素的元素给所有包含 p 元素的 div 元素添加一个 text 类: $("div:has(p)").addClass("test");:parent匹配含有子元素或者文本的元素查找所有含有子元素或者文本的 td 元素:$("td:parent&qu

12、ot;)五、可见性过滤器 Visibility Filters:hidden:visible具体实例请点击看链接六、 属性过滤器 Attribute Filters名称说明举例attribute匹配包含给定属性的元素查找所有含有 id 属性的 div 元素:$("divid")attribute=value匹配给定的属性是某个特定值的元素查找所有 name 属性是 newsletter 的 input 元素:$("inputname='newsletter'").attr("checked", true);attrib

13、ute!=value匹配给定的属性是不包含某个特定值的元素查找所有 name 属性不是 newsletter 的 input 元素:$("inputname!='newsletter'").attr("checked", true);attribute=value匹配给定的属性是以某些值开始的元素$("inputname='news'")attribute$=value匹配给定的属性是以某些值结尾的元素查找所有 name 以 'letter' 结尾的 input 元素:$("i

14、nputname$='letter'")attribute*=value匹配给定的属性是以包含某些值的元素查找所有 name 包含 'man' 的 input 元素: $("inputname*='man'")attributeFilter1attributeFilter2attributeFilterN复合属性选择器，需要同时满足多个条件时使用。找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的:$("inputidname$='man'")8.子元素过滤器C

15、hild Filters名称说明举例:nth-child(index/even/odd/equation)匹配其父元素下的第N个子或奇偶元素':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用:nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n+1) :nth-child(3n+2)在每个 ul 查找第 2 个li:$("ul li:nth-child(2)"):first

16、-child匹配第一个子元素':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素在每个 ul 中查找第一个 li:$("ul li:first-child"):last-child匹配最后一个子元素':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素在每个 ul 中查找最后一个 li:$("ul li:last-child"):only-child如果某个元素是父元素中唯一的子元素，那将会被匹配如果父元素中含有其他元素，那将不会被匹配。在 ul 中查找是唯一子元素的 li:$("

17、;ul li:only-child")部分参考张子秋的博客表格中的请点击看官方的链接，以便于更好的理解jQuery 属性选择器jQuery 使用 XPath 表达式来选择带有给定属性的元素。$("href") 选取所有带有 href 属性的元素。$("href='#'") 选取所有带有 href 值等于 "#" 的元素。$("href!='#'") 选取所有带有 href 值不等于 "#" 的元素。$("href$='.jpg'

18、") 选取所有 href 值以 ".jpg" 结尾的元素。jQuery CSS 选择器jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。下面的例子把所有 p 元素的背景颜色更改为红色：实例$("p").css("background-color","red");返回CSS属性使用CSS（name）返回指定的第一个匹配元素的CSS属性值：示例 代码如下复制代码$(this).css("background-color");试一试 » 设置 CSS 属性和值

19、使用css(name,value)，为所有匹配元素设置的CSS属性：示例 代码如下复制代码$("p").css("background-color","yellow");果我们需要改变多个样式属性，我们可以先定义属性变量，然后直接赋值给css()方法。示例如下： 代码如下复制代码var divcss = background: '#EEE', width: '478px', margin: '10px 0 0', padding: '5px 10px', border:

20、'1px solid #CCC'$("#result").css(divcss);/这里我们先定义了一个CSS样式属性变量divcss，这类似于建立一个外部CSS文件。/然后通过jQuery提供的css()方法，把属性赋给ID为'#result'的DIV。另外jQuery提供的css()方法还可以用来查看某个元素的css属性值。例如，我们想查看链接的颜色，可以使用下面的代码： 代码如下复制代码$("#61dh a").css("color")/和第一个例子相似，但是这里我们只传递一个参数(样式属性)最后

21、要介绍的是如何设置鼠标划过后的链接样式(比如: 颜色)。我们无法使用选择器直接选择鼠标划过状态下的链接，也就是说$("a:hover")是不成立的。因此我们需要用到jQuery提供的事件类方法 - hover()。值得注意的是，hover()方法需要定义两个函数，一个是鼠标划过时；另一个是鼠标划过后。具体方法如下： 代码如下复制代码$("#61dh a").css('color','#123456'); $("#61dh a").hover(function() $(this).css('col

22、or','#999'); , function() $(this).css('color','#123456'););/hover()方法的两个函数使用用逗号分隔你或许注意到这种方法一点都不简洁(违背了jQuery的宗旨)，其实jQuery提供的hover()方法不是用来改变CSS样式的。在实际运用中，建议使用添加/移出CSS的方法来改变鼠标划过的链接样式。切换样式Jquery提供toggleclass()方法控制样式的切换 代码如下复制代码$(“p”).toggleclass(“another”);判断是否包含某样式，如果有 返回true 否则 返回 false 代码如下复制代码$(“p”).hasClass(“another”); 相当于$(“p”).is(“.another”);jquery如何删除一个css属性可以用c