【常用jQuery选择器总结 (二)】教程文章相关的互联网学习教程文章

jQuery中关于常用选择器的具体分析

本文为大家分享了jQuery常用选择器的具体代码,供大家参考,具体内容如下1、jQuery:(使用jQuery一定标明我们使用的版本号)  它是一个使用原生的JS来封装的常用的方法的类库(解决了浏览器的兼容问题)2、jQuery中提供的方法选择器通过传递对应规则的内容(ID、标签名、样式类名...),获取到页面中指定的元素/元素集合 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body>...

Jquery选择器全面详解【图】

1 概述我们已经使用了带有简单Css选择器的jQuery选取函数:$()。现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了。  一、jQuery选择器在CSS3选择器标淮草案定义的选择器语法中,jQuery支持相当完整的一套子集,同时还添加了一些非标准但很有用的伪类。注意:本节讲述的是 jQuery选择器。其中有不少选择器(但不是全部)可以在CSS样式表中使用。选择器语法有三层结构。你肯定已经见过选择器中最简单的形...

jQueryon()选择器函数

on()函数用于为指定元素的一个或多个事件绑定事件处理函数。此外,你还可以额外传递给事件处理函数一些所需的数据。从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind()、 delegate()、 live()等事件函数。即使是执行on()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数也对其有效。此外,该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时,jQuery会按照绑...

jQuery[selector1][selector2][selectorN]选择器的使用详解【图】

