【前端系列教程之jQuery】03_jQuery核心函数和选择器

超、凢脫俗 2024-04-28 13:12 74阅读 0赞

## 一、jQuery核心函数 ##

*  **jQuery(\[selector,\[context\]\])**

这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。

jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式（通常由 CSS 选择器组成），然后根据这个表达式来查找所有匹配的元素。

默认情况下, 如果没有指定context参数，$()将在当前的 HTML document中查找 DOM 元素；如果指定了 context 参数，如一个 DOM 元素集或 jQuery 对象，那就会在这个 context 中查找。在jQuery 1.3.2以后，其返回的元素顺序等同于在context中出现的先后顺序。

**selector,\[context\]** String,Element,/jQuery

**selector**:用来查找的字符串

**context**:作为待查找的 DOM 元素集、文档或 jQuery 对象。

// 找到所有 p 元素，并且这些元素都必须是 div 元素的子元素。
    $("div > p");
    
    // 设置页面背景色。
    $(document.body).css( "background", "black" );
    
    // 隐藏一个表单中所有元素。
    $(myForm.elements).hide()
    
    // 在文档的第一个表单中，查找所有的单选按钮(即: type 值为 radio 的 input 元素)。
    $("input:radio", document.forms[0]);

*  **jQuery(html,\[ownerDocument\])**

根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。同时设置一系列的属性、事件等.

你可以传递一个手写的 HTML 字符串，或者由某些模板引擎或插件创建的字符串，也可以是通过 AJAX 加载过来的字符串。

当你创建单个元素时，请使用闭合标签或 XHTML 格式。例如，创建一个 span ，可以用$("<span/>") 或 $("<span></span>") ，但不推荐 $("<span>")。在jQuery 中，这个语法等同于$(document.createElement("span")) 。

**html,\[ownerDocument\]** String,Document

**html**:用于动态创建DOM元素的HTML标记字符串

**ownerDocument**:创建DOM元素所在的文档

// 动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中。在这个函数的内部，是通过临时创建一个元素，并将这个元素的 innerHTML 属性设置为给定的标记字符串，来实现标记到 DOM 元素转换的。所以，这个函数既有灵活性，也有局限性。
    $("<div><p>Hello</p></div>").appendTo("body");
    
    // 创建一个 <input> 元素必须同时设定 type 属性。因为微软规定 <input> 元素的 type 只能写一次。
    // 在 IE 中无效:
    $("<input>").attr("type", "checkbox");
    // 在 IE 中有效:
    $("<input type='checkbox'>");

*  **jQuery(callback)**

$(document).ready()的简写。

允许你绑定一个在DOM文档载入完成后执行的函数。这个函数的作用如同$(document).ready()一样，只不过用这个函数时，需要把页面中所有需要在 DOM 加载完成时执行的$()操作符都包装到其中来。从技术上来说，这个函数是可链接的－－但真正以这种方式链接的情况并不多。 你可以在一个页面中使用任意多个$(document).ready事件。参考 ready(Function) 获取更多 ready 事件的信息。

**callback** Function

// 当DOM加载完成后，执行其中的函数。
    $(function(){
      // 文档就绪
    });
    
    // 使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。
    jQuery(function($) {
      // 你可以在这里继续使用$作为别名...
    });

*  **jQuery.holdReady(hold)**

暂停或恢复.ready() 事件的执行。

在$.holdReady()方法允许调用者延迟jQuery的ready事件。这种先进的功能，通常是使用动态脚本加载器，要加载的JavaScript比如 jQuery插件，如额外的ready事件才让事件发生，即使在DOM可能准备。此方法必须早在文件调用，在这样<head> jQuery脚本后，立即标记。ready事件之后调用此方法即使已经发射也将没有任何效果。

**hold** 指示是否暂停或恢复被请求的ready事件

// 延迟就绪事件，直到已加载的插件。
    $.holdReady(true);
    $.getScript("myplugin.js", function() {
         $.holdReady(false);
    });

## 二、什么是jQuery选择器 ##

jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。

jQuery选择器很强大：jQuery实现了从CSS1到CSS3所有的选择器以及其他常用的选择器。

各种选择器之间可以相互代替，所以，平时真正用到的只是最常用的选择器。

### 基本选择器 ###

*  \#id：根据给定的ID匹配一个元素。
 *  element：根据给定的元素名匹配所有元素
 *  .class：根据给定的类匹配元素。
 *  \*：匹配所有元素
 *  selector1,selector2,selectorN：将每一个选择器匹配到的元素合并后一起返回。

