JQuery基本语法&&选择器&&DOM

JQuery基本语法&&选择器&&DOM

jQuery 快速入门

jQuery介绍

  JS 框架:使用 JS 来编写的,框架本身是一个半成品。类似于房子中毛坯房。需要程序员在这个基础上再次开发，实现各种功能
   jQuery 框架只是众多 JS 框架中一个
      
jQuery 是一个 JavaScript 库  -->轻量级JS框架 
   所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就是在使用时直接调用，不需要再重复定义，这样就可以极大地简化了 JavaScript 编程。 
     
   jQuery： jQuery 框架功能强大，使用简单，占用资源少。免费，开源 
     1.兼容CSS3和各大浏览器
     2.提供了dom、events、animate、ajax等的简易操作
     3. 还有非常丰富的插件：别人用jQuery写好的功能代码
     4. jQuery本质是js，但是功能更强、更简洁

jQuery 快速入门步骤

1. 编写 HTML 文档。
2. 引入 jQuery 文件。
3. 使用 jQuery 获取元素。
4. 使用浏览器测试。

入门案例

<script src="js/jquery-3.3.1.min.js"></script>
    //第一步导包
<script>
    // JS方式，通过id属性值来获取div元素
    let jsDiv = document.getElementById("div");
    //alert(jsDiv);
    //alert(jsDiv.innerHTML);

    // jQuery方式，通过id属性值来获取div元素
    let jqDiv = $("#div");
    alert(jqDiv);
    alert(jqDiv.html());
</script>

jQuery 基本语法

一 JS 对象和 jQuery 对象转换

    jQuery 本质上虽然也是 JS，但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery 对象，而不是 JS 方式获得的 DOM 对象，
        二者的 API 方法不能混合使用，若想使用对方的 API，需要进行对象的转换。   

1.JS对象和jQuery对象的区别

JS 对象：如果使用以前的 JS 代码得到的对象是 JS 对象，如：document.getElementById("id")
    
jQuery 对象：如果使用 JQ 选择器得到的对象是 JQ 对象，如：$("#id")    

2.为什么要转换

js 中的方法与 jq 中的方法，事件都是不同的。有时一个 JS 对象需要调用 JQ 中方法，就必须将 JS 对象转成JQ 对象才可以调用，反之亦然

JS 的 DOM 对象转换成 jQuery 对象

$(JS 的 DOM 对象);

jQuery 对象转换成 JS 对象

方式一
jQuery 对象[索引];
方式二
jQuery 对象.get(索引);

注:
JQ 对象本质上在 JS 中是一个数组对象
JQ 对象.get(0) 或 JQ 对象[0]

<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // JS方式，通过id属性值获取div元素
    let jsDiv = document.getElementById("div");
    alert(jsDiv.innerHTML);//调用js中的属性innerHTML
    //alert(jsDiv.html());  JS对象无法使用jQuery里面的功能

    // 将 JS 对象转换为jQuery对象
    let jq = $(jsDiv);
    alert(jq.html());//调用jq的方法html()


    // jQuery方式，通过id属性值获取div元素
    let jqDiv = $("#div");
    alert(jqDiv.html());
    // alert(jqDiv.innerHTML);   jQuery对象无法使用JS里面的功能
     
    // 将 jQuery对象转换为JS对象 方式一
    let js = jqDiv[0];
//方式二
  // let js = jqDiv.get(0);
    alert(js.innerHTML);//调用js中的属性
</script>

二 jQuery事件

事件的使用

事件名	说明
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onclick	鼠标单击事件
ondblclick	鼠标双击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onchange	用户改变域的内容

• 在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法

  js事件写法	jQuery事件写法
  onclick单击	click(fn)
  ondblclick双击	dblclick(fn)
  onsubmit表单提交	submit(fn)
  onchange域内容改变	change(fn)
  onload加载完成	$(fn),$(document).ready(fn)
  onfocus获取焦点	focus(fn)
  onblur失去焦点	blur(fn)
  onkeydown键盘按键按下	keydown(fn)
  onkeypress键盘按键按下、按住	keypress(fn)
  onkeyup键盘按键弹起	keyup(fn)
  onmousedown鼠标按键按下	mousedown(fn)
  onmouseup鼠标按键弹起	mouseup(fn)
  onmouseover鼠标移入	mouseover(fn)
  onmouseout鼠标移出	mouseout(fn)
  onmousemove鼠标移动	mousemove(fn)

 //单击事件
 $("#btn").click(function(){
     alert("点我干嘛?");
 });
 //获取焦点事件
 // $("#input").focus(function()
 //     alert("你要输入数据啦...
 // });
 //失去焦点事件
 $("#input").blur(function(){
     alert("你输入完成啦...");
 });

事件的绑定 方式一

jQuery 对象.on(事件名称,执行的功能); 

事件的解绑

jQuery 对象.off(事件名称);

如果不指定事件名称，则会把该对象绑定的所有事件都解绑

<script>
    //给btn1按钮绑定单击事件
    $("#btn1").on("click",function(){
        alert("点我干嘛?");
    });

    //通过btn2解绑btn1的单击事件
    $("#btn2").on("click",function(){
        $("#btn1").off("click");
    });
