jQuery的基本使用

最新推荐文章于 2023-08-12 10:47:33 发布

小贤的前端

最新推荐文章于 2023-08-12 10:47:33 发布

阅读量256

点赞数 1

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/wen110898/article/details/120225382

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.介绍

jQuery 是一个 JavaScript 函数库。
jQuery 极大地简化了 JavaScript 编程。

jQuery 库包含以下特性：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

2.安装

    1.本地下载引用 <script src="jquery.js"></script>
    2.CDN载入
        1) Google CDN
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">

        2) Microsoft CDN
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">

3.语法

    基础语法是：$(selector).action()
        美元符号定义 jQuery
        选择符（selector）“查询”和“查找” HTML 元素
        jQuery 的 action() 执行对元素的操作

    示例
        $(this).hide() - 隐藏当前元素
        $("p").hide() - 隐藏所有段落
        $(".test").hide() - 隐藏所有 class="test" 的所有元素
        $("#test").hide() - 隐藏所有 id="test" 的元素

4.文档就绪函数

    文档就绪函数：$(document).ready(function(){}) 
    是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

5.jQuery选择器

    选择器允许您对元素组或单个元素进行操作。

5.1 jQuery元素选择器

        jQuery 使用 CSS 选择器来选取 HTML 元素。
        $("p") 选取 <p> 元素。
        $("p.intro") 选取所有 class="intro" 的 <p> 元素。
        $("p#demo") 选取所有 id="demo" 的 <p> 元素。

5.2 jQuery 属性选择器

        jQuery 使用 XPath 表达式来选择带有给定属性的元素。
        $("[href]") 选取所有带有 href 属性的元素。
        $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
        $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
        $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

5.3 jQuery CSS 选择器

        jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

        下面的例子把所有 p 元素的背景颜色更改为红色：
        $("p").css("background-color","red");

5.4 jQuery其他选择器

        $(this)  	当前 HTML 元素
        $("ul li:first")    每个 <ul> 的第一个 <li> 元素
        $("div#intro .head")    id="intro" 的 <div> 元素中的所有 class="head" 的元素

6.事件

    jQuery 事件处理方法是 jQuery 中的核心函数。
    事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。

    实例：
	  <script>
        	$(document).ready(function(){
            	$("button").click(function(){
                	$("p").hide();
            	});
        	});
	 </script>

        在上面的例子中，当按钮的点击事件被触发时会调用一个函数：
            $("button").click(function() {..some code... } )
        该方法隐藏所有 <p> 元素：
            $("p").hide();

    $(selector).click(function(){})     触发或将函数绑定到被选元素的点击事件
    $(selector).dblclick(function)      触发或将函数绑定到被选元素的双击事件
    $(selector).focus(function)  	    触发或将函数绑定到被选元素的获得焦点事件
    $(selector).mouseover(function)     触发或将函数绑定到被选元素的鼠标悬停事件

7.属性

获取属性 attr() 设置或返回匹配元素的属性和值
1.attr(‘title’) 一个参数时：获取title这个属性

<!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="./jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                // console.log($('a').attr('href'));
                alert($('a').attr('href'));
            })
        })
    </script>
</head>

<body>
    <a href="http://www.baidu.com">跳转百度</a>
    <button>显示a标签内的href内容</button>
</body>

</html>

2.attr(‘title’,‘hello’) 两个参数时：获取title这个属性并修改成第二个参数
attr() 方法也允许您同时设置多个属性。

<!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="./jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function () {
            
            // $('button').click(function () {
            //     $('a').attr('href', 'http://www.baidu.com')
            // });


            //  attr() 方法也允许您同时设置多个属性。 
            $('button').click(function () {
                $('a').attr({
                    'href': 'http://www.baidu.com',
                    'title': '百度'
                });
            });

        })
    </script>
</head>

<body>
    <!-- <a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a>
    <button>改变href的值</button>
    <p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值。</p>  -->

    <a href="http://www.w3school.com.cn" id="w3s" title="W3S教程">W3School.com.cn</a>
    <button>改变href的值</button>
    <p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值。</p>
</body>

</html>

8.设置内容

设置内容 - text()、html() 以及 val()

text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容（包括 HTML 标记）
val() 设置或返回表单字段的值

