jquery内容选择器

原创 2012年03月21日 19:55:37

1):contains(text):匹配包含给定文本的元素

   eg:$("#btn").click(function(){

         //点击按钮后,将含有two的div背景变为绿色

           $("div:contains(two)").css("background","green");

       });

       <body>

         <input type="button" value="将含有two的div背景变为绿色" id="btn">

         <div id="one">id=one</div>

         <div id="two">id=two</div>----------变绿

         <div id="three">id=three</div>

        </body>

2):empty:匹配所有不包含子元素或者文本的空元素

    eg:$("#btn").click(function(){

 

         //点击按钮后,将不含有子元素或文本的空元素背景变为绿色

           $("div:empty").css("background","green");

       });

       <body>

         <input type="button" value="将不含有子元素或文本的空元素背景变为绿色" id="btn">

         <div id="one"></div>-----------------变绿

         <div id="two"><span></span></div>

         <div id="three">id=three</div>

                             <div></div>

        </body>

3):has(selector):匹配含有选择器所匹配的元素的元素

    eg:$("#btn").click(function(){

         //点击按钮后,将含有span的div背景变为绿色

           $("div:has(span)").css("background","green");

        });

       <body>

         <input type="button" value="将含有span的div背景变为绿色" id="btn">

         <div id="one">id=one

             <span></span>

         </div>---------------------------变绿

         <div id="two">id=two</div>

         <div id="three">id=three</div>

        </body>

4):parent:匹配所有的子元素或文本的元素

     eg:$("#btn").click(function(){

         //点击按钮后,将含有子元素(或者文本内容)的div背景变为绿色

           $("div:parent").css("background","green");

        });

       <body>

         <input type="button" value="将含有子元素(或者文本内容)的div背景变为绿色" id="btn">

         <div id="one"></div>

         <div id="two">id=two<span></span></div>-----------变绿

         <div id="three">id=three</div>--------------------变绿

        </body>

 

jquery之选择器和筛选器

jquery之选择器 根据给定的id、class或者tagName匹配一个元素。 使用任何的元字符(如!"#$%&'()*+,./:;?@[\]^`{|}~)作为名称的文本部分, 它必须被两个反斜...
  • hf549072646
  • hf549072646
  • 2015年12月31日 15:16
  • 464

jQuery-9种选择器

jQuery 9种选择器   1、基本选择器-5个    1 html> 2 head> 3 meta http-equiv="content-type" conte...
  • zfs592645357
  • zfs592645357
  • 2014年10月30日 16:20
  • 1175

JQuery_九大选择器

JQuery中九大选择器。
  • pseudonym_
  • pseudonym_
  • 2017年07月25日 18:19
  • 372

Jquery选择器分类(基本选择器,层次选择器,过滤选择器,表单选择器)

基本选择器 说明:通过元素id、class和标签名等来查找DOM元素 1.id选择器:$("#test");//选取id为test的元素 2.类选择器:$(".test");//选取所有class为...
  • allan492975230
  • allan492975230
  • 2013年08月01日 15:50
  • 1131

jQuery与CSS3的选择器

jQuery与CSS在选择器方面,有很多的相似之处,本文稍加总结。 注:本文以jQuery1.9.1版本和CSS3为例进行说明,CSS在选择器方面存在兼容问题,请自行分辨。1 jQuery的版本 ...
  • aiolos1111
  • aiolos1111
  • 2016年08月02日 16:52
  • 1829

jquery 孩子和兄弟选择器

Jquery 孩子和兄弟选择器分为4类,1 后代选择器(A B) ;2 孩子选择器(A>B) ;3相邻兄弟选择器(A+B); 一般兄弟选择器(A~B). 以下让我们通过一个例子来理解它们的不同。  ...
  • taiyb
  • taiyb
  • 2014年10月30日 23:16
  • 9136

jQuery 层次选择器,属性选择器

jQuery层次选择器 jquery属性选择器 jq根据是否有某属性选择 jq选取子元素、后边的元素等 $("div >span") $("#one +div") $("#one~div")...
  • tangdou5682
  • tangdou5682
  • 2016年12月01日 10:40
  • 540

javascript 原生 模仿 jquery 选择器 代码

使用这段代码可以简单的实现类似 $(“#tab_ul”) 选择器效果。当然,是基于原生的。 Array.prototype.each=function(f){ for(var ...
  • FungLeo
  • FungLeo
  • 2015年09月09日 14:36
  • 1423

详解jQuery选择器正则表达式

1、空白 whitespace = "[\\x20\\t\\r\\n\\f]", 在字符串中,斜杠是用于转义的,若想输出斜杠,必须采用双斜杠来表示。上述字符串若直接用正则表达式对象来表示,如下: ...
  • mole
  • mole
  • 2015年02月02日 18:26
  • 3217

jquery选择器扩展之样式选择器

jquery中提供了丰富多样的选择器,利用这些选择器我们可以完成大多数任务,但是喜欢思考的我们总得找点事,提问时间: 1.如何选择所有字体颜色为红色的元素 2.如何选择出背景颜色为为白色的元素 3.如...
  • duwen90
  • duwen90
  • 2016年01月23日 18:05
  • 1459
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery内容选择器
举报原因:
原因补充:

(最多只允许输入30个字)