1.常用事件
click(function(){...}) #点击时触发
hover(function(){...}) #鼠标移到时就触发
blur(function(){...}) #失去焦点时触发
focus(function(){...}) #获得焦点时触发
change(function(){...})#值发生发化就触发
keyup(function(){...})
off() 方法移除用 .on()绑定的事件处理程序。
input(function(){...})实时监听input输入值变化
1.click(function(){...})
click(function(){...}) $(".list-group-item .reply_btn").on("click",function () { //点击回复的时候，光标移到评论框 $("#comment_content").focus();} <textarea name="" id="comment_content" cols="60" rows="10"></textarea>
2.hover(function(){...})
当鼠标指针悬停在上面时，改变 <p> 元素的背景颜色： $("p").hover(function(){ $("p").css("background-color","yellow"); },function(){ $("p").css("background-color","pink"); });
显示购物车的内容
<!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"> <title>hover示例</title> <style> * { margin: 0; padding: 0; } .nav { height: 40px; width: 100%; background-color: #3d3d3d; position: fixed; top: 0; } .nav ul { list-style-type: none; line-height: 40px; } .nav li { float: left; padding: 0 10px; color: #999999; position: relative; } .nav li:hover { background-color: #0f0f0f; color: white; } .clearfix:after { content: ""; display: block; clear: both; } .son { position: absolute; top: 40px; left: 0; height: 50px; width: 100px; background-color: #00a9ff; display: none; } .hover .son { /*不换行*/ display: block; } </style> </head> <body> <div class="nav"> <ul class="clearfix"> <li>登录</li> <li>注册</li> <li >购物车 <p class="son"> 空空如也... </p> </li> </ul> </div> <script src="jquery-3.3.1.js"></script> <script> $(".nav li").hover( function () { // 鼠标移上去。son中的display就会被划掉。.hover .son的权重大于.son 内容显示出来 $(this).addClass("hover"); }, // 鼠标移走 function () { $(this).removeClass("hover"); } ) </script> </body> </html>
3.blur(function(){...})
当输入域失去焦点 (blur) 时改变其颜色： $("input").blur(function(){ $("input").css("background-color","#D6D6FF"); });
4.focus(function(){...})
当输入框获得焦点时，改变它的背景色： $("input").focus(function(){ $("input").css("background-color","#FFFFCC"); });
5.change(function(){...})
<input>元素，<textarea>和<select>元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作 input元素 监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。 select元素 对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发 textarea元素 多行文本输入框，当有改变时，失去焦点后触发change事件
6.input(function(){...})
在输入框中个输入时就提示 $("#i1").on("input ", function () { alert($(this).val()); })
实时监听input输入值变化
<input type="text" id="i1"> <script src="jquery-3.3.1.js"></script> <script> /* * oninput是HTML5的标准事件 * 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化， * 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发 * oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代 * 使用jQuery库的话直接使用on同时绑定这两个事件即可。 * */ $("#i1").on("input", function () { console.log($(this).val()); }) </script>
7.keydown和keyup事件组合示例
选中的行，按住shift键操作后，整体都改变
按住shift批量操作
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title> 按住shift批量操作</title> </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> <script src="jquery-3.3.1.js"></script> <script> // 定义一个全局的变量,保存shift有没有被按下的状态 var flag = false; // 给window绑定按键被按下的事件 $(window).on("keydown", function (e) { // 查看shift键摁下去后的返回值 console.log(e.keyCode); if (e.keyCode === 16){ // 表示shift被按下!!! flag = true; } }); // 给window绑定按键被抬起的事件 $(window).on("keyup", function (e) { if (e.keyCode === 16){ // 表示shift被按下!!! flag = false; } }); // select标签的值发生变化之后,触发事件 $("select").on("change", function () { // 1. 判断shift有没有被按下 // 2. 判断当前行有没有被选中 找到选择的值 this表示select 找到tr标签，在tr标签中找到多选框这一标签 var isChecked = $(this).parent().parent().find(":checkbox").prop("checked"); if (flag && isChecked) { // 按下就进入批量编辑模式 // 1. 取到select变化之后的值 var value = $(this).val(); // 2. 找到所有的选中的checkbox,把对应的select设置成上面能取到的值 找到多选框选中的这一标签，找到tbody，然后找select $("input:checked").parent().parent().find("select").val(value); } // 没有被按下,啥都不做 }) </script> </body> </html>
2.事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
(基于已经存在的标签给未来的标签绑定事件)
事件委托的格式 $("已经存在的标签").on("事件名称", "选择器", function(){...})
$("table").on("click", ".delete", function () {
// 删除按钮绑定的事件
})
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>事件委托示例</title> </head> <body> <input type="button" value="添加新数据" id="add"> <!--表格的样式--> <table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>金老板</td> <td><input type="button" value="删除" class="delete"></td> </tr> <tr> <td>2</td> <td>景女神</td> <td><input type="button" value="删除" class="delete"></td> </tr> <tr> <td>3</td> <td>隔壁老王</td> <td><input type="button" value="删除" class="delete"></td> </tr> </tbody> </table> <script src="jquery-3.3.1.js"></script> <script> // 点击添加按钮添加一条新数据 // 1. 找到按钮绑定点击事件 $("#add").on("click", function () { // 当添加按钮被点击之后要做的事儿 // 1. 创建一个新的tr var trEle = document.createElement("tr"); trEle.innerHTML = '<td>4</td> <td>哪吒</td> <td><input type="button" value="删除" class="delete"></td>'; // 2. 把创建好的tr追加到tbody里面 $("tbody").append(trEle); }); // 点击每一行的删除按钮,把当前行删除掉 // 1. 找到每一行的删除按钮,绑定点击事件 // // 方法一： // $(".delete").on("click",function(){ //// console.log($(this).parent().parent()) 找到当前标签所在的tr标签 // $(this).parent().parent().remove() //// 存在着不足。新建的数据删除不掉 // }) // 方法二：使用事件委托处理 $("table").on("click", "input.delete", function () { // 给table标签绑定事件,监听我子子孙孙里面有delete样式类的标签如果被点击了,我就做下面的事儿 // 当每一行的删除按钮被点击后要做的事儿 // 1. 删除当前被点击的按钮的这一行 console.log(this); $(this).parent().parent().remove(); }) </script> </body> </html>
3.动画效果
// 基本 show([s,[e],[fn]]) 可设置时间：$("#1").show(2000); hide([s,[e],[fn]]) toggle([s],[e],[fn]) // 滑动 slideDown([s],[e],[fn]) slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn]) // 淡入淡出 fadeIn([s],[e],[fn]) 设置透明度：$("#1").fadeIn(2000，0.4); fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) fadeToggle([s,[e],[fn]]) // 自定义（了解即可） animate(p,[s],[e],[fn])
4.页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。 它可以极大地提高web应用程序的响应速度。 我们的js代码通常写在body的最下面。如果要写在head里面，可以通过页面载入 $(document).ready(function(){ // 在这里写你的JS代码... }) 但是一般都会写到body里面 <script src="jquery-3.3.1.js"></script> <script> $(document).ready(function () { // 文档加载完之后才执行!!! console.log($("#d1").text()); }); #简写方式，一般不提倡 // $(function () { // console.log($("#d1").text()); // }); </script>
点赞动画示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>点赞动画示例</title> <style> div { position: relative; display: inline-block; } div>i { display: inline-block; /*color: red;*/ position: absolute; right: -16px; top: -5px; opacity: 1; } </style> </head> <body> <div id="d1">点赞</div> <script src="../55/jquery-3.3.1.js"></script> <script> $("#d1").on("click", function () { var newI = document.createElement("i"); newI.innerText = "+1"; $(this).append(newI); $(this).children("i").animate({ // opacity: 0 fontSize: "68px" }, 5000) }) </script> </body> </html>
5.each
jQuery内置循环。遍历一个jQuery对象，为每个匹配元素执行一个函数。
<div id="1">div1</div> <div id="2">div2</div> <div id="3">div3</div>
1.使用for循环
var $content=$("div"); for (var a=0;a<$content.length;a++){ console.log($content[a].text());查看内容报错。$content[a]是DOM对象不能用text得用innerText 可以把$content[a]转换成jQuery对象 for (var a=0;a<$content.length;a++){ console.log($($content[a]).text()); }
2.使用each循环
$.each($content,function(){console.log(this);}) #得到每个div标签对象，是DOM对象
$("div").each(function(){console.log(this);})和上面效果一样，
等同于$.each($content,function(i,v){console.log(v);}) v和this相同，都是当前标签对象
<div id="1">div1</div> <div id="2">div2</div> <div id="3">div3</div> $.each($content,function(){console.log($(this).text());})#得到每个div标签文本内容 div1 div2 div3
3.jQuery将具有相同名称的元素的值提取出来放到一个数组内
<h1 class="c1">沙河前端小王子</h1> <h1 class="c1">带你学习jQuery</h1> var $content=$(".c1"); var value=new Array(); $.each($content,function(i,v){value.push($(v).text());}) value #["沙河前端小王子", "带你学习jQuery"]
4.终止each循环 return false；
<h1 class="c1">1</h1> <h1 class="c1">2</h1> var content=$(".c1");
1.得到标签对象
$.each(content,function(i){ console.log(content[i]); }) #<h1 class="c1">1</h1> #<h1 class="c1">2</h1>
2.终止循环：
$.each(content,function(i){ value=$(content[i]).text(); if(value==1){ console.log(value); return false; }else{console.log(value);}; }) #1
3.跳过某个值：return
$.each(content,function(i){ value=$(content[i]).text(); if(value==1){ return ; }else{console.log(value);}; }) #2
输入账号密码为空时，后续的不能进行
$("#i1").on("click", function () { alert(123); var username = $("#username").val(); var pwd = $("#pwd").val(); if (username.trim().length === 0 || pwd.trim().length===0) { // username和pwd有一个为空就表示数据不合格,就不让提交 // 也就是不让执行默认submit事件 return false; // 后续的事件不执行 } })
6.data()
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的
第一个元素的给定名称的数据存储的值。
.data(key, value): $("div").data("k",100);//给所有div标签都保存一个名为k，值为100 $("div").data("k");//返回第一个div标签中保存的"k"的值 $("div").removeData("k"); //移除元素上存放k对应的数据 $("div").removeData(); 取多个值 $("div").removeData(); 移除多个值 $("#1").data("k",100); $("#1").data("k"); 100