<!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="./jquery-3.6.0.js"></script>
    <script>

        // text() - 设置或返回所选元素的文本内容
        // html() - 设置或返回所选元素的内容（包括 HTML 标记）
        // val() - 设置或返回表单字段的值

        $(document).ready(function () {
            $("#btn1").click(function () {
                $("#test1").text("Hello world!");
            });
            $("#btn2").click(function () {
                $("#test2").html("<b>Hello world!</b>");
            });
            $("#btn3").click(function () {
                $("#test3").val("Dolly Duck");
            });
        })
    </script>
</head>

<body>
    <p id="test1">这是段落。</p>
    <p id="test2">这是另一个段落。</p>
    <p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
    <button id="btn1">设置文本</button>
    <button id="btn2">设置 HTML</button>
    <button id="btn3">设置值</button>
</body>

</html>

9.添加元素

jQuery append() 在被选元素的结尾插入内容。

<!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="./jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function () {
            $('#btn1').click(function () {
                $('p').append('<b>add appended text  </b>')
            });

            $('#btn2').click(function () {
                $('ul').append('<li>appended li </li>')
            })
        })
    </script>
</head>

<body>

    <p>This is paragraph</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>

    <button id="btn1">追加文本</button>
    <button id="btn2">追加列表项</button>
</body>

</html>

jQuery prepend() 在被选元素的开头插入内容。

<!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="./jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function () {
            $('#btn1').click(function () {
                $('p').prepend('<b>add appended text  </b>')
            });

            $('#btn2').click(function () {
                $('ul').prepend('<li>appended li </li>')
            })
        })
    </script>
</head>

<body>

    <p>This is paragraph</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>

    <button id="btn1">追加文本</button>
    <button id="btn2">追加列表项</button>
</body>

</html>

jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="./jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
                $("img").before("<b>Before</b>");
            });

            $("#btn2").click(function () {
                $("img").after("<i>After</i>");
            });
        });
    </script>
</head>

<body>
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.piaodown.com%2Fupload%2F20176%2F2017060127336317.jpg&refer=http%3A%2F%2Fwww.piaodown.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633768422&t=8eb3ee19e1e33f7c62e01c9f138331bc"/>
    <br><br>
    <button id="btn1">在图片前面添加文本</button>
    <button id="btn2">在图片后面添加文本</button>
</body>

</html>

10.删除元素

remove() 删除被选元素（及其子元素）
remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
empty() 从被选元素中删除子元素

<!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="./jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function () {
            // remove() 方法删除被选元素及其子元素。
            // $('button').click(function () {
            //     $('.c2').remove();
            // });

            // remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
                

            // jQuery empty() 方法删除被选元素的子元素。
            // $('button').click(function () {
            //     $('.c2').empty();
            // });
            // 我是class1
            // 我是class3
        })
    </script>
</head>

<body>
    <div class="c1">我是class1</div>
    <div class="c2">我是class2
        <div class="c2.1">我是class2.1</div>
        <div class="c2.2">我是class2.2</div>
    </div>
    <div class="c3">我是class3</div>
    <button>删除class2</button>
</body>

</html>

思考：

明明empty删除的是选中元素的子节点，为什么class2没有了？

打开控制台查看器可以看到，class2还是存在的，但是’我是class2’就不存在了，
是因为在DOM里’我是class2’是一个文本节点，在使用empty方法删除的时候是删除他选中的子节点，
这时候文本节点也包括在内一起被删除了。

11.获取并设置 CSS 类

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

addClass() 向被选元素添加一个或多个类

<!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="./jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("h1,h2,p").addClass("blue");
                $("div").addClass("important");
            });
        })
    </script>
    <style>
        .important {
            font-weight: bold;
            font-size: xx-large;
        }

        .blue {
            color: blue;
        }
    </style>
</head>

<body>
    <h1>标题 1</h1>
    <h2>标题 2</h2>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <div>这是非常重要的文本！</div>
    <br>
    <button>向元素添加类</button>
</body>

</html>

removeClass() 从被选元素删除一个或多个类

<!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="./jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("h1,h2,p").removeClass("blue");
            });
        })
    </script>
    <style>
        .blue {
            color: blue;
        }
    </style>
</head>

<body>
    <h1 class="blue">标题 1</h1>
    <h2 class="blue">标题 2</h2>
    <p class="blue">这是一个段落。</p>
    <p>这是另一个段落。</p>
    <br>
    <button>从元素上删除类</button>
</body>

</html>

toggleClass() 对被选元素进行添加/删除类的切换操作

<!DOCTYPE html>
<html lang="em">