### 层级选择器 ###

*  ancestor descendant：在给定的祖先元素下匹配所有的后代元素
 *  parent > child：在给定的父元素下匹配所有的子元素
 *  prev + next：匹配所有紧接在 prev 元素后的 next 元素
 *  prev ~ siblings： 匹配 prev 元素的所有同辈 siblings 元素

### 基本过滤选择器 ###

*  :first：获取第一个元素
 *  :not(selector)： 去除所有与给定选择器匹配的元素
 *  :even：匹配所有索引值为偶数的元素，从 0 开始计数
 *  :odd：匹配所有索引值为奇数的元素，从 0 开始计数
 *  :eq(index)： 匹配一个给定索引值的元素
 *  :gt(index)：匹配所有大于给定索引值的元素
 *  :lang()1.9+：选择指定语言的所有元素。
 *  :last()：获取最后个元素
 *  :lt(index)： 匹配所有小于给定索引值的元素
 *  :header：匹配如 h1, h2, h3之类的标题元素
 *  :animated： 匹配所有正在执行动画效果的元素
 *  :focus：匹配当前获取焦点的元素。
 *  :root1.9+： 选择该文档的根元素。
 *  :target1.9+：选择由文档URI的格式化识别码表示的目标元素。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="js/jquery.min.js"></script>
        <style>
            #div1{
                width: 500px;
                border: 1px solid black;
            }
            #div2{
                width: 300px;
                border: 1px solid red;
                margin-left: 100px;
            }
        </style>
    </head>
    <body>
        <p class="cp">我是body里面的p</p>
        <div id="div1">
            <p>我是div1的子元素p 111</p>
            <div id="div2">
                <p>我是div2的子元素p  xxx</p>
                <h1>我是div2的h1标签</h1>
                <p class="cp">我是div2的子元素p  yyy</p>  
            </div>
            <h3>我是div1的子元素h3</h3>
            <p>我是div1的子元素p 222</p>
        </div>
        <script>
            /* 
                通过$("选择器")这个核心函数获取得到都是jQuery对象,jQuery对象是一个伪数组
    
                基本选择器:
                    #id         根据给定的ID匹配一个元素。
                    element     根据给定的元素名匹配所有元素
                    .class      根据给定的元素名匹配所有元素
                    *           匹配所有元素
                    selector1,selector2,selectorN   将每一个选择器匹配到的元素合并后一起返回。
    
                层级选择器：
                    ancestor descendant     在给定的祖先元素下匹配所有的后代元素
                    parent > child          在给定的祖先元素下匹配所有的后代元素
                    prev + next             匹配所有紧接在 prev 元素后的 next 元素
                    prev ~ siblings         匹配 prev 元素的所有同辈 siblings 元素
    
                基本过滤器：它是基于选择结果集进行过滤的,不考虑之前页面中的位置/层级关系
                    :first              获取第一个元素
                    :last               获取最后个元素
                    :not(selector)      去除所有与给定选择器匹配的元素
                    :even               匹配所有索引值为偶数的元素，从 0 开始计数
                    :odd                匹配所有索引值为奇数的元素，从 0 开始计数
                    :eq(index)          匹配一个给定索引值的元素
                    :gt(index)          匹配所有大于给定索引值的元素
                    :lt(index)          匹配所有小于给定索引值的元素
                    :header             匹配如 h1, h2, h3之类的标题元素
                    
                    :animated           匹配所有正在执行动画效果的元素
                    :focus              匹配当前获取焦点的元素。
                    :lang1.9+           选择指定语言的所有元素。(不用管)
                    :root1.9+           选择该文档的根元素。(不用管)
                    :target1.9+         选择该文档的根元素。(不用管)
            */
            // $("p:first").css("background","red");
            // $("p:last").css("background","red");
    
            // $("p:not(.cp)").css("background","red");
            // $("p:even").css("background","red");
            // $("p:odd").css("background","red");
    
            // $("p:eq(2)").css("background","red");
            // $("p:lt(2)").css("background","red");
            // $("p:gt(2)").css("background","red");
    
            $(":header").css("background","red");
        </script>
    
    </body>
    </html>

### 内容选择器 ###

*  :contains(text)：匹配包含给定文本的元素
 *  :empty：匹配所有不包含子元素或者文本的空元素
 *  :has(selector)： 匹配含有选择器所匹配的元素的元素
 *  :parent：匹配含有子元素或者文本的元素

