、 All Selector (“*”):匹配所有元素。如:
$(“*”).css(“border”,”3px solid red”);将所有<body>内的任何元素都进行CSS化。
$("#test").find("*").css("border","3px solid red"). //将id为test内的所有元素CSS化
2、:animated Selector,匹配动画的元素,如:<script>
$("#run").click(function(){ $("div:animated").toggleClass("colored");//为动画的div转换css样式 }); function animateIt() { $("#mover").slideToggle("slow"); //为id为mover的div添加动画效果 } animateIt(); </script>
3、jQuery('[attribute|="value"]'):匹配以value开头的属性值或者等于value的属性值,如:<input name="man-news" /> <input name="milkman" /> <input name="letterman2" /> <input name="newmilk" /> <input name="milk man" />
则$('input[name=|"man"]') 会自动匹配第一个input框
4、jQuery('[attribute*="value"]'):匹配属性值中含有value的元素,如3所示例子中
$('input[name*="man"]')自动匹配第1、2、3、5个Input框
5、jQuery('[attribute~="value"]'):匹配独立的一个属性值value,value以一个独立的单词存在,前后用空格与其他字符分开,如3所示例中
$('input[name~="man"]')自动匹配第5个input框。
6、jQuery([attribute$="value"]):匹配以value结尾的属性值元素。 如3所示例中
$('input[name="man"]'),自动匹配第2、5个input元素
7、jQuery([attribute^="value"]):匹配以value开始的属性值元素。 如3所示例中
$('input[name^="man"]'),自动匹配第1个input元素
8、jQuery([attribute="value"]):匹配属性值等于value的元素。 如3所示例中
$('input[name="man"]'),没有匹配的。
9、jQuery([attribute!="value"]):匹配属性值不等于value的或者元素中没有该属性,如3所示例中
$('input[name!="newmilk"]'):匹配第1、2、3、5个input元素
10、:button selector:找出所有button元素或者是type=button的元素,如$(":button")
11、:checkbox selector :找出所有type=checkbox的元素,如:
$("form input:checkbox"),$(":checkbox") 等价于$("*:checkbox")
12、child selector("parent > child"):指定父元素下的子元素,只是用于一级关系。如:
<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> <!-- 找出class=topanav的ul下的子元素li,并将其样式化 --> <script>$("ul.topnav > li").css("border", "3px doublered");</script>
13、class selecotr (".class"):class为该值的元素,如上述例子中的$("ul.topnav")
14、:contains(text) selector ,jQuery(':contains(text)'):文本包含text的元素,如:
<div>hahah</div> <div>ccc</div> <script>$("div:contains('ccc')").text("dd")</script> //找出div文本中含有ccc的字符,并将其文本变为dds
文章内容来自jquery官网http://api.jquery.com/category/selectors/
分享到:
相关推荐
jQuery的核心库已经包含了许多强大的选择器,如ID选择器 (#id)、类选择器 (.class) 和元素选择器 (tagname),但Selector.js插件进一步增强了这些功能,使开发者能够更高效地选取DOM元素,实现更加复杂的页面交互。...
微信端实现选项滚动,模拟苹果下拉滚动的效果。参考地址
网络数据提取器 使用Jquery Selector,XPath或JsonPath从常见的Web格式(例如HTML,XML和JSON)提取和解析结构化数据。 实施: jQuery选择器和 XPath- JsonPath- 用法要使用Maven添加对Web-Data-Extractor的依赖关系...
jquery selector: 以 content 指定的 jquery selector 筛选出第一个 jquery 对象的 HTML 文本. c. url: 以 iframe 加载 content 页面内容. 调用例子: $.modalbox.show({ modal: true, // 模态 contentType: ...
jquery.selector-px.js 在微信端实现苹果的下拉框的选取
Selector是一个微型JavaScript库,设计目的是为了替代广泛使用的jQuery库。jQuery以其强大的DOM操作、事件处理、动画效果和Ajax功能在Web开发中占据了重要的位置。然而,随着浏览器原生API的不断改进,许多jQuery的...
网页数据抓取和格式化软件DataScraper都作为Firefox的扩展(Firefox extensions)发行的,但两者对软件环境要求是不一样的,一个最大的区别是DataScraper V4.10.0(普通版)或者V4.10.0以前的版本能够跨平台部署,同...
在jQuery对象中有一个名为selector的属性,这个属性是用于返回创建当前jQuery对象时所用的CSS选择器字符串。 selector属性通常用于调试或在需要获取对应元素的CSS选择器时使用。在实际开发中,尤其是在大型项目中,...
用法 $('body').bind('click.monitoring',function(e){//Get the element's jQuery selector//It'll return something like this: #example-5>h4:eq(0)var sel = $.getPath(e.target); //is the same as $(e.target)...
6. **链式操作**:jQuery的所有方法都会返回jQuery对象,这使得我们可以连续调用多个方法,如`$(selector).css("color", "red").fadeIn(500)`。 **学习与应用** - 开发时,可利用未压缩的`jquery-1.12.4.js`进行...
jQuery学习笔记: jQuery学习 1、基本语法: $(selector).action() $:定义jQuery selector:选择符,查询和查找HTML元素 action():对元素执行的操作 实例: $(this).hide()——隐藏当前元素 $(“p”),hide()——-隐藏...
jquery.selector-cache 通过缓存选择器来加速jQuery代码安装使用凉亭: bower install jquery.selector-cache用法在jQuery之后添加jquery.selector-cache.js即可。浏览器支持该优化将在起作用。 在任何其他浏览器中...
jquery.remainingH 一个 jQuery 插件,用于动态计算容器的剩余高度并将其分配给最后一个元素 #####用法: ...//jQuery selector to pick the elements which one height to be calculated base
2. 事件处理:jQuery统一了事件处理的方式,如 `$(selector).click(function(){...})` 用于绑定点击事件,`$(selector).on('mouseover', function(){...})` 用于绑定鼠标悬停事件。 3. 动画效果:jQuery的动画功能...
《jQuery基础自学笔记》 jQuery 是一款非常流行的 JavaScript 库,由 John Resig 在2006年创建,它的出现极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。jQuery 的设计理念是“Write Less, Do ...
1. DOM操作:jQuery提供了一系列简便的方法,如`$(selector).html()`, `$(selector).append()`, `$(selector).remove()`等,使得DOM元素的选择、添加和删除变得简单易行。 2. 事件处理:`.on()`, `.off()`, `.click...
配置除了标准的 Mono 模块配置选项('html'、'css'、'scripts'),这个模块的额外配置选项是: { " container " : " «jQuery selector» " , " tabs " : " «jQuery selector» " , " options " : { " classes " : ...
2. **DOM操作**: jQuery提供了简便的方法来操作DOM,如`$(selector).append()`用于在选定元素后面添加内容,`$(selector).remove()`删除匹配的元素,`$(selector).clone()`复制元素。 3. **事件处理**: 使用`.on()`...
3. **事件处理**:jQuery简化了事件绑定和解绑,`$(selector).on('click', function() {...})`用于监听点击事件,`$(selector).off('click')`则移除该事件。 4. **动画效果**:`fadeIn()`, `slideUp()`, `animate()...