1.获取Jquery对象

1
2
3
4
5
6
7
<input type="text" id="username" value="jack"/>
<script type="text/javascript">
    //jquery获得数据 语法${"选择器"}==Jquery（"选择器"）
    var usernmae = $("#username");
    //val() 函数 用于获得value属性的值 jack
    alert(usernmae.val());
</script>

image-20181214174914025

2.Jquery与Dom对象的互相转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<input type="text" id="username" value="jack"/>
<script type="text/javascript">
    //Jquery对象和Dom对象的转换
    //1。使用Javascripe获取value的值
    var username = document.getElementById("username");
    alert(username.value);//jack用的是属性

    //2。将dom对象 转换为Jquery对象
    //# 语法：$(dom对象)
    //# 建议 ：Jquery对象变量名字 建议以$开头
    var $username = $(username);
    alert($username.val());

    //3.将jquery对象转为Dom对象
    //3.1 Jquery对象内部使用数组存放所有的数据 可以通过数组的下标获取（索引）
    var username2 = $username[0];
    alert(username2.value);

    //3.2Jquery提供函数get()转换为dom对象
    var username3 = $username.get(0);
    alert(username3.value);
</script>

image-20181214210647995

3. 选择器

3.1 基本选择器【重要】

  • id ,id选择器 通过id 值获得元素

  • element，标签选择器 通过标签名获得元素

  • .class 类选择器 通过class值获得元素。注意：使用点开头

  • s1,s2,… 多选择器，将多个选择器的结果添加一个数组中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
    //window.onload=function(){...}匿名函数
    //jquery 页面加载-->function()匿名函数
    $(document).ready(function () {
    });

    //id选择器 为id绑定一个事件 然后传递一个函数
    $("#btn1").click(function () {
        $("#one").css("background-color", "#ff0")
    });
    //类选择器
    $(".btn2").click(function () {
        $(".one").css("background-color", "#ff0");
    });
    //元素选择器
    $("div").background = "#ff2";


</script>
<input type="button" id="btn1" value="选择id为one的元素">
<input type="button" class="btn2" value="选择id为one的元素">

image-20181214214342463

3.2层级选择器

image-20181215112727120

3.3基本过滤选择器——“：关键字“

image-20181216091014781

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<label for="username"></label>
<input type="text" id="username" value="jack"/>
<script type="text/javascript">
    // <input type="text" value="请输入账号" defaultValue="请输入账号">
    $("input[type='text']").on("blur focus", function () {
        //1.获得默认值
        var attr = $(this).attr("defaultValue");
        //2.判断是否获得焦点
        if ($(this).is(":focus")) {
            //2.1 获得焦点，清空value值 ，this 当前执行对象  是dom对象用$(this)转为jquery对象
            if ($(this).val() === attr) {
                $(this).val("");
            }
        } else {
            //2.2失去焦点  设置默认值
            if ($(this).val() === "") {
                $(this).val(attr);
            }
        }
    });
</script>
<label>
    <input type="text" value="请输入账号" defaultValue="请输入账号">
    <input type="text" value="请输入账号" defaultValue="请输入密码">
</label>
</body>
</html>

image-20181216184406335

3.4内容过滤

image-20181216185020697

image-20181216184851872

image-20181216185112383

3.5可见性过滤 （重要）

image-20181216185358024

1
2
3
4
5
6
7
8
9
10
11
12


*/
// <input type="button" value="选取所有可见的div元素" id="bt1">
$("#b1").click(function () {
    $("div:hidden").css("background-color", "#ff0");
});
// <input type="button" value="选取所有不可见的元素利用jquery中的show（）将他们显示出来" id="bt2">
$("#bt2").click(function () {
    $("div:hidden").css("background-color", "#ff0");

});

3.6实战

image-20181216214851469

3.7属性选择器（掌握）

