一.JQ

1.什么是JQ

一个轻量级的JS库(类似于Java中的jar包), 里面封装了一些JS的常见操作, 其本质上还是JS代码;
兼容css3和各大浏览器，提供了dom、events、animate、ajax等简易的操作; 并且jquery的插件非常丰富，大多数功能都有相应的插件解决方案;
JQuery的官方下载地址
 JQuery文档地址

1.x：兼容IE678，使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容IE678，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本.
注:开发版本与生产版本，命名为jQuery-x.x.x.js为开发版本，命名为jQuery-x.x.x.min.js为生产版本，开发版本源码格式良好，有代码缩进和代码注释，方便开发人员查看源码，但体积稍大。而生产版本没有代码缩进和注释，且去掉了换行和空行，不方便发人员查看源码，但体积很小

2.JQ的作用

简化JS对DOM树的操作;

3.JQ的使用

1.拷贝jq库到项目
2.把jq引入页面
3.$(匿名函数)，该匿名函数中的代码会在文档加载完毕之后执行

3.1 JQ对象的获取及与JS对象的转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery和JS的对象转换</title>
    <!-- JQuery的静态引入   -->
    <script src="jq/jquery-3.3.1.min.js"></script>
    <!--  JQuery的动态引入  -->
    <!--    <script src="https://libs.baidu.com/jquery/3.3.1/jquery.min.js"></script>-->
</head>
<body>
<input type="text" value="rzc">
<input type="text" value="ws" id="ipt">
<input type="text" value="wsRzc" class="clazz">
</body>
<script>
    /**
         目标: 通过 JQuery 对象获取输入框中的内容
         JQuery对象的实际是JS的对象数组
         JQuery对象获取方式一: 通过标签名获取
         JQuery对象获取方式二: 通过id名获取
         JQuery对象获取方式三: 通过class名获取
     */

        // 方式一
    let val = $("input");
    console.log(val.length);
    console.log(val[0].value);

    // 方式二
    let $ipt = $("#ipt");
    console.log($ipt.val());

    // 方式三
    let $clazz = $(".clazz");
    console.log($clazz.val());

    // 将js对象转换为jq对象
    let elementById = document.getElementById("ipt");
    console.log($(elementById).val());

    // 将jq对象转换为js对象
    let inputs = $("input");
    let input = inputs[0];
    console.log(input.value);
</script>
</html>

3.2 JQuery操作DOM对象

3.2.1 JQuery的选择器

基本选择器

选择器名称	语法	解释
标签选择器（元素选择器）	$("html标签名")	获得所有匹配标签名称的于元素
id选择器	$("#id的属性值")	获得与指定id属性值匹配的元素
类选择器	$(".class的属性值")	获得与指定的class属性值匹配的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <script src="jq/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="text" class="c1"><br>
<input type="text" class="c1"><br>
<input type="text" id="ccs"><br>
<script>
    /**
     * 获取 相应 input 标签的个数
     * 1.标签选择器 语法格式 $("标签名")
     * 2.类选择器 语法格式 $(".类名")
     * 3.id选择器 语法格式 $("#ID名")
     */

    // 1.标签选择器
    console.log("input标签的个数为" + $("input").length)
    // 2.类选择器
    console.log("class为 c1 标签的个数为" + $(".c1").length)
    // 3.id选择器
    console.log("id为ccs的标签的个数为" + $("#ccs").length)
</script>
</body>
</html>

层级选择器

选择器名称	语法	解释
==后代选择器==	$("A B ")	选择A元素内部的所有B元素
子选择器	$("A > B")	选择A元素内部的所有B子元素, 不包括孙子层级
兄弟选择器	$("A + B")	获得A元素同级的下一个B元素
兄弟选择器	$("A ~ B")	获得A元素之后的同级所有B元素

