[Web] JavaScript——JQuery简介_jquery javascript-优快云博客

<head>
    <meta charset="UTF-8">
    <title>Title_02</title>
    <script type="text/javascript" src="./js/JQuery-3.7.0.js"></script>
    <script type="text/javascript">
        $(function() { // 相当于window.onload = function() {}
            var $btnObj = $("#btn_01"); // JQ中规定,变量前也要加$. #同样是按id查找
            $btnObj.click(function() {
                alert("JQuery的单击事件");
            });
        });
    </script>
</head>
<body>
    <button id="btn_01">Hello</button>
</body>

2、常见问题

（1）JQuery中的$是什么？

$是一个函数。

（2）怎么为按钮添加点击响应函数（事件）？

使用JQuery查询到标签对象；
使用 标签对象.click( function() {} ) 来绑定；
注意 $ 符号。

三、核心函数介绍（$）

$ 是jQuery的核心函数，能完成jQuery的很多功能。$() 就是调用 $ 这个函数。

1、传入参数为【函数】时：

表示页面加载完成后自动执行。相当于：

window.onload = function() {}

2、传入参数为【HTML字符串】时：

会创建这个HTML标签对象。下面这个样例会创建出一个按钮：

<head>
    <meta charset="UTF-8">
    <title>Title_02</title>
    <script type="text/javascript" src="./js/JQuery-3.7.0.js"></script>
    <script type="text/javascript">
        $(function() {
            $("<button id=\"btn_01\">Hello</button>").appendTo("body");
        });
    </script>
</head>
<body>

</body>

3、传入参数为【选择器字符串】时：

如下是根据id查询标签对象：

var $Obj = $("#id的属性值");

诸如其他的标签名选择器、类选择器，都是一样的。

var $Obj = $(".class_value");

var $Obj = $("div");

4、传入的参数为【DOM对象】时：

会将dom对象转换为jQuery对象。

<head>
    <meta charset="UTF-8">
    <title>Title_02</title>
    <script type="text/javascript" src="./js/JQuery-3.7.0.js"></script>
    <script type="text/javascript">
        $(function() {
            var btnObj = document.getElementById("btn01");
            alert(btnObj);
            var jqObj = $(btnObj);
            alert(jqObj);
        });

    </script>
</head>
<body>
    <button id = "btn01">按钮1</button>
</body>

四、如何区分jQuery对象和Dom对象

1、什么是jq对象，什么是dom对象？

（1）Dom对象

通过 getElementById()、getElementsByName()、getElementsByTagName()、createElement() 等方法得到的对象，都是 Dom 对象。

alert的效果：[object HTMLxxxElement]

（2）jQuery对象

通过 jQuery 提供的 API 创建的对象、jQuery 包装的 Dom 对象、jQuery 提供的 API 查询到的对象，都是 jQuery 对象。

alert的效果：[obejct Object]

2、jQuery对象的本质

jQuery对象是 Dom 对象的数组 + jQuery 提供的一系列函数功能。

<head>
    <meta charset="UTF-8">
    <title>Title_02</title>
    <script type="text/javascript" src="./js/JQuery-3.7.0.js"></script>
    <script type="text/javascript">
        $(function() {
            var $btnObj = $("button");
            for (var i = 0; i < $btnObj.length; ++ i) {
                alert($btnObj[i]); // 会输出[obejct HTMLButtonElement]，说明是DOM对象
            }
            // 或者使用each()遍历，其中this相当于$btnObj[i]
            $btnObj.each(function () {
                alert(this);
            });
        });
    </script>
</head>
<body>
    <button id = "btn01">按钮1</button>
    <button id = "btn02">按钮2</button>
    <button id = "btn03">按钮3</button>
</body>

3、Dom对象和jQuery对象的转换

（1）Dom对象转为jQuery对象

// 1.先有dom对象
var dom_obj = document.getElementById("id");

// 2.使用 $(dom对象) 转换
var $jq_obj = $(dom_obj);

（2）jQuery对象转为Dom对象

// 1.先有jQuery对象
var $jq_obj = $("button");

// 2.下标访问
alert($jq_obj[0]);

五、jQuery选择器

1、基础选择器

选择字符串的写法与 CSS 一致。

$("div");

$("#id_value");

$(".class_value");

$("span, div, p.class_value");

2、层级选择器

（1）ancestor descendant：在给定祖先标签下，匹配所有后代标签（不是上下层关系也要匹配）。

// 匹配表单中的所有input标签
var $input_objs = $("form input");

（2）parent > child：在给定父标签下，匹配所有子标签（仅上下层之间匹配）。

// 匹配表单的所有下一级的input标签
var $input_objs = $("form > input");

（3）prev + next：返回所有紧接在prev之后的next标签（同级、前后紧挨）。

JS文件：

// 匹配所有紧跟在label后的input标签
var $input_objs = $("label + input");

HTML文件：

<body>
    <label>Name:</label>
    <input type="text"/>
</body>