image-20181230213448062

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-2.1.0.js"></script>

    <!--1 ⭐️<input type="button" value="选取含有属性title的div元素" id="btn1"/>-->
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btn1").click(function () {
                //<xx title="">  <xxx title="yyy"> <xxx title>
                $("div[title]").css("background-color", "#fff0");
            });
        });
    </script>

    <!--2<input type="button" value="选取属性title值等于"test"的div元素" id="btn2"/>-->
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btn2").click(function () {
                //<xx title="">  <xxx title="yyy"> <xxx title>
                $("div[title='test']").css("background-color", "#fff0");
            });
        });
    </script>

    <!--3 <input type="button" value="选取属性title值不等于"test"的div元素（没有title属性的也会被选中）" id="btn3"/>-->
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btn2").click(function () {
                //<xx title="">  <xxx title="yyy"> <xxx title>
                $("div[title！='test']").css("background-color", "#fff0");
            });
        });
    </script>
    <!--4 <input type="button" value="选取属性title值 以"te"开始的div元素（没有title属性的也会被选中）" id="btn4"/>-->
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btn2").click(function () {
                //<xx title="">  <xxx title="yyy"> <xxx title>
                $("div[title^='te']").css("background-color", "#fff0");
            });
        });
    </script>
    <!--5 <input type="button" value="选取属性title值 以"est"结束的div元素（没有title属性的也会被选中）" id="btn5"/>-->
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btn2").click(function () {
                //<xx title="">  <xxx title="yyy"> <xxx title>
                $("div[title$='est']").css("background-color", "#fff0");
            });
        });
    </script>
    <!--6 <input type="button" value="选取属性title值  含有"es"的div元素（没有title属性的也会被选中）" id="btn5"/>-->
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btn2").click(function () {
                //<xx title="">  <xxx title="yyy"> <xxx title>
                $("div[title*='es']").css("background-color", "#fff0");
            });
        });
    </script>
    <!--⭐️7<input type="button" value="组合属性选择器 首先选取有属性id的div元素。然后在结果中 选取title
    值含有"es"的元素"）" id="btn5"/>-->
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btn5").click(function () {
                //<xx title="">  <xxx title="yyy"> <xxx title>
                $("div[id][title*='es']").css("background-color", "#fff0");
            });
        });
    </script>
</head>

image-20181231085241966

3.8选择器 （子元素过滤）

image-20181231085455447

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--1 <input type="button" value="选取每个class为one的div父元素下的第2个子元素" id="btn1">-->
 <script type="text/javascript">
     $("btn1").click(function () {
         //子元素 选择使用前提 表达式前面必须是元素 如：$(div:nth-child(2))
         //如果元素上添加 条件 必须使用空格 如$("div[class='one'] :nth-child(2)")
         $("div[class='one'] :nth-child(2)").css("background-color", "#ff0");

         $("div.one :nth-child(2)").css("background-color", "#ff0");
     });
     /**
      * 对比：
      * $("div.one") 所有的div自己的样式为one
      * $("div .one") 所有的div中后代元素 样式为one 空格
      */
 </script>

image-20181231090956569

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script type="text/javascript">
       $("btn1").click(function () {
           $("div.one :first-child").css("background-color", "#ff0");
       });
   </script>
   <!--<input type="button" value="如果class为one的div父元素下的第一个子元素 " id="bt4">-->
   <script type="text/javascript">
       $("btn4").click(function () {
           $("div.one :first-child").css("background-color", "#ff0");
       });
   </script>
   <!--<input type="button" value="如果class为one的div父元素下的最后一个子元素 " id="bt4">-->
   <script type="text/javascript">
       $("btn4").click(function () {
           $("div.one :last-child").css("background-color", "#ff0");
       });
   </script>

   <!--<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素 " id="bt4">-->
   <script type="text/javascript">
       $("btn4").click(function () {
           $("div.one :only-child").css("background-color", "#ff0");
       });
   </script>

