主要內容
1? 阻止后續事件繼續執行
return false:? 常用于表單提交
event.preventDefault : 阻止默認事件發生
<body>
<form action=""><input type="text" id="t1"><input type="submit" class="s1" id="s2" value="提交">
</form>
<script>$('#s2').click(function (event) {//點擊submit按鈕, 先校驗input框的內容為不為空,//為空就不提交alert('這是form表單的提交按鈕');var value = $('#t1').val();//獲取input框的值if(value.length===0){//為空就不提交//不執行后續的默認的提交事件//阻止默認事件發生// event.preventDefault();return false}})
</script>
</body>
</html>
2 . 按住shift批量操作? ?用到keydown,? keyup,?
<!DOCTYPE html> <html lang="zh-CN"> <head><meta http-equiv="content-Type" charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><title>Title</title><script src="jquery-3.3.1.min.js"></script> </head> <body><table border="1"><thead><tr><th>#</th><th>姓名</th><th>操作</th></tr></thead><tbody><tr><td><input type="checkbox"></td><td>Egon</td><td><select><option value="1">上線</option><option value="2">下線</option><option value="3">停職</option></select></td></tr><tr><td><input type="checkbox"></td><td>Alex</td><td><select><option value="1">上線</option><option value="2">下線</option><option value="3">停職</option></select></td></tr><tr><td><input type="checkbox"></td><td>Yuan</td><td><select><option value="1">上線</option><option value="2">下線</option><option value="3">停職</option></select></td></tr><tr><td><input type="checkbox"></td><td>EvaJ</td><td><select><option value="1">上線</option><option value="2">下線</option><option value="3">停職</option></select></td></tr><tr><td><input type="checkbox"></td><td>Gold</td><td><select><option value="1">上線</option><option value="2">下線</option><option value="3">停職</option></select></td></tr></tbody></table><button id="b1">全選</button><button id="b2">反選</button><button id="b3">取消</button><script>//給b1綁定事件, 所有的checked設置為ture$('#b1').click(function () {$(':checkbox').prop('checked',true)});//給b2綁定事件, 反選$('#b2').click(function () {// var checkAll = $(':checkbox');// for(i=0;i<checkAll.length;i++){// // 找到他的每一項// //如果選中checked設置為false, 否則就設置為true// var tmp = checkAll[i];// var chec = $(tmp).prop('checked');// if(chec){// $(tmp).prop('checked',false)// }else{// $(tmp).prop('checked',true)// } //第一種方法// $(tmp).prop('checked',!chec)//第二種方法// }//第三種方法 找到所有選中的checkbox并把它賦值給一個變量// 找到所有沒有選中的checkbox并把它賦值給另一個變量var check = $('input:checked');var uchec = $('input:not(:checked)');// 利用prop把選中的checkbox設置為不選中// 利用prop把不選中的checkbox設置為選中check.prop('checked',false);uchec.prop('checked',true);});//給b3綁定事件, 所有的checked設置為false$('#b3').click(function () {$(':checkbox').prop('checked',false)});var flag = false;// 全局事件，監聽鍵盤shift按鍵是否被按下$(window).on("keydown", function (e) { // alert(e.keyCode);if (e.keyCode === 16){flag = true;}});// 全局事件,shift按鍵抬起時將全局變量置為false$(window).on("keyup", function (e) {if (e.keyCode === 16){flag = false;}});// select綁定change事件$("table select").on("change", function () {// 是否為批量操作模式if (flag) {var selectValue = $(this).val();// 找到所有被選中的那一行的select，選中指定值$("input:checked").parent().parent().find("select").val(selectValue);}})</script> </body> </html>
?3? 第2 個內容存在一個漏洞,按住shift所有的選中的批量操作, 如果按住shift的當前行沒有選中, 但是當前行也被操作, 所以需要判斷當前行是否被選中.
$("table select").on("change", function () {// 是否為批量操作模式//判斷一下改行是否被選中var isChecked = $(this).parent().prev().prev().find(':checkbox').prop('checked');if (flag&&isChecked) {var selectValue = $(this).val();// 找到所有被選中的那一行的select，選中指定值$("input:checked").parent().parent().find("select").val(selectValue);}
?4 . hover 購物車
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta http-equiv="content-Type" charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><title>購物車</title><script src="jquery-3.3.1.min.js"></script><style>body {margin:0;}.memu1{height:70px;width:100%;background-color: #616161;}.d {float:left;color: white;font-size: 20px;line-height: 70px;margin-left: 15px;position: relative;}.cont {height:70px;width: 140px;background-color: #ff4700;color: white;position:absolute;right: 0;display:none;}.hover>.cont { //加的樣式類當刷新頁面的時候并沒有, 所以當鼠標一上去就加上樣式類, 離開就刪除.display: block;}</style>
</head>
<body><div class="memu1"><div class="d">登錄</div><div class="d">注冊</div><div class="d" id="dd">購物車<div class="cont">空空如也</div></div></div><script> // $('#dd').hover( //這種方法沒有.hover>.cont這兩行// function () {// //當鼠標點進去// $('.cont').css('display','block')// },// //當鼠標離開時// function () {// $('.cont').css('display','none')// }// )// $('#dd').hover(// function () {// $(this).addClass('hover')// },// function () {// $(this).removeClass('hover')// }// );$('.memu1').on('mouseenter','.d',function () {$(this).addClass('hover');});$('.memu1').on('mouseleave','.d',function () {$(this).removeClass('hover');});</script>
</body>
</html>
5? input實時獲取值
<body>
<input type="text" class="t1">
<script>//是去焦點時獲取的值// $('.t1').blur(function () {// var value = $(this).val();// console.log(value)// })// 實時獲取值$('.t1').on('input',function () {var value = $(this).val();console.log(value)})
</script>
</body>
</html>
6? 全選 反選取消 用each方法
1) 循環一個列表的三種方法:
li = [11,22,33,44];
for(i=0;i<li.length;i++){
console.log(li[i])}
第二種
li.forEach(function(k,v){
console.log(k,v)})
第三種? ? 語法: $.each(要遍歷的對象, function({.....}))
li = [11,22,33,44];
$.each(li,function(k,v){
console.log(k,v)})
跳出本次循環return
li = [11,22,33,44]; $.each(li,function(k,v){ if(v===33){return//跳出本次循環 }else{console.log(v) } })
?
跳出each循環return false
li = [11,22,33,44];
$.each(li,function(k,v){
if(v===33){return false//跳出本次循環
}else{console.log(v)
}
})
對于jQuery對象的操作? ? 語法: $('').each(function(){? ?this是進入循環體的當前標簽? })
<body> <div>111</div> <div>222</div> <div>333</div> <script>$('div').each(function(){console.log(this)}) </script> </body>
?
反選的例子
<script>// 反選$("#b2").click(function () {$(":checkbox").each(function () {var value = $(this).prop("checked");if (value) {$(this).prop("checked", false);} else {$(this).prop("checked", true);}});}); </script>
?7 動畫
<body>
<img src="http://img4.imgtn.bdimg.com/it/u=2907923370,3134497160&fm=26&gp=0.jpg" alt="">
<script>$('img').hide(4000);$('img').show(4000);
</script>
</body>
函數是如何使用呢？)
嗎？？?)
