什么是过滤选择器

在现有已经选择的元素基础之上，再次进行过滤，得到剩下的元素。类似于CSS中伪类选择器语法

语法

基本过滤选择器	语法
获得选择的元素中的第一个元素	:first
获得选择的元素中的最后一个元素	:last
不包括指定内容的元素	:not()
偶数，从 0 开始计数	:even
奇数，从 0 开始计数	:odd
等于第几个 equals	:eq()
大于第n个，不含第index个	:gt()
小于第n个，不含第index个	:lt()

    <title>过滤器选择器</title>
</head>
<body>
    <div>div1</div>
    <div id="div2">div2</div>
    <div>div3</div>
    <div>div4</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.首元素选择器	$("A:first");
    let div1 = $("div:first");
    //alert(div1.html());

    // 2.尾元素选择器	$("A:last");
    let div4 = $("div:last");
    //alert(div4.html());

    // 3.非元素选择器	$("A:not(B)");
    let divs1 = $("div:not(#div2)");
    //alert(divs1.length);

    // 4.偶数选择器	    $("A:even");
    let divs2 = $("div:even");
    //alert(divs2.length);
    //alert(divs2[0].innerHTML);
    //alert(divs2[1].innerHTML);

    // 5.奇数选择器	    $("A:odd");
    let divs3 = $("div:odd");
    //alert(divs3.length);
    //alert(divs3[0].innerHTML);
    //alert(divs3[1].innerHTML);

    // 6.等于索引选择器	 $("A:eq(index)");
    let div3 = $("div:eq(2)");
    //alert(div3.html());

    // 7.大于索引选择器	 $("A:gt(index)");
    let divs4 = $("div:gt(1)");
    //alert(divs4.length);
    //alert(divs4[0].innerHTML);
    //alert(divs4[1].innerHTML);

    // 8.小于索引选择器	 $("A:lt(index)");
    let divs5 = $("div:lt(2)");
    alert(divs5.length);
    alert(divs5[0].innerHTML);
    alert(divs5[1].innerHTML);
    
</script>

表单属性选择器

注：表单过滤选择器用于表单中元素

表单属性选择器	语法
可用	:enabled
不可用	:disabled
选中（单选radio ，多选checkbox）	:checked
选择（下列列表<select>中的<option>）	:selected

    <title>表单属性选择器</title>
</head>
<body>
    <input type="text" disabled>
    <input type="text" >
    <input type="radio" name="gender" value="men" checked>男
    <input type="radio" name="gender" value="women">女
    <input type="checkbox" name="hobby" value="study" checked>学习
    <input type="checkbox" name="hobby" value="sleep" checked>睡觉
    <select>
        <option>---请选择---</option>
        <option selected>本科</option>
        <option>专科</option>
    </select>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //[]默认只能选择写在标签中的属性
    // 1.可用元素选择器  $("A:enabled");
    let ins1 = $("input:enabled");

    //alert(ins1.length);

    // 2.不可用元素选择器  $("A:disabled");
    let ins2 = $("input:disabled");
    //alert(ins2.length);

    // 3.单选/复选框被选中的元素  $("A:checked");
    let ins3 = $("input:checked");
    //alert(ins3.length);
    //alert(ins3[0].value);
    //alert(ins3[1].value);
    //alert(ins3[2].value);

    // 4.下拉框被选中的元素   $("A:selected");
    let select = $("select option:selected");
    alert(select.html());
    
</script>

DOM操作的方法：html()，text()，val()

目标

在JQ中如何操作innerHTML、innerText、value属性

jQuery的DOM操作方法

操作方法的特点：所有的方法既可以设置值(set)，又可以获取值(get)

语法

html() 类似于以前innerHTML，修改或获取元素内部的HTML的内容，标签是起作用的。
text() 类似于以前的innerText，标签是不起作用的
val() 类似于以前的value属性，设置或获取值。如：val("值")设置值   val()获取值

    <title>操作文本</title>