image-20181231122142393

3.9表单过滤选择器

image-20181231193817491

image-20181231194255420

image-20181231194317789

image-20181231195659745

4 表单对象属性过滤

image-20181231203301742

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
    <script src="js/jquery-2.1.0.js"></script>
    <script type="text/javascript">
        //1. <button id="btn1">对表单内 可用input enable 赋值操作.</button>
        $(document).ready(function () {
            $("input:enabled").val("enabled");
        });
        // 2 <button id="btn2">对表单内 不可用input 赋值操作.</button>
        $(document).ready(function () {
            $("input:disabled").val("disabled");
        });
        // 3 <button id="btn3">获取多选框选中的个数.</button>
        // <input type="checkbox" name="newsletter" checked="checked" value="test1"/>test1
        $(document).ready(function () {
            var s1 = $("[name='newsletter']:checked").length;
            // var s2 = $("[name='newsletter']:checked").size();
            alert(s1)
        });
        // <button id="btn4">获取下拉框选中的内容.</button>
        $(":selected").each(function () {
            //val()获得<option >如果没有value值 将获得text的值
            //html（）获得标签体的内容
            $("#selectDivId").append($(this).val());
            //  $("#selectDivId").append($(this).html());
        });

    </script>
    
    ------------    ------------    ------------    ------------    ------------
    </head>
<body>
<h3> 表单对象属性过滤选择器.</h3>
<button type="reset">重置所有表单元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
<br/><br/>
<button id="btn1">对表单内 可用input 赋值操作.</button>
<button id="btn2">对表单内 不可用input 赋值操作.</button>
<button id="btn3">获取多选框选中的个数.</button>
<button id="btn4">获取下拉框选中的内容.</button>

<br/><br/>

可用元素：<input name="add" value="可用文本框"/> <br/>
不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
可用元素： <input name="che" value="可用文本框"/><br/>
不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/>
<br/>
多选框：<br/>
<input type="checkbox" name="newsletter" checked="checked" value="test1"/>test1
<input type="checkbox" name="newsletter" value="test2"/>test2
<input type="checkbox" name="newsletter" value="test3"/>test3
<input type="checkbox" name="newsletter" checked="checked" value="test4"/>test4
<input type="checkbox" name="newsletter" value="test5"/>test5
<div id="checkboxDivId"></div>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
下拉列表1：<br/>
<select name="test" multiple="multiple" style="height:100px">
    <option>浙江</option>
    <option selected="selected">湖南</option>
    <option>北京</option>
    <option selected="selected">天津</option>
    <option>广州</option>
    <option>湖北</option>
</select>

<br/><br/>
下拉列表2：<br/>
<select name="test2">
    <option>浙江</option>
    <option>湖南</option>
    <option selected="selected">北京</option>
    <option>天津</option>
    <option>广州</option>
    <option>湖北</option>
</select>
<br/><br/>

<div id="selectDivId"></div>

</body>
</html>

image-20181231204327347

5 选择器案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    <script type="text/javascript">
        $(document).ready(function () {
//从第5个开始 不要最后一个控制显示和隐藏
            //1 隐藏
            var $allLi = $("li:gt(4):not(:last)");
            $allLi.hide();
//2 点击显示
            $("span").click(function () {
                //$allLi.show();
                //   $allLi.toggle();
                if ($allLi.is(":hidden")) {
                    $allLi.show();
                    $(this).html("隐藏");
                } else {
                    $allLi.hide();
                    $(this).html("显示");
                }
            });
        });
    </script>

image-20181231205454330

6 属性 CSS

image-20190102075633089

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
    $(document).ready(function () {
        //1.设置姓名文本框不可用
        // <input type="text" name="username" class="textClass" value="jack"/>
        $("[name='username']").attr("disabled", "disabled");
        // 2 .设置姓名文本框可用 移除属性
        $("[name='username']").removeAttr("disabled");
    });