<!DOCTYPE html>
<html>
<head>
    <title>层次选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
        div, span {
            width: 180px;
            height: 180px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div .mini {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div .mini01 {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

    </style>
    <script src="jq/jquery-3.3.1.min.js"></script>
</head>

<body>
<input onclick="fn1()" type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色" id="b1"/>
<input onclick="fn2()" type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色" id="b2"/>
<input onclick="fn3()" type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 红色" id="b3"/>
<input onclick="fn4()" type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 红色" id="b4"/>

<h1>有一种奇迹叫坚持</h1>
<h2>自信源于努力</h2>

<div id="one">
    id为one
</div>

<div id="two" class="mini">
    id为two class是 mini
    <div class="mini">class是 mini</div>
</div>

<div class="one">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini01">class是 mini01</div>
    <div class="mini">class是 mini</div>
</div>

<div id="mover">
    动画
</div>

<span class="spanone">
    span
</span>

</body>

<script type="text/javascript">
    //改变 <body>内所有<div>的背景色为红色
    function fn1() {
        //先获取到body内的所有div标签，然后通过方法设置它的背景色
        //语法格式 "A B",找到A里面的所有B元素
        //css(样式名,样式值)改变标签的样式
        $("body div").css("background-color", "red");
    }

    //改变 <body> 内的子 <div> 的背景色为 红色
    //语法格式 "A>B" ,找到A里面的子标签B
    function fn2() {
        $("body>div").css("background-color", "red");
    }

    //改变 id 为 one 的下一个 <div> 的背景色为 红色
    //A+B 找到和A标签同级的下一个B标签
    function fn3() {
        $("#one+div").css("background-color", "red")
    }

    //改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 红色
    //A~B
    function fn4() {
        $("#two~div").css("background-color", "red")
    }
</script>
</html>

属性选择器

选择器名称	语法	解释
属性选择器	$("A[属性名]")	包含指定属性的选择器
属性选择器	$("A[属性名='值']")	包含指定属性等于指定值的选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <script src="jq/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="text">
<input type="password" id="ipt">
<script>
    //目标:设置文本框的背景色为红色，密码框的背景色为蓝色
    //属性选择器: [属性名='属性值']
    $("input[type='text']").css("background-color", "red");
    $("input[type='password']").css("background-color", "blue");
</script>
</body>
</html>

基本过滤选择器

选择器名称	语法	解释
首元素选择器	标签名:first	获得为此标签名的第一个元素
尾元素选择器	标签名:last	获得为此标签名的最后一个元素
非元素选择器	标签名:not(selecter)	不包括指定内容的元素
偶数选择器	标签名:even	偶数，从 0 开始计数
奇数选择器	标签名:odd	奇数，从 0 开始计数
等于索引选择器	标签名:eq(index)	指定索引元素
大于索引选择器	标签名:gt(index)	大于指定索引元素(不包括指定索引)
小于索引选择器	标签名:lt(index)	小于指定索引元素(不包括指定索引)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本过滤选择器</title>
    <script src="jq/jquery-3.3.1.min.js"></script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center" >
    <tr>
        <td colspan="5"><input type="button" value="删除"></td>
    </tr>
    <tr style="background-color: #999999;">
        <th><input type="checkbox"></th>
        <th>分类ID</th>
        <th>分类名称</th>
        <th>分类描述</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>3</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
</table>
</body>
<script>
    //目标1:设置第一行的背景色为红色
    // :first 找到第一个某标签
    $("tr:first").css("background-color","red")

    //目标2: 设置最后一行的背景色为蓝色
    // :last 找到最后一个某标签
    $("tr:last").css("background-color","blue")

    //目标3: 设置所有奇数行的背景色为绿色
    // :odd 找到下标为奇数的某标签
    $("tr:odd").css("background-color","green")

    //目标4: 设置所有偶数行的背景色为灰色
    // :even 找到下标为偶数的某标签
    $("tr:even").css("background-color","gray")

    //目标5: 设置下标为3的那一行的背景色为黄色
    // :eq(index) 找到下标为某个值的标签
    $("tr:eq(2)").css("background-color","yellow")

    // 目标6: 设置下标小于3的所有行的背景色为粉红色
    // :lt(index) 找到下标小于某个值的标签
    $("tr:lt(3)").css("background-color","pink")

    // 目标7 ：设置下标大于3的所有行的背景色为橘黄色
    // :gt(index) 找到下标大于某个值的标签
    $("tr:gt(3)").css("background-color","orange")
</script>
</html>

表单属性过滤选择器

选择器名称	语法	解释
可用元素选择器	:enabled	获得可用元素
不可用元素选择器	:disabled	获得不可用元素
复选框选中选择器	:checked	获得单选/复选框选中的元素
下拉框选中选择器	:selected	获得下拉框选中的元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>表单属性过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
        div, span {
            width: 180px;
            height: 180px;
            margin: 20px;
            background: #9999CC;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Roman;
        }

        div .mini {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        div .mini01 {
            width: 50px;
            height: 50px;
            background: #CC66FF;
            border: #000 1px solid;
            font-size: 12px;
            font-family: Roman;
        }

        #job {
            margin: 20px;
        }

        #edu {
            margin-top: -70px;
        }
    </style>
    <script src="jq/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" onclick="fn1()" value="设置可用的文本框的背景色为红色" id="b1"/>
<input type="button" onclick="fn2()" value="设置不可用的文本框的背景色为红色" id="b2"/>
<input type="button" onclick="fn3()" value="获取选中的多选框的个数" id="b3"/>
<input type="button" onclick="fn4()" value="获取选中的下拉框的个数" id="b4"/>
<br><br>
<input type="text" value="不可用值1" disabled="disabled">
<input type="text" value="可用值1">
<input type="text" value="不可用值2" disabled="disabled">
<input type="text" value="可用值2">
<br><br>
<input type="checkbox" name="items" value="美容">美容
<input type="checkbox" name="items" value="IT">IT
<input type="checkbox" name="items" value="金融">金融
<input type="checkbox" name="items" value="管理">管理
<br><br>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<br><br>
<select name="job" id="job" multiple="multiple" size=4>
    <option>程序员</option>
    <option>中级程序员</option>
    <option>高级程序员</option>
    <option>系统分析师</option>
</select>

<select name="edu" id="edu">
    <option>本科</option>
    <option>博士</option>
    <option>硕士</option>
    <option>大专</option>
</select>
<br/>
<div id="two" class="mini">
    id为two class是 mini div
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini">class是 mini</div>
    <div class="mini">class是 mini</div>
</div>
<div class="one">
    class是 one
    <div class="mini01">class是 mini01</div>
    <div class="mini">class是 mini</div>
</div>
</body>
<script type="text/javascript">
    //设置可用的文本框的背景色为红色
    function fn1() {
        $("input:text:disabled").css("background-color", "red")
    }

    //设置不可用的文本框的背景色为红色
    function fn2() {
        $("input:text:enabled").css("background-color", "red")
    }

    //获取选中的多选框的个数
    function fn3() {
        console.log($("input:checkbox:checked").length)
    }

    //获取选中的下拉框的个数
    function fn4() {
        console.log($("option:selected").length)
    }
</script>
</html>

3.2.2 JQuery操作标签的样式

API方法	解释
css(name) 使用很少	获取CSS样式
css(name,value)	设置CSS样式
addClass(类名)	给标签添加类名
removeClass(类名)	删除标签的类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery操作标签的样式</title>
    <style>
        /*css的类选择器*/
        .redStyle{
            background-color: red;
            width: 600px;
            height: 40px;
        }

        .blueStyle{
            background-color: blue;
            width: 600px;
            height: 40px;
        }
    </style>
    <script src="jq/jquery-3.3.1.min.js"></script>
</head>
<body>
<input id="ipt" type="text" onmouseover="fn1()" onmouseout="fn2()">
<script>
    $("#ipt").addClass("blueStyle")

    //目标: 鼠标移入输入框的时候，设置输入框的背景色为红色，移出输入框的时候设置输入框的背景色为蓝色
    function fn1() {
        $("#ipt").addClass("redStyle")
        $("#ipt").removeClass("blueStyle");

    }

    function fn2() {
        $("#ipt").addClass("blueStyle")
        $("#ipt").removeClass("redStyle");
    }
</script>
</body>
</html>

3.2.3 JQuery操作标签的属性

API方法	解释
attr(name,[value])	获得/设置属性的值
prop(name,[value])	获得/设置属性的值(checked，selected)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery操作标签的属性</title>
    <script src="jq/jquery-3.3.1.min.js"></script>
</head>
<body>
<input xx="oo" type="text" id="ipt">
<br>
<input xx="oo" type="checkbox" name="checkbox">
<input xx="oo" type="checkbox" name="checkbox">
<input xx="oo" type="checkbox" name="checkbox">
<input xx="oo" type="checkbox" name="checkbox">
<script>
    //如果是操作表单项的value属性，可以调用jQuery对象的val()方法进行操作
    //val() 获取表单项的value属性值，val(属性值)表示设置表单项的value属性值

    //jQuery对象的attr()方法，可以操作标签的一切属性
    //attr(属性名)，代表获取标签的某个属性；attr(属性名,属性值)，代表设置标签的某个属性
    //设置标签的type属性为password
    $("#ipt").attr("type","password")
    //获取input标签的type属性
    let type = $("#ipt").attr("type");
    console.log(type)

    //jQuery对象的prop()方法，只能操作标签内置的属性;
    //如果该属性是boolean类型的比如:checked、selected、disabled等等属性,使用prop方法操作
    $("input[type='checkbox']").prop("checked",true)

</script>
</body>
</html>

3.2.4 JQuery操作标签体的内容

API方法	解释
val([value])	获得/设置标签里面value属性相应的值
text([value])	获得/设置元素的文本内容
html([value])	获得/设置元素的标签体内容

val()         获得表单项标签里面value属性的值;  value属性的封装  
val("...")    给表单项标签value属性设置值;

html()       获得标签的内容,如果有标签,一并获得;  相当于JavaScript里面的innerHTML
html("...")  设置html代码,如果有标签,将进行解析;

text()       获得标签的内容,如果有标签,忽略标签;  相当于JavaScript中的innerText
text("...")  设置文本,如果含有标签,把标签当做字符串,不支持标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery操作标签体内容</title>
    <script src="jq/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="city"><h1>北京</h1></div>
<input type="button" value="改变" onclick="changeCityName()">
<script>
    function changeCityName() {
        //目标1:获取标签体的内容
        //js的innerHTML属性对应jQuery的html() 获取标签体额所有内容
        //js的innerText属性对应jQuery的text() 获取标签体的文本内容
        /*let html = $("#city").html();
        console.log(html)*/

        //目标2:改变标签体的内容
        $("#city").html("<h1>深圳</h1>")
    }
</script>
</body>
</html>

3.2.5 JQuery创建, 删除, 添加标签

API方法	解释
$("A")	创建A元素对象
append(element)	添加成尾子元素，两者之间是父子关系
prepend(element)	添加成首子元素，两者之间是父子关系
appendTo(element)	添加到父元素的内部末尾
prependTo(element)	添加到父元素的内部首位
before(element)	添加到当前元素的前面，两者之间是兄弟关系
after(element)	添加到当前元素的后面，两者之间是兄弟关系
remove()	删除指定元素(自己移除自己)
empty()	清空指定元素的所有子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery创建、删除、添加标签</title>
    <script src="jq/jquery-3.3.1.min.js"></script>
</head>
<body>
<ul id="city">
    <li id="bj">北京</li>
    <li id="sh">上海</li>
    <li id="sz">深圳</li>
    <li id="gz">广州</li>
</ul>
<input type="button" value="添加" onclick="addCity()"><br>
<input type="button" value="删除" onclick="removeCity()"><br>
<input type="button" value="清空城市列表" onclick="removeAllCity()">
<script>
    //目标1: 点击添加按钮，往城市列表中添加一个"长沙"
    function addCity() {
        //append()方法是往父标签的后面添加子标签
        // $("#city").append("<li id='bj'>长沙</li>")

        //appendTo()方法：子标签.appendTo(父标签)
        // $("<li id='cs'>长沙</li>").appendTo($("#city"))

        //prepend()方法是往父标签的首元素位置添加子标签
        // $("#city").prepend("<li id='cs'>长沙</li>")

        //prependTo(): 子标签.prependTo(父标签)

        //兄弟标签.after(新标签)，将新标签添加到某个兄弟标签之后
        // $("#sh").after("<li id='cs'>长沙</li>")

        //兄弟标签.before(新标签),将新标签添加到兄弟标签之前
    }

    function removeCity() {
        //目标: 删除上海
        $("#sh").remove()
    }

    //清空城市列表，但是要保留ul标签
    function removeAllCity() {
        //就是删除ul标签中的所有子标签
        //empty()清除某个标签的所有子标签
        $("#city").empty()
    }
</script>
</body>
</html>

3.3 JQuery的事件

单个事件语法格式:
    JQuery对象.事件方法名(function(){});
多个事件链式写法:
    JQuery对象.事件方法名(function(){}).事件方法名(function(){})
事件的绑定
    绑定: JQuery对象.on("事件方法名",function(){})
    链式绑定: JQuery对象.on("事件方法名",function(){}).on("事件方法名",function(){})
    解绑: JQuery对象.off("事件方法名")
    链式解绑: JQuery对象.off("事件方法名").off("事件方法名")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery绑定事件</title>
    <script src="jq/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" value="按钮" id="ipt">
<script>
    //使用jQuery的方式进行动态绑定事件
    //jQuery对象.方法名(匿名函数),如果要一次性绑定多个事件，则可以使用链式写法
    $("#ipt").click(function () {
        alert("被点击了")
    }).mouseover(function () {
        console.log("鼠标移入了")
    })

    //另外一种使用jQuery动态绑定事件的方式
    $("#ipt").on("click",function () {
        alert("点击了")
    }).on("mouseover",function () {
        console.log("鼠标移入了")
    })

    //jQuery还可以进行事件的解绑,off()
    //如果不传入事件类型表示解绑"通过jQuery方式动态绑定的所有事件"
    //如果传入事件类型只解绑该类事件
    $("#ipt").off("click")
</script>
</body>
</html>

3.4 JQuery的遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery的遍历</title>
    <script src="jq/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="text" value="张三">
<input type="text" value="李四">
<input type="text" value="王五">
<script>
    let arr = ["a", "b", "c", "d"]

    //获取所有的input标签
    let $input = $("input");

    //回忆使用js的方式进行遍历: 1. for循环
    /*for (var i = 0; i < $input.length; i++) {
        //遍历出来的每一个input标签是js对象
        var $inputElement = $input[i];
        var value = $inputElement.value;
        console.log(value)
    }*/

    //使用ECMAScript6 之后的语法 for of进行遍历
    /*for(element of $input){
        //遍历出来的每一个元素是js对象
        var value = element.value;
        console.log(value)
    }*/

    //jQuery对象的each()方法
    $input.each(function (index, element) {
        console.log(index + "," + element.value);
    })

    //jQuery全局的each()方法，这个方法不需要使用jQuery的对象调用，而是使用$调用
    $.each(arr, function (index, element) {
        console.log(index + "," + element);
    })
    $.each($input, function (index, element) {
        console.log(index + "," + element.value);
    })
</script>
</body>
</html>

二.JQ案例

1.页面定时弹出广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时弹出广告</title>
    <script src="jq/jquery-3.3.1.min.js"></script>
</head>
<body>

<img id="ad" src="img/ad.jpg" style="display: none;width:100%;"/>
</body>
<script>
    // 显示的函数
    function show() {
        $("#ad").show(3000, function () {
            setTimeout(hide, 3000);
        });
    }

    // 隐藏的函数
    function hide() {
        $("#ad").hide(3000);
    }

    setTimeout(show, 3000);
</script>
</html>

2.表格的隔行换色与复选框全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行换色</title>
    <style>
        .greenStyle {
            background-color: lawngreen;
        }
        .blueStyle {
            background-color: lightskyblue;
        }
        .redStyle {
            background-color: red;
        }
    </style>
    <script src="jq/jquery-3.3.1.min.js"></script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center" cellspacing="0">
    <tr>
        <td colspan="5"><input id="unSelectAll" type="button" value="删除" onclick="unSelectAll()"></td>
    </tr>

    <tr style="background-color: #999999;">
        <th><input id="selectAll" type="checkbox" onclick="selectAll(this)"></th>
        <th>分类ID</th>
        <th>分类名称</th>
        <th>分类描述</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox" class="itemSelected"></td>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="itemSelected"></td>
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="itemSelected"></td>
        <td>3</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="itemSelected"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
</table>
</body>
<script>
    //隔行换色其实就是实线奇偶行的颜色不一样,也就是给奇偶行添加不同的类名
    $("tr:odd").addClass("greenStyle");
    $("tr:even").addClass("blueStyle");

    //当鼠标移入某行的时候，就给该行的背景色变成红色，当鼠标移出某行的时候就将该行的背景色还原
    let className = null;
    //给所有行绑定鼠标移入事件
    $("tr").mouseover(function () {
        className = this.className;
        this.className = "redStyle";
    })
    //给所有行绑定鼠标移出事件
    $("tr").mouseout(function () {
        this.className = className;
    })
    //一、实现全选功能
    function selectAll(obj) {
        $(".itemSelected").prop("checked", obj.checked);
    }
    //二、实现反选功能
    function unSelectAll() {
        // $(".itemSelected").prop("checked",false);
        $(".itemSelected").click();
    }
    // 全选与非全选同步功有
    $(".itemSelected").click(function () {
        $("#selectAll").prop("checked", $(".itemSelected").length == $(".itemSelected:checked").length)
    })

</script>
</html>

3.电子时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电子时钟案例</title>
    <style>
        div {
            font-size: 30px;
            color: green;
        }
    </style>
    <script src="jq/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="time"></div>
<input type="button" value="开始" onclick="startTime()">
<input type="button" value="暂停" onclick="pauseTime()">
</body>
<script>
    let interval;
    function startTime() {
        clearInterval(interval);
        interval = setInterval(function () {
            $("#time").text(new Date().toLocaleString());
        }, 1000);
    }
    function pauseTime() {
        clearInterval(interval);
    }
</script>
</html>

4.省市联动效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市二级联动</title>
    <script src="jq/jquery-3.3.1.min.js"></script>
</head>
<body>
<!--
        给省份的下拉框绑定change事件
    -->
<select id="provinceSelect" onchange="changeProvince(this.value)">
    <option value="0">请选择省份</option>
    <option value="1">广东省</option>
    <option value="2">湖南省</option>
    <option value="3">湖北省</option>
</select>
<select id="citySelect">
    <option>请选择城市</option>
</select>
</body>
<script>
    let cities = [
        [],
        ["广州", "深圳", "惠州", "东莞"],
        ["长沙", "岳阳", "常德", "衡阳"],
        ["武汉", "黄冈", "宜昌", "荆州"]
    ]
    function changeProvince(index) {
        let city = cities[index];
        $("#citySelect").html("<option>请选择城市</option>");
        $.each(city, function (index, element) {
            $("#citySelect").append("<option>" + element + "</option>");
        })
    }
</script>
</html>

三.同步请求与异步请求

1.JavaScript中的同步请求与异步请求

同步请求: 浏览器发出一个请求, 必须等待服务器响应之后才能接着发起下一个请求; (在不使用AJAX的情况下, JavaWeb中请求服务器上的资源一般有超链接标签, form表单提交等方式; )

异步请求: 浏览器发出一个请求, 不必等待服务器响应就可以继续发起下一个请求; 每个请求响应之后, 更新相应的网页区域; (也就是可以控制网页中局部的视图数据显示, 是通过AJAX实现的, 也可以理解为网页的碎片化, 每个碎片之间互不影响)

2.AJAX

Asynchronous Javascript And XML(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术;

传统的网页 (不使用AJAX) 如果需要更新内容,必须重载整个页面; 而AJAX可以使网页面实现异步更新,也就是说可以在不重新加载整个网页的情况下,对网页的局部进行更新;

3.异步get与post请求

3.1 使用JS原始方式

<a href="javascript:;" onclick="fn1()">异步的get请求访问</a><br>
<a href="javascript:;" onclick="fn2()">异步的post请求访问</a><br>
<script>
    //声明一个发送异步请求的方法
    function fn1() {
        //使用js原生的代码发送异步的get请求
        //1. 创建一个ajax引擎对象
        let xhr = new XMLHttpRequest();
        //2. 建立和服务器的连接
        xhr.open("GET","/demo01?username=jay")
        //3. 发送请求
        xhr.send()
        //4. 处理响应
        //也就是怎么展示响应数据: 将响应数据展示到id为msg的div中
        xhr.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                //获取响应数据
                var responseText = xhr.responseText;
                //展示响应数据
                document.getElementById("msg").innerHTML = responseText
            }
        }
    }
    
    //声明一个方法发送异步的post请求
    function fn2() {
        //使用js原生的代码发送异步的post请求
        //1. 创建一个ajax引擎对象
        var xhr = new XMLHttpRequest();
        //2. 创建连接
        xhr.open("POST","/demo01")
        //3. 发送请求
        //post请求携带参数之前，先要设置Content-Type请求头，指定请求参数类型
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
        xhr.send("username=jay")
        //4. 处理响应
        xhr.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                //获取响应数据
                var responseText = xhr.responseText;
                //展示响应数据
                document.getElementById("msg").innerHTML = responseText
            }
        }
    }