概述复合属性选择器,需要同时满足多个条件时使用。参数selector1Selector属性选择器selector2Selector另一个属性选择器,用以进一步缩小范围selectorNSelector任意多个属性选择器示例描述:找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的HTML 代码:<input id="man-news" name="man-news" /> <input name="milkman" /> <input id="letterman" name="new-letterman" /> <input name="newmilk" />jQuery 代码:$("input[id...

jQuery:first选择器,:first-child选择器以及first()的使用区别【图】

:first 获取第一个元素。:first-child 选择器选取属于其父元素的第一个子元素的所有元素。first() 返回被选元素的首个元素。测试代码如下:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <ul> <li>ul_1 item 1</li> <li>ul_1 item 2</li> <li>ul_1 item 3</li> <li>ul_1 item 4</li> <li>ul_1 item 5</li> </ul> <ul> <li>ul_2 item 1</li> <l...

jQuery中关于Selector选择器的使用总结

jQuery Selector选择器小结//jQuery 选择器 $ //$(expression,[context]) return jQuery //Unit One //expression 之 CSS 定义符 就是以CSS语法表示所要选择的元素 // $("*"); // 表示页面所有元素标签 // $("th, td") // 表示所有<th><td>元素标签 // $("a") // 表示所有<a>元素标签 // $("div#onlydiv"); // 表示CSS选择中id=onlyidv的元素 $("#ID")为全文档匹配 // $("#rating"); // 表示id=rating的元素 // $("#ordere...

jQuery:nth-child选择器的使用案例

概述匹配其父元素下的第N个子或奇偶元素:eq(index) 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!可以使用:<br>nth-child(even)<br>:nth-child(odd)<br>:nth-child(3n)<br>:nth-child(2)<br>:nth-child(3n+1)<br>:nth-child(3n+2)参数indexNumberV1.1.4要匹配元素的序号,从1开始示例描述:在每个 ul 查找第 2 个liHTML 代码:<ul> <li>John</li> <li>Karl</li> <li>Brandon</li...

JQuery中:nth-child(N)和:eq(N)选择器两者的区别【图】

1、nth-child(N):下标从1开始;eq(N):下标从0开始2、nth-child(N):选择多个元素;eq(N):选择一个元素3、nth-child(N):在一个文档树种中,选择各层排行第N的所有元素。例:nth-child(2):包括父辈的老二,兄弟的老二,子孙的老二,下图的绿色部分eq(N):在一个文档树种中,前序排列后,选择第N个元素及其所有子元素。例:在下面的HTML代码里,查看$("div:eq(3)").html()的结果。(编号就是前序排列的编号)<div>0 <div>1 <di...

jQuery选择器中的:first-child和:first以及:first-of-type的区别详解【图】

开头先说点题外话。因为刚开始毕业的第一份工作不是前端,是在国企的,快干到3个月的时候,实在是受不了那种安逸的生活节奏,果断辞职了(其实就是因为钱少),然后选定自己喜欢的方向,开始从页面仔做起。所以现在是做页面仔的快第三个月了,因为找了个小的创业公司实习,所以实际能全面从头到尾了解前端的知识比较少,一般是用到什么就去查什么,学什么,所以最近只能找个jQuery的API看看了。 好了,接下去是正题。 我在A...

jquery:nth-child选择器所出现的问题解决

我可以为每个第4个itemdiv样式。jQuery(“。item:nth-child “).addClass(”fourth-item“);并且工作正常,但是我隐藏一些项目,显示一些其他,这种风格,但只有可见的每4个项目的样式。所以我有一个函数,将删除这个样式并重新应用它,但我需要在重新应用的风格,它只是每隔4个可见项目,而不是每4个项目。我知道“:可见”选择器,但不能看到链接它与第n子选择器正确,任何想法?我试过各种各样的事情,无效...jQuery(“。...

jquery:first-child选择器在这种情况下为什么会无效呢?【图】

为什么多了那个h2标签,jQuery中的first-child就无法生效呢?见下图所示。谢谢了<html> <head> <script type="text/javascript" src="/jquery/jquery.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $(div p:first-child).css(backgroundColor, #555); }); </script> </head> <body> <html> <div><h2>hello</h2><p>A</p><p>B</p><p>C</p></div><div><p>D</p><p>E</p><p>F</p></div><div><p>G</p>...

jQuery选择器input和:input两者之间的区别

(1) input,标签选择器,仅仅选择input元素<input type="text">; (2) :input,伪类选择器,选择表单中的input ,select, textarea, button元素. 示例如下: html:<html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><script>$(function(){$(input).css(border,1px solid red);//只有input标签边框变为红色$(:input).foucs(function(){//input select textarea button获取焦点...

jquery中选择子元素的选择器即nth-child选择器【图】

jQuery 的nth-child 选择器用来选择其父标签的第n个child 标签。其索引是从1 开始的即n是从1开始,而非从0开始。例如:1 $(‘tr:nth-child(3)’) —选择tr父标签元素中的第三个tr孩子元素。2 $(‘tr:nth-child(3n)’)—选择tr父标签中的第3的倍数位置上的tr 孩子标签元素。3 $(‘tr:nth-child(even)’)—选择tr父标签中的所有偶数位置上的tr孩子元素。jquery 例子一个简单的例子用来阐述nth-child函数动态改变表格行的背景色。<htm...

jQuery选择器:last-child的使用详解

概述匹配最后一个子元素:last只匹配一个元素,而此选择符将为每个父元素匹配一个子元素示例描述:在每个 ul 中查找最后一个 liHTML 代码:<ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul>jQuery 代码:$("ul li:last-child")结果:[ <li>Brandon</li>, <li>Ralph</li> ]此选择器能够匹配父元素的最后一个子元素。注意:last只选取一个元素,而此选择符将匹配每...

jquery选择器:first-child和:last-child的用法实例总结【图】

:first-child 选择器被用来选择父标签的第一个子标签,此是:nth-child(1)的简便形式。例如:$(‘li:first-child’)—用来选择所有li的父标签的第一个li子标签。$(‘tr:first-child’)—类似。:last-child 选择器被用来选择它们父标签的中的最后一个匹配的子匹配。例如:$(‘li:last-child’)—选择所有li父标签中的最后一个li子标签。$(‘tr:last-child’)—类似。<html> <head> <title>jquery first child and last child example...