<head>
    <script src="./jquery-3.6.0.js">
    </script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("h1,h2,p").toggleClass("blue");
            });
        });
    </script>
    <style type="text/css">
        .blue {
            color: blue;
        }
    </style>
</head>

<body>

    <h1>标题 1</h1>
    <h2>标题 2</h2>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <button>切换 CSS 类</button>
</body>

</html>

css() 设置或返回样式属性

<!DOCTYPE html>
<html>

<head>
    <script src="./jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                alert("Background color = " + $("p").css("background-color"));
            });
        });
    </script>
</head>

<body>
    <h2>这是标题</h2>
    <p style="background-color:pink">这是一个段落。</p>
    <p style="background-color:chartreuse">这是一个段落。</p>
    <p style="background-color:cyan">这是一个段落。</p>
    <button>返回 p 元素的背景色</button>
</body>

</html>

设置返回多个css属性

<!DOCTYPE html>
<html lang="em">

<head>
    <script src="./jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").css({ "background-color": "yellow", "font-size": "200%" });
            });
        });
    </script>
</head>

<body>
    <h2>这是标题</h2>
    <p style="background-color:pink">这是一个段落。</p>
    <p style="background-color:chartreuse">这是一个段落。</p>
    <p style="background-color:cyan">这是一个段落。</p>
    <p>这是一个段落。</p>
    <button>为 p 元素设置多个样式</button>
</body>

</html>

12.jQuery静态方法

    静态方法属于定义在jQuery函数上的方法，通过jQuery或者$直接调用的方法

12.1数组及对象操作：each、map、toArray、merge

        each()通用遍历方法，可用于遍历对象和数组
        map()把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象

12.2测试操作：

1.type()

        用于检测obj的数据类型
            console.log($.type($)); //function
            console.log(jQuery.type(true) === "boolean");//true
            console.log(jQuery.type(3) === "number");//true
            console.log(jQuery.type("test") === "string");//true
            console.log(jQuery.type(function(){}) === "function");//true
            console.log(jQuery.type([]) === "array");//true

2.isEmptyObject()

        测试对象是否是空对象（不包含任何属性）,这个方法既检测对象本身的属性，也检测从原型继承的属性
            console.log(jQuery.isEmptyObject({})); // true
            console.log(jQuery.isEmptyObject({ foo: "bar" })); //false

3.isPlainObject()

        测试对象是否是纯粹的对象（通过 "{}" 或者 "new Object" 创建的）
        console.log(jQuery.isPlainObject({})); // true
        console.log(jQuery.isPlainObject("test")); // false
        console.log($.isPlainObject($('body')))//false

4.isNumberic()

        确定它的参数是否是一个数字
        $.isNumeric() 方法检查它的参数是否代表一个数值。如果是这样，它返回 true。否则，它返回false。该参数可以是任何类型的
            console.log($.isNumeric("-10"));  // true
            console.log($.isNumeric(16));     // true
            console.log($.isNumeric(0xFF));   // true
            console.log($.isNumeric("0xFF")); // true
            console.log($.isNumeric("8e5"));  // true (exponential notation string)
            console.log($.isNumeric(3.1415)); // true
            console.log($.isNumeric(+10));    // true
            console.log($.isNumeric(0144));   // true (octal integer literal)
            console.log($.isNumeric(""));     // false
            console.log($.isNumeric({}));     // false (empty object)
            console.log($.isNumeric(NaN));    // false
            console.log($.isNumeric(null));   // false
            console.log($.isNumeric(true));   // false
            console.log($.isNumeric(Infinity)); // false
            console.log($.isNumeric(undefined)); // false
            注意：其他更多关于测试的操作，例如$.isArray(obj)判断是否是数组、
            $.isFunction(obj)判断是否是函数等，请移步[https://jquery.cuishifeng.cn/](https://jquery.cuishifeng.cn/)

12.3字符串操作：

1.param

        将表单元素数组或者对象序列化。
            var obj={name:"张三",age:12}
            var str = jQuery.param(obj);
            $("#results").text(str);

2.trim

        去掉字符串起始和结尾的空格,多用于用户数据的清洗
            console.log('--'+$.trim(" hello, how are you? ")+'--');

小贤的前端

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的基本使用

1.介绍jQuery 是一个 JavaScript 函数库。jQuery 极大地简化了 JavaScript 编程。jQuery 库包含以下特性：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities2.安装 1.本地下载引用 <script src="jquery.js"></script> 2.CDN载入 1) Google
复制链接

扫一扫