jQuery事件大全
注:不带参数的函数 其参数为可选的 fn。jquery 不支持 form 元素的 reset 事件。 事件 描述 支持元素或对象 blur( ) 元素失去焦点 a input textarea button select label map area change( ) 用户改变域的内容 input textarea select click( ) 鼠标点击某个对象 几乎所有元素 dblclick( ) 鼠标双击某个对象 几乎所有元素 error( ) 当加载文档或图像时发生某个错误 window img focus( ) 元素获得焦点 a input textarea button select label map area keydown( ) 某个键盘的键被按下 几乎所有元素 keypress( ) 某个键盘的键被按下或按住 几乎所有元素 keyup( ) 某个键盘的键被松开 几乎所有元素 load( fn ) 某个页面或图像被完成加载 window img mousedown( fn ) 某个鼠标按键被按下 几乎所有元素 mousemove( fn ) 鼠标被移动 几乎所有元素 mouseout( fn ) 鼠标从某元素移开 几乎所有元素 mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素 mouseup( fn ) 某个鼠标按键被被调整尺寸 window iframe frame scroll( fn ) 滚动文档的可视部分时 window select( ) 文本被选定 document input textarea submit( ) 提交按钮被点击 form unload( fn ) 用户退出页面 window
jquery ajax 方法说明:
load( url [data] [callback] ) 装入一个远程 html 内容到一个 dom 结点。 $(" #feeds" ).load(" feeds.html" ) 将 feeds.html 文件载入到 id 为 feeds 的 div 中 $(" #feeds" ).load(" feeds.php" {limit: 25} function(){ alert(" the last 25 entries in the feed have been loaded" ) })
jquery.getjson( url [data] [callback] ) 使用 get 请求 json 数据。 $.getjson(" test.js" { name: " john" time: " 2pm" } function(json){ alert(" json data: " + ers[3].name) })
jquery event:
ready(fn) $(document).ready()注意在 body 中没有 onload 事件 否则该函数不能执行。在每个页面中可以 有很多个函数被加载执行 按照 fn 的顺序来执行。 bind( type [data] fn ) 为每一个匹配元素的特定事件(像 click)绑定一个或多个事件处理器函数。可能的事 件属性有:blur focus load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error one( type [data] fn ) 为每一个匹配元素的特定事件(像 click)绑定一个或多个事件处理器函数。在每个对 象上 这个事件处理函数只会被执行一次。其他规则与 bind()函数相同。
each( callback ) 以每一个匹配的元素作为上下文来执行一个函数
举例:1
$(" span" ).click(function){ $(" li" ).each(function(){ $(this).toggleclass(" example" ) }) })
举例:2
$(" button" ).click(function () { $(" div" ).each(function (index domele) {
jquery.getscript( url [callback] ) 使用 get 请求 javascript 文件并执行。 $.getscript(" test.js" function(){ alert(" script loaded and uted." ) }) jquery.post( url [data] [callback] [type] ) 使用 post 请求一个页面。
core:
$(html).appendto(" body" ) 相当于在 body 中写了一段 html 代码 $(elems) 获得 dom 上的某个元素 $(function(){……..}) 执行一个函数 $(" div > p" ).css(" border" " 1px solid gray" ) 查找所有 div 的子节点 p 添加样式 $(" input:radio" document.forms[0]) 在当前页面的第一个表单中查找所有的单选按钮 $.extend(prop) prop 是一个 jquery 对象
// domele == this $(domele).css(" backgroundcolor" " yellow" ) if ($(this).is(" #stop" )) { $(" span" ).text(" stopped at div index #" + index) return false } }) })
jQuery 事件大全
attribute:
$(" p" ).addclass(css 中定义的样式类型) 给某个元素添加样式 $(" img" ).attr({src:" test.jpg" alt:" test image" }) 给某个元素添加属性/值 参数是 map $(" img" ).attr(" src" " test.jpg" ) 给某个元素添加属性/值 $(" img" ).attr(" title" function() { return this.src }) 给某个元素添加属性/值 $(" 元素名称" ).html() 获得该元素内的内容(元素 文本等) $(" 元素名称" ).html(" < b> new stuff< /b> " ) 给某元素设置内容 $(" 元素名称" ).removeattr(" 属性名称" ) 给某元素删除指定的属性以及该属性的值 $(" 元素名称" ).removeclass(" class" ) 给某元素删除指定的样式 $(" 元素名称" ).text() 获得该元素的文本 $(" 元素名称" ).text(value) 设置该元素的文本值为 value $(" 元素名称" ).toggleclass(class) 当元素存在参数中的样式的时候取消 如果不存在就设置此样式 $(" input 元素名称" ).val() 获取 input 元素的值 $(" input 元素名称" ).val(value) 设置 input 元素的值为 value
trigger( type [data] ) 在每一个匹配的元素上触发某类事件。 triggerhandler( type [data] ) 这一特定方法会触发一个元素上特定的事件(指定一个事件类型) 同时取消浏 览器对此事件的默认行动 unbind( [type] [data] ) 反绑定 从每一个匹配的元素中删除绑定的事件。 $(" p" ).unbind() 移除所有段落上的所有绑定的事件 $(" p" ).unbind( " click" ) 移除所有段落上的 click 事件 hover( over out ) over out 都是方法 当鼠标移动到一个匹配的元素上面时 会触发指定的第一个函数。当 鼠标移出这个元素时 会触发指定的第二个函数。 $(" p" ).hover(function(){ $(this).addclass(" over" ) } function(){ $(this).addclass(" out" ) } )
manipulation:
$(" 元素名称" ).after(content) 在匹配元素后面添加内容 $(" 元素名称" ).append(content) 将 content 作为元素的内容插入到该元素的后面 $(" 元素名称" ).appendto(content) 在 content 后接元素 $(" 元素名称" ).before(content) 与 after 方法相反 $(" 元素名称" ).clone(布尔表达式) 当布尔表达式为真时 克隆元素(无参时 当作 true 处理) $(" 元素名称" ).empty() 将该元素的内容设置为空 $(" 元素名称" ).insertafter(content) 将该元素插入到 content 之后 $(" 元素名称" ).insertbefore(content) 将该元素插入到 content 之前 $(" 元素" ).prepend(content) 将 content 作为该元素的一部分 放到该元素的最前面 $(" 元素" ).prependto(content) 将该元素作为 content 的一部分 放 content 的最前面 $(" 元素" ).remove() 删除所有的指定元素 $(" 元素" ).remove(" exp" ) 删除所有含有 exp 的元素 $(" 元素" ).wrap(" html" ) 用 html 来包围该元素 $(" 元素" ).wrap(element) 用 element 来包围该元素
jqueryajax中各个事件执行顺序
jqueryajax中各个事件执⾏顺序jquery ajax 中各个事件执⾏顺序如下：1.ajaxStart(全局事件)2.beforeSend3.ajaxSend(全局事件)4.success5.ajaxSuccess(全局事件)6.error7.ajaxError (全局事件)plete9.ajaxComplete(全局事件)10.ajaxStop(全局事件)下⾯看个例⼦：$("#ACCOUNT_TYPE").bind('click', function() {//alert( $(this).val());var msg="";if($(this).val()=="B134002")//托管{//msg="托管";msg="ACCOUNT_TYPE_COM_T";}else if($(this).val()=="B134001")//存管{//msg="存管";msg="ACCOUNT_TYPE_COM_C";}else if($(this).val()=="-")//存管和托管all{//msg="存管和托管";msg="ACCOUNT_TYPE_COM_ALL";}else{alert("参数错误！");return;}$("#ACCOUNT_TYPE_COMDiv_son").children().remove();//先清除所有⼦元素$.ajax({type:"post",url:"${ctx}/Rule/Combination/getdict",data:{type:msg},dataType:"json",success:function(json){//$(object).children(selector).remove(); // 删除object元素下满⾜selector选择器的⼦元素，不填写则默认删除所有⼦元素 for(var i=0;i<json.length;i++){var checkBox=document.createElement("input");//checkBox.setAttribute("type","checkbox");checkBox.setAttribute("type","radio");checkBox.setAttribute("id", json[i].value);checkBox.setAttribute("value", json[i].value);checkBox.setAttribute("name", "ACCOUNT_TYPE_COM");checkBox.setAttribute("checked", true);//checkBox.setAttribute("readonly", true);//var li=document.createElement("span");li.style.display = "block";li.style.width = 23+"%";li.style.float = "left";li.appendChild(checkBox);li.appendChild(document.createTextNode(json[i].label));$("#ACCOUNT_TYPE_COMDiv_son").append(li);}},beforeSend:function(mes){alert("beforeSend");},complete:function(){alert("complete");}});});运⾏这段代码，会先弹出 beforeSend 提⽰，然后加载success ⽅法⾥⾯的代码，最后弹出 complete 提⽰，这说明这段代码的⼏个⽅法的执⾏先后顺序是符合上⾯总结的顺序的！全局事件的例⼦：<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("div").ajaxStart(function(){$(this).html("<img src='/i/demo_wait.gif' />");alert("1.最先的全局⽅法");});$("button").click(function(){$("div").load("/example/jquery/demo_ajax_load.asp");});$("div").ajaxSend(function(){alert("2.发送前");});$("div").ajaxSuccess(function(){alert("3.成功后");});$("div").ajaxComplete(function(){alert("4.ajaxComplete");});$("div").ajaxStop(function(){alert("5.ajaxStop");});});</script></head><body><div id="txt"><h2>通过 AJAX 改变⽂本</h2></div><button>改变内容</button></body></html>每次点击 "改变内容" 的这个按钮，都会先加载⼀次demo_wait.gif 这个图⽚，然后执⾏ ajaxSend，然后执⾏ ajaxSuccess，然后执⾏ajaxComplete，然后执⾏ ajaxStop ，这个执⾏顺序也是符合上⾯总结的顺序的！____________________________________________________________________________________⼀、.ajaxStart()——ajax请求开始时触发描述：ajax请求开始时触发 .ajaxStart()的回调函数，全局的，所有的ajax都可以⽤写法：元素.ajaxStart(function({ajax请求开始时触发的代码})$("#loading").ajaxStart(function () {$(this).show(); //ajax请求开始时#loading元素显⽰});作⽤域：全局某个ajax不受全局⽅法的影响：⽅法：将$.ajax({})的global设为false$.ajax({url: "test.html",global:false});⼆、.ajaxStop()——ajax请求结束时触发描述：ajax请求结束时触发 .ajaxStop()的回调函数，全局的，所有的ajax都可以⽤写法：元素.ajaxStop(function({ajax请求结束时触发的代码})$("#loading").ajaxStop(function () {$(this).hide(); //ajax请求结束时#loading元素隐藏});作⽤域：全局某个ajax不受全局⽅法的影响：⽅法：将$.ajax({})的global设为false$.ajax({url: "test.html",global:false});_______________________________________________________________________。
jquery change事件的用法
jquery change事件的用法
jQuery中的`change`事件主要用于处理HTML元素值改变的情况。
这个事件常常用于输入框（如`<input>`，`<textarea>`，和`<select>`等）和复选框（`<input type="checkbox">`）的改变。
以下是使用jQuery的`change`事件的基本用法：
```javascript
// 监听某个输入框的值改变
$('myInput').change(function() {
// 执行某些操作，例如打印输入框的值
($(this).val());
});
```
在这个例子中，每当ID为`myInput`的输入框的值发生改变时，就会执行定义在`change`事件处理函数中的代码。
这个函数通过`$(this)`获取了触发事件的元素（即输入框），然后使用`.val()`方法获取了输入框的值。
值得注意的是，`change`事件不会在用户在输入框中键入内容时立即触发，而是在用户离开输入框（比如点击其他地方或者按Tab键离开）时才触发。
如果你需要在用户键入内容时立即做出响应，可能需要使用其他事件，比如`input`或`keyup`。
50个实用的jquery案例
1. 如何创建嵌套的过滤器：1.//允许你减少集合中的匹配元素的过滤器，2.//只剩下那些与给定的选择器匹配的部分。
在这种情况下，3.//查询删除了任何没（:not）有（:has）4.//包含class为“selected”（.selected）的子节点。
5..filter(":not(:has(.selected))")2. 如何重用元素搜索1.var allItems = $("div.item");2.var keepList = $("div#container1 div.item");3.//现在你可以继续使用这些jQuery对象来工作了。
例如，4.//基于复选框裁剪“keep list”，复选框的名称5.//符合6.< DIV >class names:7.$(formToLookAt + " input:checked").each(function() {8. keepList = keepList.filter("." + $(this).attr("name"));9.});10.< /DIV>3. 任何使用has()来检查某个元素是否包含某个类或是元素：1.//jQuery 1.4.*包含了对这一has方法的支持。
该方法找出2.//某个元素是否包含了其他另一个元素类或是其他任何的3.//你正在查找并要在其之上进行操作的东东。
4.$("input").has(".email").addClass("email_icon");4. 如何使用jQuery来切换样式表1.//找出你希望切换的媒体类型（media-type），然后把href设置成新的样式表。
2.$('link[media='screen']').attr('href', 'Alternative.css');5. 如何限制选择范围（基于优化目的）：1.//尽可能使用标签名来作为类名的前缀，2.//这样jQuery就不需要花费更多的时间来搜索3.//你想要的元素。
jquery事件处理 综合案例
jquery事件处理综合案例以jquery事件处理综合案例为题，列举如下：1. 案例一：点击按钮显示隐藏元素在页面上放置一个按钮和一个元素，当点击按钮时，通过jquery事件处理实现隐藏或显示该元素。
2. 案例二：鼠标悬停显示提示信息在一个段落中的某个词语上添加鼠标悬停事件，当鼠标悬停在该词语上时，通过jquery事件处理显示一个提示框，提示该词语的含义或解释。
3. 案例三：输入框字符限制在一个输入框中，通过jquery事件处理限制输入的字符个数，当输入字符个数超过限制时，给出相应的提示。
4. 案例四：点击图片切换在页面上放置多个图片，通过jquery事件处理实现点击图片时，切换显示不同的图片。
5. 案例五：拖拽效果在页面上放置一个可拖拽的元素，通过jquery事件处理实现拖拽效果，即用户可以通过鼠标拖动该元素改变其位置。
6. 案例六：下拉菜单在页面上放置一个下拉菜单，通过jquery事件处理实现点击菜单项时，显示或隐藏相应的内容。
7. 案例七：表单验证在一个表单中的输入框中添加jquery事件处理，实现表单验证功能，例如验证邮箱格式、手机号码格式等。
8. 案例八：动态加载内容通过jquery事件处理实现动态加载内容，例如点击按钮时，通过ajax请求数据，并将返回的数据动态添加到页面中。
9. 案例九：轮播图通过jquery事件处理实现轮播图效果，即自动切换显示不同的图片或内容。
10. 案例十：选项卡切换在页面上放置多个选项卡，通过jquery事件处理实现点击选项卡时，显示相应的内容，隐藏其他内容。
这是一些常见的jquery事件处理综合案例，通过这些案例可以学习和理解jquery事件处理的基本用法和实际应用。
希望对你有所帮助。
jQuery的属性,事件及操作
jQuery的属性,事件及操作1.属性操作1.1 基本属性操作$("img").attr("src") 返回⽂档中所有图像的src属性值$("img").attr("src","test.jpg") 设置⽂档中所有图像的src属性值$("img").removeAttr("src") 将⽂档中图像的src属性删除$("input[type='checkbox']").prop("checked",true) 选中复选框$("input[type='checkbox']").prop("checked",false) 取消复选框$("img").removeProp("src") 删除img的src属性值attr与prop的区别:attr可以找到⾃定义的属性,prop只能找到固有的属性例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><button class="select_all">全选</button><button class="reverse">反选</button><button class="cancel">取消</button><hr><table border="1"><tr><td><input type="checkbox"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type="checkbox"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type="checkbox"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type="checkbox"></td><td>111</td><td>222</td><td>333</td></tr></table><script>//为"select_all"类绑定点击事件$(".select_all").click(function(){$(":checkbox").prop("checked",true);//选中所有的"checkbox"标签});//为"cancel"类绑定点击事件$(".cancel").click(function(){$(":checkbox").prop("checked",false);//取消选中的"checkbox"标签});//为"reverse"类绑定点击事件$(".reverse").click(function(){//循环每⼀个"checkbox"标签$(":checkbox").each(function(){$(this).prop("checked",!$(this).prop("checked"));//把所有的"checkbox"标签的属性取反})});</script></body></html>1.2 class属性操作$("p").addClass("test") 为p元素加上"text"类$("p").removeClass("test") 从p元素中删除"test"类$("p").toggleClass("test") 如果存在就删除,否则就添加"test"类$("p").hasClass("test") 判断有没有"test",返回⼀个布尔值1.3 标签⽂本text/HTML的属性$("p").html() 返回p标签的html内容$("p").html("hello world") 设置p标签的html内容$("p").text() 返回p标签的text内容$("p").text("test") 设置p标签的text内容$("input").val() 获取⽂本框中的值$("input").val("test") 设置⽂本框中的内容2.CSS操作2.1 样式$("p").css("color") 访问查看p元素的color属性$("p").css("color","red") 设置p元素的color属性的"red"$("p").css({"color":"red","bakcground-color":"yellow"}) 设置p元素的color为"red",background属性为"yellow"(设置多个属性要⽤{}字典形式) 2.2 位置$("p").offset() 元素在当前窗⼝的相对偏移,object{top:100,left:100}$("p").offset().top 元素相对窗⼝顶部的偏移$("p").offset().left 元素相对窗⼝左侧的偏移$("p").position() 元素相对⽗元素的偏移,对可见元素有效,object{top:100,left:100}例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script><style type="text/css">*{margin:0;padding:0;}</style></head><body><div class="div1" style="width:200px;height:200px;background-color:darkblue"></div><script>var val_x=0;//初始化标签到浏览器左边框的距离var val_y=0;//初始化标签到浏览器上边框的距离//定义当⿏标悬浮在标签上⾯的时候,⿏标的样式为移动$(".div1").mouseover(function(){$(this).css("cursor","move")});//为盒⼦绑定⿏标左键按下事件$(".div1").mousedown(function(e){val_x=e.clientX;//定义标签的初始x坐标val_y=e.clientY;//定义标签的初始y坐标var $box_x=$(".div1").offset().left;//获取盒⼦相对窗⼝左侧的偏移var $box_y=$(".div1").offset().top;//获取盒⼦相对窗⼝顶侧的偏移//定义⿏标移动的操作$(document).mousemove(function(e){var move_x=e.clientX;//获取⿏标的偏移量var move_y=e.clientY;//移动窗⼝到指定的偏移量$(".div1").offset({left:$box_x+move_x-val_x,top:$box_y+move_y-val_y})});//绑定⿏标左键松开事件$(document).mouseup(function(){$(document).off();//关闭事件})});</script></body></html>这样可以使div盒⼦跟随⿏标的移动⽽移动$(window).scrollTop() 获取窗⼝滚动条的⾼度$(window).scrollLeft() 获取窗⼝滚动条的宽度$(window).scrollTop("100") 获取窗⼝滚动条的⾼度为100例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><div class="box"></div><div id="returnTop">to top</div><script>//定义窗⼝的滚动条$(window).scroll(function(){console.log($(window).scrollTop());//打印滚动条的位置//当滚动条的位置⼤于200的时候if($(window).scrollTop()>200){$("#returnTop").show();//显⽰滚动条}else{$("#returnTop").hide();//隐藏滚动条}//为返回顶部按钮绑定点击事件$("#returnTop").click(function(){$(window).scrollTop(0);//使窗⼝返回顶部})})</script></body></html>2.3 尺⼨$("p").height() 获取p元素的⾼度$("p").width() 获取p元素的宽度$("p:first").innerHeight() 获取p元素的第⼀个元素的内部区域的⾼度(不包括边框) $("p:first").innerWidth() 获取p元素的第⼀个元素的内部区域宽度(不包括边框)$("p:first").outerHeight() 获取p元素的第⼀个元素的外部区域的⾼度(默认包括边框) $("p:first").outerWidth() 获取p元素的第⼀个元素的外部区域的宽度(默认包括边框) $("p:first").outerHeight(true) 为true时包括边框例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../0814/jquery-3.2.1.js"></script><style>.box{width:200px;height:100px;padding:50px;border:10px solid red;background-color:pink;margin:20px;}</style></head><body><div class="box">DIV</div><script>console.log($(".box").height());//获取盒⼦的⾼度console.log($(".box").width());//获取盒⼦的宽度console.log($(".box").innerHeight());//获取盒⼦的内部区域的⾼度(包括填充)console.log($(".box").innerWidth());//获取盒⼦的内部区域的宽度(包括填充)console.log($(".box").outerHeight());//获取盒⼦的外部区域的⾼度(包括边框)console.log($(".box").outerWidth());//获取盒⼦的外部区域的宽度(包括边框)console.log($(".box").outerHeight(true));//获取盒⼦的外部区域的⾼度(⽰包括边距) console.log($(".box").outerWidth(true));//获取盒⼦的外部区域的宽度(不包括边距) </script></body></html>显⽰如下:打印结果如下:3. ⽂档处理3.1 内部插⼊$("p").append("<p>p1</p>") 在p标签后⾯追加标签"<p>p1</p>" $("p").appendTo("<p>p1</p>") 把p标签追加到标签"<p>p1</p>"后⾯$("p").prepend("<p>p1</p>") 在p标签前⾯追加标签"<p>p1</p>" $("p").prependTo("<p>p1</p>") 把p标签追加到标签"<p>p1</p>"前⾯3.2 外部插⼊$("p").after("<p>p1</p>") 在p标签的同级标签后⾯插⼊标签"<p>p1</p>" $("p").before("<p>p1</p>") 在p标签的同级标签前⾯插⼊标签"<p>p1</p>" $("p").insertAfter("<p>p1</p>") 把p标签插⼊到标签"<p>p1</p>"后⾯$("p").insertBefore("<p>p1</p>") 把p标签插⼊到标签"<p>p1</p>"前⾯3.3 替换$("p").replaceWith("<img src='a.jpg'>") 把p标签替换成图⽚$(".div1").replaceAll("p") 把div类替换成⽂档中所有的p标签例⼦⼀:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><p>p1</p><p>p2</p><p>p3</p><p>p4</p><div class="div1">div5</div><div class="div1">div6</div><div class="div1">div7</div><script>$(".div1").replaceWith("<p>p1</p>");//把p标签替换成p标签</script></body></html>显⽰如下:例⼦⼆:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><p>p1</p><p>p2</p><p>p3</p><p>p4</p><div class="div1">div5</div><div class="div1">div6</div><div class="div1">div7</div><script>$(".div1").replaceAll("p");//把div类替换成⽂档中所有的p标签</script></body></html>显⽰如下:3.4 删除$("p").empty() 删除所有的p标签中的所有的⼦标签$("p").remove([expr]) 删除所有的p标签以及p标签中的⼦标签3.5 复制$("p").clone() 克隆p标签$("p").clone(true) 布尔值指定事件处理函数是否会被复制3.6 循环使⽤jQuery实现的集合循环⽅式⼀:$.each(Array,function(){function_suite})⽅式⼆:$(element).each(function(){function_suite})例⼦:使⽤each循环进⾏判断代码⼀:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><script>li=[11,22,33,44,55,66,77];$.each(li,function(i,v){if(v==33){return;}console.log(v);});</script></body></html>打印如下:代码⼆:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><script>li=[11,22,33,44,55,66,77];//定义循环,i为列表的索引,v为列表索引对应的值$.each(li,function(i,v){//当循环中的值为33时if (v==33){return false;}console.log(v);});</body></html>打印如下:结论:each的参数function内如果出现return,结束当次循环,类似于continueeach的参数function内如果出现return false,结束的是整个each循环,类似break4. 事件4.1 事件$("p").click() 单击事件$("p").dbclick() 双击事件$("p").mouseover() 当⿏标指针位于元素上⽅时触发事件$("p").mousemove() 当⿏标指针在指定的元素中移动时触发事件$("p").mouseout() 当⿏标指针从元素上移开时触发事件$("input[type='text']").focus() 元素获得焦点时,触发focus事件$("input[type='text']").blur() 元素失去焦点时,触发blur事件$("input[type='text']").change() 当元素的值发⽣改变时触发事件$("button").mousedown() 当按下⿏标时触发事件$("button").mouseup() 元素上放开⿏标按键时触发事件$(window).keydown() 当键盘或按钮被按下时触发事件$(window).keypress() 当键盘或按钮被按下时触发事件,每输⼊⼀个字符都触发⼀次事件$(window).scroll() 当⽤户滚动窗⼝的滚动条时触发事件$(window).resize() 当调整浏览器窗⼝的⼤⼩时触发事件$(window).unload() ⽤户离开页⾯时,触发事件$("input").keyup() 当按钮被松开时触发事件$("input").select() 当input元素中的⽂本被选择时触发事件$("form").submit() 当提交表单时触发事件4.2 绑定⽅式$(标签).事件(函数内容)4.3 事件委托通过其上级(可以是多层上级)事件委托,当点击这个标签时才会绑定事件在页⾯不刷新的情况下添加⼀⾏数据,⾏数据有操作按钮,点击并⽆效果,就可以通过事件委托来解决委托⽅式:$("ul").on("click","li",function(){function_suite})例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.2.1.js"></script></head><body><div id="box"><div class="item">111</div><div class="item">222</div><div class="item">333</div><div class="item">444</div><div class="item">555</div><div class="item">666</div></div><button>ADD</button><script>//为"button"按钮添加点击事件$("button").click(function(){$("#box").append("<div class='item'>777</div>");//在div标签后⾯添加⼀⾏//为"box"下的"item"类添加点击事件$("#box").on("click",".item",function(){console.log($(".item").text());//打印"item"类的⽂本})</script></body></html>4.4 event object所有的事件函数都可以传⼊event参数⽅便处理事件⽅式:$("p").click(function(event){function_suite})(event_object)的属性⽅法event.pageX 事件发⽣时,⿏标距离⽹页左上⾓的⽔平距离event.pageY 事件发⽣时,⿏标距离⽹页左上⾓的垂直距离event.type 事件的类型event.which 按下了哪⼀个键event.data 在事件对象在绑定数据,然后传⼊事件处理函数event.target 事件针对的⽹页元素event.preventDefault() 阻⽌事件的默认⾏为(⽐如点击链接,会⾃动打开新页⾯)event.stopPropagation() 停⽌事件向上层元素冒泡4.5 动画效果基点$("p").show() 显⽰隐藏的匹配元素$("p");show("slow") 参数表⽰速度,("slow","normal","fast"),也可以设置为毫秒$("p").hide() 隐藏显⽰的元素$("p").toggle() 切换显⽰/隐藏例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../0814/jquery-3.2.1.js"></script></head><body><img src="a.jpg">;//定义⼀张图⽚<hr><button class="hide_element">hide</button>;//定义隐藏按钮<button class="show_element">show</button>;//定义显⽰按钮<button class="toggle_element">toggle</button>;//定义切换按钮<script>//定义隐藏的点击事件$(".hide_element").click(function(){$("img").hide()});//定义显⽰的点击事件$(".show_element").click(function(){$("img").show()});//定义切换按钮的点击事件$(".toggle_element").click(function(){$("img").toggle()});</script></body></html>⽤浏览器打开的效果如下:可以看到,图⽚是显⽰的,点击"hide"按钮,图⽚就被隐藏起来,然后再点击"show"按钮,图⽚就⼜会被显⽰出来了.另外,当图⽚显⽰的时候,点击"toggle"按钮,图⽚就会隐藏,⽽当图⽚是隐藏的时候,点击"toggle"按钮,图⽚⼜会显⽰出来.4.6 滑动操作$("p").slideDown("1000") ⽤1000毫秒的时间将段落滑下$("p").slideUp("1000") ⽤1000毫秒的时间将段落滑上$("p").slideToggle("1000") ⽤1000毫秒的时间将段落滑上,滑下例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../0814/jquery-3.2.1.js"></script></head><body><img src="a.jpg" style="width:500px;height:300px"><hr><button class="slide_up">slide_up</button><button class="slide_down">slide_down</button><button class="toggle">toggle</button><script>//对"slide_up"类绑定点击事件$(".slide_up").click(function(){$("img").slideUp(1000);//⽤1000毫秒的时间将段落收起});//对"slide_down"类绑定点击事件$(".slide_down").click(function(){$("img").slideDown(1000);//⽤1000毫秒的时间将段落滑下});//对"toggle"类绑定点击事件$(".toggle").click(function(){$("img").slideToggle(1000);//⽤1000毫秒的时间将段落滑下或者收起 });</script></body></html>4.7 淡⼊淡出$("p").fadeIn("1000") ⽤1000毫秒时间将段落淡⼊$("p").fadeOut("1000") ⽤1000毫秒时间将段落淡出$("p").fadeToggle("1000") ⽤1000毫秒时间将段落淡⼊,淡出$("p").fadeTo("slow",0.6) ⽤慢速度将段落的透明度调整到0.6例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><img src="a.jpg" style="width:500px;height:300px"><hr><button class="fade_in">fadeIn</button><button class="fade_out">fadeOut</button><button class="fade_toggle">fadeToggle</button><button class="fade_to">fadeTo</button><script>//对"fade_in"类绑定点击事件$(".fade_in").click(function(){$("img").fadeIn(1000);//⽤1000毫秒时间将段落淡⼊});//对"fade_out"类绑定点击事件$(".fade_out").click(function(){$("img").fadeOut(1000);//⽤1000毫秒时间将段落淡出});//对"fade_toggle"类绑定点击事件$(".fade_toggle").click(function(){$("img").fadeToggle(1000);//⽤1000毫秒时间将段落淡⼊或淡出});//对"fade_to"类绑定点击事件$(".fade_to").click(function(){$("img").fadeTo("slow",0.6);//⽤慢速度将图⽚的透明度调整到0.6 });</script></body></html>4.8 页⾯载⼊页⾯载⼊,也就是当页⾯载⼊成功后⽴即运⾏的函数事件$(document).ready(function(){function_suite})也可以简写为:$(function(){function_suite})。
jqueryscroll（）滚动条事件
jqueryscroll（）滚动条事件最近做项⽬⽤了到scroll滚动条事件，花了很多时间做搜索，没有很好的先整理思考后再去搜索，做编码事件时，没有事先考虑清楚，理清思路，先做简单的测试成功后，再完成其他的实现。
1.scroll()事件当⽤户滚动指定的元素时，会发⽣scroll事件。
适⽤于所有可滚动的元素和window对象（浏览器窗⼝）$(select).scroll([Data],fn);当（浏览器窗⼝）页⾯滚动条变化时，执⾏的函数，JQuery代码：$(window).scroll(function(){ //do something...});2.scrollTop 获取匹配元素相对滚动条顶部的偏移scrollTop(val)获取页⾯滚动条的具体值：$(document).scrollTop()；设置相对滚动条的偏移值：$(document).scrollTop(300);3.offset() 获取匹配元素在当前视⼝的相对偏移。
offset([coordinates])获取元素的相对偏移：$(".bg02").offset().top;设置元素的相对偏移：$(".bg02").offset({"top":1000, "left":0});4.需求：当(浏览器窗⼝)页⾯滚动条值⼩于300px时隐藏div，⼤于300px时显⽰div$(window).scroll(function(){ //var ds = document.documetElement.scrollTop || document.body.scrollTop; //js兼容获取滚动条 if($(document).scrollTop() < 300){ $(".position").css({"display":"none"}); }else{ $(".position").css({"display":"block"}); }});5.返回顶部和元素定位(1-10)$(".position ul li").click(function(){ var num_index = $(this).index() + 1;if(num_index < 10){ $("html,body").animate({scrollTop:$(".bg0" + num_index).offset().top},800);}else if(num_ineex ==10){ $("html,body").animate({$(".bg"+num_index).offset().top},800); }else if(num_index == 11){ $("html,body").animate({scrollTop:0},800); }else{ return false;}});。
JQuery基本事件函数
JQuery基本事件函数1，click单击事件2，blur失去光标事件，focus获得光标事件3，JQuery.on()函数：为html元素绑定事件，如下代码：1 $("div").on("click","p",function(){$(this).addClass("colorRed")});点击div中的p元素，将调⽤function中的⽅法，即给当前的p段落添加类“colorRed”。
该代码对不包含在div中的p元素或者任意其他⾮p元素⽆效。
4，animate()⽅法执⾏CSS属性集的⾃定义动画。
该⽅法通过css样式将元素从⼀个状态改变为另⼀个状态，如下代码，将#box动画切换成⾼度为300px。
1 $("#box").animate({height:"300px"});5，JQuery.html()⽅法：返回或设置被选元素的内容。
注意获取或设置元素内容时，不包含⾃⾝的html标签，如下代码：<button id="u"class="btn1">改变 p 元素的内容</button>alert($("#u").html());$("p").html("Hello <b>world!</b>");获取button的内容，弹出的内容为“改变 p 元素的内容”，⽽不是<button>...<button>,同理在设置元素内容时，也不改变内容原有的类或者属性，只是改变其中的内容。
（在项⽬中，因为疏忽了这⼀点，导致少嵌套了⼀层元素，⽐如说以上代码，加⼊说本意是想获得<button>标签的，但是没有得到，导致显⽰效果与设计给的切图不⼀致，浪费了很多时间，应该是获得button的parent的html，才能够得到<button>标签。
jquery键盘事件keypress（）keydown（）keyup（）用法总结
jquery键盘事件keypress（）keydown（）keyup（）⽤法总结事件的定义完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。
当按钮被按下时，发⽣ keydown 事件。
keydown() ⽅法触发 keydown 事件，或规定当发⽣ keydown 事件时运⾏的函数。
当按钮被松开时，发⽣ keyup 事件。
它发⽣在当前获得焦点的元素上。
keyup() ⽅法触发 keyup 事件，或规定当发⽣ keyup 事件时运⾏的函数。
keypress 事件与 keydown 事件类似。
当按钮被按下时，会发⽣该事件。
它发⽣在当前获得焦点的元素上。
不过，与 keydown 事件不同，每插⼊⼀个字符，就会发⽣ keypress 事件。
keypress() ⽅法触发 keypress 事件，或规定当发⽣ keypress 事件时运⾏的函数。
使⽤情况：（which事件）$("input").keydown(function(event){$("div").html("Key: " + event.which);});which 属性指⽰按了哪个键或按钮。
（event.keyCode和event.charCode进⾏了标准化。
）1.理论上它可以绑定到任何元素，但keydown/keyup事件只是发送到具有焦点的元素上，不同的浏览器中，可获得焦点的元素略有不同，但是表单元素总是能获取焦点，所以对于此事件类型表单元素是最合适的2.在input元素上绑定keydown事件时获取的内容都是之前输⼊的，当前输⼊的获取不到3.keydown()事件触发在⽂字还没有敲进⽂本框，这时如果在kevdown事件中输⼊⽂本框中的⽂本，得到的是触发键盘事件前的⽂本4.keyup()事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的⽂本5.keypress()捕获浏览器键盘输⼊的时候6.keypress事件与keydown和keyup的主要区别（所以使⽤组合键时需要使⽤keydown事件兼容）只能捕获单个字符，不能捕获组合键⽆法响应系统功能键（如delete，backspace）不区分⼩键盘和主键盘的数字字符7.KeyPress主要⽤来接收字母、数字等ANSI字符8.KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键，如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等在使⽤键盘的时候通常会⽤到 Ctrl+shift+alt 类似的组合键功能，通过 keyup 事件能够处理(说明⼀下这⾥不⽤keydown事件：因为在判定keydown 的时候，ctrl、shift、和Alt属于⼀直按下状态然后再加另外⼀个键是不能准确捕获组合键，所以使⽤keydown 是不能准确判断的，要通过keyup事件来判定)以上就是本次介绍的关于jquery 键盘事件函数的全部知识点内容，更多内容可以到相关栏⽬查找。
jQuery事件方法
live() load() mousedown() mouseenter() mouseleave() mousemove() mouseout() mouseover() mouseup() off() on() one() $.proxy() ready() resize() scroll() select() submit() toggle() trigger() triggerHandler() unbind() undelegate() unload() contextmenu() $.holdReady()
描述 向元素添加事件处理程序 添加/触发失去焦点事件 添加/触发 change 事件 添加/触发 click 事件 添加/触发 double click 事件 向匹配元素的当前或未来的子元素添加处理程序 在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序 在版本 1.8 中被废弃。添加/触发 error 事件 在事件冒泡阶段内的当前 DOM 元素 包含当前执行的处理程序被绑定时传递到事件方法的可选数据 返回当前调用的 jQuery 事件处理程序所添加的元素 返回指定的 event 对象上是否调用了 event.preventDefault() 返回指定的 event 对象上是否调用了 event.stopImmediatePropagation() 返回指定的 event 对象上是否调用了 event.stopPropagation() 返回当事件被触发时指定的命名空间 返回相对于文档左边缘的鼠标位置 返回相对于文档上边缘的鼠标位置 阻止事件的默认行为 返回当鼠标移动时哪个元素进入或退出 包含由被指定事件触发的事件处理程序返回的最后一个值 阻止其他事件处理程序被调用 阻止事件向上冒泡到 DOM 树，阻止任何父处理程序被事件通知 返回哪个 DOM 元素触发事件 返回从 1970 年 1 月 1 日到事件被触发时的毫秒数 返回哪种事件类型被触发 返回指定ห้องสมุดไป่ตู้件上哪个键盘键或鼠标按钮被按下 事件触发时 META 键是否被按下 添加/触发 focus 事件 添加事件处理程序到 focusin 事件 添加事件处理程序到 focusout 事件 添加两个事件处理程序到 hover 事件 添加/触发 keydown 事件 添加/触发 keypress 事件 添加/触发 keyup 事件
jquert事件机制
1 jquery中的事件使用jQuery第一步是获取指向某元素的jQuery对象；第二步是使用jQuery对象的方法来操作该元素。
将jQuery对象转换成DOM对象，可以使用get()方法，其语法结构为get([index])。
对于一个DOM对象，只需要用$()把它包装起来，就可以获得相应的jQuery对象。
操作元素样式的方法包含css()、addClass()、removeClass()和toggleClass()。
操作元素内容的方法包括html()和text()。
如果要获取元素的值，通过val() 实现。
通过attr()方法可以对元素属性执行获取和设置操作，通过removeAttr()方法则可以对某一指定的属性执行删除操作。
有很多种方法可以实现增加节点的功能，append()方法仅是其中之一，按照插入元素的顺序来分，可以分为内部插入和外部插入两种方法。
如果需要替换元素中的节点，可以使用replaceWith()和replaceAll()这两种方法。
可以通过方法clone()复制元素节点。
在操作页面时，删除多余或指定的页面元素是非常必要的，jQuery中提供了remove()方法来实现删除操作。
直接使用each()方法实现元素的遍历2 页面载入事件1. ready()方法的工作原理该方法类似于传统的JavaScript中的onload，只不过在事件执行时间上有区别：onload的执行必须是页面中的全部元素完全加载到浏览器后才触发，在这种情况下，如果页面中的图片过多或图片过大，那么有可能要等到onload事件触发，用户才能进行其他的操作；而使用jQuery中的ready()方法加载页面，只需要页面的DOM模型加载完毕，就会触发ready()方法。
ready()方法的几种相同写法写法一：$(document).ready(function(){//代码部分});写法二：$(function(){//代码部分});写法三：jQuery(document).ready(function(){//代码部分});写法四：jQuery(function(){//代码部分});3 绑定事件在JavaScript的事件模型中，事件与处理程序的绑定一般有两种方式：第一种是在事件源对象所对应的html标签上增加一个要处理的事件属性，让事件属性值等于处理该事件的函数名或程序代码；第二种是直接在JavaScript代码中，设置元素对象的事件属性，让事件属性值等于处理该事件的函数名或程序代码。