（4）prev~siblings：匹配与prev标签之后的所有siblings标签（同级）。

JS文件：

var $input_objs = $("form~input");

HTML文件：

<body>
    <form>
        <input/>
    </form>
    <input/> <!-- 同级才会匹配到 -->
    <input/> <!-- 同级才会匹配到 -->
</body>

注意：以上所有的prev和next、siblings的标识，可以是标签、#id、.class等等。

3、基本过滤选择器

（1）:first

$("button:first"); //获取匹配结果（buttons）的第一个元素（button）。

（2）:last

$("button:last"); //获取匹配结果（buttons）的最后一个元素（button）。

（3）:not(selector)

$("input:not(:checked)"); //查找所有未选中的input标签。（:checked是表单属性）

（4）:even

$("tr:even"); //查找表格的1、3、5……行（即索引值0、2、4……）。

（5）:odd

与 :even 类似，取索引值为奇数的。

（6）:eq(index)

匹配一个给定索引值的元素。

$("tr:eq(1)"); //查找第二行。

（7）:gt(index)

匹配所有大于给定索引值的元素。

（8）:lt(index)

匹配所有小于给定索引值的元素。

（9）:header

匹配如：h1、h2、h3之类的标题元素。

$(":header").css("background", "#EEE"); //给页面所有标题加上背景色。

（10）:animated

匹配所有正在执行动画的元素。

4、内容过滤选择器

（1）:contains(text)

匹配包含给定text的元素。

（2）:empty

匹配所有空元素（即不包含任何子节点）。

（3）:parent

匹配所有非空元素。

（4）:has(selector)

匹配包含“selector匹配的元素”的元素。

$("div:has(p)"); //返回包含了p标签的div标签。

5、属性过滤选择器

（1）[attribute]

匹配包含给定属性的元素。

$("div[id]"); //查找所有包含id属性的div标签。

（2）[attribute=value]

匹配包含给定属性值的元素。

$("input[name=‘myName’]"); //查找所有name属性值为myName的input标签。

注意属性值要用单引号括起来。

（3）[attribute!=value]

匹配没有这个属性，或者有属性、但是属性值不对的元素。

（4）[attribute^=value]

匹配属性值以value开头的元素。

（5）[attribute$=value]

匹配属性值以value结尾的元素。

（6）[attribute*=value]

匹配属性值包含value的元素。

（7）[selector][selector][selector]

复合属性选择器，需要同时满足多个条件。

$("input[id][name&='man']"); // 返回id属性值以man结尾的input标签

6、表单过滤选择器

（1）:input

匹配所有 input、textarea、select、button 元素。

$(":input");

（2）:text

匹配所有的单行文本框。也就是<input type="text">的元素。

（3）:password

匹配所有的密码框。

（4）:radio

匹配所有的单选按钮。

（5）:checkbox

匹配所有的复选框。

（6）:submit

匹配所有的提交按钮。

（7）:reset

匹配所有的重置按钮。

（8）:button

匹配所有按钮。

（9）:file

匹配所有文件上传域。

（10）:hidden

匹配不可见的元素，或type=hidden的元素。

下面四个是属性相关的选择器

（11）:enabled

匹配所有可用的元素。

$(":input:enabled"); // 返回所有可用的可输入元素。

（12）:disabled

匹配所有不可用的元素。

（13）:checked

匹配所有选中的元素。（不包含select中的option）

（14）:selected

匹配所有选中的多个option元素。

六、jQuery属性操作

1、html()

它可以设置和获取起始标签和结束标签中的内容。跟 dom 属性的 innerHTML 一样。

<head>
    <meta charset="UTF-8">
    <title>Title_02</title>
    <script type="text/javascript" src="./js/JQuery-3.7.0.js"></script>
    <script type="text/javascript">
        $(function() {
            alert($("div").html()); // 获取
            $("div").html("这个div里面啥都没有");
        });
    </script>
</head>
<body>
    <div>
        这是一个div标签
        <span>
            这是一个span标签
        </span>
    </div>
</body>

2、text()

它可以设置和获取起始标签和结束标签中的文本。跟 dom 属性的 innerText 一样，也是设置或者获取成文本。使用方法类似html()。

3、val()

它可以设置和获取表单项的value属性值。跟 dom 属性 value 一样。

<head>
    <meta charset="UTF-8">
    <title>Title_02</title>
    <script type="text/javascript" src="./js/JQuery-3.7.0.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#btn01").click(function() {
                alert($("#btn01").val());
            });
            $("#btn02").click(function() {
                $("#btn02").val("按钮2的value已更改");
                alert($("#btn02").val());
            });
        });
    </script>
</head>
<body>
    <button id = "btn01" value = "这是按钮1的value">按钮1</button>
    <button id = "btn02" value = "这是按钮2的value">按钮2</button>
</body>

val()还可以通过value值设置表单项的选中状态：

