学会JQuery，好用的停不下来

1. jquery 简介

1.1 什么是 jquery

jQuery 是一个 JavaScript 函数库。

说白了就是 jQuery 封装了 js，相当于一个 js 的工具类。

js 有的东西 jQuery 都有，此外它还提供了好多插件，简化了我们写的代码。

如果 js 是数码宝贝中的亚古兽，那 jQuery 就是进化之后的战斗暴龙兽，变得更强了。

1.2 为什么用 jquery

它兼容市面上所有的浏览器
免费开源，容量小
有很多好用的插件
简化代码。不需要在 script 标签里面写一堆又臭又长的代码了。

例如获取元素节点：

Javascript代码: var div = document.getElementById("div");
JQuery代码: var div = $("div");
复制代码

2. 使用

官网下载地址：

https://jquery.com/download/
复制代码

点击之后会看见很多乱七八糟的代码，这些东西就是 JQuery 的源码，复制粘贴保存为 jquery.js 文件。

然后在你的项目中引入。

引入语法格式：

<script type="text/javascript" src="jquery.js 文件的路径"></script>
复制代码

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一颗雷布斯</title>
    <script src="jquery.js"></script>
</head>
<body>
   
</body>
</html>
复制代码

我们还可以使用 JQuery.js 的在线引入：

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
.... 网上有很多
复制代码

3. 选择器

JQuery 的选择器可以操作 HTML 中的所有元素，其实就是 DOM 操作。

获取 JQuery 元素节点以$ 开头。

3.1 元素选择器

语法格式：

$("元素")
复制代码

例如：获取 div 元素节点

$("div")
复制代码

3.2 id 选择器

语法格式：

$("#id")
复制代码

例如：

<body>
    <p id="p1">马上考研了，祝大家全部上岸！</p>
    <script>
        var p1 = $("#p1");
    </script>
</body>
复制代码

3.3 class 选择器

语法格式：

$(".class")
复制代码

例如：

<body>
    <p class="p2">马上考研了，祝大家全部上岸！</p>
    <script>
        var p2 = $(".p2");
    </script>
</body>
复制代码

3.4 组合选择器

组合选择器是多个元素使用逗号分隔后形成的选择器，可以同时组合 id，class，标签名等。

语法格式：

$("id,class,标签名")
复制代码

例如：选择 id 为 p1，class 是 p2，所有 div 元素。

$("#p1,.p2,div")
复制代码

3.5 表单选择器

表单元素选择器主要是指文本框、单选框、复选框等元素的选择器。

选择所有文本框

$(":text")
复制代码

选择所有的密码框

$(":password")
复制代码

选择所有的单选框

$(":radio")
复制代码

选择所有的复选框

$(":checkbox")
复制代码

4. DOM 操作

我们在学 DOM 树的时候知道要想修改属性节点和文本节点的值，必须先找到他们所在的元素节点。

所以获取元素节点之后我们就可以随便操作元素节点下面的属性节点和文本信息了。

4.1 获取/设置内容

text() - 设置或返回所选元素的文本内容

例如：

<body>
    <p id="p1">马上考研了，祝大家全部上岸！</p>
    <script>
        var info = $("#p1").text();
        document.write("<h1>"+info+"</h1>");
    </script>
</body>
复制代码

运行结果：

html() - 设置或返回所选元素的内容（包括HTML元素）

例如：

<body>
    <p id="p1">同学们，马上期末考试了。<b>祝大家过！过！过！</b></p>
    <script>
        var info = $("#p1").html();
        document.write("<h1 style='color:red'>" + info + "</h1>");
    </script>
</body>
复制代码

运行结果：

val() - 设置或返回表单字段的值

例如：

<body>
    <input type="text" style="width: 210px;" value="你这个人除了长得好看，一无是处。">
    <script>
        var info = $("input").val();
        document.write("<h1 style='color:red'>"+info+"</h1>");
    </script>
</body>
复制代码

运行结果：

4.2 获取/设置属性

attr( ) 和 prop() 方法用于获取、设置属性。

语法格式：

JQuery元素节点.attr("属性名","属性值");
JQuery元素节点.prop("属性名","属性值");
复制代码

例如：

<body>
    <p id="p1">我是可爱又性感的P元素</p>
    <a href="http://www.baidu.com">我是一个多愁善感的超链接</a><br>
    <script>
        // 获取属性
       var id = $("#p1").attr("id");
       document.write("p标签的id属性值："+id+"<br>");
       document.write("a标签原来的href属性值："+$("a").attr("href")+"<br>");
       // 修改属性
       $("a").attr("href","https://www.bilibili.com/");
       document.write("a标签之后的href属性值："+$("a").attr("href")+"<br>");
    </script>
</body>
复制代码

运行结果：

4.3 添加元素

