jQuery中的选择器_first-child console.log-CSDN博客

本文链接：https://blog.csdn.net/qq_42701999/article/details/101394662

jQuery

1. 全局对象处理

window.jQuery= window.$ = jQuery 输出相同

在这里插入图片描述

2. 优势：

1）write less,do more
2）处理了js的兼容性

3. 引入到页面

库的引入方式和外部js一致（header,body）

4. 函数执行，返回对象

在这里插入图片描述
因为在库里有初始化函数init(),其中有判断：

在这里插入图片描述

获取Dom元素

支持所有c1-c3选择器

1）基本选择器
在这里插入图片描述
获取元素，返回集合类型

  /*1.基本*/
    console.log($("#btn")); /*id为btn的元素*/
    console.log($("div,button"));    /*多个选择器组合*/

2）层级选择器

在这里插入图片描述

    /*2.层级*/
    console.log($("div input"));    /*所有子孙元素input*/
    console.log($("div>input"));    /*仅子元素input*/
    console.log($("label+input"));    /*其后紧跟元素input*/
    console.log($("div~input"));    /*同级元素input*/

3）基本筛选器
在这里插入图片描述

使用not时里面只能写一个参数，想除去多个时连续使用；其中使用>时虽然页面报错但仍可以正常使用
eq:根据索引获取元素,其中索引从0开始
even 偶数；odd奇数
除了新版本以外的lt以上的所有会用！

    console.log($("ul>li:first"));/*找到ul下的第一个LI，只匹配一个元素*/
    console.log($("ul>li:last"));/*找到ul下的最后一个LI*/
    console.log($("ul>li:odd"));/*找到ul下的第奇数个li 索引从0开始*/
    console.log($("ul>li:even"));/*找到ul下的第偶数个li 索引从0开始*/
    console.log($("ul>li:not(ul li:last):not(ul li:first)"));/*除去多个元素*/
    console.log($("ul>li:gt(1)"));/*索引大于某值的li*/
    console.log($("ul>li:lt(1)"));/*索引小于某值的li*/
    console.log($("ul>li:eq(3)"));/*根据索引匹配*/

4）内容筛选器
在这里插入图片描述

包含某内容
查找空元素
查找包含某标签的内容
匹配父元素（含有子元素）

    console.log($("ul>li:contains(1)"));/*找出内容值为1的li*/
    console.log($("ul>li:empty"));/*找出内容值为空的li*/
    console.log($("ul:has(p)"));/*找出含有指定元素的父元素*/
    console.log($("button:has(span)"));
    console.log($("span:parent"));/*找出含有子元素或者有文本内容的元素*/

5）可见性选择器
在这里插入图片描述
定义元素的display属性

console.log($("button:hidden"));
console.log($("button:visible"));

6）属性选择器
可以多个组合使用
在这里插入图片描述

    console.log($("button[id]"));
    console.log($("button[id=btn]"));
    console.log($("button[id!=btn]"));
    console.log($("button[id][class]"));
    console.log($("button[id^=btn]")); //以btn开始
    console.log($("button[id*=btn]")); //包括btn
    console.log($("button[id$=btn]")); //以btn结尾

7）子元素选择器
在这里插入图片描述

first-child和first的区别：':first' 只匹配一个元素，而'first-child'将为每个父元素匹配一个子元素
而first-of-type是查找指定类型的第一个元素，当ul里面增加了一个p标签仍然能查找到第一个li元素
总之有type的就可以继续向下查找，而其他的第一个不满足时查找失败
only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配如果父元素中含有其他元素，那将不会被匹配

    console.log($("ul>li:first-child"));/* ':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 ,如果第一个不是li标签就不会继续向下寻找*/
    console.log($("ul>li:last-child"));/* ':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素   */
    console.log($("ul>li:first-of-type"));/*选择所有相同的元素名称的第一个兄弟元素。*/
    console.log($("ul>li:last-of-type"));/*选择所有相同的元素名称的最后一个兄弟元素。*/
    console.log($("ul>li:nth-child(1)"));/* :nth-child从1开始的，而:eq()是从0算起的！同理如果第一个元素不是指定元素则不会继续向下查找*/
    console.log($("ul>li:nth-last-child(1)"));/* 从后往前找*/
    console.log($("ul>li:nth-of-type(1)"));/*无论第一个元素是否为指定元素都会向下继续查找 */
    console.log($("ul>li:nth-last-of-type(1)"));/*计数从最后一个元素到第一个。 */
    console.log($("ul>li:only-child"));/*如果某个元素是父元素中唯一的子元素，那将会被匹配   */
    console.log($("ul>li:only-of-type"));/*如果某个元素是父元素中唯一的子元素，那将会被匹配   */

8）表单
在这里插入图片描述

    /*8.表单*/
    console.log($(":input"));/*匹配所有 input, textarea, select 和 button 元素*/
    console.log($(":text"));/*单行文本框*/
    console.log($(":submit"));/*匹配所有的 button按钮  和  submit*/

9）表单对象选择器

    /*9. 表单对象属性选择器*/
    console.log($(":checked"));/*表单中有checked属性及下拉列表的当前现实option*/
    console.log($(":disabled"));/*禁止选项*/
    console.log($(":enabled"));/*可选项*/
    console.log($(":selected"));/* 匹配所有选中的option元素  */

10）混淆选择器
escapeSelector()用法

    /*10. 混淆选择器
    *特殊字符转义 find
    * 用法：前面是#或者.（id或者class）
    * 后面是有特殊字符的类名称或者id名
    * */
    console.log($("body").find("#" + $.escapeSelector("+abc")));

测试时使用的css及html

<head lang="en">
    <meta charset="UTF-8">
    <title>选择器</title>
    <script src="./tea/js/jquery-1.9.1.js"></script>
    <script src="./tea/js/jquery-3.0.0.js"></script>
    <style>
        #btn{
            /*display:none;*/
        }
    </style>
</head>
<body>
<button id="btn" >按钮</button>
<button id="btn1" class="btn"><span>按钮2</span></button>
<div>一个测试
    <label>NAME</label><br/>
    <input name="news"/>
    <span>
    <input name="newsletter"/>
    </span>
</div>
<input name="none"/>
<ul>
    <li>3</li>
    <p>3</p>
</ul>
<ul>
    <li>a</li>
    <li>b</li>
    <li>b</li>
    <li>d</li>
</ul>
<div>
    <input type="text"  id="+abc"/>
    <input type="button"/>
    <input type="submit"/>
    <input type="checkbox" checked/>
    <input type="password"/>
    <input type="radio"/>
    <textarea name="" cols="" rows="10">    </textarea>
    <select>
        <option selected="selected">1</option>
        <option>2</option>
    </select>
</div>