<head>
    <meta charset="UTF-8">
    <title>Title_02</title>
    <script type="text/javascript" src="./js/JQuery-3.7.0.js"></script>
    <script type="text/javascript">
        $(function() {
            // 批量操作单选框选中状态
            $(":radio").val(["radio1"]);
            // 批量操作复选框选中状态
            $(":checkbox").val(["checkbox3", "checkbox1", "checkbox2"]);
            // 同时操作不同的表单项
            $(":radio, :checkbox, #multiple").val(["radio2", "checkbox1", "checkbox2", "opt2"]);
        });
    </script>
</head>
<body>
    单选：
    <input type = "radio" value = "radio1"/> radio1
    <input type = "radio" value = "radio2"/> radio2
    <br/>
    多选：
    <input type = "checkbox" value = "checkbox1"/> checkbox1
    <input type = "checkbox" value = "checkbox2"/> checkbox2
    <input type = "checkbox" value = "checkbox3"/> checkbox3
    <br/>
    下拉多选：
    <select id = "multiple" multiple = "multiple"> <!-- 把multiple属性设置成multiple就是多选 -->
        <option value = "opt1">opt1</option>
        <option value = "opt2">opt2</option>
        <option value = "opt3">opt3</option>
    </select>
</body>

4、attr()（atrribute）和 prop()

都可以设置和获取属性的值。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
    <script type = "text/javascript">
        $(function() {
            // attr()
            alert($(":checkbox:first").attr("name")); // 获取
            $(":checkbox:first").attr("name", "i don't know checkbox1"); // 设置

            // prop()
            alert($(":checkbox:eq(1)").prop("name")); // 获取
            $(":checkbox:eq(1)").prop("name", "i don't know checkbox2"); // 设置

            alert($(":checkbox:eq(0)").attr("checked")); // undefined
            alert($(":checkbox:eq(1)").prop("checked")); // false
        });
    </script>
</head>
<body>
    多选：
    <input name = "checkbox1" type = "checkbox" value = "checkbox1"/> checkbox1
    <input name = "checkbox2" type = "checkbox" value = "checkbox2"/> checkbox2
</body>

那他们的区别是什么呢？看到代码中第三、四个 alert() 的注释，说明 attr() 在操作属性时，对未选中的会返回 undefined，而 prop() 会返回 false。

因此，attr() 不推荐操作 checked、readOnly、selected、disabled 等等。相反，prop() 只推荐操作 checked、readOnly、selected、disabled 等等。

注意：对于 $ 返回的数组，要使用 :eq(index) 来访问单个元素。

4、练习

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
    <script type = "text/javascript">
        $(function() {
            $("#button1").click(function (){
                $(":checkbox").prop("checked", true);
            });

            $("#button2").click(function (){
                $(":checkbox").prop("checked", false);
            });

            $("#button3").click(function (){
                // 查询全部的球类复选框
                $(":checkbox[class='hobby']").each(function () {
                    // 在each遍历的function函数中，有一个this对象，这个this对象就是当前便遍历的dom对象
                    this.checked = !this.checked;
                });
                // 最后检查是否全选/全不选
                var allNum = $(":checkbox[class = 'hobby']").length; // 所有球类数量
                var selectNum = $(":checkbox[class = 'hobby']:checked").length; // 所有选中的球类数量
                $("#checkbox1").prop("checked", allNum == selectNum);
            });

            $("#button4").click(function() {
                // 获取选中的球类的复选框
                $(":checkbox[class = 'hobby']:checked").each(function() {
                    alert(this.value); // this是一个dom对象，不能用val()
                });
            });

            // 给全选/全不选的复选框绑定单击事件
            $("#checkbox1").click(function() {
                // 在事件的function函数中，有一个this对象，这个this对象是当前正在响应事件的dom对象。
                $(":checkbox[class = 'hobby']").prop("checked", this.checked);
            });

            // 给所有球类复选框绑定单击事件
            $(":checkbox[class = 'hobby']").click(function() {
                // 检查是否全选/全不选
                var allNum = $(":checkbox[class = 'hobby']").length; // 所有球类数量
                var selectNum = $(":checkbox[class = 'hobby']:checked").length; // 所有选中的球类数量
                $("#checkbox1").prop("checked", allNum == selectNum);
            });
        });
    </script>
</head>
<body>
<form method = "post" action = "">
    你爱好的运动是？
    <input id = "checkbox1" type = "checkbox" value = "全选/全不选"/>全选/全不选
    <br/>
    <input id = "checkbox2" class = "hobby" type = "checkbox" value = "足球"/>足球
    <input id = "checkbox3" class = "hobby" type = "checkbox" value = "篮球"/>篮球
    <input id = "checkbox4" class = "hobby" type = "checkbox" value = "羽毛球"/>羽毛球
    <input id = "checkbox5" class = "hobby" type = "checkbox" value = "排球"/>排球
    <br/>
    <button id = "button1" type = "button" value = "全选"> 全选 </button>
    <button id = "button2" type = "button" value = "全不选"> 全不选 </button>
    <button id = "button3" type = "button" value = "反选"> 反选 </button>
    <button id = "button4" type = "button" value = "提交"> 提交 </button>