</head>
<body>
    <div id="div">我是div</div>
    <input type="button" id="btn1" value="获取div的文本">
    <input type="button" id="btn2" value="设置div的文本">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
     //1. html()   获取标签的文本内容
     $("#btn1").click(function(){
         //获取div标签的文本内容
         let value = $("#div").html();
         alert(value);
     });

     //2. html(value)   设置标签的文本内容，解析标签
     $("#btn2").click(function(){
         //设置div标签的文本内容
         //$("#div").html("我真的是div");
         $("#div").html("<b>我真的是div</b>");
     });
</script>

DOM操作的方法：元素的创建和添加

JS中创建元素：createElement()

JS添加到DOM树：appendChild()

语法

方法名	描述
$(标签的全部内容)	创建一个元素
父元素.append(子元素)	追加成最后一个子元素
父元素.prepend(子元素)	追加成第一个子元素
元素.before(元素)	添加到当前元素的前面
元素.after(元素)	添加到当前元素的后面

    <title>操作对象</title>
</head>
<body>
    <div id="div"></div>
    <input type="button" id="btn1" value="添加一个span到div"> <br><br><br>

    <input type="button" id="btn2" value="将加油添加到城市列表最下方"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn3" value="将加油添加到城市列表最上方"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn4" value="将雄起添加到上海下方"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn5" value="将雄起添加到上海上方"> &nbsp;&nbsp;&nbsp;
    <ul id="city">
        <li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="gz">广州</li>
        <li id="sz">深圳</li>
    </ul>
    <ul id="desc">
        <li id="jy">加油</li>
        <li id="xq">雄起</li>
    </ul>  <br><br><br>
    <input type="button" id="btn6" value="将雄起删除"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn7" value="将描述列表全部删除"> &nbsp;&nbsp;&nbsp;
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    /*
        1. $("元素")   创建指定元素
        2. append(element)   添加成最后一个子元素，由添加者对象调用
        3. appendTo(element) 添加成最后一个子元素，由被添加者对象调用
        4. prepend(element)  添加成第一个子元素，由添加者对象调用
        5. prependTo(element) 添加成第一个子元素，由被添加者对象调用
        6. before(element)    添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用
        7. after(element)     添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用
        8. remove()           删除指定元素(自己移除自己)
        9. empty()            清空指定元素的所有子元素
    */
    
    // 按钮一：添加一个span到div
    $("#btn1").click(function(){
    
    
        let span = $("<span>span</span>");
        $("#div").append(span);
    });
    

    //按钮二：将加油添加到城市列表最下方
    $("#btn2").click(function(){
    
    
        //$("#city").append($("#jy"));
        $("#jy").appendTo($("#city"));
    });

    //按钮三：将加油添加到城市列表最上方
    $("#btn3").click(function(){
    
    
        //$("#city").prepend($("#jy"));
        $("#jy").prependTo($("#city"));
    });
    

    //按钮四：将雄起添加到上海下方
    $("#btn4").click(function(){
    
    
        $("#sh").after($("#xq"));
    });
    

    //按钮五：将雄起添加到上海上方
    $("#btn5").click(function(){
    
    
        $("#sh").before($("#xq"));
    });

    //按钮六：将雄起删除
    $("#btn6").click(function(){
    
    
        $("#xq").remove();
    });
    

    //按钮七：将描述列表全部删除
    $("#btn7").click(function(){
    
    
        $("#desc").empty();
    });
    
</script>

DOM操作的方法：与样式有关的方法

在JS中操作CSS的方法：

元素.style.样式名=样式值

元素.className=类名

与类名有关的方法

addClass("类名") 添加一个类样式，与CSS中第二种写法功能相同，如：addClass("一个或多个类名")
removeClass("类名") 移除一个类样式，让类样式不起作用
toggleClass("类名") 切换类样式，如果有这个class名就移除，如果没有就添加

与样式有关的方法

类似于css中方式一，修改行内样式

在这里插入图片描述

方法名	功能
addClass(类样式名)	添加类样式
removeClass(类样式名)	移除类样式
toggleClass(类样式名)	上面2个方法的切换
css(样式名)	获取指定样式值
css(样式名,样式值)	设置指定的样式

 <title>操作样式</title>
    <style>
        .cls1{
    
    
            background: pink;
            height: 30px;
        }
    </style>