</script>

image-20190102075719371

CSS 类

image-20190102075940233

image-20190102080928087

1
2
3
4
5
6
7
8
9
     //text /html
        alert($("div").text());// 未满18慎进
        alert($("div").html());//<a>未满18慎进</a>alert($("div").html());//<a>未满18慎进</a>

        $("div").text("<a href='Demo5.html'>你点我呀</a>");// 未满18慎进
        $("div").html("<a href='Demo5.html'>你点我呀</a>");//<a>未满18慎进</a>
    });

</script>

image-20190102081147878

7 CSS

1
2
3
4
5
6
7
8
/设置CSS
            $("div").css({
                "width": "200px",
                "height": "222px",
                "font-size": "60px",
                "color": "#f00",

            });

image-20190102081930562

image-20190102082108017

image-20190102082357066

8 文档处理

8.1 内部插入「掌握」

image-20190102082906153

image-20190102083011214

image-20190102083904151

实战：

image-20190102085511091

image-20190102085520549

image-20190102085433394

image-20190102085451166

8.2 外部插入「掌握」

image-20190102083924244

image-20190102084102997

实战：

image-20190102090027238

image-20190102090037894

image-20190102090127401

image-20190102090154135

8.3 删除 「掌握」

image-20190102090339509

image-20190102090435876

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <script type="text/javascript">
        //将city移除 在追加到body后面
        //1.绑定事件
        $(document).ready(function () {
            //2.绑定数据
            $("#city").data("ithe", "厉害");
            //1。移除
            var $city = $("#city").remove();
            //var $city = $("#city").detach();//保留绑定的事件
            //2 追加
            $("body").append($city);
            //3 获得绑定的数据
            alert($("#city").data("ithe"));
        });

image-20190103094033579

image-20190103094112365

9.文档处理 克隆 替换包裹

image-20190103094408549

image-20190103094511923

image-20190103094543202

image-20190103094603955

image-20190103094752632

Day 02

image-20190103100043820

image-20190103100244699

image-20190103100350572

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
        $(document).ready(function () {

            $("#left1").click(function () {
                $("#leftSelectId option:first").appendTo("#rightSelectId")
            });
            $("#left2").click(function () {
                //选中哪一个 就过哪一个
                $("#leftSelectId option:selected").appendTo("#rightSelectId")
            });
            $("#left3").click(function () {
                    $("#leftSelectId option").appendTo("#rightSelectId")
            });
        });
    </script>

image-20190104085050456

10 筛选

过滤

  • 选择器可以完成功能 筛选提供相同的函数
  • image-20190104085540047

image-20190104090007508

image-20190104090127809

查找

image-20190112201707265

image-20190112202251804

image-20190112202524134

image-20190112203108760

image-20190112203323807

image-20190112205718671

串联

image-20190112205751599

将多条语句改成一条 *得瑟代码***

image-20190112210251196

image-20190112210334296

image-20190112210413068

image-20190112210523448

案例：QQ分组

image-20190112210855207

11 事件

常见事件

image-20190113102442714

image-20190113102610279

image-20190113102831166

image-20190113102941828

image-20190113103021477

image-20190113103155136

页面加载

image-20190116094643318

image-20190116094710564

image-20190116095146110

事件绑定[重要]

image-20190116095356313

image-20190116095653201

image-20190116095857913

委派

image-20190116100003128

image-20190116100118945

切换

image-20190116100301259

12 动画效果image-20190116213104140

image-20190116213154462

image-20190116213235489

image-20190116213357010

13 Ajax「重要 掌握」

  • 异步刷新

image-20190112212754438

image-20190112213349243

image-20190112213635084