</form>
</body>

注意：button标签也要写上 type = "button"，否则页面会进行刷新，点击事件失效。

七、Dom对象的增删改

1、内部插入

（1）appendTo()

a.appendTo(b)：把 a 插入到 b 的子元素的末尾，成为 b 的最后一个子元素。

（2）prependTo(b)

a.prependTo(b)：把 a 插入到 b 的子元素的首位，成为 b 的第一个子元素。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
    <script type = "text/javascript">
        $(function() {
            $("<h1> 把这个h1标签插入到#div1的子元素的第一位 </h1>").prependTo($("#div1"));
            $("<h1> 把这个h1标签插入到#div1的子元素的最后一位 </h1>").appendTo($("#div1"));
        });
    </script>
</head>
<body>
    多选：
    <input id = "checkbox1" type = "checkbox" value = "checkbox1"/> checkbox1
    <br/>
    <div id = "div1"> 这是一个div1标签（一开始是第一个子元素） </div>
    <br/>
    多选：
    <input id = "checkbox2" type = "checkbox" value = "checkbox2"/> checkbox2
</body>

2、外部插入

（1）insertAfter()

a.insertAfter(b)：把 a 插入到 b 的后一位，得到 ba。

（2）insertBefore()

a.insertBefore(b)：把 a 插入到 b 的前一位，得到 ab。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
    <script type = "text/javascript">
        $(function() {
            $("<h1> 把这个h1标签插入到#div1的前一位 </h1>").insertBefore($("#div1"));
            $("<h1> 把这个h1标签插入到#div1的后一位 </h1>").insertAfter($("#div1"));
        });
    </script>
</head>
<body>
    多选：
    <input id = "checkbox1" type = "checkbox" value = "checkbox1"/> checkbox1
    <br/>
    <div id = "div1"> 这是一个div1标签（一开始是第一个元素） </div>
    <br/>
    <div id = "div2"> 这是一个div2标签（一开始是第二个元素） </div>
    <br/>
    多选：
    <input id = "checkbox2" type = "checkbox" value = "checkbox2"/> checkbox2
</body>

3、替换

（1）replaceWith()

a.replaceWith(b)：把所有的 a 换成 b。

（2）replaceAll()

a.replaceAll(b)：把所有的 b 换成 a。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
    <script type = "text/javascript">
        $(function() {
            $(".class1").replaceWith("<h1> .class1换成了h1标签 </h1>");
            $("<h1> .class2换成了h1标签 </h1>").replaceAll($(".class2"));
        });
    </script>
</head>
<body>
    多选：
    <input id = "checkbox1" type = "checkbox" value = "checkbox1"/> checkbox1
    <br/>
    <div class = "class1"> 这是一个div1标签（一开始是第一个元素） </div>
    <br/>
    <div class = "class1"> 这是一个div2标签（一开始是第二个元素） </div>
    <br/>
    <div class = "class2"> 这是一个div3标签（一开始是第三个元素） </div>
    <br/>
    <div class = "class2"> 这是一个div4标签（一开始是第四个元素） </div>
    <br/>
    多选：
    <input id = "checkbox2" type = "checkbox" value = "checkbox2"/> checkbox2
</body>

4、删除

（1）remove()

a.remove()：删除 a 标签。

（2）empty()

a.empty()：清空 a 标签中起始标签和结束标签之间的内容，但是保留 a 标签及其属性。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
    <script type = "text/javascript">
        $(function() {
            $(".class1").remove();
            $(".class2").empty();
        });
    </script>
</head>
<body>
    多选：
    <input id = "checkbox1" type = "checkbox" value = "checkbox1"/> checkbox1
    <br/>
    <div class = "class1"> 这是一个div1标签（一开始是第一个元素） </div>
    <br/>
    <div class = "class1"> 这是一个div2标签（一开始是第二个元素） </div>
    <br/>
    <div class = "class2"> 这是一个div3标签（一开始是第三个元素） </div>
    <br/>
    <div class = "class2"> 这是一个div4标签（一开始是第四个元素） </div>
    <br/>
    多选：
    <input id = "checkbox2" type = "checkbox" value = "checkbox2"/> checkbox2
</body>

5、练习

（1）从左到右、从右到左

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type = "text/css">
        select {
            width: 100px;
            height: 140px;
        }
        div {
            width: 130px;
            float: left;
            text-align: center;
        }
    </style>
    <script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
    <script type = "text/javascript">
        $(function() {
            // 选中添加到右边
            $("#btn_1").click(function() {
                // 把左边多选框中选中的选项，添加到右边的多选框
                $("select:eq(0) > option:selected").appendTo($("select:eq(1)"));
                // 将选中效果移除
                $("select:eq(1) > option:selected").prop("selected", false);
            });

            // 全部添加到右边
            $("#btn_2").click(function() {
                // 把左边多选框中所有的选项，添加到右边的多选框
                $("select:eq(0) > option").appendTo($("select:eq(1)"));
            });

            // 选中添加到左边
            $("#btn_3").click(function() {
                // 把右边多选框中选中的选项，添加到左边的多选框
                $("select:eq(1) > option:selected").appendTo($("select:eq(0)"));
                // 将选中效果移除
                $("select:eq(0) > option:selected").prop("selected", false);
            });

            // 全部添加到左边
            $("#btn_4").click(function() {
                // 把左边多选框中所有的选项，添加到右边的多选框
                $("select:eq(1) > option").appendTo($("select:eq(0)"));
            });
        });
    </script>