</head>
<body>
    <div style="border: 1px solid red;" id="div">我是div</div>
    <input type="button" id="btn1" value="获取div的样式"> &nbsp;&nbsp;
    <input type="button" id="btn2" value="设置div的背景色为蓝色">&nbsp;&nbsp;
    <br><br><br>
    <input type="button" id="btn3" value="给div设置cls1样式"> &nbsp;&nbsp;
    <input type="button" id="btn4" value="给div删除cls1样式"> &nbsp;&nbsp;
    <input type="button" id="btn5" value="给div设置或删除cls1样式"> &nbsp;&nbsp;
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.css(name)   获取css样式
    $("#btn1").click(function(){
    
    
        alert($("#div").css("border"));
    });

    // 2.css(name,value)   设置CSS样式
    $("#btn2").click(function(){
    
    
        $("#div").css("background","blue");
    });

    // 3.addClass(value)   给指定的对象添加样式类名
    $("#btn3").click(function(){
    
    
        $("#div").addClass("cls1");
    });

    // 4.removeClass(value)  给指定的对象删除样式类名
    $("#btn4").click(function(){
    
    
        $("#div").removeClass("cls1");
    });

    // 5.toggleClass(value)  如果没有样式类名，则添加。如果有，则删除
    $("#btn5").click(function(){
    
    
        $("#div").toggleClass("cls1");
    });
    
</script>

DOM操作的方法：与属性有关的方法

目标

学习attr()、removeAttr()、prop()、removeProp()方法的使用

语法

attr() 修改，添加或获取元素的属性。
	attr("属性名","值") 如果属性名不存在就是添加，如果存在就是修改。两个参数是添加或修改
	attr("属性名") 一个参数就是获取属性的值
prop() 修改，添加或获取元素的属性。
	prop("属性名","值") 如果属性名不存在就是添加，如果存在就是修改。两个参数是添加或修改
	prop("属性名") 一个参数就是获取属性的值
removeAttr(),removeProp() 删除指定的属性
	jq对象.removeAttr("src")
	jq对象.removeProp("href")

什么时候使用attr()和prop()

如果属性值是true或false，建议使用prop()，编程更加方便

在这里插入图片描述

方法名	功能描述
attr()	操作属性
prop()	操作布尔类型值的属性
removeAttr() /removeProp()	删除属性名和值

    <title>操作属性</title>
</head>
<body>
    <input type="text" id="username"> 
    <br>
    <input type="button" id="btn1" value="获取输入框的id属性">  &nbsp;&nbsp;
    <input type="button" id="btn2" value="给输入框设置value属性">
    <br><br>

    <input type="radio" id="gender1" name="gender">男
    <input type="radio" id="gender2" name="gender">女
    <br>
    <input type="button" id="btn3" value="选中女">
    <br><br>
    
    <select>
        <option>---请选择---</option>
        <option id="bk">本科</option>
        <option id="zk">专科</option>
    </select>
    <br>
    <input type="button" id="btn4" value="选中本科">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.attr(name,[value])   获得/设置属性的值
    //按钮一：获取输入框的id属性
    $("#btn1").click(function(){
    
    
        alert($("#username").attr("id"));
    });
    
    //按钮二：给输入框设置value属性
    $("#btn2").click(function(){
    
    
        $("#username").attr("value","hello...");
    });
    

    // 2.prop(name,[value])   获得/设置属性的值(checked，selected)
    //按钮三：选中女
    $("#btn3").click(function(){
    
    
        $("#gender2").prop("checked",true);
    });

    //按钮四：选中本科
    $("#btn4").click(function(){
    
    
        $("#bk").prop("selected",true);
    });
</script>

案例1复选框

    <title>复选框</title>