</script>

事件的切换

• 事件的切换：需要给同一个对象绑定多个事件，而且多个事件还有先后顺序关系

方式一：单独定义
    $(元素).事件方法名1(要执行的功能);
    $(元素).事件方法名2(要执行的功能);
    …
 
方式二：链式定义
    $(元素).事件方法名1(要执行的功能)
    .事件方法名2(要执行的功能);
    …       

例如

<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //方式一 单独定义
    // 鼠标移入颜色变红
    // $("#div").mouseover(function(){
    //     //背景色：红色
    //     //$("#div").css("background","red");
    //     $(this).css("background","red");
    // });
    //鼠标移出颜色变蓝
    // $("#div").mouseout(function(){
    //     //背景色：蓝色
    //     //$("#div").css("background","blue");
    //     $(this).css("background","blue");
    // });
     ...
    //方式二 链式定义
    $("#div").mouseover(function(){
        $(this).css("background","red");
    }).mouseout(function(){
        $(this).css("background","blue");
    });
</script>

三 遍历

方式一 传统方式
   for(let i = 0; i < 容器对象长度; i++){
        执行功能;
        } 

方式二：对象.each() 方法
    容器对象.each(function(index,ele){
        执行功能;
        });

 方式三：$.each() 方法
     $.each(容器对象,function(index,ele){
        执行功能;
        });

 方式四：for of 语句
     for(ele of 容器对象){
        执行功能;
        }

案例 点击遍历按钮实现遍历

<body>
    <input type="button" id="btn" value="遍历列表
    <ul>
        <li>传智播客</li>
        <li>黑马程序员</li>
        <li>传智专修学院</li>
    </ul>
</body>
<script src="js/jquery-3.3.1.min.js"></script>

方式一: 传统方式

 $("#btn").click(function(){
     let lis = $("li");
     for (let i = 0; i < lis.length; i++) {
         alert(i+","+lis[i].innerHTML);
     }
 })

方式二：对象.each() 方法

 $("#btn").click(function(){
 let lis = $("li");
 
 lis.each(function(index,ele){
   alert(index+":"+ele.innerHTML);
 })   
   });

方式三：$.each() 方法

$("#btn").click(function(){
    let lis = $("li");
    $.each(lis,function(index,ele){
        alert(index + ":" + ele.innerHTML);
    });
});

方式四：for of 语句

  $("#btn").click(function(){
  let lis = $("li");
  for(ele of lis) {
      alert(ele.innerHTML);
  }   
 });

方式五拓展：自定义方法

 $("#btn").click(function(){
     let lis = $("li");
     each(lis,function(index,ele){
        alert(index+":"+ele.innerHTML);
     });
 });
//自定义 each方法
 function each(els,func){
     for (let i = 0; i < els.length; i++) {
      func(i,els[i]) 
       }
 }

jQuery 选择器

基本选择器

选择器：类似于 CSS 的选择器，可以帮助我们获取元素
     jQuery 中选择器的语法：$();

选择器	语法	作用
元素选择器	$(“元素的名称”);	根据元素名称获取元素对象们
id 选择器	$("#id的属性值");	根据id属性值获取元素对象
类选择器	$(".class的属性值");	根据class属性值获取元素对象们

层级选择器

选择器	语法	作用
后代选择器	$(“A B”);	A下的所有B(包括B的子级)
子选择器	$(“A > B”);	A下的所有B(不包括B的子级)
兄弟选择器	$(“A + B”);	A相邻的下一个B
兄弟选择器	$(“A ~ B”);	A相邻的所有B

属性选择器

选择器	语法	作用
属性名选择器	$(“A[属性名]”);	根据指定属性名获取元素对象们
属性值选择器	$(“A[属性名=属性值]”);	根据指定属性名和属性值获取元素对象们
复合属性选择器	$("A[][]...")★	根据指定的多个属性名和属性值获取元素对象们

• 属性值选择器拓展

语法	作用
$(“A[属性名 != V]”)	根据指定属性名和属性值 获取属性值不等于V的元素对象们
$(“A[属性名 ^= V]”)	根据指定属性名和属性值 获取属性值以V开头的元素对象们
$(“A[属性名 $= V]”)	根据指定属性名和属性值 获取属性值以V结尾的元素对象们
$(“A[属性名 *= V]”)	根据指定属性名和属性值 获取属性值包含V的元素对象们

注意:

[]中括号的属性选择器 只能选择写在标签里的属性

选择没有写在标签里的属性,比如默认的enabled等,不会获取到