</head>
<body>
    <div id = "left">
        <select multiple = "multiple">
            <option value = "opt_1"> 选项1 </option>
            <option value = "opt_2"> 选项2 </option>
            <option value = "opt_3"> 选项3 </option>
            <option value = "opt_4"> 选项4 </option>
            <option value = "opt_5"> 选项5 </option>
            <option value = "opt_6"> 选项6 </option>
        </select>

        <input id = "btn_1" type = "button" value = "选中添加到右边"/>
        <input id = "btn_2" type = "button" value = "全部添加到右边"/>
    </div>
    <div id = "right">
        <select multiple = "multiple">

        </select>
        <input id = "btn_3" type = "button" value = "选中添加到左边"/>
        <input id = "btn_4" type = "button" value = "全部添加到左边"/>
    </div>
</body>

（2）动态添加、动态删除表格记录

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type = "text/css">

    </style>
    <script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
    <script type = "text/javascript">
        $(function() {
            // 删除函数
            var deleteFun = function() {
                // 在事件响应的function函数中，this对象是当前正在执行响应对象的dom对象
                // 因此，<tr>可以这样获取
                var $trObj = $(this).parent().parent();
                // 获取name值
                var name = $trObj.find("td:eq(0)").text();

                // confirm是JS提供的确认提示框函数，返回 true or false
                if (confirm("确定是否删除" + name)) {
                    $trObj.remove();
                }
                // return false; 可以阻止元素的默认行为
                return false;
            }

            // 为添加按钮添加点击事件
            $("#button_submit").click(function() {
                // 获取输入框的姓名、邮箱、工资，注意返回的都是string类型，不需要加$符
                var name = $("#input_name").val();
                var email = $("#input_email").val();
                var salary = $("#input_salary").val();

                // 创建一个标签对象，添加到显示数据的table中
                var $trObj = $("<tr>" +
                    "<td>" + name + "</td>" +
                    "<td>" + email + "</td>" +
                    "<td>" + salary + "</td>" +
                    "<td><a href = \"delete\">Delete</a></td>" +
                    "</tr>");

                $trObj.appendTo($("#table_1"));

                // 给新添加的a标签绑定单击事件
                $trObj.find("a").click( deleteFun );
            });

            // 给a标签的删除链接绑定单击事件
            $("table a").click( deleteFun );
        });
    </script>
</head>
<body>
<table id = "table_1">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th> </th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>tom@123.com</td>
        <td>114514</td>
        <td>
            <a href = "delete">Delete</a>
        </td>
    </tr>
</table>
<div id = "div_1">
    <h4>添加新员工</h4>
    <table>
        <tr>
            <td>Name:</td>
            <td>
                <input id = "input_name" type = "text"/>
            </td>
        </tr>
        <tr>
            <td>Email:</td>
            <td>
                <input id = "input_email" type = "text"/>
            </td>
        </tr>
        <tr>
            <td>Salary:</td>
            <td>
                <input id = "input_salary" type = "text"/>
            </td>
        </tr>
        <tr>
            <td colspan = "2" align = "center">
                <input id = "button_submit" type = "button" value = "添加"/>
            </td>
        </tr>
    </table>
</div>
</body>

这个练习的难点在于函数：

我们在练习中遇到这样一个问题，要求对原有的记录和新加入的记录都绑定单击事件，这时候我们希望能够函数复用，因此，需要明确函数的定义：

var fun = function() {
    alert(1);
}

function fun() {
    alert(1);
}

上面这两种定义方式是一样的，都可以得到一个名为 fun 的函数变量，这时候我们再看练习中两处为 a 标签绑定单击事件的 click 的参数就能理解了。

obj.click(function() {
    alert(1);
});

var fun = function() {
    alert(1);
}
/* 或者用
function fun() {
    alert(1);
}
*/
obj.click( fun );

第一种就是我们平常写的，直接在 click 内写一个函数体；

第二种就是对于需要函数复用的情况，在外部定义一个函数，然后再传入 click。

八、CSS样式操作

原理：先定义一个指定类选择器的CSS样式，然后使用下面四个函数对目标元素（标签）的 class 属性操作，即可达到改变样式的需求。

1、addclass()

添加样式。

2、removeClass()

删除样式。

3、toggleClass()

没有的样式则添加，已有的样式则删除。

4、offset()

获取和设置元素的坐标。