</head>
<body>
    <table id="tab1" border="1" width="800" align="center">
        <tr>
            <th style="text-align: left">
                <input style="background:lightgreen" id="selectAll" type="button" value="全选">
                <input style="background:lightgreen" id="selectNone" type="button" value="全不选">
                <input style="background:lightgreen" id="reverse" type="button" value="反选">
            </th>
    
            <th>分类ID</th>
            <th>分类名称</th>
            <th>分类描述</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>1</td>
            <td>手机数码</td>
            <td>手机数码类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>2</td>
            <td>电脑办公</td>
            <td>电脑办公类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>3</td>
            <td>鞋靴箱包</td>
            <td>鞋靴箱包类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>4</td>
            <td>家居饰品</td>
            <td>家居饰品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
    </table>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //全选
    //1.为全选按钮添加单击事件
    $("#selectAll").click(function(){
    
    
        //2.获取所有的商品复选框元素，为其添加checked属性，属性值true
        $(".item").prop("checked",true);
    });

$("#selectAll").click(function(){
    
    
    $(".item").prop("checked",true)
})
    //全不选
    //1.为全不选按钮添加单击事件
    $("#selectNone").click(function(){
    
    
        //2.获取所有的商品复选框元素，为其添加checked属性，属性值false
        $(".item").prop("checked",false);
    });


    //反选
    //1.为反选按钮添加单击事件
    $("#reverse").click(function(){
    
    
        //2.获取所有的商品复选框元素，为其添加checked属性，属性值是目前相反的状态
        let items = $(".item");
        items.each(function(){
    
    
            $(this).prop("checked",!$(this).prop("checked"));
        });
    });
</script>

案例2随机图片

    <title>随机图片</title>
</head>
<body>
<!-- 小图 -->
<div style="background-color:red;border: dotted; height: 50px; width: 50px">
    <img src="img/01.jpg" id="small" style="width: 50px; height: 50px;">
</div>
<!-- 大图 -->
<div style="border: double ;width: 400px; height: 400px; position: absolute; left: 500px; top:10px">
    <img src="" id="big" style="width: 400px; height: 400px;">
</div>

<!-- 开始和结束按钮 -->
<input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="开始">
<input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="停止">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.准备一个数组
    let imgs = [
        "img/01.jpg",
        "img/02.jpg",
        "img/03.jpg",
        "img/04.jpg",
        "img/05.jpg",
        "img/06.jpg",
        "img/07.jpg",
        "img/08.jpg",
        "img/09.jpg",
        "img/10.jpg"];
		
    //2.定义计数器变量
    let count = 0;
    
    //3.声明定时器对象
    let time = null;
    
    //4.声明图片路径变量
    let imgSrc = "";
    
    //5.为开始按钮绑定单击事件
    $("#startBtn").click(function(){
    
    
        //6.设置按钮状态
        //禁用开始按钮
        $("#startBtn").prop("disabled",true);
        //启用停止按钮
        $("#stopBtn").prop("disabled",false);
        
        //7.设置定时器，循环显示图片
        time = setInterval(function(){
    
    
            //8.循环获取图片路径
            let index = count % imgs.length; // 0%10=0  1%10=1  2%10=2 .. 9%10=9  10%10=0  
                    
            //9.将当前图片显示到小图片上
            imgSrc = imgs[index];
            $("#small").prop("src",imgSrc);
                    
            //10.计数器自增
            count++;
        },10);
    });


    //11.为停止按钮绑定单击事件
    $("#stopBtn").click(function(){
    
    
        //12.取消定时器
        clearInterval(time);
        
        //13.设置按钮状态
        //启用开始按钮
        $("#startBtn").prop("disabled",false);
        //禁用停止按钮
        $("#stopBtn").prop("disabled",true);
            
        //14.将图片显示到大图片上
        //$("#big").prop("src",imgSrc);                 $("#big").prop("src",$("#small).attr("src"));
        $("#big").prop("style","width: 400px; height: 400px;");
    });
    
    
     
</script>

AJax

概念：Asynchronous JavaScript And XML 异步的JavaScript和XML

异步
JavaScript
XML