### 可见性选择器 ###

*  :hidden：匹配所有不可见元素，或者type为hidden的元素
 *  :visible：匹配所有的可见元素

### 属性选择器 ###

*  \[attribute\]：匹配包含给定属性的元素。
 *  \[attribute=value\]： 匹配给定的属性是某个特定值的元素
 *  \[attribute!=value\] ：匹配所有不含有指定的属性，或者属性不等于特定值的元素。
 *  \[attribute^=value\] ：匹配给定的属性是以某些值开始的元素
 *  \[attribute$=value\] ：匹配给定的属性是以某些值结尾的元素
 *  \[attribute\*=value\] ：匹配给定的属性是以包含某些值的元素
 *  `[attrSel1][attrSel2][attrSelN]`：复合属性选择器，需要同时满足多个条件时使用。

### 子元素选择器 ###

*  :first-child：匹配第一个子元素
 *  :first-of-type1.9+：选择所有相同的元素名称的第一个兄弟元素。
 *  :last-child：匹配最后一个子元素
 *  :last-of-type1.9+：选择的所有元素之间具有相同元素名称的最后一个兄弟元素。
 *  :nth-child：匹配其父元素下的第N个子或奇偶元素
 *  :nth-last-child()1.9+：选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。
 *  :nth-last-of-type()1.9+：选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。
 *  :nth-of-type()1.9+：选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。
 *  :only-child：如果某个元素是父元素中唯一的子元素，那将会被匹配
 *  :only-of-type1.9+：选择所有没有兄弟元素，且具有相同的元素名称的元素。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="js/jquery.min.js"></script>
        <style>
            div{
                border: 1px solid black;
                padding: 10px;
            }
    
            #div1 > p:nth-child(1){
                display: none;
            }
    
            #div1 > p:nth-child(2){
                visibility: hidden;
            }
        </style>
        
    </head>
    <body>
        <div>
            我是div的内容 HelloWorld
            <p>我是div里面的p元素</p>
        </div>
        <div>
            HelloEvery
            <h3 class="xx">我是div里面的h3元素</h3>
        </div>
        <div></div>
    
        <div id="div1">
            <p>我是第1个p元素</p>
            <p>我是第2个p元素</p>
            <p>我是第3个p元素</p>
            <input type="hidden">
            
        </div>
    
        <div id="demoDiv">
            <a href="">我是demoDiv的a标签</a>
            <p>我是demoDiv里面的第1个p</p>
            <p>我是demoDiv里面的第2个p</p>
            <p>我是demoDiv里面的第3个p</p>
            <p>我是demoDiv里面的第4个p</p>
            <p>我是demoDiv里面的第5个p</p>
        </div>
        <script>
            /* 
                内容选择器:
                    :contains(text)     匹配包含给定文本的元素
                    :has(selector)      匹配含有选择器所匹配的元素的元素
                    :parent             匹配含有子元素或者文本的元素
                    :empty              匹配包含给定文本的元素
            */
            // $("div:contains('Hello')").css("background","red"); // 选择包含"Hello"文本的div元素
    
            // $("div:has('p')").css("background","red"); // 选择包含p元素的div元素
            // $("div:has('.xx')").css("background","red"); // 选择包含class为xx元素的div元素
    
            // $("div:parent").css("background","red");
    
            // $("div:empty").css("background","red");
    
            /* 
                可见性选择器:
                    :hidden     匹配所有不可见元素（display:none），或者type为hidden的元素
                    :visible    匹配所有的可见元素
            */
    
            // 选择页面中所有不可见的元素
            // console.log($(":hidden"));
    
            // console.log($(":visible"));
    
            /* 
                属性选择器:
                    [attribute]         选择具有指定属性的元素      input[type]
                    [attribute=value]   选择具有指定属性并且指定值的元素    input[type=text]
                    [attribute!=value]  选择具有指定属性并且不是指定值的元素    input[type!=text]
                    [attribute^=value]  选择具有指定属性并且属性值以指定值开头的元素    input[name^=user]
                    [attribute$=value]  选择具有指定属性并且属性值以指定值结尾的元素    input[name$=Name]
                    [attribute*=value]  选择具有指定属性并且属性值包含指定值的元素  input[name*=e] 
                    [attrSel1][attrSel2][attrSelN]  属性选择器交集写法
            */
    
            /* 
                子元素选择器:它是基于元素的层级关系进行过滤的
                    :first-child    选择父元素的第一个子元素
                    :last-child     选择父元素的最后一个子元素
                    :nth-child()      选择父元素的第n个子元素
                        数值          选择第几个
                        odd/even      选择奇数/偶数子元素
                        表达式         选择符合表达式的元素
                    :nth-last-child()1.9+   从后向前数
                    :only-child      选择只有一个子元素的元素
    
                    :only-of-type1.9+ 
                    :first-of-type1.9+ 
                    :nth-of-type()1.9+ 
                    :nth-last-of-type()1.9+ 
                    :last-of-type1.9+ 
    
            */
            console.log($("#demoDiv>p:first"));
            console.log($("#demoDiv>p:first-child"));
    
    
        </script>
    
    </body>
    </html>