5、例子

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type = "text/css">
        div {
            width: 100px;
            height: 260px;
        }

        div.whiteBorder {
            boder: 2px white solid;
        }
        /* 前面的 div 是限制只有 div 标签受到影响 */
        /* 后面 .whiteBorder 是一个类选择器 */

        div.redDiv {
            background-color: red;
        }

        div.blueBorder {
            border: 5px blue solid;
        }
    </style>
    <script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
    <script type = "text/javascript">
        $(function() {
            // 查询需要改变样式的那个div
            var $divObj = $("div:first");

            // 绑定addClass的点击事件
            $("#btn_1").click(function() {
                // 向标签添加 一个 或 多个 类。
                $divObj.addClass("redDiv blueBorder");
            });

            // 绑定removeClass的点击事件
            $("#btn_2").click(function() {
                // 从标签删除 一个 或 多个 类。
                // 什么都不写，默认全部删除
                $divObj.removeClass("redDiv");
            });

            // 绑定toggleClass的点击事件
            $("#btn_3").click(function() {
                $divObj.toggleClass("redDiv");
            });

            // 绑定offset的点击事件
            $("#btn_4").click(function () {
                // offset - 返回第一个匹配元素相对于文档的位置
                // 根据当前浏览器内容页面大小 获取 或 设置 与左上角的距离。
                var pos = $divObj.offset();
                console.log(pos);

                $divObj.offset({
                    top: 100,
                    left: 500
                });

                pos = $divObj.offset()
                console.log(pos);
            });
        });
    </script>
</head>
<body>
<table align = "center">
    <tr>
        <td>
            <div class = "border"></div>
        </td>
        <td>
            <div class = "btn">
                <input type = "button" id = "btn_1" value = "addClass()"/>
                <input type = "button" id = "btn_2" value = "removeClass()"/>
                <input type = "button" id = "btn_3" value = "toggleClass()"/>
                <input type = "button" id = "btn_4" value = "offset()"/>
            </div>
        </td>
    </tr>
</table>
</body>

九、JQuery动画

1、基本动画

（1）show()

将隐藏的元素显示。

（2）hide()

将可见的元素隐藏

（3）toggle()

可见就隐藏，不可见就显示。

（4）以上动画方法都可以传入两个参数：

第一个参数是动画执行时长，以 ms 为单位。
第二个参数是动画的回调函数（动画完成后自动调用的函数）。

2、淡入淡出动画

（1）fadeIn()

淡入（缓慢可见）

（2）fadeOut()

淡出（缓慢消失）

（3）fadeTo()

在指定时间内缓慢将透明度修改到指定值。

0：不可见；

1：完全可见。

（4）fadeToggle()

淡入 / 淡出切换。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type = "text/css">
        div {
            background-color: pink;
            border: 1px black solid;
            float: left;
        }
    </style>
    <script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
    <script type = "text/javascript">
        $(function() {
            // show
            $("#btn_1").click(function() {
                $("#div_2").show(1000, function() {
                    alert("show动画执行完成");
                });
            });

            // hide
            $("#btn_2").click(function() {
                $("#div_2").hide(1000, function() {
                    alert("hide动画执行完成");
                });
            });

            // toggle
            $("#btn_3").click(function() {
                $("#div_2").toggle(1000, function() {
                    alert("toggle动画执行完成");
                });
            });

            /*
            此处可实现一个反复显示和隐藏的动画效果
             */
            // var tmp = function() {
            //     $("#div_2").toggle(1000, tmp);
            // }
            // tmp();

            // fadeIn
            $("#btn_4").click(function() {
                $("#div_2").fadeIn(1000, function() {
                    alert("fadeIn动画执行完成");
                });
            });

            // fadeOut
            $("#btn_5").click(function() {
                $("#div_2").fadeOut(1000, function() {
                    alert("fadeOut动画执行完成");
                });
            });

            // fadeTo
            $("#btn_6").click(function() {
                $("#div_2").fadeTo(1000, 0.5, function() {
                    alert("fadeTo动画执行完成");
                });
            });

            // fadeToggle
            $("#btn_7").click(function() {
                $("#div_2").fadeToggle(1000, function() {
                    alert("fadeToggle动画执行完成");
                });
            });
        });
    </script>
</head>
<body>
<div id = "div_1">
    <table align = "center">
        <tr>
            <td><input type = "button" id = "btn_1" value = "show()"/></td>
        </tr>
        <tr>
            <td><input type = "button" id = "btn_2" value = "hide()"/></td>
        </tr>
        <tr>
            <td><input type = "button" id = "btn_3" value = "toggle()"/></td>
        </tr>
        <tr>
            <td><input type = "button" id = "btn_4" value = "fadeIn()"/></td>
        </tr>
        <tr>
            <td><input type = "button" id = "btn_5" value = "fadeOut()"/></td>
        </tr>
        <tr>
            <td><input type = "button" id = "btn_6" value = "fadeTo()"/></td>
        </tr>
        <tr>
            <td><input type = "button" id = "btn_7" value = "fadeToggle()"/></td>
        </tr>
    </table>