同步和异步的区别
- 同步方式：正常情况下，浏览器与服务器之间是串行操作，类似于一个Java线程的操作。
- 异步方式：浏览器与服务器是并行操作，类似于Java中多个线路同时工作。
即浏览器后台发送数据给服务器，不是通过表单去提交数据给服务器。

用户在前台还是可以继续工作，用户感觉不到浏览器已经将数据发送给了服务器，并且服务器也已经返回了数据。

$.get(url,data,callback,type)

$.post(url,data,callback,type)
只有第1个是必须的选项

url: 表示请求服务器地址(servlet注解地址)

data: 发送给服务器的数据
格式1：键1=值2&键2=值2
格式2：{键:值,键:值}

callback：回调函数，参数是服务器返回的数据

type：从服务器返回的数据类型，默认是字符串类型
取值：xml, html, script, json, text

jQuery中$.ajax()方法的使用

目标

$.ajax()方法的使用
案例：使用ajax实现后台用户登录功能

语法

在这里插入图片描述

settings是一个JSON形式的对象，格式是{name:value,name:value… …}，常用的name属性名如下：

$.ajax({键:值,键:值}) 属性名称	解释
url	服务器访问地址
async	默认是异步，取值是true，设置为false表示同步
method	GET或POST方法
data	发送给服务器的数据，2种格式： 1. 键=值&键=值 2. {键:值, 键:值}
dataType	服务器返回的数据类型取值：xml, html, script, json, text
success	服务器正常响应的回调函数，参数就是服务器返回的数据
error	服务器出现异常的回调函数，参数是XMLHttpRequest对象

jQuery3.0的$.get()和$.post方法

目标

学习3.0新的 $. g e t () 或$ .post()方法，签名与$.ajax()完全一样
使用 $. g e t () 或$ .post()方法实现登录

新增签名方式语法

在这里插入图片描述

在jQuery框架中， $符号相当于 j Q u e r y 这个单词，所有出现$ 的地方都可以使用jQuery来代替

在这里插入图片描述

参数说明

在这里插入图片描述

get方式

<script>
    //1.为用户名绑定失去焦点事件
    $("#username").blur(function () {
    
    
        let username = $("#username").val();
        //2.jQuery的GET方式实现AJAX
        $.get(
            //请求的资源路径
            "userServlet",
            //请求参数
            "username=" + username,
            //回调函数
            function (data) {
    
    
                //将响应的数据显示到span标签
                $("#uSpan").html(data);
            },
            //响应数据形式
            "text"
        );
    });
</script>

post方式

<script>
    //1.为用户名绑定失去焦点事件
    $("#username").blur(function () {
    
    
        let username = $("#username").val();
        //2.jQuery的POST方式实现AJAX
        $.post(
            //请求的资源路径
            "userServlet",
            //请求参数
            "username=" + username,
            //回调函数
            function (data) {
    
    
                //将响应的数据显示到span标签
                $("#uSpan").html(data);
            },
            //响应数据形式
            "text"
        );
    });
</script>

通用的请求方式

get post 都可以用

