隐式迭代
1. jQuery中 所有获取的标签对象,不管是选择器还是筛选器,执行结果一定是一个伪数组
2.如果需要操作其中的一个标签,应该是 通过索引下标,将这个标签获取出来,再操作
如果需要操作的标签对象,应该是,循环遍历,所有的标签对象,设定操作效果
3.jQuery中,会默认对,伪数组中的所有单元进行操作设定
给ul中所有的li标签,设定字体颜色为红色
jQuery会 默认的 循环遍历 $('ul>li') 伪数组中 所有的标签对象
给 每一个 标签对象,都设定 css样式color 为 red
$('ul>li').css({color:'red'});
获取ul中所有的li,name属性的属性值
如果是获取属性属性值,只会获取伪数组中,第一个标签对象结果,之后的不会再获取
console.log( $('ul>li').attr('name') );
需要用循环获取每一个属性的属性值
用隐式迭代写全选反选demo
全选思路:
点击 input 全选标签时 获取 全选标签 checked属性的属性值
设定给下方所有的input标签
反选思路:
点击 反选 button按钮时
获取每一个下方input标签,checked属性的属性值
取反,再赋值给这个标签
问题: 隐式迭代,是jQuery默认执行的效果
设定: 是给伪数组中,所有的标签都设定效果
获取: 只获取第一个标签的属性值
解决: 获取每一个标签对象时,要使用jQuery的循环遍历语法
$().each( (参数1,参数2)=>{} )
参数1: 循环时,当前单元的索引下标
参数2: 循环时,当前单元的存储数据--也就是标签对象
htmlcssjs
<label>
<input name="all" type="checkbox"> 全选
</label>
<button name="not">反选</button>
<br>
<input name="other" type="checkbox"><br>
<input name="other" type="checkbox"><br>
<input name="other" type="checkbox"><br>
<input name="other" type="checkbox"><br>
<input name="other" type="checkbox"><br>随便写写 // 全选
$('[name="all"]').click(function(){
$('[name="other"]').prop('checked',this.checked);
});
// 反选
$('[name="not"]').click(function(){
let bool = true;
$('[name="other"]').each( (k,v)=>{
$(v).prop('checked',!$(v).prop('checked'))
if( $(v).prop('checked')===false){
bool = false;
}
})
$('[name="all"]').prop('checked',bool);
})
$('[name="other"]').click( ()=>{
let bool = true;
$('[name="other"]').each( (k,v)=>{
if( $(v).prop('checked')===false){
bool = false;
}
})
$('[name="all"]').prop('checked',bool);
})
Comments | NOTHING