<body>
    <!--属性选择器按钮区-->
    <input type="button" id="btn1" value="包含class属性的div元素变红">
    <input type="button" id="btn2" value="class=indiv的div元素变红">
    <input type="button" id="btn7" value="包含name属性并且class的值以cl开头的spa
    <!--演示区-->
    <div id="div0" name="div0">div id=div0 name=div0</div>
    <div id="div1" class="cls">
        div id=div1  class=cls
        <div id="in1" class="indiv">
            div class=indiv
        </div>
        <span id="in2" class="indiv">
            span class=indiv
        </span>
    </div>
    <span id="span1" name="span1" class="cls">
        span1 class=cls name=span1
        <div id="in3" class="indiv">
            div class=indiv
        </div>
        <span id="in4" class="indiv">
            span class=indiv
        </span>
    </span>
    <span id="span2" name="span2">
        span id=span2 name=span2
    </span>
    <div id="div2">
        div id=div2
    </div>
    <hr />
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        //
        // $("#btn1").click(function () {
            // $("div[class]").css("background-color", "red");
        // });
        
        //    
        // $("#btn2").click(function () {
            // $("div[class='indiv']").css("background-color", "red");
        // });

        //    // $("#btn7").click(function () {
            // $("span[name][class^='cl']").css("background-color", "red");
        // });
       let s1 = $("div[class='indiv']");
       //alert(s1.length);

       

    </script>
</body>

过滤器选择器

选择器	语法	作用
首元素选择器	$(“A:first”);	获得选择的元素中的第一个元素
尾元素选择器	$(“A:last”);	获得选择的元素中的最后一个元素
非元素选择器	$(“A:not(B)”);	不包括指定内容的元素
偶数选择器	$(“A:even”);	偶数，从 0 开始计数
奇数选择器	$(“A:odd”);	奇数，从 0 开始计数
等于索引选择器	$(“A:eq(index)”);	指定索引元素
大于索引选择器	$(“A:gt(index)”);	大于指定索引元素
小于索引选择器	$(“A:lt(index)”);	小于指定索引元素

表单属性选择器

选择器	语法	作用
可用元素选择器	$(“A:enabled”);	获得可用元素
不可用元素选择器	$(“A:disabled”);
单选/复选框被选中的元素	$(“A:checked”);	获得单选/复选框选中的元素
下拉框被选中的元素	$(“A:selected”);	获得下拉框选中的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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");
    let sl = $("select option[selected]");
    alert(sl.html());//也可以使用这种方式
   // alert(select.html());
    
</script>

jQuery DOM

操作文本

方法	作用
html()	获取标签的文本
html(value)	设置标签的文本内容，解析标签

文本不解析标签方法

text()	获取标签文本
text(value),	设置标签文本内容,不解析标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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();
         //text() 方法 效果一样
        let value = $("#div").text();
         alert(value);
     });

  

     //2. html(value)   设置标签的文本内容，解析标签
     $("#btn2").click(function(){
         //设置div标签的文本内容 结果字体加粗
         $("#div").html("我真的是div");
         //text(value)方式 不会解析文本 结果显示为我真的是div 
         //$("#div").text("我真的是div");
     });

</script>
</html>

操作对象

方法	作用
$(“元素”)	创建指定元素,//没有就创建,有则获取
append(element)	添加成最后一个子元素，由添加者对象调用
appendTo(element)	添加成最后一个子元素，由被添加者对象调用
prepend(element)	添加成第一个子元素，由添加者对象调用
prependTo(element)	添加成第一个子元素，由被添加者对象调用
before(element)	添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用
after(element)	添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用
remove()	删除指定元素(自己移除自己)
empty()	清空指定元素的所有子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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");//创建标签,
       // document.createElement("soan")
         $("#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"));
       // $("#xq").after("#sh");  加入到位置不同,效果不同
    });
    

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

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

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

操作样式

方法	作用
css(name)	根据样式名称获取css样式
css(name,value)	设置CSS样式
addClass(value)	给指定的对象添加样式类名
removeClass(value)	给指定的对象删除样式类名
toggleClass(value)	如果没有样式类名，则添加。如果有，则删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作样式</title>
    <style>
        .cls1{
            background: pink;
            height: 30px;
        }
        .cls2 {
            background: chartreuse;
            width: 120px;
            height: 20px;
        }
    </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");
    // });
    $("#btn3").click(function(){
        $("#div").addClass("cls2");
    });

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

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

操作属性

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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"));
        alert($("#username").prop("id"));
    });

    //按钮二：给输入框设置value属性
    $("#btn2").click(function(){
       // $("#username").attr("value","hello...");
        $("#username").prop("value","hello...");
    });
    

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

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

复选框案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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);
         $(".item").attr("checked",true);
     });

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

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

</script>
</html>

jQuery中prop和attr区别

prop()函数的结果: 理解为属性
   property是DOM中的属性，是JavaScript里的对象
1.如果有相应的属性，返回指定属性值。

2.如果没有相应的属性，返回值是空字符串。
    
attr()函数的结果:
     attribute是HTML标签上的特性，它的值只能够是字符串
1.如果有相应的属性，返回指定属性值。
    如

2.如果没有相应的属性，返回值是undefined。
         如attr获取checked,只要HTML标签上有checked属性,
     <    checked = ""> 无论是空,还是其他
                         返回值一定是checked,
            如果标签里没有checked属性 则返回 undefined
即    attr的返回值要么是checked要么是undefined
      而使用prop 则返回true 或者false   
         
总结
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()