我们可以使用 JQuery 中的一些方法在 HTML 代码中添加新元素。

append() - 在元素的结尾插入内容。

例如：

<body>
    <p id="p1">床前明月光，</p>
    <script>
      $("#p1").append("疑是地上霜。")
    </script>
</body>

复制代码

运行结果：

prepend() - 在元素的开头插入内容

例如：

<body>
    <p id="p1">惊起一滩鸥鹭。</p></p>
    <script>
      $("#p1").prepend("争渡，争渡，")
    </script>
</body>
复制代码

运行结果：

before() - 在元素之前插入内容

例如：

<body>
    <h1>欲语泪先流。</h1>
    <script>
      $("h1").before("物是人非事事休，")
    </script>
</body>
复制代码

运行结果：

after() - 在元素之后插入内容

例如：

<body>
    <h1>《一剪梅·红藕香残玉簟秋》片段</h1>
    <script>
        var txt1 = "<p>一种相思，</p>";
        var txt2 = $("<p></p>").text("两处闲愁。");
        var txt3 = $("<p></p>").text("此情无计可消除，");
        var txt4 = "<p>才下眉头，</p>";
        var txt5 = "<p>却上心头。</p>";
        $("h1").after(txt1, txt2, txt3, txt4, txt5);
    </script>
</body>
复制代码

运行结果：

4.4 删除元素

使用 jQuery，可以很容易地删除已有的 HTML 元素。

remove() - 删除被选元素（包括子元素）

例如：

<body>
    <h1>下面div的内容都被删了</h1>
    <div>
        <p>我是div的子元素</p>
    </div>
    <script>
        $("div").remove();
    </script>
</body>
复制代码

运行结果：

empty() - 从被选元素中删除子元素

例如：

<body>
    <h1>div里面的二儿子被删除了</h1>
    <div>
        <p id="p1">我是div的大儿子</p>
        <p id="p2">我是div的二儿子</p>
    </div>
    <script>
        $("#p2").empty();
    </script>
</body>

复制代码

运行结果：

4.5 显示/隐藏元素

show() 方法显示元素

例如：

<body>
    <h1>隐藏的div浮出了水面</h1>
    <div style="display: none;">
        <p id="p1">我是div的大儿子</p>
        <p id="p2">我是div的二儿子</p>
    </div>
    <script>
        $("div").show();
    </script>
</body>
复制代码

运行结果：

hide() 方法隐藏元素

例如：

<body>
    <h1>div元素被隐藏了</h1>
    <div style="display: none;">
        <p id="p1">我是div的大儿子</p>
        <p id="p2">我是div的二儿子</p>
    </div>
    <script>
        $("div").hide();
    </script>
</body>
复制代码

运行结果：

4.6 操作 class 类

使用 JQuery 可以操作元素的 classs 属性的值。

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

例如：

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

