Mr.J-- jQuery学习笔记(四)--内容选择器

内容选择器

我们在使用Vscode或者WebStrom的时候，会使用 .setClass 来设置元素的class，使用 #setId 设置元素的id，这其实就是简单的基本选择器

所谓的内容选择器指的是可以根据元素中所包含的内容来实现相关验证,对于元素内容的判断,可以选择如下的选择器判断

 

1. :contains(内容)    返回包含指定文本内容的所有元素    元素集合
2. :empty()    选择所有空元素    元素集合
3. :parent    选择所有含有内容的非空元素    元素集合
4. :has(选择器)    获取所有包含制定选择器所匹配的元素    元素集合
5. parent()    使用parent()函数取得指定元素的父元素    元素集合
6. :parent()    选择含有指定元素的子元素    元素集合

parent()和:parent()区别为一个是函数,使用在对象.函数上,一个为选择器有冒号";"使用在字符串中
此时是需要对应关系以及模糊数据的查询操作的

HTML页面渲染

div{
       width: 50px;
       height: 100px;
       background: red;
       margin-top: 5px;
        }

<div></div>
<div>我是div</div>
<div>他们我是div123</div>
<div><span></span></div>
<div><p></p></div>

demo举例

:empty()

     var $div = $("div:empty");
     console.log($div);

 编写jQuery相关代码
 :empty 作用:找到既没有文本内容也没有子元素的指定元素

选择div:

:parent()

var $div = $("div:parent");
    console.log($div);

:parent 作用: 找到有文本内容或有子元素的指定元素

在上面截图中的0:div和1:div是存在文本内容，2:div里面存在span子元素，3:div里面是p子元素：

选中的div：

:contains(text)

var $div = $("div:contains('我是div')");
             console.log($div);

作用: 找到包含指定文本内容的指定元素

找到的div:

 

:has(selector) 

var $div = $("div:has('span')");
            console.log($div);

:has(selector) 作用: 找到包含指定子元素的指定元素

找到的div（倒数第二个div存在span子元素）:

 

其他类型选择器

选择器是jQuery的基础，在jQuery中，对事件的处理、遍历DOM以及Ajax操作，都是以选择器为基础的，熟练的使用选择器，不仅可以简化代码，更能达到事半功倍的效果。

jQuery中文文档网址：http://jquery.cuishifeng.cn/index.html   

https://www.jquery123.com/

里面可以查看所有的API....