### 表单选择器 ###

*  :input：匹配所有 input, textarea, select 和 button 元素
 *  :text：匹配所有的单行文本框
 *  :password：匹配所有密码框
 *  :radio：匹配所有单选按钮
 *  :checkbox：匹配所有复选框
 *  :submit：匹配所有提交按钮
 *  :image：匹配所有图像域
 *  :reset：匹配所有重置按钮
 *  :button：匹配所有按钮
 *  :file：匹配所有文件域
 *  :hidden：匹配所有不可见元素，或者type为hidden的元素

### 表单对象属性选择器 ###

*  :enabled：匹配所有可用元素
 *  :disabled：匹配所有不可用元素
 *  :checked：匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
 *  :selected：匹配所有选中的option元素

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="js/jquery.min.js"></script>
    </head>
    <body>
        <form action="">
            单行文本框: <input type="text"> <br>
            密码框: <input type="password" disabled> <br>
            单选框: 
                <input type="radio" name="sex" id="" checked> 男<br>
                <input type="radio" name="sex" id=""> 女<br>
            复选框: 
                <input type="checkbox" name="" id=""> 足球
                <input type="checkbox" name="" id="" checked> 篮球
                <input type="checkbox" name="" id=""> 羽毛球 <br>
            文件上传框: 
                <input type="file" name="" id=""> <br>
            拾色器: 
                <input type="color" name="" id="" disabled> <br>
            日期控件: 
                <input type="date" name="" id="">
                <input type="datetime-local" name="" id="">
                <input type="month" name="" id="">
                <input type="time" name="" id="">
                <input type="week" name="" id=""> <br>
            电话号码框：
                <input type="tel" name="" id=""> <br>
            邮箱：
                <input type="email" name="" id=""> <br>
            url输入框: 
                <input type="url" name="" id=""> <br>
            文本域: 
                <textarea name="" id="" cols="30" rows="10"></textarea> <br>
            下拉框: 
                <select name="" id="">
                    <option value="">请选择</option>
                    <option value="初中">初中</option>
                    <option value="高中">高中</option>
                    <option value="大专" selected>大专</option>
                </select> <br>
    
            input按钮： 
                <input type="submit" value="提交按钮"> 
                <input type="reset" value="重置按钮">
                <input type="button" value="普通按钮">
                <input type="image">
                <br>
            button按钮: 
                <button type="submit">提交按钮</button>
                <button type="reset">重置按钮</button>
                <button type="button">普通按钮</button>
    
        </form>
        <script>
            /* 
                表单选择器:
                    :input      匹配所有 input, textarea, select 和 button 元素 
                    :text       匹配所有的单行文本框    input[type=text]
                    :password   匹配所有的单行文本框    input[type=password]
                    :radio      匹配所有单选按钮        input[type=radio]
                    :checkbox   匹配所有复选框
                    :submit     匹配所有提交按钮
                    :image      匹配所有图像域
                    :reset      匹配所有重置按钮
                    :button     匹配所有按钮
                    :file       匹配所有文件域
                表单对象属性:
                    :enabled    匹配所有可用元素
                    :disabled   匹配所有不可用元素
                    :checked    匹配所有选中的被选中元素(复选框、单选框等，包括select中的option)
            */
            // console.log($(":input"));
            // console.log($(":text"));
            // console.log($(":password"));
            // console.log($(":radio"));
            // console.log($(":checkbox"));
            // console.log($(":submit")); // input提交按钮、button提交按钮;但是input图片提交按钮拿不到
            // console.log($(":image"));
            // console.log($(":reset"));
            // console.log($(":button")); // 所有的button标签 和 input type类型为button
            // console.log($(":file"));
    
    
            // console.log($(":enabled"));
            // console.log($(":disabled"));
            console.log($(":checked"));
        </script>
    </body>
    </html>