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>
