首页 / JQUERY / jQuerySelectors(选择器)的使用(四-五、内容篇&可见性篇)_jquery

jQuerySelectors(选择器)的使用(四-五、内容篇&可见性篇)_jquery

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuerySelectors(选择器)的使用(四-五、内容篇&可见性篇)_jquery，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4323字，纯文字阅读大概需要7分钟。

内容图文

jQuerySelectors(选择器)的使用(四-五、内容篇&可见性篇)_jquery

本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。
本篇讲解：:contains(text),:empty,:has(selector),:parent,:hidden,:visible的用法。
您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com
由于是第一次写技术性系列文章，难免会出错或代码BUG，欢迎指出，在此谢过！
您可以到jQuery官网来学习更多的有关jQuery知识。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>jQuery-Selectors-4</title> 
<script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js" type="text/javascript"></ script> 
<style type="text/css"> 
.div 
{ 
    width:95%; 
    margin-left:15px; 
    margin-top:15px; 
    margin-right:15px; 
    padding-left:5px; 
    padding-top:5px; 
    padding-bottom:5px; 
    background-color:#ccc; 
    border:#999 1px solid; 
    line-height:30px; 
    font-size:13px; 
    font-family:微软雅黑; 
} 
.blue{color:Blue;} 
.green{color:Green;} 
.button{border:green 1px solid;width:100px;} 
.xiaobiao{ font-weight:bold;} 
.red_test{background-color:red; color:White; width:300px; height:30px;} 
.li_test{border:#000 1px solid;} 
</style> 
</head> 
<body>

<div class="div"> 
<div style="width:100%; text-align:center; font-size:16px; font-weight:bold;">jQuery-Selectors(选择器)的使用(四--五、内容篇&可见性篇)</div> 
本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法，我将以实例方式进行讲述，以简单，全面为基础，不会涉及很深，我的学习方法：先入门，后进阶！
 
本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。
 
本篇讲解：:contains(text),:empty,:has(selector),:parent,:hidden,:visible的用法。
 
您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com 
 
由于是第一次写技术性系列文章，难免会出错或代码BUG，欢迎指出，在此谢过！
 
您可以到jQuery官网来学习更多的有关jQuery知识。
 
<span style="color:Red;"><strong>版权所有：code-cat 博客:http://www.cnblogs.com/bynet 转载请保留出处和版权信息！</strong></span> 
</div>

<div class="div"> 
<span style="color:Red;">由于内容篇与可见性篇内容较少，因此我将两篇文章合二为一，一起发布出来。</span> 
</div>

<div class="div"> 
<span class="xiaobiao">1. :contains(text)用法</span>
 
定义：匹配包含给定文本的元素
 
返回值：Array<Element>
 
参数：text (String) : 一个用以查找的字符串
 
实例：将ID为"div_a1"的DIV中含有'aaa'的DIV元素的背景色改为红色
 
<span style="border:blue 1px solid;">代码： $("#div_a1 :contains(aaa)").css("background-color","red");<span style="color:green;"> //点击按钮一将执行这句代码</span></span> 
<div id="div_a1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_a1"
 
<div id="div_a2" style="border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px; "> 
DIV ID="div_a2" aaa
 
</div> 
<div id="div_a3" style="border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px; "> 
DIV ID="div_a3" bbb
 
</div> 
<div id="div_a4" style="border:#333 1px solid; width:200px;margin-right:5px;padding-left:5px; "> 
DIV ID="div_a4" aaa
 
</div> 
<div id="div_a5" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;"> 
DIV ID="div_a5" aaa 
<input type="button" id="btn_1" value="按钮一" class="button" /> 
<script type="text/javascript"> 
$("#btn_1").click(function(){ 
$("#div_a1 :contains(aaa)").css("background-color","red"); 
}); 
</ script> 
</div> 
</div> 
</div>

<div class="div"> 
<span class="xiaobiao">2. :empty用法</span>
 
定义：匹配所有不包含子元素或者文本的空元素
 
返回值：Array<Element>
 
实例：将ID为"div_b1"的DIV中所有不包含子元素或者文本的空元素的背景色改为红色
 
<span style="border:blue 1px solid;">代码： $("#div_b1 :empty").css("background-color","red");<span style="color:green;"> //点击按钮二将执行这句代码</span></span> 
<div id="div_b1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_b1"
 
<div id="div_b2" style="border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px; "> 
DIV ID="div_b2"
 
</div> 
<div id="div_b3" style="border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px; "></div> 
<div id="div_b4" style="border:#333 1px solid; width:200px;margin-right:5px;padding-left:5px; "></div> 
<div id="div_b5" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;"> 
DIV ID="div_b5" 
<input type="checkbox" /> 
<input type="text" value="input" /> 
<input type="button" id="btn_2" value="按钮二" class="button" /> 
<script type="text/javascript"> 
$("#btn_2").click(function(){ 
$("#div_b1 :empty").css("background-color","red"); 
}); 
</ script> 
</div> 
</div> 
<span style="color:Red;"><strong>注意：input元素会被认会是空元素</strong></span> 
</div>

<div class="div"> 
<span class="xiaobiao">3. :has(selector)用法</span>
 
定义：匹配含有选择器所匹配的元素的元素
 
返回值：Array<Element>
 
参数：selector (Selector) : 一个用于筛选的选择器
 
实例：将ID为"div_c1"的DIV中所有包含span元素的元素的背景色改为红色
 
<span style="border:blue 1px solid;">代码： $("#div_c1 :has(span)").css("background-color","red");<span style="color:green;"> //点击按钮三将执行这句代码</span></span> 
<div id="div_c1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_c1"
 
<div id="div_c2" style="border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px; "> 
DIV ID="div_c2" 
<span style="background-color:Green;">span</span> 
</div> 
<div id="div_c3" style="border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px; "> 
DIV ID="div_c3" 
</div> 
<div id="div_c4" style="border:#333 1px solid; width:200px;margin-right:5px;padding-left:5px; "> 
DIV ID="div_c4" 
<span style="background-color:Green;">span</span> 
</div> 
<span style="border:#000 1px solid;"> 
span 
<span style="background-color:Green;">span</span> 
</span> 
<div id="div_c5" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;"> 
DIV ID="div_c5" 
<span style="background-color:Green;">span</span> 
<input type="button" id="btn_3" value="按钮三" class="button" /> 
<script type="text/javascript"> 
$("#btn_3").click(function(){ 
$("#div_c1 :has(span)").css("background-color","red"); 
}); 
</ script> 
</div> 
</div> 
</div>

<div class="div"> 
<span class="xiaobiao">4. :parent用法</span>
 
定义：匹配含有子元素或者文本的元素
 
返回值：Array<Element>
 
实例：将ID为"div_d1"的DIV中所有包含子元素或者文本的元素的背景色改为红色
 
<span style="border:blue 1px solid;">代码： $("#div_d1 :parent").css("background-color","red");<span style="color:green;"> //点击按钮四将执行这句代码</span></span> 
<div id="div_d1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_d1"
 
<div id="div_d2" style="border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px; "> 
DIV ID="div_d2"
 
</div> 
<div id="div_d3" style="border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px; "></div> 
<div id="div_d4" style="border:#333 1px solid; width:200px;margin-right:5px;padding-left:5px; "></div> 
<div id="div_d5" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;"> 
DIV ID="div_d5" 
<input type="button" id="btn_4" value="按钮四" class="button" /> 
<script type="text/javascript"> 
$("#btn_4").click(function(){ 
$("#div_d1 :parent").css("background-color","red"); 
}); 
</ script> 
</div> 
</div> 
</div>

<div class="div"> 
<div style="width:100%; text-align:center; font-size:16px; font-weight:bold;">jQuery-Selectors(选择器)的使用(五、可见性篇)</div> 
<span style="color:Red;"><strong>版权所有：code-cat 博客:http://www.cnblogs.com/bynet 转载请保留出处和版权信息！</strong></span> 
</div>

<div class="div"> 
<span class="xiaobiao">1. :hidden用法</span>
 
定义：匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到
 
返回值：Array<Element>
 
实例：将ID为"div_e1"的DIV中所有被隐藏的DIV显示出来
 
<span style="border:blue 1px solid;">代码： $("#div_e1 div:hidden").css("display","block");<span style="color:green;"> //点击按钮五将执行这句代码</span></span> 
<div id="div_e1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_e1"
 
<div id="div_e2" style="border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px; "> 
DIV ID="div_e2"
 
</div> 
<div id="div_e3" style="border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px; display:none; ">被隐藏的DIV</div> 
<div id="div_e4" style="border:#333 1px solid; width:200px;margin-right:5px;padding-left:5px;display:none; ">被隐藏的DIV</div> 
<div id="div_e5" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;"> 
DIV ID="div_e5" 
<input type="button" id="btn_5" value="按钮五" class="button" /> 
<script type="text/javascript"> 
$("#btn_5").click(function(){ 
$("#div_e1 div:hidden").css("display","block"); 
}); 
</ script> 
</div> 
</div> 
</div>

<div class="div"> 
<span class="xiaobiao">2. :visible用法</span>
 
定义：匹配所有的可见元素
 
返回值：Array<Element>
 
实例：将ID为"div_f1"的DIV中所有可见的DIV的背景色改为红色，并显示被隐藏的DIV
 
<span style="border:blue 1px solid;">代码： $("#div_f1 div:visible").css("background-color","red");$("#div_f1 div:hidden").css("display","block");<span style="color:green;"> //点击按钮六将执行这句代码</span></span> 
<div id="div_f1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 
DIV ID="div_f1"
 
<div id="div_f2" style="border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px; "> 
DIV ID="div_f2"
 
</div> 
<div id="div_f3" style="border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px; display:none; ">被隐藏的DIV</div> 
<div id="div_f4" style="border:#333 1px solid; width:200px;margin-right:5px;padding-left:5px;display:none; ">被隐藏的DIV</div> 
<div id="div_f5" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;"> 
DIV ID="div_f5" 
<input type="button" id="btn_6" value="按钮六" class="button" /> 
<script type="text/javascript"> 
$("#btn_6").click(function(){ 
$("#div_f1 div:visible").css("background-color","red"); 
$("#div_f1 div:hidden").css("display","block"); 
}); 
</ script> 
</div> 
</div> 
</div> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

运行后，需要刷新一下才可以看到效果。

内容总结

以上是互联网集市为您收集整理的jQuerySelectors(选择器)的使用(四-五、内容篇&可见性篇)_jquery全部内容，希望文章能够帮你解决jQuerySelectors(选择器)的使用(四-五、内容篇&可见性篇)_jquery所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/309607.html

来源：【匿名】

【上一篇】jqueryselect操作的日期联动实现代码_jquery 【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【jQuerySelectors(选择器)的使用(四-五、内容篇&可见性篇)_jquery】教程文章相关的互联网学习教程文章

HTML5中类jQuery选择器querySelector的使用【代码】【图】

HTML5中类jQuery选择器querySelector的使用简介HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。用法两个方法使用差不多的语法，都是接收一个字符串参数，这个参数需要是合法的CSS选择语法。element = document.querySelector(‘selectors‘); elementList = document.querySelectorAll(‘...

JQuery中$.each和$(selector).each()的区别详解【图】

PS：晚上在写页面时，发现了一个问题，$.each 和$(selector).each()有哪些区别？百度搜索关键词，首页显示出来一些前人的经验，总结一下，发上来。 1、$(selector).each()jQuery 遍历 - each() 方法主要用于DOM遍历，each() 方法规定为每个匹配元素规定运行的函数。语法：$(selector).each(function(index,element)) W3School上显示回调函数是必须的，index - 选择器的 index 位置，element - 当前的元素（也可使用 "this" 选择器）...

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中关于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中关于:has(selector)选择器的详解

概述匹配含有选择器所匹配的元素的元素参数selectorSelectorV1.1.4一个用于筛选的选择器示例描述:给所有包含 p 元素的 div 元素添加一个 text 类HTML 代码:<div><p>Hello</p></div> <div>Hello again!</div>jQuery 代码:$("div:has(p)").addClass("test");结果:[ <div class="test"><p>Hello</p></div> ]关于此选择器的定义可能有点拗口，通俗的讲就是如果一个元素含有selector(选择器)所匹配的元素，那么此元素将被匹配。例如:$("...

jQuery.not（selector）的用法详解

.not（selector）返回：jQuery说明：从匹配元素集中删除元素。版本增加：1.0.not（选择器）选择类型：选择器或元素或数组包含选择器表达式，DOM元素或与该集合匹配的元素数组的字符串。版本增加：1.4。（功能）功能类型：函数（整数索引，元素元素）=> 布尔值用作集合中每个元素的测试的函数。它接受两个参数，index它是jQuery集合中元素的索引element，它是DOM元素。在该函数内，this指的是当前的DOM元素。版本增加：1.4不选（选择...

对jQuery中Selector选择器知识点汇总

jQuery Selector选择器小结，需要的朋友可以参考下，都是一些常用的选择控制方式。//jQuery 选择器 $ //$(expression,[context]) return jQuery //Unit One //expression 之 CSS 定义符就是以CSS语法表示所要选择的元素 // $("*"); // 表示页面所有元素标签 // $("th, td") // 表示所有<th><td>元素标签 // $("a") // 表示所有<a>元素标签 // $("p#onlyp"); // 表示CSS选择中id=onlyidv的元素 $("#ID")为全文档匹配 // $("#rating...

总结jQuery中querySelector选择器的用法详解

这篇文章主要介绍了jQuery选择器querySelector的使用指南的相关资料,需要的朋友可以参考下简介HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。用法两个方法使用差不多的语法，都是接收一个字符串参数，这个参数需要是合法的CSS选择语法。代码如下:element = document.querySelector(selec...

jQuery中selector,context几种调用方式代码实例详解

首先我们给出下面的HTML代码：<p id="parent" class="parent"><p class="child">child1</p><p class="child">child2</p> </p> <p id="parent1" class="parent"><p class="child">child1</p><p class="child">child2</p> </p>调用方式1：第二个参数context是DOM元素var doms=$(".child",$("#parent")[0]); console.log(doms);这时候第二个参数是DOM对象，打印[p.child, p.child, prevObject: jQuery.fn.init[1], context: p#parent,...

JQuery中$.each的使用方法以及和$(selector).each()的区别

each()方法能使DOM循环结构简洁，不容易出错。each()函数封装了十分强大的遍历功能，使用也很方便，它可以遍历一维数组、多维数组、DOM, JSON 等等，在javaScript开发过程中使用$each可以大大的减轻我们的工作量。each()方法实例：var arr = [ "aaa", "bbb", "ccc" ]; $.each(arr, function(i,a){ alert(i); // i 是循环的序数 alert(a); // a 是值 }); var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]] $.each(arr1, function(i, i...

jqueryselector基础课程实例详解

Jquery的选择符是比较帅气的，借用了XPath2.0和CSS1-3中的语法，并且兼容了多个浏览器，让原本非常复杂的DOM，一下子变得简单起来了，手中最新的版本是1.2.2b，下面的所有例子，也是根据此版本提供的例子。测试HTML代码：<div id="father"><div id="first">I am first</div><div id="second" class="red">I am second</div><div id="third" style="display:none">I am third</div> </div> <p class="red">I am forth</p> <h4></h4>...

jQuerySelector选择器使用方法总结

jQuery Selector选择器的使用总结，需要的朋友可以参考下，都是一些常用的选择控制方式。//jQuery 选择器 $ //$(expression,[context]) return jQuery //Unit One //expression 之 CSS 定义符就是以CSS语法表示所要选择的元素 // $("*"); // 表示页面所有元素标签 // $("th, td") // 表示所有<th><td>元素标签 // $("a") // 表示所有<a>元素标签 // $("p#onlyp"); // 表示CSS选择中id=onlyidv的元素 $("#ID")为全文档匹配 // ...

jQuery类选择器querySelector的使用实例详解【图】

Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。两个方法使用差不多的语法，都是接收一个字符串参数，这个参数需要是合法的CSS选择语法。element = document.querySelector(selectors);elementList = document.querySelectorAll(selectors);其中参数selectors 可以包含多个CSS选择器，用逗号隔开...

Jquery的$(selector).each()和$.each()区别实例详解

我们都用过Jqurey中的each函数，都知道each()有两种方式去调用，一种是通过$.each()调用，另一种是$(selector).each()去调用，那么它们之间有什么区别？　　翻看一下Jquery源码就会知道，$.each()是核心的实现，$(selector).each()是调用的$.each()，先来分析一下$.each()的源码(在底部)：　 each(obj,callback,args)函数接收3个参数：obj--要遍历的对象或数组、callback--要遍历执行的回调函数、args--自己指定的数组（先无视）...

jqueryselector怎么用？关于selector的用法说明

这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式（通常由 CSS 选择器组成），然后根据这个表达式来查找所有匹配的元素。默认情况下, 如果没有指定context参数，$()将在当前的 HTML document中查找 DOM 元素；如果指定了 context 参数，如一...

首页 / JQUERY / jQuerySelectors(选择器)的使用(四-五、内容篇&amp;可见性篇)_jquery

jQuerySelectors(选择器)的使用(四-五、内容篇&amp;可见性篇)_jquery

内容导读

内容图文

内容总结

内容备注

内容手机端

【jQuerySelectors(选择器)的使用(四-五、内容篇&amp;可见性篇)_jquery】教程文章相关的互联网学习教程文章

QUERYSELECTOR - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程

首页 / JQUERY / jQuerySelectors(选择器)的使用(四-五、内容篇&可见性篇)_jquery

jQuerySelectors(选择器)的使用(四-五、内容篇&可见性篇)_jquery

【jQuerySelectors(选择器)的使用(四-五、内容篇&可见性篇)_jquery】教程文章相关的互联网学习教程文章