</div>
<div id = "div_2">
    JQuery定义了很多动画效果<br/>可以很方便的使用这些动画效果。
</div>
</body>

3、练习

（1）显示相机品牌

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type = "text/css">
        * {
            margin: 0;
            padding: 0;
        }
        body {
            font-size: 12px;
            text-align: center;
        }
        a {
            color: #04D;
            text-decoration: none;
        }
        a:hover {
            color: #F50;
            text-decoration: underline;
        }
        .SubCategoryBox {
            width: 600px;
            margin: 0 auto;
            text-align: center;
            margin-top: 40px;
        }
        .SubCategoryBox ul {
            list-style: none;
        }
        .SubCategoryBox ul li {
            display: block;
            float: left;
            width: 200px;
            line-height: 20px;
        }
        .showmore , .showless {
            clear: both;
            text-align: center;
            padding-top: 10px;
         }
        .showmore a , .showless a {
            display: block;
            width: 120px;
            margin: 0 auto;
            line-height: 20px;
            border: 1px solid #AAA;
        }
        .showmore a span {
            background-color: pink;
            text-align: center;
        }
        .showless a span {
            background-color: aquamarine;
            text-align: center;
        }
        .promoted a {
            color: #F50;
        }
    </style>
    <script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
    <script type = "text/javascript">
        $(function() {
            // 初始状态：隐藏第六个 <li> 之后的对象
            $("li:gt(5):not(:last)").hide();

            // 给 a 标签绑定单击事件
            $("#a_show").click(function() {
                // 让物品 隐藏 或 显示
                $("li:gt(5):not(:last)").toggle();
                // 点击后样式、内容也需要变化
                if ($("li:gt(5):not(:last)").is(":hidden")) {
                    // 修改文本
                    $("#a_show span").text("显示全部品牌");
                    // 修改样式
                    $("div div").removeClass();
                    $("div div").addClass("showmore");
                    // 去除高亮
                    $("li:contains('索尼')").removeClass();
                } else {
                    $("#a_show span").text("显示部分品牌");
                    $("div div").removeClass();
                    $("div div").addClass("showless");
                    // 添加高亮
                    $("li:contains('索尼')").addClass("promoted");
                }
                return false;
            });
        });
    </script>
</head>
<body>
<div class = "SubCategoryBox">
    <ul>
        <li><a href = "#">佳能</a><i>（30440）</i></li>
        <li><a href = "#">索尼</a><i>（27220）</i></li>
        <li><a href = "#">三星</a><i>（20808）</i></li>
        <li><a href = "#">尼康</a><i>（17821）</i></li>
        <li><a href = "#">松下</a><i>（12289）</i></li>
        <li><a href = "#">卡西欧</a><i>（8242）</i></li>
        <li><a href = "#">富士</a><i>（14894）</i></li>
        <li><a href = "#">柯达</a><i>（9520）</i></li>
        <li><a href = "#">宾得</a><i>（2195）</i></li>
        <li><a href = "#">理光</a><i>（4114）</i></li>
        <li><a href = "#">奥林巴斯</a><i>（12205）</i></li>
        <li><a href = "#">明基</a><i>（1466）</i></li>
        <li><a href = "#">爱国者</a><i>（3091）</i></li>
        <li><a href = "#">其他相机品牌</a><i>（7275）</i></li>
    </ul>
    <div class = "showmore">
        <a href = "more.html" id = "a_show">
            <span>显示全部相机品牌</span>
        </a>
    </div>
</div>
</body>

十、JQuery事件操作

1、区别

$(function(){
    alert(1); // 1-th 执行
});
$(function(){
    alert(2); // 2-th 执行
});
$(function(){
    alert(3); // 3-th 执行
});
window.onload = function() {
    alert(1); // 不执行
}
window.onload = function() {
    alert(2); // 不执行
}
window.onload = function() {
    alert(3); // 4-th 执行
}

（1）触发条件

JQuery 的加载，是在浏览器内核解析完页面的标签，并创建好 DOM 对象之后，就会马上执行；
原生 JS 的加载，除了上面的 DOM 对象创建，还需要等待标签所需资源的加载完成，才会执行。

（2）触发顺序

当上面两种方法都存在时，会先按 JQuery 的先后顺序执行所有 JQuery 的操作，然后会执行最后一个原生 JS 的操作（因为原生 JS 会覆盖）。

2、其他事件处理方法

（1）click()

它可以绑定单击事件，或者触发单击事件。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
    <script type = "text/javascript">
        $(function() {
            $("h5").click(function() { // 传 function 是 绑定
                alert("单击事件 -- click方法绑定");
            });

            $(":button").click(function() {
                $("h5").click(); // 不传 function 是 触发
            });
        });
    </script>
</head>
<body>
    <h5>click方法是什么？</h5>
    <input type="button" value = "一个 button"/>
</body>

（2）mouseover() 和 mouseout()

mouseouver：鼠标移入事件；

