原生方法给对象加属性
<div id=”div1″>div</div>
<script src=”jquery-3.3.1.js”></script>
<script>var oDiv = document.getElementById('div1'); oDiv.aa = '123'; console.log(oDiv.aa);</script>
打印输出123 注意：此时在DOM结构中看不见值
2.oDiv.setAttribute('bb','456');
console.log(oDiv.bb);
现在DOM中可以看见值了，但是想要打印输出bb的值就要
oDiv.setAttribute('bb','456');
console.log(oDiv.getAttribute('bb'));
建议如果是自定义属性用第1种方法，如果属性的值是自带的，比如id class用第二种方式。
用jquery的方式写
1..attr（）和.prop（）都是获取值用的。
$('#div1').attr('aa','123');
console.log($('#div1').attr('aa'));
$div1.prop('bb','456');
console.log($div1.prop('bb'));
注意： .attr和.prop的区别
prop()函数的结果:
1.如果有相应的属性，返回指定属性值。
2.如果没有相应的属性，返回值是空字符串。
attr()函数的结果:
1.如果有相应的属性，返回指定属性值。
2.如果没有相应的属性，返回值是undefined。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()。
举个例子
<h1>你爱好的运动是？</h1>
<form action="">
<input type="checkbox" name="hobby">足球
<input type="checkbox" name="hobby">篮球
<input type="checkbox" name="hobby">排球
<input type="checkbox" name="hobby">羽毛球
<br>
<button id="all" type="button">全选</button>
<button id="notall" type="button">全不选</button>
<button id="reverse" type="button">反选</button>
<button type="button">提交</button>
</form>
var $hobbys = $('input[name="hobby"]');
//全选
$('#all').on('click',function(){
$hobbys.prop('checked',true);
});
//全不选
$('#notall').on('click',function(){
$hobbys.prop('checked',false);
});
1.出现了一个问题：点击按钮的时候网页回自己提交。
解决办法： form表单中的按钮button要加上一句 type="button"
<button type="button">全不选</button> 这样
2.反选
//反选时要知道哪个已经被选了 哪个没被选 要遍历一次
$('#reverse').on('click',function(){
for(var i=0; i<$hobbys.length; i++){
var elem = $('input[name="hobby"]:eq('+i+'):checked');
//表示选中的框
console.log(elem);
}
});
//打印输出
选中第二项 点击反选 会遍历输出4个数组
发现数组的length可以区别某个框是否被选上 巴特 我不会写了
插播forEach用法
var arr=['a','b','c'];
arr.forEach(function(elem,index,arr){
console.log(elem,arr);
});
比for循环简单一点
回到刚才
jquery中有一个循环方法each() 巴特 each(index,elem,arr)
//反选
$('#reverse').on('click',function(){
$hobbys.each(function(index,elem,arr){
console.log(elem);
});
});
现在输出的是原生对象
console.log($(elem).prop('checked'));
现在可以通过判断true/false判断是否被选中//反选
$hobbys.each(function(index,elem,arr){
if($(elem).prop('checked')){
$(elem).prop('checked',false);
}
else{
$(elem).prop('checked',true);
}
});
也可以用原生的方法写
//反选
$hobbys.each(function(index,elem,arr){
this.checked = !this.checked;
}
this指当前的对象说三遍 具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>你爱好的运动是？</h1>
<form action="">
<input type="checkbox" name="hobby">足球
<input type="checkbox" name="hobby">篮球
<input type="checkbox" name="hobby">排球
<input type="checkbox" name="hobby">羽毛球
<br>
<button id="all" type="button">全选</button>
<button id="notall" type="button">全不选</button>
<button id="reverse" type="button">反选</button>
<button type="button">提交</button>
</form>
<script src="jquery-3.3.1.js"></script>
<script>
$(function(){
var $hobbys = $('input[name="hobby"]');
//全选
$('#all').on('click',function(){
$hobbys.prop('checked',true);
});
//全不选
$('#notall').on('click',function(){
$hobbys.prop('checked',false);
});
//反选时要知道哪个已经被选了 哪个没被选 要遍历一次
$('#reverse').on('click',function(){
// for(var i=0; i<$hobbys.length; i++){
// var elem = $('input[name="hobby"]:eq('+i+'):checked');
// // console.log(elem);
// if(elem.length == 0)//没被选中
// {
// $hobbys.eq(i).attr('checked',true);
// }
// else{
// $hobbys.eq(i).attr('checked',false);
// }
// }
// });
$hobbys.each(function(index,elem,arr){
// console.log(elem);
// console.log($(elem).prop('checked'));
// if($(elem).prop('checked')){
// $(elem).prop('checked',false);
// }
// else{
// $(elem).prop('checked',true);
// }
this.checked = !this.checked;
});
});
});
// var arr=['a','b','c'];
// arr.forEach(function(elem,index,arr){
// console.log(elem,arr);
// });
</script>
</body>
</html>