</script>

3.2 使用JQuery方式

请求方式	语法
GET请求	$.get(url, [data], [callback], [type])
POST请求	$.post(url, [data], [callback], [type])
AJAX请求	$.ajax([settings])

参数名称	解释
url	请求的服务器端url地址
data	发送给服务器端的请求参数，格式是key=value
callback	当请求成功后的回掉函数，可以在函数体中编写我们的逻辑代码
type	预期的返回数据的类型(默认为text)，取值可以是 xml, html, script, json, text, _defaul等

属性名称	解释
url	请求的服务器端url地址
async	(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false
data	发送到服务器的数据，可以是键值对形式，也可以是js对象形式
type	(默认: "GET") 请求方式 ("POST" 或 "GET")，默认为 "GET"
dataType	预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等
success	请求成功后的回调函数
error	请求失败时调用此函数

<script>
    //声明一个方法使用jQuery的ajax方法发送异步get请求
    function fn1() {
        $.get("/demo01?username=tom",function (result) {
            //在这个回调函数中处理响应数据result
            
        },"json")
    }
    
    //声明一个方法使用jQuery的ajax方法发送异步post请求
    function fn2() {
        $.post("/demo01","username=jack",function (result) {
            //在这个回调函数中处理响应数据result
            
        },"json")
    }
    
    //声明一个方法使用JQuery的ajax方法发送异步请求
    function fn3() {
        $.ajax({
            url:"/demo01", //请求路径
            data:"username=lucy", //请求参数
            type:"POST", //请求方式
            success:function (result) {
                //请求成功时候的回调函数
              
            }, 
            error:function () {
                //请求失败时候的回调函数
                
            } 
        })
    }
</script>

JQuery与AJAX

JQuery与AJAX

一.JQ

1.什么是JQ

2.JQ的作用

3.JQ的使用

3.1 JQ对象的获取及与JS对象的转换

3.2 JQuery操作DOM对象

3.2.1 JQuery的选择器

基本选择器

层级选择器

属性选择器

基本过滤选择器

表单属性过滤选择器

3.2.2 JQuery操作标签的样式

3.2.3 JQuery操作标签的属性

3.2.4 JQuery操作标签体的内容

3.2.5 JQuery创建, 删除, 添加标签

3.3 JQuery的事件

3.4 JQuery的遍历

二.JQ案例

1.页面定时弹出广告

2.表格的隔行换色与复选框全选

3.电子时钟

4.省市联动效果

三.同步请求与异步请求

1.JavaScript中的同步请求与异步请求

2.AJAX

3.异步get与post请求

3.1 使用JS原始方式

3.2 使用JQuery方式