其他分享
首页 > 其他分享> > Practical Training Jquery 课二-属性和样式--课堂代码及注释

Practical Training Jquery 课二-属性和样式--课堂代码及注释

作者:互联网

 

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <script src="./js/jquery-3.3.1.min.js"></script>     <script>         $(function(){             // attr(属性名)  === 获取属性值             // attr(属性名,属性值) === 设置属性             // $("span").attr("data-id","1002");             // console.log($("span").attr("id"));             //             // console.log($("span").attr("data-id"));             // =========             // 获取的是布尔值             // var chk = $("#sex").prop("checked");  // 选择返回 true false             // console.log(chk);             // 获取的是字符串             // var chk2 = $("#sex").attr("checked"); //选择返回checked  undefined             // console.log(chk2);
            // $(":checkbox").attr("checked",true);             // $(":checkbox").prop("checked",true);
            $("#sex").change(function(){                 // $(":checkbox").prop("checked",false);                 // 选中当前 #sex 的状态、                 var chk1 = $(this).prop("checked");                 // 把#sex 选中的给chk1 再给 checked (选中)                 $(":checkbox").prop("checked",chk1);                 // console.log(chk1);             });             $("#sex2").change(function(){                 // :checkbox:not([id])  在:checkbox中找没有:not([id]) id的 标签                 $(":checkbox:not([id])").each(function(index,item){                     //1.$(selector).each()                     // 主要对DOM的遍历  dom==(就相当于标签)                     // $(selector).each(function(index,item)){undefined                     // //index - 选择器的 index 位置 从0开始                     // //item - 当前的选择器(也可使用 “this” 选择器)                     // }                     // 以上是关于each中item 的意思的解析                     console.log(item);                   var ck = $(item).prop("checked");                     // console.log(ck);                     // 一般情况下使用的是prop                       $(item).prop("checked",!ck);// !ck 反选==取反                 });             });             // 没有参数时、获取带参数时的设置             // html()==>这叫获取 html(参数1,参数2)===>当里面有参数时,就是设置             // html()  获取的是 div<span>span</span> 里面的内容 包括html标签的代码 文本 标签 图片等             // text()  获取的是 divspan  纯文本 把其他标签 图片等都过滤掉             // val()   交互控件(表单控件)的值   ""             // 交互控件:例如下拉列表 单选框复选框等             // 在设置时,html会解析其中的标签,text不会解析,只是原样输出,val也只是输出 不会解析
            // var html = $("div").html();             // var text = $("div").text();             // var val = $("div").val();             // console.log(html,text,val);             // $("div").html("<h1>h1</h1>");             // $("div").text("<h1>h1</h1>");             // $("div").val("<h1>h1</h1>");
            $("div").css("color","red");
            // $("div").width();  //.width()这个叫函数             $("div").css("width","200px");         });     </script> </head> <body>     <div class="a" style="">div<span>span</span></div>     <form action="#">         <span id="span" data-id="1001">姓名:</span>         <input type="text" name="name">         <br>         <input type="checkbox" name="sex" id="sex" checked>         <label for="sex">全选/全不选</label>         <input type="checkbox" name="sex" id="sex2" >         <label for="sex">反选</label>     </form>     <!-- ======== -->     <!-- 把原有的id 在input中删除、之后再上面的     $(":checkbox").each(function(index,item){ 中前面的那部分加上:not([id])     完整的是     $(":checkbox:not([id])").each(function(index,item){     -->     <input type="checkbox" name=""  >     <input type="checkbox" name=""  >     <input type="checkbox" name=""  > </body> </html>

标签:Jquery,Training,checked,log,prop,Practical,html,console,div
来源: https://www.cnblogs.com/zky1012/p/15529364.html