JQuery基本知识点

一、什么是JQuery?

jQuery 是一个 JavaScript 库，极大地简化了 DOM操作的代码。

        //获取元素
        document.getElementById('btn')  //DOM
        $("#btn")  //JQuery

二、如何使用JQuery?

1、调用JQuery库

jQuery 安装 | 菜鸟教程 (runoob.com)

方法一：可以下载JQuery.js，将下载的文件放在网页的同一目录下。

方法二：或者直接引用服务器的Jquery库(如百度、菜鸟教程服务器)。

<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>

2、在新的<script>标签中写JQuery代码

所有 JQuery 函数都位于一个 document ready 函数中，确保在文档加载完成后再执行 JQuery函数，因为文档加载完成前执行函数可能获取不到相应目标元素。

<script>
    $(document).ready(function () {
         //代码写在这里
    });
</script>

三、JQuery增删改查操作

1、选择器

基本选择器

$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$("p")	选取 <p> 元素
$("#btn")	选取id="btn"的元素
$(".btn")	选取class="btn"的元素

层级选择器：后代选择器、子代选择器

$("p:first")	选取第一个 <p> 元素
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素

选取带某属性或某属性值的元素

$("[href]")	选取带有 href 属性的元素
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素

选取兄弟元素

$("...").next()/pre()	选取某元素的上一个或下一个元素
$("...").nextAll()/preAll()	选取某元素之前或之后的所有元素
$("...").siblings()	选取某元素除自己外的所有兄弟元素

2、属性

获取属性：$("...").attr("属性名")

修改属性：$("...").attr("属性名"，值)

3、html、文本、value值操作

获取：html()/text()/val()

修改：html("修改后的内容")/text("修改后的文本内容")/val("修改后的value值")

4、修改样式

(1).直接修改css属性

获取：$("...").css("属性名")

修改：$("...").css("属性名"，值)

(2).通过class批量修改样式

判断是否包含指定class: $("...").hasClass("类名")

添加class: $("...").addClass("类名")

移除class: $("...").removeClass("类名")

5、元素的添加和删除

新建元素： var $new=$("html代码")

添加元素： $("...").append($new)

删除元素： $("...").remove();

    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>

var $newli = $("<li>444</li>");
$("ul").append($newli);
$("ul li:first-child").remove();

四、事件绑定

语法：$(" ").bind( "事件类型"，function(e){} )

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery</title>

    <style>
        #btn {
            width: 90px;
            height: 30px;
        }
    </style>

    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#btn").bind("click", function (e) {
                console.log("clicked")
            });
        });
    </script>
</head>

<body>
    <button id="btn">button</button>
</body>

</html>

</html>

简写为

    <script>
        $(function () {
            $("#btn").click(function (e) {
                console.log("clicked");
            })
        })
    </script>

四、事件对象

上述函数中的“e”就是一个事件对象
事件对象包含与事件相关的信息（如事件发生时鼠标位置、键盘按键状态、触发对象等）
也提供可以影响事件在DOM中传递进程的一些方法

jQuery 事件 | 菜鸟教程 (runoob.com)