mouseout：鼠标移出事件。

都可以绑定和触发。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .over {
            background-color: pink;
        }
        .out {
            background-color: aquamarine;
        }
    </style>
    <script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
    <script type = "text/javascript">
        $(function() {
            $("h5").mouseover(function() {
                $("h5").removeClass();
                $("h5").addClass("over");
            });
            $("h5").mouseout(function() {
                $("h5").removeClass();
                $("h5").addClass("out");
            });
        });
    </script>
</head>
<body>
    <h5 class = "out"> mouseover() / mouseout() 是什么？</h5>
</body>

（3）bind()

可以给元素一次性绑定一个或多个事件。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .over {
            background-color: pink;
        }
        .out {
            background-color: aquamarine;
        }
    </style>
    <script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
    <script type = "text/javascript">
        $(function() {
            $("h5").bind("click mouseover", function() {
                $("h5").removeClass();
                $("h5").addClass("over");
            });
        });
    </script>
</head>
<body>
    <h5 class = "out"> mouseover() / mouseout() 是什么？</h5>
</body>

（4）one()

使用方法和 bind() 一样，但是其绑定的方法只能执行一次，之后不再有效。

（5）unbind()

使用方法和 bind() 一样，但是会解除绑定。

（6）on()（旧版本是live()）

也是用来绑定事件。可以用来绑定选择器匹配的所有元素的事件。之后动态创建的元素也有效。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
    <script type = "text/javascript">
        $(function() {
            $("h5").on("click", function() {
                alert("h5单击事件——on方法绑定");
            });
            $("<h5>新的h5标签</h5>").appendTo($("h5:last"));
        });
    </script>
</head>
<body>
    <h5 class = "out"> mouseover() / mouseout() 是什么？</h5>
</body>

3、事件冒泡

事件的冒泡是指，父子元素同时监听同一个事件，当触发子元素的事件发生时，该事件也被传递到了父元素的事件里去响应。

比如：在 div 中写一个 span，为 div 和 span 都绑定点击事件，此时点击 span 会触发两个事件，因为 span 在 div 中，点击了 span 就相当于点击了 div。

如何阻止事件传递：只需要在子元素事件函数体中 return false；即可。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
    <script type = "text/javascript">
        $(function() {
            $("#content").click(function() {
                alert("我是div");
            });
            $("span").click(function() {
                // 此时点击span会触发两个事件，因为span在div中，点击了span就相当于点击了div
                alert("我是span");
                // return false 即可防止事件传递
                return false;
            });
        });
    </script>
</head>
<body>
    <div id = "content">
        外层div元素<br/>
        <span>内层span元素</span><br/>
        外层div元素
    </div>
    <div id = "msg"> </div>
    <br/><br/>
    <a href = "https://www.baidu.com">百度（baidu.com）</a>
</body>

4、事件对象

每次触发事件，就会有一个事件对象用来记录事件触发的所有相关信息。我们重点关注怎么使用这个 js 事件对象。

（1）如何获取事件对象

在给元素绑定事件的时候，在事件的 function( event ) 的参数列表中添加一个参数，习惯命名为 event，这个 event 就是上面说的 js 事件对象。

原生 JS 获取：

window.onload = function() {
    document.getElementById("content").onclick = function(event) {
        console.log(event);
    }
}

JQuery 获取：

$(function() {
    $("#content").click(function(event) {
        console.log(event);
    });
});

（2）怎么获取当前操作是哪一个事件

我们可以将 event 输出到控制台，观察键值对，会发现有一个 type 属性，对应了响应的事件。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            border: 1px solid black;
        }
    </style>
    <script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
    <script type = "text/javascript">
        $(function() {
            $("#msg").bind("mouseover mouseout", function(event) {
               if (event.type == "mouseover") {
                   console.log("鼠标移入");
               } else if (event.type == "mouseout") {
                   console.log("鼠标移出");
               }
            });
        });
    </script>
</head>
<body>
    <div id = "content">
        div1
    </div>
    <div id = "msg">
        div2
    </div>
</body>

5、练习

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            text-align: center;
        }
        #small {
            margin-top: 150px;
            width: 353px;
            height: 222px;
        }
        #showBig {
            position: absolute;
            display: none;
        }
    </style>
    <script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
    <script type = "text/javascript">
        $(function() {
            $("#small").bind("mouseover mouseout mousemove", function(event) {
                if (event.type == "mouseover") {
                    $("#showBig").show();
                } else if (event.type == "mouseout") {
                    $("#showBig").hide();
                } else if (event.type == "mousemove") {
                    $("#showBig").offset({
                        left: event.pageX + 20,
                        top: event.pageY + 20
                        // 加一个常数，防止鼠标移动速度过快，碰到了大图片。否则会闪烁。
                    });
                }
            });
        });
    </script>
</head>
<body>
    <img id = "small" src = "./src/small.jpg"/>
    <div id = "showBig">
        <img src = "./src/big.jpg"/>
    </div>
</body>