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

我是波哩个波

已于 2022-03-10 16:20:58 修改

阅读量721

点赞数

分类专栏： # jQuery从入门到精通文章标签： jquery 前端 javascript

于 2022-01-06 13:17:29 首次发布

本文链接：https://blog.csdn.net/ligonglanyuan/article/details/122340995

版权

jQuery从入门到精通专栏收录该内容

9 篇文章 1 订阅

订阅专栏

一、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>

我是波哩个波

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端系列教程之jQuery】03_jQuery核心函数和选择器

一、jQuery核心函数 jQuery([selector,[context]]) 这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它...
复制链接

扫一扫