@WebServlet("/userServlet")

    //1.为用户名绑定失去焦点事件
    $("#username").blur(function () {
    
    
        let username = $("#username").val();
        //2.jQuery的通用方式实现AJAX
        $.ajax({
    
    
            //请求资源路径
            url:"userServletxxx",
            //是否异步
            async:true,
            //请求参数
            data:"username="+username,
            //请求方式
            type:"POST",
            //数据形式
            dataType:"text",
            //请求成功后调用的回调函数
            success:function (data) {
    
    
                //将响应的数据显示到span标签
                $("#uSpan").html(data);
            },
            //请求失败后调用的回调函数
            error:function () {
    
    
                alert("操作失败...");
            }
        });

JSON转换工具

jackson

package com.itheima02;

import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;

import java.util.ArrayList;
import java.util.HashMap;

/*
    JSON转换工具的使用
 */
public class ObjectMapperTest {
    
    
    private ObjectMapper mapper = new ObjectMapper();
    /*
        1.User对象转json, json转User对象
          json字符串 = {"name":"张三","age":23}
          user对象 = User{name='张三', age=23}
     */
    @Test
    public void test01() throws Exception{
    
    
        //User对象转json
        User user = new User("张三",23);
        String json = mapper.writeValueAsString(user);
        System.out.println("json字符串：" + json);

        //json转User对象
        User user2 = mapper.readValue(json, User.class);
        System.out.println("java对象：" + user2);
    }

    /*
         2.map<String,String>转json, json转map<String,String>
          json字符串 = {"姓名":"张三","性别":"男"}
          map对象 = {姓名=张三, 性别=男}
     */
    @Test
    public void test02() throws Exception{
    
    
        //map<String,String>转json
        HashMap<String,String> map = new HashMap<>();
        map.put("姓名","张三");
        map.put("性别","男");
        String json = mapper.writeValueAsString(map);
        System.out.println("json字符串：" + json);

        //json转map<String,String>
        HashMap<String,String> map2 = mapper.readValue(json, HashMap.class);
        System.out.println("java对象：" + map2);
    }

    /*
        3.map<String,User>转json, json转map<String,User>
          json字符串 = {"黑马一班":{"name":"张三","age":23},"黑马二班":{"name":"李四","age":24}}
          map对象 = {黑马一班=User{name='张三', age=23}, 黑马二班=User{name='李四', age=24}}
     */
    @Test
    public void test03() throws Exception{
    
    
        //map<String,User>转json
        HashMap<String,User> map = new HashMap<>();
        map.put("黑马一班",new User("张三",23));
        map.put("黑马二班",new User("李四",24));
        String json = mapper.writeValueAsString(map);
        System.out.println("json字符串：" + json);
//new TypeReference<HashMap<String,User>>(){}为抽象类
        //json转map<String,User>
        HashMap<String,User> map2 = mapper.readValue(json,new TypeReference<HashMap<String,User>>(){
    
    });
        System.out.println("java对象：" + map2);
    }

    /*
        4.List<String>转json, json转 List<String>
          json字符串 = ["张三","李四"]
          list对象 = [张三, 李四]
     */
    @Test
    public void test04() throws Exception{
    
    
        //List<String>转json
        ArrayList<String> list = new ArrayList<>();
        list.add("张三");
        list.add("李四");
        String json = mapper.writeValueAsString(list);
        System.out.println("json字符串：" + json);

        //json转 List<String>
        ArrayList<String> list2 = mapper.readValue(json,ArrayList.class);
        System.out.println("java对象：" + list2);
    }

    /*
        5.List<User>转json, json转List<User>
          json字符串 = [{"name":"张三","age":23},{"name":"李四","age":24}]
          list对象 = [User{name='张三', age=23}, User{name='李四', age=24}]
     */
    @Test
    public void test05() throws Exception{
    
    
        //List<User>转json
        ArrayList<User> list = new ArrayList<>();
        list.add(new User("张三",23));
        list.add(new User("李四",24));
        String json = mapper.writeValueAsString(list);
        System.out.println("json字符串：" + json);

        //json转List<User>
        ArrayList<User> list2 = mapper.readValue(json,new TypeReference<ArrayList<User>>(){
    
    });
        System.out.println("java对象：" + list2);
    }
}


### 浏览器端检查：F12
1. 结构
2. 代码，日志信息
3. 调试用的 源代码
4. 查看网络请求：post请求、

JQuery框架(选择器.DOM)&&AJax完结篇汇总

什么是过滤选择器

语法

表单属性选择器

DOM操作的方法：html()，text()，val()

目标

jQuery的DOM操作方法

语法

DOM操作的方法：元素的创建和添加

语法

DOM操作的方法：与样式有关的方法

与类名有关的方法

与样式有关的方法

DOM操作的方法：与属性有关的方法

目标

语法

什么时候使用attr()和prop()

案例1复选框

案例2随机图片

AJax

同步和异步的区别

jQuery中$.ajax()方法的使用

目标

语法

jQuery3.0的$.get()和$.post方法

目标

新增签名方式语法

参数说明

get方式

post方式

通用的请求方式

JSON转换工具

猜你喜欢