- 浏览: 337351 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
327764984:
CommonSql里不知道把PreparedStatment和 ...
Connection.setAutoCommit使用的注意事项 -
netwelfare:
文章讲解的不详细啊,很多东西没有讲解出来。看到这篇文章讲解的挺 ...
java字符串的拆分 lang.String.split -
iceage1980:
博主你好 我用了你这个代码 为什么总是在 if (this. ...
MD5 码 校 验 -
wisdomtl:
最后一段代码有写小的错误最后一个具体工厂的实现应该返回Cowb ...
JAVA设计模式之工厂模式 -
jateide:
网上随便转载的东西,自己都没有经过使用,好意思发出来,而且还不 ...
正则表达式中后向引用、零宽断言、负向零宽断言的解释用法
一、 jquery内容过滤选择器
根据内容进行选择(根据节点的内容)
实现了对基本内容的过滤
用途:
1)可以实现内容的过滤
2)判断选择指定元素内的元素
3)判断特殊需求的元素(空、拥有等)
改变所有可见的div元素的背景色为 #0000FF
选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF
选取所有的文本隐藏域, 并打印它们的值
$(“div:contains(‘您好’)”)
选出包含有文本“您好”的<div>元素 $(“div:empty”) 选取不包含子元素(包括文本节点)的<div>元素
$(“div:has(p)”) 或者$(“div:has(.classss)”)
选取包含有<p>元素的<div>元素
$(“div:parent”) 选取拥有子元素(包括文本元素)的<div>
$(“div:not(:contains(‘aa’))”)选择不包含内容有“aa“的div
二、jquery可见度过滤选择器
可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素
1、:hidden
用法: $(”tr:hidden”) 返回值 集合元素
用法: $(”tr:hidden”) 返回值 集合元素
说明: 匹配所有的不可见元素,input 元素的 type 属性为 “hidden” 的话也会被匹配到.意思是css中display:none和input type=”hidden”的都会被匹配到.同样,要在脑海中彻底分清楚冒号”:”, 点号”.”和逗号”,”的区别.
2、:visible
用法: $(”tr:visible”) 返回值 集合元素
用法: $(”tr:visible”) 返回值 集合元素
说明: 匹配所有的可见元素.
三、jquery属性过滤选择器
jQuery属性过滤选择器
$(“div[id]”):选取拥有属性id的div元素
$(“div[title= str]”) 选取拥有title等于str值的div元素
$(“div[title!= str]”) 选取title不等于str的div元素
组合使用$(“div[id][title!= str]”)
$(“div[title^= str]”) 选取拥有属性title,并且title属性值以str开头的div元素
$(“div[title$= str]”) 选取拥有属性title,并且title属性值以str结尾的div元素
$(“div[title*= str]”) 选取拥有属性title,并且title属性值含有str的div元素
$(“div[title*= str][class]”) 选取拥有属性title,并且title属性值含有str,并且有class属性的div元素
下面是内容过滤选择器的例子
[php] view plaincopy
- <!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>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>内容选择器学习</title>
- <script language="javascript" type="text/javascript" src="../jquery-1.6.js"></script>
- <style>
- div{
- width:150px;
- height:150px;
- border:1px dashed #00F;
- background-color:#CCC;
- margin:5px;
- float:left;}
- .one-1{
- width:80px;
- margin:30px;
- height:80px;
- border:1px dashed #00F;
- background-color: #FFC;
- }
- </style>
- <script language="javascript" type="text/javascript">
- //使用jquery加载事件
- $(document).ready(function (){
- //<input id="btn0" type="button" value="清空样式" />
- $("#btn0").click(function (){
- //当点击按钮后,设置id=two的div的背景颜色是绿色
- $("*").removeAttr("style");
- });
- //<input id="btn1" type="button" value="选中内容包含'two'的DIV $('div:contains('two')')" />
- //增加id为btn1按钮的事件
- $("#btn1").click(function (){
- //选取内容包含two的div
- $("div:contains('two')").css("background","green");
- });
- //<input id="btn2" type="button" value="选中内容为空或者不包含子元素的div $('div:empty')" />
- $("#btn2").click(function (){
- //选取内容包含two的div
- $("div:empty").css("background","green");
- });
- //<input id="btn3" type="button" value="选中包含span的div $(div:has(span))" />
- $("#btn3").click(function (){
- //选取内容包含two的div
- $("div:has(span)").css("background","green");
- });
- //<input id="btn4" type="button" value="选中含有子元素或者文本内容的div $('div:parent')" />
- $("#btn4").click(function (){
- //选取内容包含two的div
- $("div:parent").css("background","green");
- });
- //<input id="btn5" type="button" value="选中内容中不包含'two'的div $('div:not(:contains('two'))')" />
- $("#btn5").click(function (){
- //选取内容包含two的div
- $("div:not(:contains('two'))").css("background","green");
- });
- });
- </script>
- </head>
- <body>
- <div id="one">id=one
- <div class="one-1">class=one-1</div>
- </div>
- <div id="two">id=two<br><span>id=two,span的内容<span>1111111111</span></span></div>
- <div id="three">id=three<br><span>id=three,span的内容</span></div>
- <div class="d2">class=d2</div>
- <div class="d2"></div>
- <div class="d2"><span></span></div>
- <p class='p'>这里放了一个pi<br><span>pi里还有span</span></p>
- <div style="clear:both;">
- <input id="btn0" type="button" value="清空样式" />
- <input id="btn1" type="button" value="选中内容包含'two'的DIV $('div:contains('two')')" />
- <input id="btn2" type="button" value="选中内容为空或者不包含子元素的div $('div:empty')" />
- <input id="btn3" type="button" value="选中包含span的div $(div:has(span))" />
- <input id="btn4" type="button" value="选中含有子元素或者文本内容的div $('div:parent')" />
- <input id="btn5" type="button" value="选中内容中不包含'two'的div $('div:not(:contains('two'))')" />
- </div>
- </body>
- </html>
下面是属性过滤选择器的例子
[php] view plaincopy
- <!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>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>属性选择器学习</title>
- <script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>
- <style>
- div{
- width:150px;
- height:150px;
- border:1px dashed #00F;
- background-color:#CCC;
- margin:5px;
- float:left;}
- .one-1{
- width:80px;
- margin:30px;
- height:80px;
- border:1px dashed #00F;
- background-color: #FFC;
- }
- </style>
- <script language="javascript" type="text/javascript">
- //使用jquery加载事件
- $(document).ready(function (){
- //<input id="btn0" type="button" value="清空样式" />
- $("#btn0").click(function (){
- //当点击按钮后,设置id=two的div的背景颜色是绿色
- $("*").removeAttr("style");
- });
- //<input id="btn1" type="button" value="选中拥有id属性的div元素 $('div[id]')" />
- $("#btn1").click(function (){
- $("div[id]").css("background","green");
- });
- //<input id="btn2" type="button" value="选中class等于d2的div元素 $('div[class=d2]')" />
- $("#btn2").click(function (){
- $("div[class=d2]").css("background","green");
- });
- //<input id="btn3" type="button" value="选中class不等于d2的div元素 $('div[class=d2]')" />
- $("#btn3").click(function (){
- $("div[class!=d2]").css("background","green");
- });
- //<input id="btn4" type="button" value="选中class等于abcd2,并且id=five $('div[class=abcd2][id=five]')" />
- $("#btn4").click(function (){
- $("div[class=abcd2][id=five]").css("background","green");
- });
- //<input id="btn5" type="button" value="选中有class属性且值以'a'开头的div $('div[class^=a]')" />
- $("#btn5").click(function (){
- $("div[class^=a]").css("background","green");
- });
- //<input id="btn6" type="button" value="选中有class属性且值以'2'结尾的div $('div[class$=2]')" />
- $("#btn6").click(function (){
- $("div[class$=2]").css("background","green");
- });
- //<input id="btn7" type="button" value="选中有class属性属性值包含'a'的div $('div[class*=a]')" />
- $("#btn7").click(function (){
- $("div[class*=b]").css("background","green");
- });
- });
- </script>
- </head>
- <body>
- <div id="one">id=one
- <div class="one-1">class=one-1</div>
- </div>
- <div id="two">id=two<br><span>id=two,span的内容<span>1111111111</span></span></div>
- <div id="three">id=three<br><span>id=three,span的内容</span></div>
- <div id="four" class="abcd2">id=four,class=abcd2</div>
- <div id="five" class="abcd2">id=five,class=abcd2</div>
- <div class="a3b5"></div>
- <div class="d2"><span></span></div>
- <div style="clear:both;">
- <input id="btn0" type="button" value="清空样式" />
- <input id="btn1" type="button" value="选中拥有id属性的div元素 $('div[id]')" />
- <input id="btn2" type="button" value="选中class等于d2的div元素 $('div[class=d2]')" />
- <input id="btn3" type="button" value="选中class不等于d2的div元素 $('div[class=d2]')" />
- <input id="btn4" type="button" value="选中class等于abcd2,并且id=five $('div[class=abcd2][id=five]')" />
- <input id="btn5" type="button" value="选中有class属性且值以'a'开头的div $('div[class^=a]')" />
- <input id="btn6" type="button" value="选中有class属性且值以'2'结尾的div $('div[class$=2]')" />
- <input id="btn7" type="button" value="选中有class属性属性值包含'b'的div $('div[class*=b]')" />
- </div>
- </body>
- </html>
下面是可见度过滤选择器的例子
[php] view plaincopy
- <span style="color:#000000;"><!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>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>可见度过滤选择器学习</title>
- <script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>
- <style>
- div{
- width:150px;
- height:150px;
- border:1px dashed #00F;
- background-color:#CCC;
- margin:5px;
- float:left;}
- .one-1{
- width:80px;
- margin:30px;
- height:80px;
- border:1px dashed #00F;
- background-color: #FFC;
- }
- .hide{
- display:none;
- }
- </style>
- <script language="javascript" type="text/javascript">
- //使用jquery加载事件
- $(document).ready(function (){
- //<input id="btn0" type="button" value="清空样式" />
- $("#btn0").click(function (){
- //当点击按钮后,设置id=two的div的背景颜色是绿色
- $("*").removeAttr("style");
- });
- //<input id="btn1" type="button" value="匹配所有可见元素,并且设置背景颜色为绿色 $('div:visible')" />
- //增加id为btn1按钮的事件
- $("#btn1").click(function (){
- //选取可见元素
- $("div:visible").css("background","green");
- });
- //<input id="btn2" type="button" value="匹配隐藏的div并且设置可见 $(div:hidden)" />
- $("#btn2").click(function (){
- //选取隐藏元素
- $("div:hidden").show().css("background","green");
- });
- //<input id="btn3" type="button" value="获取隐藏的文本域的值 $(input:hidden)" />
- $("#btn3").click(function (){
- //匹配所有隐藏的文本域
- //-----------------第一种方法-----------
- /* $("input:hidden").each(function (i){
- //this是dom元素,使用dom方式获取值
- //alert(this.value);
- //用jquery的方式获取 $(this)相当于是将dom转换为jquery对象
- //alert($(this).val());
- });*/
- //-----------------第二种方法-----------
- // 索引值 dom元素
- /*$("input:hidden").each(function (index,domEle){
- //使用dom的方式
- //alert(domEle.value);
- //使用jquery的方式
- alert($(domEle).val());
- });*/
- //-----------------第三种方法-------------
- var input=$("input");
- $.each(input,function (index,domEle){
- //使用dom的方式
- //alert(domEle.value);
- //使用jquery的方式
- alert($(domEle).val());
- });
- });
- });
- </script>
- </head>
- <body>
- <div id="one">id=one
- <div class="one-1">class=one-1</div>
- </div>
- <div id="two">id=two<br><span>id=two,span的内容<span>1111111111</span></span></div>
- <div id="three">id=three<br><span>id=three,span的内容</span></div>
- <div class="d2">class=d2</div>
- <div class="hide"></div>
- <div class="d2"><span></span></div>
- <p class='p'>这里放了一个pi<br><span>pi里还有span</span></p>
- <input type="hidden" value="hidden_1" />
- <input type="hidden" value="hidden_2" />
- <input type="hidden" value="hidden_3" />
- <input type="hidden" value="hidden_4" />
- <input type="hidden" value="hidden_5" />
- <div style="clear:both;">
- <input id="btn0" type="button" value="清空样式" />
- <input id="btn1" type="button" value="匹配所有可见元素,并且设置背景颜色为绿色 $('div:visible')" />
- <input id="btn2" type="button" value="匹配隐藏的div并且设置可见 $(div:hidden)" />
- <input id="btn3" type="button" value="获取隐藏的文本域的值 $(input:hidden)" />
- </div>
- </body>
- </html>
- </span>
发表评论
-
js match 的简单用法 [转]
2014-06-05 14:41 1299/* js match 的用法 */var href,rs, ... -
JavaScript的replace方法与正则表达式结合应用讲解(转)
2013-09-27 17:02 905replace方法的语法是:stringObj.replac ... -
jQuery对象与dom对象相互转换(转)
2012-10-30 10:03 883刚开始学习jQuery,可能一时会分不清楚哪些是jQue ... -
jQuery锚点跳转及相关操作(转)
2012-10-17 09:51 614401.锚点跳转简介 Edit 锚点其实就是可以让页 ... -
jquery UI组件扩展(转)
2012-10-17 09:47 16501.注意事项 在使用扩展组件的时候,页面中必 ... -
Jquery获取select,dropdownlist,checkbox 下拉列表框的值(转)
2012-07-11 16:18 1457jQuery获取Select选择的 ... -
Jquerr 中ajax和eche遍历等问题
2012-07-08 14:25 1479众所周知,jquery作为轻量级的js框架,已经应用到了很多方 ... -
利用jquery操作select下拉列表框(转)
2012-07-07 20:33 1107例: <select id=" ... -
HTML锚点(转)
2012-07-02 16:06 1401以前只是知道有锚点这么个东西,一直没有用到,昨天做毕设 ... -
jQuery.extend 函数详解(转)
2012-06-20 09:49 1049JQuery的extend扩展方法: ... -
HTML5实验:JavaScript模拟流体效果(转)
2012-06-15 19:57 1575把现实世界当中的物体模拟到计算机当中,一些简单的物理实 ... -
jQuery Datepicker 选择指定日期【转】
2012-05-21 14:17 3957要求是日期只能选择每个月的1号,其它都不能选择。 ... -
DatePicker基本使用方法 【转】
2012-05-08 11:01 4270一个不错的地址,用来DIY jQuery UI界面效果的 ... -
使用 JSONP 实现跨域通信,第 2 部分: 使用 JSONP、jQuery 和 Yahoo! 查询语言构建 mashup(转)
2012-03-27 16:58 1583简介 在本系列的第 1 ... -
使用 JSONP 实现跨域通信,第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup(转)
2012-03-27 16:57 962简介 Asynchronous JavaScript ... -
keyCode charCode 详解
2012-03-27 11:33 1561键盘事件拥有两个属性, keyCode 和 CharCo ... -
JavaScript 键盘键值大集合
2012-03-27 10:01 4218JavaScript【keyCode】 JavaSc ... -
document.createElement()的用法 (转)
2012-03-16 11:09 1232分析代码时,发现自己的盲点——document.createE ... -
红薯 50+ 个 JavaScript & HTML5 框架以及相关工具(转)
2012-03-16 09:58 2383全堆栈框架和工具包 jQuery License: ... -
正则表达式中后向引用、零宽断言、负向零宽断言的解释用法
2012-03-08 15:02 2287正则表达式中后向引用 ...
相关推荐
在实际应用中,这两个选择器可以与其他jQuery选择器结合使用,以实现更复杂的操作。比如,如果你想隐藏所有可见的div,可以这样做: ```javascript $("div:visible").hide(); ``` 或者,如果要切换元素的可见性,...
除了直接使用这些选择器,还可以与其他jQuery选择器结合使用,以实现更复杂的过滤。例如,你可以选择第一个可见的子元素: ```javascript $("#parentElement > :visible:first"); ``` 或者选择所有类名为`myClass`且...
### jQuery选择器大全:掌握高效DOM操作的关键 在前端开发领域,jQuery因其强大的功能和简洁的语法而备受青睐。选择器作为jQuery的核心组件之一,扮演着桥梁的角色,连接JavaScript与HTML文档,使得开发者能以更加...
jQuery过滤选择器是jQuery库中一个非常强大的特性,它允许我们根据特定条件精确地选取DOM元素集合中的子集。在上述示例中,展示了多种过滤选择器的使用方法,让我们逐一解析: 1. `:first` 和 `:last`: - `$('li:...
jquery缩写 4:基本选择器1 5:基本选择器2 6:基本选择器3 7:基本选择器4 8:层次选择器1 9:层次选择器2 10:层次选择器3 11:层次选择器4 12:过滤选择器1 13:过滤选择器2 14:过滤选择器3 15:过滤选择器4 16:过滤选择器5 ...
在jQuery中,可见性过滤选择器是用于筛选页面上元素的一种高效工具,它们根据元素的可见状态(即是否被显示)来选取相应的DOM元素。本文将深入探讨`:hidden`和`:visible`这两个可见性过滤选择器的用法,并通过实例...
过滤选择器则用于更精细的选择,它包括基础过滤选择器、内容选择器、可见度选择器等。基础过滤选择器可以帮助我们找到符合特定条件的元素,如第一个、最后一个、特定类、特定索引等。内容选择器可以根据元素内包含的...
4. **城市选择器内容**:城市选择器通常由多个选项组成,我们可以使用HTML的`<select>`元素或者自定义布局来实现。例如,使用`<option>`元素构建一个多级下拉选择器: ```html 请选择省份 <!-- 省份选项... --> ...
除了基础的使用方式外,`:visible`和`:hidden`过滤器还可以与其他选择器组合,如`:first`, `:last`, `:eq(index)`等,以实现更复杂的元素筛选。例如,你可以选取页面上第一个可见的元素,或者所有隐藏的input元素。 ...
2.2 jQuery选择器详解/17 2.2.1 基本选择器/18 2.2.2 层次选择器/20 2.2.3 简单过滤选择器/22 2.2.4 内容过滤选择器/25 2.2.5 可见性过滤选择器/27 2.2.6 属性过滤选择器/28 2.2.7 子元素过滤选择器/30 ...
jQuery的选择器是其魅力所在,它们使我们能够方便地选取DOM元素。常见的选择器有: 1. `ID选择器`: `$("#id")` - 通过ID获取元素。 2. `类选择器`: `.className` - 通过类名获取元素集合。 3. `标签选择器`: `$(...
这通常通过监听用户的输入事件,如keyup或input,然后使用jQuery的选择器匹配和隐藏不匹配项来实现。例如,可以使用$.each()遍历每个列表项,比较其文本内容是否包含用户输入的关键词,如果匹配则保留,否则隐藏。 ...
jQuery提供了多种选择器,包括基本选择器(如ID、元素类型、类名、通配符)、层级选择器(如祖先、后代、相邻、同辈)、基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单...
通过这个 jQuery 颜色调色器,开发者可以快速添加色彩选择功能,提升用户界面的互动性和美观度,同时减少实现这些功能所需的时间和精力。无论你是新手还是经验丰富的前端开发者,这个工具都能成为你项目中的得力助手...
#### 三、jQuery选择器 jQuery提供了丰富的选择器用于选取DOM元素,以下是部分选择器的详细介绍: 1. **所有元素选择器**:`$("*")` —— 选取页面上的所有元素。 2. **多个选择器**:`$("选择器,选择器,选择器")`...
1. **jQuery选择器** - **基本选择器**:如 `$("#id")` 选择ID为指定ID的元素,`$(".class")` 选择具有指定类名的元素,`$("tag")` 选择所有指定标签的元素。 - **组合选择器**:使用 `,` 分割多个选择器,如 `$(...
1. **选择元素**:使用jQuery选择器(如`$("#elementID")`或`$(".className")`)选取需要模糊隐藏的元素。 2. **初始状态**:默认情况下,这些元素可能设置为`opacity:0`或应用模糊滤镜。 3. **事件监听**:通过`.on...
不同的选择器有不同的权重优先级,依次为:内联样式(1000)、ID 选择器(0100)、类、伪类和属性选择器(0010)、类型选择器和伪元素选择器(0001)、通配符、子选择器、相邻选择器等(0000)。 三、网页组成 ...
- 可见性过滤选择器:隐藏、可见。 - 属性过滤选择器:基于属性值进行筛选。 - 子元素过滤选择器:基于子元素的位置筛选。 - 表单过滤选择器:针对表单元素的各种属性。 jQuery的这些功能使得JavaScript编程变...