Load()函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(function () {
            $("input").click(function () {
                var url = "/";
                var params = {"username": "jack", "password": "1234"};
                /**
                 * load()函数 必须使用jquery对象
                 * 格式load(url,[data],[callback])
                 * 参数1：url 请求路径
                 * 参数2：data 请求参数
                 * 参数3：callback 回调函数
                 *   *如果没有请求参数 发送的GET请求
                 *   *如果有请求参数 发送的POST请求 请求没有中文乱码；
                 *回调函数的参数
                 *          ：参数1 data响应数据 load()永远获得字符串 如果需要使用
                 *          必须手动转换成json格式；
                 *
                 */
                $(this).load(url, params, function (data) {
                    //转换JSON对象
                    var jsonData = eval("(" + data + ")");
                    alert(jsonData.message);
                });


            });
        })

image-20190113091505279

$.post $.$.get

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

        /**
         *  $.get() 全局函数 发送get请求
         *    *格式 jquery.get(URl,[data],[callback],[type])
         *      *参数4 type
         *      *GET请求不适合发送中文数据 存放请求的中文乱码
         *      必须手动解码 new String(username,getBytes("ISO-8859-1",UTF-8"))
         响应数据 如果使用application/json；charset=UTF-8,jquery自动将数据转换JSON对象
         响应数据 如果使用text/html；charset=UTF-8 ，回调函数获得字符串数据 需要手动转换
         使用"参数4" 设置"json" Jquery将字符串 转换为json对象

         */
        $.get(url, params, function () {
            alert(data);
        }, "json");


        /**
         * post()全局函数 发送post请求
         *
         *
         格式：jquery.post(url,data[],[callback],[type])
         $.post(url,params,function(data){
            alert(data);
            },"json")
         */
        $.post(utl, params, function (data) {
            alert(data);
        }, "json")

    });
})

image-20190113093659468

$.ajax()$

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$(function () {
           $("input").click(function () {
               /**
                * 4.$.ajax() 底层功能最强大的
                * 格式 Jquery.ajax（[settings]）
                *  参数 settings:设置所有的参数
                *   url:发送请求的地址
                *   data:发送到服务器的数据 请求参数，
                *   type: 请求方式（"POST"或"GET"），
                *
                *   success:成功的回调函数
                *   error 错误函数
                *   dateType:响应数据类型

                */
               $.ajax({
                   "url": "/",
                   "data": "params",
                   "type": "POST",
                   "success": function (data) {
                       alert(data);
                   },
                   "error": function () {
                       alert("服务器繁忙")
                   },
                   "dateType": "json"
               });
           });
       })

image-20190113094858475

image-20190113094918130

image-20190116100448013

处理实战

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<script type="text/javascript">
        $(function () {
            // <input id="h01" type="button" value="1只能点击一次，之后失效"/>
            $("#h01").one("click.a", function () {
                alert("你只能看到我一次");//继续点击失效
            });
            // <input id="h02" type="button" value="2可以点击多次"/>
            $("#h02").bind("click.b", function () {
                alert("每次都是你");
            });
            // <input id="h03" type="button" value="3解绑2"/>
            $("#h03").click(function () {
                $("#h02").unbind("click.b");
            });
            // <input type="button" value="4 添加一个按钮，样式为myClass，且拥有相同的事件" class="myClass"/>
            $(".myClass").live("click", function () {
                $("body").append("<input type='button' class='myClass'>")
            });
            // <input id="h05" type="button" value="5 解绑4"/>
            $("#h05").click(function () {
                $(".myClass").die("click");
            });
            //切换
            $(function () {
                $("#e01").toggle(function () {
                    alert("报数1");
                }, function () {
                    alert("报数2");
                });

                $("#e02").hover(function () {
                    $("#divMsg").html("over");
                }, function () {
                    $("#divMsg").html("out");
                })

            })
        });
    </script>

image-20190116102254251

14 其他

表单序列化

image-20190113095911001

image-20190113095931330

事件冒泡

image-20190113100338880

浏览器默认的动作行为

image-20190113100510108

Jquery文档1.8.3

image-20181215113129106