<head>
    <meta charset="UTF-8">
    <title>一颗雷布斯</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        .pp {
            color: palevioletred;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <p>我是这条街上最靓的仔！</p>
    <script>
        $("p").addClass("pp");
    </script>
</body>

</html>
复制代码

运行结果：

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

例如：

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

<head>
    <meta charset="UTF-8">
    <title>一颗雷布斯</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        .p1 { color: palevioletred; }
        .p2 { font-size: 20px; }
        .p3 { font-weight: bold; }
    </style>
</head>

<body>
    <p class="p1 p2 p3">你，一会看我，一会看云。我觉得，你看我时很远，你看云时很近。</p>
    <script>
        $("p").removeClass("p1");
    </script>
</body>

</html>
复制代码

运行结果：

4.7 设置 css 属性

设置单个 css 属性

例如：

<body>
    <p>面朝大海，春暖花开。</p>
    <script>
        $("p").css("color","red");
    </script>
</body>
复制代码

运行结果：

设置多个 css 属性

设置多个 css 属性，需要使用大括号和键值对。

例如：

<body>
    <p>轻轻的我走了，正如我轻轻的来。</p>
    <script>
        $("p").css({"color":"red","font-size":"30px"});
    </script>
</body>
复制代码

运行结果：

4.8 遍历数组

each 方法可以遍历数组，对每个元素调用一次函数。

语法格式一：

$.each( 要遍历的数组, function(index,element) { 处理程序 } )

index：数组的下标
element：数组中的元素
复制代码

语法格式二：

jQuery 对象.each( function( index, element ) { 处理程序 } )

index：数组的下标
element：数组中的元素
复制代码

例一：

<script>
  var animals =["cat","pig","dog"];
  $.each(animals,function (index,element) {
      document.write("下标："+index+" 元素："+element+"<br>");
  })
</script>
复制代码

运行结果：

例二：

<body>
    <span>牛顿</span>
    <span>爱因斯坦</span>
    <span>特斯拉</span>
    <script>
      $("span").each(function(index,element) {
          document.write(index+" "+element.text()+ "</br>");
      })
    </script>
</body>
复制代码

运行结果：

5. 事件

事件专为用户交互而生。当用户发生某些行为时(例如按下键盘、点击按钮)会触发事件，从而执行指定函数中的代码。

注： JQuery 中的监听事件名称是 js 事件中去掉 on 后的内容。

5.1 JQuery 常用 DOM 事件

事件	描述
click	单击元素事件
mouseenter	鼠标进入某元素
mouseleave	鼠标离开某元素
hover	鼠标悬浮在某元素
keydown	按下键盘
submit	提交表单
change	文本框值改变
focus	获取焦点
blur	失去焦点

JQuery 中有两种处理事件的方法：监听事件和绑定事件。

5.2 监听事件

语法格式：

$(选择器).监听的事件名称(处理事件的函数);
复制代码

例一：监听点击事件

<body>
    <p>你点我一下，我给你弹个框框</p>
    <script>
        $("p").click(function () {
            alert("你可真是个机灵鬼");
        });
    </script>
</body>
复制代码

运行结果：

例二：监听鼠标悬浮事件

<body>
    <p>你把鼠标悬浮在我上面，我给你一个惊喜</p>
    <script>
        $("p").hover(function () {
            alert("你可真听话！！");
        });
    </script>
</body>
复制代码

运行结果：

5.3 on 绑定事件

on() 方法可以在被选择元素上添加事件处理函数。

语法格式：

.on("event",data,function)
 event：一个或者多个事件，多个之间空格分开。
 data：可选。传递的参数，json 格式。
 function: 可选。定义当事件发生时执行的函数。
复制代码

例一：绑定点击事件

<body>
    <p>你敢点我一下你试试！</p>
    <script>
       $("p").on("click",function () {
           alert("哎哟长脸了你是！")
       })
    </script>
</body>
复制代码

运行结果：

例二：绑定鼠标悬浮事件

<body>
    <p>点击输出名字</p>
    <h1></h1>
    <script>
       $("p").on("click",{name:"波吉"},function (event) {
         $("h1").html(event.data.name);
       })
    </script>
</body>
复制代码

运行结果：

6. DOM 加载后执行方法

我们知道在 DOM 树没有加载完毕的时候去执行 script 标签中的代码会报错，所以需要一个 DOM 加载后执行方法的入口。

方式一：

$(document).ready(function(){
   执行程序
});
复制代码

方式二：

$(function(){  
  执行程序
});  
复制代码

方式三：

jQuery(function($) {  
     执行程序
});  
复制代码

我们一般会使用方式二，因为它语法简单。

7. JQuery 案例：轮播图

轮播图就是隔一段时间切换一张图片。

所以我们要想做轮播图，只需要三步：

页面先初始化一张照片
调用时间间隔函数 setInterval，然后修改图片的 src 属性的值
当显示最后一张照片时，就替换成第一张照片

这次我们增加一点点功能：

增加按钮图标，点击按钮切换图片
按钮随图片的切换被选中

源代码：

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

<head>
    <meta charset="UTF-8">
    <title>一颗雷布斯</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        #carouseMain {
            width: 400px;
            margin: auto;
        }
        #btnDiv {
            width: 100px;
            border-radius: 40px;
            background-color: rgb(119, 117, 117);
            margin: auto;
            margin-top: -35px;
            opacity: 0.7;
        }
    </style>
</head>

<body>

    <body>
        <div id="carouseMain">
            <!-- 1.初始化一张照片 -->
            <img src="image/1.jpg" width="400px" height="200px" id="img1" />
        </div>
        <!-- 按钮 -->
        <div id="btnDiv">
            <input type="radio" name="carouseBtn" id="btn1" value="1" checked>
            <input type="radio" name="carouseBtn" id="btn2" value="2">
            <input type="radio" name="carouseBtn" id="btn3" value="3">
            <input type="radio" name="carouseBtn" id="btn4" value="4">
        </div>

        <script>
            // 2. 每隔一段时间调用修改图片的方法
            setInterval("changeImg()", 2000);

            var i = 0
            function changeImg() {
                i++;
                // 3. 修改图片
                $("#img1").attr("src", "image/" + i + ".jpg");
                // 4. 设置按钮选中
                $("#btn" + i).prop("checked", true);
                // 当为最后一张图片时，就替换成第一张图片
                i = (i== 4) ? 0 : i;

            }
            // 点击按钮事件
            $(':radio').change(function () {
                // 选中的按钮的 value 值
                var value = this.value;
                $("#img1").attr("src", "image/" + value + ".jpg");
                $("#btn" + value).prop("checked", true);
                i = value;
                i = (i == 4) ? 0 : i;
            });
        </script>
    </body>
</body>
</html>
复制代码

运行结果：