第五十六天jQurey的内容新增：
1.上节内容的回顾：
1.1选择器的升级板程序：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>选择操作</title> <style> </style> </head> <body> <table id="t1" border="1"> <thead> <tr> <th>序号</th> <th>内容1</th> <th>内容2</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" value="011"></td> <td><span>123</span></td> <td><span>346</span></td> </tr> <tr> <td><input type="checkbox" value="012"></td> <td><span>123</span></td> <td><span>346</span></td> </tr> <tr> <td><input type="checkbox" value="013"></td> <td><span>123</span></td> <td><span>346</span></td> </tr> </tbody> </table> <div> <input id="all" type="button" value="全选"> <input id="different" type="button" value="反选"> <input id="cancle" type="button" value="取消"> </div> <script src="jquery-3.4.1.min.js"></script> <script> $('#all').click(function(){ $(':checkbox[value="011"]').prop('checked',true); $(':checkbox[value="012"]').prop('checked',true); $(':checkbox[value="013"]').prop('checked',true); }) $('#different').click(function(){ var $cheEle=$(':checkbox'); for (var i=0;i<$cheEle.length;i++){ console.log($cheEle.length); console.log($($cheEle[i]).prop('checked')); if ($($cheEle[i]).prop('checked')==true){ $($cheEle[i]).prop('checked',false); } else{ $($cheEle[i]).prop('checked',true); } } }); $('#cancle').click(function(){ $(':checkbox[value="011"]').prop('checked',false); $(':checkbox[value="012"]').prop('checked',false); $(':checkbox[value="013"]').prop('checked',false); }) </script>
1.2find用法：find方法是用来返回后代元素的：
<ul> <li><a href="http://www.baidu.com">百度</a></li> <li><img src="https://pic1.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_1200x500.jpg" alt=""></li> <li>hehii</li></ul> <script src="jquery-3.4.1.min.js"></script> <script> console.log($('ul').children().find('img')); </script>
2今日面试题：
将列表进行打乱：
import random l1=[11,33,55,66,78] random.shuffle(l1)#原来序列进行修改 print(l1)
3.把某个元素添加到元素的内部：
3.1$(a).append(b)//把b追加到a的后面
<script> var l1=document.createElement('li'); l1.innerText=4; $('ul').append(l1); </script> </body>
3.2$(b).appendto(a)//把a追加到b的后面
<script> var l1=document.createElement('li'); l1.innerText=4; $(l1).appendTo('ul'); </script>
3.3在ul标签内部前面添加元素：$(a).prepend(b)//把b追加到a的前面
<script> var l5=document.createElement('li'); l5.innerText=5; $(l5).appendTo('ul'); var l0=document.createElement('li'); l0.innerText=0; $('ul').prepend(l0); </script>
3.4$(b).append(a)//把b追加到a的前面
<script src="jquery-3.4.1.min.js"></script> <script> var l5=document.createElement('li'); l5.innerText=5; $(l5).appendTo('ul'); var l0=document.createElement('li'); l0.innerText=0; $(l0).prependTo('ul'); </script>
4.把某个元素添加到某个元素的外部：
4.1添加到指定元素外部的后面：
var l1=document.createElement('li');
l1.innerText=1.2;
$('#s1').after(l1);
结果为
0
1
1.2
2
3
5
4.2添加指定元素外部的前面：
<script> var l5=document.createElement('li'); l5.innerText=5; $(l5).appendTo('ul'); var l0=document.createElement('li'); l0.innerText=0; $(l0).prependTo('ul'); var l1=document.createElement('li'); l1.innerText=1.2; $('#s1').after(l1); var l2=document.createElement('li'); l2.innerText=1.8; $('#s2').before(l2); </script> 结果为 0 1 1.2 1.8 2 3 5
5.移除和清空元素：
5.1清空所有的元素：remove（）；
$('ul').remove();将父元素及子元素全部清空
5.2empty() 删除匹配到的元素集合中所有的子元素：
$('ul').empty();
5.3在表格中添加一行表格：
<table border="2"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>小强</td> <td>吃冰淇凌</td> <td> <button class="delete">删除</button> </td> </tr> <tr> <td>2</td> <td>二哥</td> <td>三弟</td> <td> <button class="delete">删除</button> </td> </tr> <button class="add">添加一行数据</button> </tbody> </table> <script src="jquery-3.4.1.min.js"></script> <script> $('.add').click(function () { var t1 = document.createElement('tr'); t1.innerHTML = ('<td>3</td><td>小三</td><td>天狗</td><td><button class="delete">删除</button></td>'); $('tbody').append(t1); }); $('.delete').click(function(){ var $p1=$(this).parent().parent(); $p1.remove(); }) </script>
6.标签的替换：
6.1替换一个：
<script> $('#b1').click(function () { var imgEle = document.createElement('img'); url = 'https://pic1.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_1200x500.jpg'; $(imgEle).attr('src', url); $('.c1').replaceWith(imgEle); }); </script>
6.2替换所有：replaceAll（）
script>
$('#b1').click(function () {
var imgEle = document.createElement('img');
url = 'https://pic1.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_1200x500.jpg';
$(imgEle).attr('src', url);
$(imgEle).replaceAll('a');
});
7.标签的克隆：如果在clone(true);如果在括号内加上true则代表把标签和事件都加进去否则只加入事件。
<script src="jquery-3.4.1.min.js"></script> <script> // $ $('#copy').click(function(){ $(this).clone(true).insertAfter(this); })
8.我们以后使用jQuery进行事件的绑定使用on用法：
8.1 on( 事件，function)：
<script> $('.delete').on('click',function(){ $(this).parent().parent().remove(); }) </script>
8.2on(事件，选择器，function)，适用于给未来选择器来绑定事件，通过上面哪给表格添加一行的实例我们可以发现我们后期添加的元素无法进行删除
，在这里我们就可以采用此方法进行解决：
$('tbody').on('click','.delete',function(){
var $p1=$(this).parent().parent();
$p1.remove();
});
9.阻止后面事情执行：使用return false：
9.1用昨天哪个案例进行升级：如果填入内容就提交成功：
<script> var flag=true; $('.s1').on('click', function () { var $c1Ele = $('.c1'); for (var i = 0; i < $c1Ele.length; i++) { var $clElev = $($c1Ele[i]); if (!($clElev.val())) { flag=false; var $labelEle = $clElev.parent().text(); var d1 = document.createElement('span'); d1.innerText = $labelEle + '不能为空'; $clElev.after(d1); } } return flag; }) </script>
9.2如果用户名没有输入则不需要进行密码是否为空的判断：
<script> var flag=true; $('.s1').on('click', function () { var $c1Ele = $('.c1'); for (var i = 0; i < $c1Ele.length; i++) { var $clElev = $($c1Ele[i]); if (!($clElev.val())) { flag=false; var $labelEle = $clElev.parent().text(); var d1 = document.createElement('span'); d1.innerText = $labelEle + '不能为空'; $clElev.after(d1); break; } } return flag; }) </script>
9.3如果列表中遇到某个元素之后就跳出循环，不在进行输出操作：使用break；
var li=[11,33,44,55,66]; undefined for (var i=0;i<li.length;i++){ if (li[i]===33){ break;} else{ console.log(li[i]); }; }; VM658:5 11
9.4如果列表中只希望某个元素不进行输出：则使用return：
10.事件的操作主要有：
10.1click：点击操作；
10.2hover：鼠标点上去动作；
10.3blur:鼠标移出动作：
10.4focus：鼠标放上去动作：
10.5:change：select值发生改变时动作
10.6keyup：键盘抬起发生动作；
10.7keydown：键盘按下发生动作；
11.鼠标操作案列：
12.如果我想在head中使用script怎么才能成功：
<script src="jquery-3.4.1.min.js"></script> <script> <!--等dom树生成之后再执行此命令--> $(document).ready(function(){ console.log($('div').text()); }) </script>
13.网页的动态效果操作：
13.1 hide（s）多少时间之后消失：
$('img').hide(3000);
13.2 toggle（s）有就删除，没有就添加：
$('img').toggle(3000);
13.3slideDown(s )从上面慢慢往下滑：
$('img').slideDown(3000);
13.4slideUp(s)
$('img').slideUp(3000);
13.5slidetoggle(s)
$('img').slideToggle(3000);
13.6fadeIn(s) 淡入：
$('img').fadeIn(3000);
13.7fadeOut（s）淡出：
$('img').fadeOut(10000);
13.8设置图片模糊度：0到1：
$('img').fadeTo(3000,0.3);
13.9fadeToggle(s )有就淡出，没有就淡入：
$('img').fadeToggle(3000);
13.10 animate( p s ):自定义：
<script> $(document).ready(function(){ $('#d1').on('click',function(){ var new1 =document.createElement('i'); new1.innerText='+1'; $(this).append(new1); $(this).children('i').animate({ opacity:0 }, 1000) }) })
14 each：一个通用的迭代对象，它可以用来无缝对接迭代对象和数组。数组和类似数组的对象通过一个长度属性来迭代数字索引：从0到length-1：其他属性通过
属性名进行迭代：
14.1属性的each方法：
$(document).ready(function(){
var $divEle=$('div');
$divEle.each(function(){
console.log(this);
})
14.2数组的each方法：
$(document).ready(function(){
var li=[11,33,44,55]
$.each(li,function(k,v){
console.log(k,v);
14.2如果遇到数组中的某个值的时候想要结束循环则要使用return false；
script>
var li=[11,44,55,66,77];
$.each(li,function(k,v){
if (v===44){
return false;
}
else{
console.log(k,v);
}
})
结果为
0 11
14.3如果遇到数组中的某个值的时候想要跳出循环则要使用return
var li=[11,44,55,66,77];
$.each(li,function(k,v){
if (v===44){
return ;
}
else{
console.log(k,v);
}
})
结果为
0 11
11each用法.html:23 2 55
11each用法.html:23 3 66
11each用法.html:23 4 77
15.data的用法：
15.1data 会把数据存储起来，但是不会放到元素中，只要网页不刷新数据就不丢失：
$('#d1').data('s9','hello');
$('#d1').data('s9');
"hello"
15.2将不需要的数据进行删除：removeData();
$('#d1').data('age',333);
k.fn.init [div#d1]
$('#d1').removeData('age');
k.fn.init [div#d1]
$('#d1').data('age');
；
