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