phpStudy
phpStudy
网站首页
软件下载
PHP教程
编程技术
PHP
MySQL
HTML
CSS
JavaScript
MSSQL
AJAX
.NET
JSP
window
Linux
Mac
ASP
服务器
CMS
SQL
jQuery
C#
C++
java
Android
IOS
oracle
MongoDB
PostgreSQL
SQLite
教程手册
php
html
html5
css
css3
JavaScript
ajax
jquery
sql
ado
asp
aspnet
browsers
careers
dhtml
dotnetmobile
dtd
e4x
glossary
hosting
htmldom
json
media
msnet
quality
rdf
rss
schema
semweb
site
sitemap
smil
soap
svg
tags
tcpip
vbscript
w3c
wap
web
webservices
wmlscript
wsdl
xforms
xhtml
xlink
xml
xmldom
xpath
xquery
xsl
xslfo
网站测速
小皮面板
智能dns
搜索
首页
PHP教程
jQuery Selectors(选择器)的使用(四-五、内容篇&可见性篇)
jQuery Selectors(选择器)的使用(四-五、内容篇&可见性篇)
本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共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.phpstudy.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需刷新才能执行]
运行后，需要刷新一下才可以看到效果。
«
»
PHP教程
PHP简介
PHP基本语法
PHP类型
PHP变量
PHP运算符
PHP控制结构
PHP函数
PHP类与对象
PHP异常处理
函数库分类
快速导航
PHP
MySQL
HTML
CSS
JavaScript
MSSQL
AJAX
.NET
JSP
Linux
Mac
ASP
服务器
SQL
jQuery
C#
C++
java
Android
IOS
oracle
MongoDB
SQLite
wamp
交通频道
Copyright © 2016 phpStudy | 豫ICP备2021030365号-3