jquery选择器contain

转载

mob64ca14095513 2024-10-29 14:36:19

文章标签 jquery选择器contain jquery css3 css 选择器 文章分类 jQuery 前端开发

jQuery与CSS在选择器方面，有很多的相似之处，本文稍加总结,方便对比使用。

注：本文以jQuery1.9.1版本和CSS3为例进行说明，CSS在选择器方面存在 CSS 版本适应问题，请自行前往http://www.w3school.com.cn/cssref/css_selectors.asp 查看各选择器的 CSS 版本适应情况。

1 jQuery的版本

jQuery 分 3 个系列版本 1.x 、 2.x与3.x，主要的区别：
        a、2.x与3.x版本不再兼容IE6、7、8 
        b、2.x与3.x版本为移动端做了优化
        c、2.x与3.x版本由于减少了一些代码，比 jQuery 1.x 更小且更快。（引用自：http://www.imooc.com/code/8066 涉及3.x的内容为本人添加）


    1.x的最新版本是1.12.4
    2.x的最新版本是2.2.4

    1.12 and 2.2 分支只会维护现有功能、不会再引入新功能，未来主流分支是3.x,目前最新版本是3.1.0 (引用自：http://blog.jquery.com/)

2 jQuery对象与DOM对象

类型	jQuery对象	DOM对象
定义	jQuery方法包装后的对象	DOM对象就是一个单独的DOM元素
产生	通过jQuery方法——即`$()`——包装后的对象，即是jQuery对象	通过标准JavaScript提供的原生方法得到的DOM元素就是DOM对象
相同点	都可以操作DOM元素
两者关系	jQuery对象是一个类数组的对象,这个对象里面其实是包含了DOM对象的信息的,然后封装了很多jQuery的操作方法

3 jQuery对象与DOM对象的转换

类型	jQuery对象转换为DOM对象	DOM对象转换为jQuery对象
方法一	`$('div')[0].style.color = 'red'`	`$(document.getElementsByTagName('div'))`
方法二	`$('div').get(0).style.color = 'red'`	无
含义	利用数组下标或取到jQuery对象中的DOM对象(jQuery对象转化成DOM对象方法一，因为jQuery 对象是一个类数组结构，可以通过数组下标找到第N个子元素，这些子元素都是DOM对象)；通过get方法获取到jQuery对象中的DOM对象转化成(jQuery对象转化成DOM对象二，get方法其实也是利用下标实现的)	$()函数的参数如果是一个DOM对象，该方法就会把这个DOM对象给转换成一个新的jQuery对象

3 基本选择器

基本选择器包括：标签选择器、ID选择器、类选择器、通用选择器、群组选择器五类

类型	CSS	JQuery	含义
标签选择器	div{}	$(‘div’)	选择所有div元素
ID选择器	di{}	$(‘#di’)	选择id=di的元素
类选择器	.di{}	$(‘.di’)	选择所有class=di的元素
通用选择器	*{}	$(‘*’)	选择所有元素
群组选择器	E,F{}	$(‘E,F’)	选择所有E和F类型的元素

CSS代码示例请见：http://www.w3cplus.com/css3/basic-selectors

4 层级选择器

层级选择器用于处理节点与节点之间存在的父子、兄弟、祖孙关系

类型	CSS	JQuery	含义
直接子元素选择器	parent>child	`$('parent>child')`	选择parent元素下的第一级子元素child
后代元素选择器(空格)	ancestor(空格)descendant	`$('ancestor descendant')`	选择ancestor元素下的所有子孙元素descendant
直接相邻兄弟元素选择器	prev+next	`$('prev+next')`	选择紧邻prev选择器之后的兄弟元素next
一般相邻元素选择器	prev~siblings	`$('prev~siblings')`	选择prev选择器之后的所有兄弟元素
代码示例	`.left > div{background-color: #ccc;}`	`$('.left > div').css("backgroundColor", "#CCC");`	将.left 下的第一级子元素背景色设置为#CCC

示例代码如下：

<style>
    .prev + div{
            background: #ccc;
        }
 </style>
 <body>
     <span class="prev">选择器span元素</span>
     <div>prev后第一个兄弟节点div</div>
     <script type="text/javascript">
            //一般相邻选择器,选取prev后面的所有的div兄弟节点
            $('.prev ~ div').css("border", "3px groove blue");
    </script>
</body>

5 属性选择器

用于根据属性筛选元素

类型	CSS	JQuery	含义
`E[att]`	`E[att]`	`$("E[att]")`	选择E元素集合中带有att属性的E元素
`E[att=val]`	`E[att=val]`	`$("E[att=val]")`	选择E元素集合中，属性att=val的E元素
`E[att\|=val]`	`E[att\|=val]`	`$("E[att\|=val]")`	选择E元素集合中，属性att等于val或以val-为前缀的E元素
`E[att~=val]`	`E[att~=val]`	`$("E[att~=val]")`	选择E元素集合中，属性att等于val或以空格分隔的属性值中包含val的E元素
`E[att^=val]`	`E[att^=val]`	`$('E[att^=val]')`	选择E元素集合中，属性att的属性值是以val开头的E元素
`E[att$=val]`	`E[att$=val]`	`$('E[att$=val]')`	选择E元素集合中，属性att的属性值是以val结尾的E元素,注：这个比较区别大小写
`E[att*=val]`	`E[att*=val]`	`$('E[att*=val]')`	选择E元素集合中，属性att的属性值包含val字符串的E元素，如avalb即满足条件
`E[att!=val]`	`无此用法`	`$("E[att!=val]")`	选择E元素集合中，不存在属性att，或者属性att的属性值不等于val的E元素

CSS示例代码请见：http://www.w3cplus.com/css3/attribute-selectors

JQuery示例代码如下：

<body>
    <a href="xxx.pdf">我链接的是PDF文件</a>
    <a href="#" class="icon">我类名是icon</a>
    <a href="#" title="我的title是more">我的title是more</a>
    <script type="text/javascript">
    $(function(){
        $('a[class^=icon]').css("backgroundColor","green")
    })
        </script>
</body>

6 筛选选择器

伪类选择器/筛选选择器：选择html不存在的标签的选择器，或选择标签某种状态的选择器。均以冒号开头，冒号前须有具体元素(如没有元素则表示选择全部元素)。

筛选元素本身

第一组

类型	CSS	JQuery	含义
:root	:root{}	$(“:root”)	选择所有元素的根元素，即`<html>`元素
:not	E:not(p){}	$(“E:not(p)”)	选择E元素(集合)中除了p之外的E元素
:first	无此用法	$(‘E:first’)	选择E元素(集合)中的第一个E元素
:last	无此用法	$(‘E:last’)	选择E元素(集合)中的最后一个E元素
:even	无此用法	$(‘E:even’)	选择E元素(集合)中的索引为偶数的E元素，n从0开始
:odd	无此用法	$(‘E:odd’)	选择E元素(集合)中的索引为奇数的E元素，n从0开始
:eq(n)	无此用法	$(‘E:eq(n)’)	选择E元素(集合)中的索引等于n的E元素,n从0开始
:lt(n)	无此用法	$(“E:lt(n)”)	选择E元素(集合)中索引小于n的E元素,n从0开始
:gt(n)	无此用法	$(“E:gt(n)”)	选择E元素(集合)中索引大于n的E元素,n从0开始
:header	无此用法	$(“:header”)	选择所有标题元素，像h1、h2、h3等
:animated	无此用法	$(“E:animated”)	选择E元素(集合)中,正在执行动画效果的E元素
:target	E:target	无此用法	匹配页面的url的标志符(如href=#E)指定的id=E的元素

第二组

类型	CSS	JQuery	含义
:first-child	`E:first-child`	`$('E:first-child')`	选择E元素集合中的那些E元素——当它们为其父元素中的第一个直接子元素
:last-child	`E:last-child`	`$('E:last-child')`	选择E元素集合中的那些E元素——当它们为其父元素中的最后一个直接子元素
:only-child	`E:only-child`	`$('E:only-child')`	选择E元素集合中的那些E元素——当它们为其父元素中的唯一一个直接子元素
:nth-child(n)	`E:nth-child(n)`	`$('E:nth-child(n)')`	选择E元素集合的那些E元素——当它们为其父级元素中的第n个直接子元素，n从1开始
:first-of-type	`E:first-of-type`	`$('E:first-of-type')`	选择E元素集合中那些E元素——当它们为其父元素中的第一个该类型的元素
:last-of-type	`E:last-of-type`	`$('E:last-of-type')`	选择E元素集合中那些E元素——当它们为其父元素中的最后一个该类型的元素
:only-of-type	`E:only-of-type`	`$('E:only-of-type')`	选择E元素集合中那些E元素——当它们为其父元素中的唯一一个该类型的元素
:nth-of-type(n)	`E:nth-of-type(n)`	`$('E:nth-of-type(n)')`	选择E元素集合中那些E元素——当它们为其父元素中的第n个该类型的元素，n从1开始

注 :first只匹配一个单独的元素，但:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1);last同理。

其中，:not与:empty的示例代码如下：

<script type="text/javascript">
$(function(){                          $("div:not([class=demo])").css("backgroundColor","blue");
        $("div:empty").css("backgroundColor","blue");
    })
</script>
<div class="demo">
    这是一个div
    <!-- 空div -->
    <div></div>
</div>

:target的示例代码如下：

<style>
    #brand:target p {
      background: orange;
      color: #fff;
    }
</style>
<div class="menuSection" id="brand">
        <h2><a href="#brand">Brand</a></h2>
        <p>content for Brand</p>
</div>
<!-- 
1、触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码a元素中href="#brand"的#brand
2、:target就是用来匹配id=“brand”的元素,上面代码中是那个div元素。
 -->

根据可见性筛选元素

类型	CSS	JQuery	含义
:visible	无此用法	$(‘E:visible’)	选择E元素集合中，可见的E元素
:hidden	无此用法	$(‘E:hidden’)	选择E元素集合中，不可见的E元素

jquery认为不可见的元素包括：设置了 display:none; 与元素的宽度和高度都显式设置为0 的元素;
虽然如下代码也可以隐藏元素，但jquery中认为其是可见的。这是因为jquery中有一原则:
如元素占据文档中一定的空间,则元素被认为是可见的。
所以元素的visibility: hidden 或 opacity: 0 被jquery认为是可见的，因为他们仍然占用空间布局。

style="visibility:hidden;opacity:0";

根据内容筛选元素

类型	CSS	JQuery	含义
:empty	E:empty	$(“E:empty”)	选择E元素集合中没有任何文本内容和子元素的E元素,哪怕是一个空格也没有
:parent	E:parent	$(“E:parent)	选择E元素集合中包含任何文本内容或子元素的E元素
:contains	无此用法	$(‘E:contains(text)’)	选择E元素集合中文本内容包含参数”text”的E元素，如果包含的文本在E元素的子孙元素中，该E元素也会被选中
:has	无此用法	$(‘E:has(selector)’)	选择E元素集合中包含”selector”子孙元素的E元素

注：:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素

7 表单筛选选择器

筛选某类型的表单元素

类型	CSS	JQuery	含义
:input	无此用法	`$(':input')`	选中所有 input, textarea, select 和 button 元素
:text	无此用法	`$('E:text')`	选择E元素集合中,其type属性等于text的E元素，等价于`$('E[type=text]')`
:password	无此用法	`$('E:password')`	选择E元素集合中,其type属性等于password的E元素，等价于`$('E[type=password]')`
:radio	无此用法	`$('E:radio')`	选择E元素集合中,其type属性等于radio(单选按钮)的E元素，等价于`$('E[type=radio]')`
:checkbox	无此用法	`$('E:checkbox')`	选择E元素集合中,其type属性等于checkbox(复选按钮)的E元素，等价于`$('E[type=checkbox]')`
:submit	无此用法	`$('E:submit')`	选择E元素集合中,其type属性等于submit(提交按钮)的E元素，等价于`$('E[type=submit]')`
:image	无此用法	`$('E:image')`	选择E元素集合中,其type属性等于image(图像按钮)的E元素，等价于`$('E[type=image]')`
:button	无此用法	`$('E:button')`	选择E元素集合中,其type属性等于button(按钮)的E元素，等价于`$('E[type=button]')`
:reset	无此用法	`$('E:reset')`	选择E元素集合中,其type属性等于reset(重置按钮)的E元素，等价于`$('E[type=reset]')`
:file	无此用法	`$('E:file')`	选择E元素集合中,其type属性等于file(文件按钮)的E元素，等价于`$('E[type=file]')`

注：除了input筛选选择器(即:input)，几乎每个表单筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如 $(':password') == $('[type=password]')

示例代码如下：

<script type="text/javascript">
        $('input:text').css("backgroundColor", "#A2CD5A");
        $(':submit').css("backgroundColor", "#A2CD5A");
</script>

筛选某属性的表单元素

类型	CSS	JQuery	含义
:enabled	E:enabled	`$('E:enabled')`	选择E元素集合中,被启用（即未被禁用）的E元素，等价于`$('E[enabled=true]')`
:disabled	E:disabled	`$('E:disabled')`	选择E元素集合中,被禁用的E元素，等价于`$('E[disabled=disabled]')`
:checked	E:checked	`$('E:checked')`	选择E元素集合中,被勾选中(单选框,复选框)的E元素，等价于`$('E[checked]')`
:selected	无此用法	`$('option:selected')`	选择option元素集合中,有selected属性被选中的option元素，等价于`$('option[selected]')`

示例代码如下：

<form>
        <input type="text" value="设置disabled" disabled="disabled" />
        <select name="garden" multiple="multiple">
            <option>imooc</option>
            <option selected="selected">慕课网</option>
            <option>aaron</option>
            <option selected="selected">博客园</option>
        </select>
    </form>
    <script type="text/javascript">
        $('input:disabled').css("border", "2px groove blue");
        $('option:selected').css("border", "2px groove blue");
    </script>

8 伪元素

CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after;在CSS3中对伪元素进行了一定的调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”。
两个“::”和一个“:”在css3中主要用来区分伪元素和伪类。
到目前来说，这两种方式都是被接受的，也就是说不管使用哪种写法所起的作用都是一样的，只是一个书写格式不同而已。

上述引用自：http://www.w3cplus.com/css3/pseudo-class-selector
关于伪元素的更多内容也请查看此博客

类型	CSS	JQuery	含义
::selection	E::selection	无此用法	修改E元素中当用鼠标选择文本时的文本的样式
::first-line	E::first-line	无此用法	选择E元素中的第一行
::first-letter	E::first-letter	无此用法	选择E元素中的第一个字母
::before	E::before	无此用法	在E元素的前面插入内容,多用于清除浮动
::after	E::after	无此用法	在E元素的后面插入内容,多用于清除浮动

总结

jQuery与CSS3的选择器选中的永远都是“紧挨冒号前的元素”，“紧挨冒号后的伪选择器” 用于补充说明选中元素的特点；

1、读懂jQuery与CSS3的选择器的方法：

1、先找冒号
2、看紧挨冒号前的元素，空则表示所有元素
3、再看紧挨冒号后的伪选择器字面含义
4、其他选择器之间一般都是层级关系

综合起来前3步就是该选择器的含义：
————选中的永远是“紧挨冒号前的元素”； 
————“紧挨冒号后的伪选择器” 用于补充说明选中元素的特点；

如E:first的含义：        选中E元素(它是第一个E元素),只会选中一个E元素；
如E:first-child的含义:   选中E元素(它是[其父元素下的]第一个直接子元素) ，可能会选中多个E元素；
如E:nth-child(n)的含义： 选中E元素(它是[其父元素下的]第n个直接子元素) 
如E:nth-of-type(n)的含义： 选中E元素(它是[其父元素下的]第n个同类型的直接子元素)

2、使用CSS隐藏一个元素的七种方法

CSS display的值是none。
    type="hidden"的表单元素。
    宽度和高度都显式设置为0。
    一个祖先元素是隐藏的，该元素是不会在页面上显示
    CSS visibility的值是hidden
    CSS opacity的指是0

3、两个“::”和一个“:”在css3中主要用来区分伪元素和伪类。目前来说，这两种方式在伪元素上都是被接受的。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：nodejs axios默认请求头header有哪些

下一篇：android contain判断字符串完整

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

jquery选择器contain

jquery选择器contain

1 jQuery的版本

2 jQuery对象与DOM对象

3 jQuery对象与DOM对象的转换

3 基本选择器

4 层级选择器

5 属性选择器

6 筛选选择器

筛选元素本身

根据可见性筛选元素

根据内容筛选元素

7 表单筛选选择器

筛选某类型的表单元素

筛选某属性的表单元素

8 伪元素

总结

51CTO博客