jQuery事件大全
- 格式：pdf
- 大小：257.72 KB
- 文档页数：11
下载文档原格式
合集下载
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事件方法
方法 bind() blur() change() click() dblclick() delegate() die() error() event.currentTarget event.data event.delegateTarget event.isDefaultPrevented() event.isImmediatePropagationStopped() event.isPropagationStopped() space event.pageX event.pageY event.preventDefault() event.relatedTarget event.result event.stopImmediatePropagation() event.stopPropagation() event.target event.timeStamp event.type event.which event.metaKey focus() focusin() focusout() hover() keydown() keypress() keyup()
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 事件
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代码中，设置元素对象的事件属性，让事件属性值等于处理该事件的函数名或程序代码。
03 JQuery事件
keyup load mousedown mousemove mouseover mouseup resize scroll select submit unload
实例03-05：简写03-04代码。
$(document).ready(function() { $('#switcher .button').click(function() { $('body').removeClass(); if (this.id == 'switcher-narrow') { $('body').addClass('narrow'); } else if (this.id == 'switcher-large') { $('body').addClass('large'); } $('#switcher .button').removeClass('selected'); $(this).addClass('selected'); }); });
实例03-03：jquery处理。
$('#switcher-large').bind('click', function() { $('body').removeClass('narrow'); $('body').addClass('large'); $('#switcher .button').removeClass('selected'); $(this).addClass('selected'); }); });
jQuery鼠标事件之hover事件
jQuery⿏标事件之hover事件
学了mouseover、mouseout、mouseenter、mouseleave事件，也理解了四个事件的相同点与不同点，现在可以⽤来给元素做⼀个简单的切换效果
在元素上移进移出切换其换⾊，⼀般通过2个事件配合就可以达到，这⾥⽤mouseenter与mouseleave，这样可以避免冒泡问题
$(ele).mouseenter(function(){
$(this).css("background", '#bbffaa');
})
$(ele).mouseleave(function(){
$(this).css("background", 'red');
})
这样⽬的是达到了，代码稍微有点多，对于这样的简单逻辑jQuery直接提供了⼀个hover⽅法，可以便捷处理
只需要在hover⽅法中传递2个回调函数就可以了，不需要显⽰的绑定2个事件
$(selector).hover(handlerIn, handlerOut)
handlerIn(eventObject)：当⿏标指针进⼊元素时触发执⾏的事件函数
handlerOut(eventObject)：当⿏标指针离开元素时触发执⾏的事件函数。
jquery的api以及用法总结-数据操作事件
jquery的api以及⽤法总结-数据操作事件数据1. .data()在匹配元素上存储任意相关数据或返回匹配的元素集合中的第⼀个元素的给定名称的数据存储的值.data(obj) ⼀个⽤于更新数据的键/值对.data()⽅法允许我们再dom元素上绑定任意类型的数据，避免了循环引⽤的内存的泄露风险从div元素存储然后找回⼀个值此例中可以将#log内存储的数据分别提取到span中<div id="log">the value is<span></span>and<span></span></div>$('#log').data('test', {first: 16,last: 'jianmei',});//将test的first内容添加到#log上$('span:first').text($('#log').data('test').first);$('span:last').text($('#log').data('test').last);2. .removeData()在元素上移除绑定的数据.removeData([name]),要移除的存储数据名.removeData([list]),⼀个数组或者空间分隔的字符串命名要删除的数据块<div id="log">the value is<span></span>and<span></span></div>$('#log').data('test1', {first: 16,});$('#log').data('test2', {last: 'jianmei',});$('span:first').text($('#log').data('test1').first);//移除绑定在#log上的test1数据$('#log').removeData('test2');$('span:last').text($('#log').data('test2').last);操作拷贝.clone 创建⼀个匹配的元素集合的深度拷贝副本.clone()⽅法深度复制所有匹配的元素集合，包括所有匹配元素，元素的下级元素，⽂字节点当和插⼊⽅法联合使⽤的时候，.clone()对于复制页⾯上的元素很⽅便__注意__:当使⽤clone的时候，在将它插⼊到⽂档之前，我们可以修改克隆后的元素或者元素内容复制所有的b元素然后将他们插⼊到所有的段落中<b>hello</b><p>have a good day</p>// prependTo是将元素插⼊到前⾯// $('b').clone().prependTo('p');// appendTo是将元素插⼊到后⾯,就是添加的意思$('b').clone().appendTo('p');DOM插⼊、包裹1. .wrap()在集合中匹配的每⼀个元素周围包裹⼀个html结构在所有的p外⾯包裹⼀层div，此例中会有两个div<p>have a good day</p><p>have a nice day</p>//在p外⾯包裹⼀个class为demo的div$('p').wrap("<div class = 'demo'></div>")2. wrapAll()在集合中所有匹配元素的外⾯包裹⼀个html元素，此例中只有⼀个包裹在两个p元素怒外⾯的div，div的数量只有⼀个 <p>have a good day</p><p>have a nice day</p>// 与wrap不同的是wrap是在匹配符合的每⼀个元素外⾯都要加⼀个div// ⽽wrapAll只在所有匹配的元素外⾯加⼀层div$('p').wrapAll("<div class = 'demo'></div>")3. wrapInner()在匹配元素⾥的内容外包⼀层结构选择所有的段落，包裹每⼀个匹配元素的内容注意:wrap和wrapInner都是包裹每⼀个匹配的元素但是不同的是wrap是在选择的每⼀个元素外包裹⼀层，但是wrapInner是在选择的每个元素的内容外包裹⼀层<p>have a good day</p><p>have a nice day</p>//包裹的是内容have a good day$('p').wrapInner("<div class = 'demo'></div>")DOM插⼊，内部插⼊1. append()在每个匹配元素⾥⾯的末尾处插⼊参数内容// 在div内插⼊p$('div').append($('b'));2. appendTo()将匹配的元素插⼊到⽬标元素的最后⾯<b>hello</b><div class="demo"></div>// 将p插⼊到div内$('b').appendTo($('.demo'));3. html()获取集合中第⼀个匹配元素的html内容或者设置每⼀个匹配元素的html内容<div class="demo">123</div><div class="demo">123</div><div class="demo">123</div>// 如果添加的是空的字符串,则代表清空div内的内容// $('.demo').html('');// 向div内添加内容$('.demo').html('jianmei');4.prepend()将参数内容插⼊到每个匹配元素的前⾯（元素内部）<b>hello</b><div class="demo">123</div>// 在div内插⼊b// b元素的内容会放在原本div内容的前⾯,跟append是相反的$('.demo').prepend($('b'));5. prependTo()将所有元素插⼊到⽬标前⾯（元素内）<b>hello</b><div class="demo">123</div>// 将b插⼊到div内$('b').prependTo($('.demo'));6. text()得到匹配元素集合中每个元素的⽂本内容，包括他们的后代，或者设置匹配元素集合中每⼀个元素的⽂本内容为指定的⽂本内容 <p>have a good day</p><p>have a nice day</p>// 在段落p中添加⽂本$('p').text('jianmeinew text');DOM插⼊、外部插⼊1、after()在匹配元素集合中的每个元素后⾯插⼊参数所指定的内容，作为其兄弟节点<div class="demo">123</div><div class="demo">123</div>// 在demo类之后插⼊p标签// $('.demo').after('<p>jianmei</p>')// 在demo类后插⼊所有的p$('.demo').after($('p'));2、 before和after的理论是⼀样的，根据参数的设定，在匹配的元素前⾯插⼊内容，外部插⼊// 在demo类之前插⼊p标签$('.demo').before('<p>jianmei</p>')3、 insertAfter和after是⼀样的功能，主要是插⼊内容和⽬标的位置不同，//将p插⼊到demo类之后$('p').insertAfter('.demo');4、同理可知insertBefore的原理// 将p插⼊demo类之前$('p').insertBefore('.demo');DOM移除1、 detach(),从DOM中去掉所有匹配的元素detach和remove⽅法⼀样，除了deach保存所有jquery数据和被移⾛的元素相关联当需要移⾛⼀个数据，不久⼜将该元素插⼊DOM时，常⽤此⽅法。
JQuery实例--事件
JQuery語法與實例--------事件一. 載入:ready(fn): 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数.这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度.简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。
通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行.有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中. 可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。
请确保在元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件.可以在同一个页面中无限次地使用$(document).ready()事件。
其中注册的函数会按照（代码中的）先后顺序依次执行.1. 在DOM加载完成时运行的代码，可以这样写：$(document).ready(function(){// 在这里写你的代码...});2. 使用$(document).ready() 的简写，同时内部的jQuery 代码依然使用$ 作为别名，而不管全局的$为何.jQuery(function($) {// 你可以在这里继续使用$作为别名...});二. 事件處理:1. bind(type,[data],fn): 为每个匹配元素的特定事件绑定事件处理函数。
.bind() 方法是用于往文档上附加行为的主要方式。
所有JavaScript事件对象，比如focus, mouseover, 和resize，都是可以作为type参数传递进来的。
jQuery还提供了一些绑定这些标准事件类型的简单方式，比如.click()用于简化.bind('click')。
一共有以下这些：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。
jquery——移动端touch事件
jquery——移动端touch事件⾸先为了防⽌事件触发默认⾏为，我们需要去禁⽌，安全的禁⽌⽅法：// 判断默认⾏为是否可以被禁⽤if (e.cancelable) {// 判断默认⾏为是否已经被禁⽤if (!e.defaultPrevented) {e.preventDefault();}}三个事件：$("body").on("touchstart", function(e) {e.preventDefault();});$("body").on("touchend", function(e) {e.preventDefault();});$("body").on("touchmove", function(e) {e.preventDefault();});移动开始和结束的坐标获取：startX = e.originalEvent.changedTouches[0].pageX;startY = e.originalEvent.changedTouches[0].pageY;moveEndX = e.originalEvent.changedTouches[0].pageX;moveEndY = e.originalEvent.changedTouches[0].pageY;样例：$("body").on("touchstart", function(e) {e.preventDefault();startX = e.originalEvent.changedTouches[0].pageX,startY = e.originalEvent.changedTouches[0].pageY;});$("body").on("touchmove", function(e) {e.preventDefault();moveEndX = e.originalEvent.changedTouches[0].pageX,moveEndY = e.originalEvent.changedTouches[0].pageY,X = moveEndX - startX,Y = moveEndY - startY;if ( X > 0 ) {alert('向左滑动');}});注：以上$使⽤基于jquery1.7.2对应pc端⿏标操作：touchstart ——> mousedown touchend ——> mouseup touchmove ——> mousemove。
Jquery中的事件
目录Jquery中的事件 (1)加载DOM (1)事件绑定 (1)合成事件 (1)事件冒泡 (3)事件对象的属性 (3)移除事件 (4)模拟操作 (4)~~~笔记是本人看书时所记，需要测试时所写代码的的发邮箱623565791@~ (7)Jquery中的事件加载DOM$(document).ready(function(){});//执行时机，文档中DOM加载完毕即执行，不需要等图片等加载完（window.onload需要）。
简写方式：$().ready(function(){}) ; $(function(){});$(window).load(function(){});与window.onload一样~事件绑定bind（type [,data] ,fn）;参数1：事件类型click,blur等。
参数2：作为event.data属性值传给事件对象的额外数据对象。
表示不知道是干嘛的~！参数3：处理函数。
注：type比普通的JS少了on。
click---onclick合成事件hover();和toggle();a)hover(enter , leave) 当光标移到触发enter事件，当光标移开触发leave事件b)toggle(fn1 , fn 2 , fn3 ….fnN)用于模拟鼠标连续单击事件，第一次单机触发fn1,第二次触发fn2….知道最后一个~随后又重头开始~toggle可以简化很多代码：----未使用toggle----$(function(){$(".article #header").click(function(){if( $(this).next("#section").is(":visible") && $(this).nextAll("#footer").is(":visible")){$(this).next("#section").hide();$(this).nextAll("#footer").hide();$(this).css({"color" : "black" , "background" : "#FFFFFF"});}else{$(this).next("#section").show();$(this).nextAll("#footer").show();$(this).css({"color" : "black" , "background" : "#cc00cc"});}});});----使用toggle----$(function(){$(".article #header").toggle(function(){$(this).next("#section").show();$(this).nextAll("#footer").show();$(this).css({"color" : "black" , "background" : "#cc00cc"});},function(){$(this).next("#section").hide();$(this).nextAll("#footer").hide();$(this).css({"color" : "black" , "background" : "#FFFFFF"});});});事件冒泡a)事件冒泡介绍：元素间嵌套，且都绑定了相同的事件类型，则触发内部元素事件时外部元素也会触发。
jquery用法大全
:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素
jQuery 效果函数
方法 描述
animate() 对被选元素应用“自定义”的动画
clearQueue() 对被选元素移除所有排队的函数（仍未运行的）
attr() 设置或返回匹配元素的属性和值。
hasClass() 检查匹配的元素是否拥有指定的类。
html() 设置或返回匹配的元素集合中的 HTML 内容。
removeAttr() 从所有匹配的元素中移除指定的属性。
removeClass() 从所有匹配的元素中删除全部或者指定的类。
.ajaxStop() 当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess() 当 Ajax 请求成功完成时显示一条消息。
jQuery.get() 使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON() 使用 HTTP GET 请求从服务器加载 JSON 编码数据。
:image $(":image") 所有 type="image" 的 <input> 元素
:file $(":file") 所有 type="file" 的 <input> 元素
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
jquery click事件的用法
jquery click事件的用法在 jQuery 中，click() 事件用于当用户点击某个元素时执行特定的函数。
这是一种非常常用的与用户交互的方式。
以下是一些基本的用法：1 绑定点击事件这是 click() 事件最直接的用法。
当用户点击 id 为 "myButton" 的元素时，会执行 clickHandler 函数。
javascript$("#myButton")click(function() {alert("用户点击了按钮");});2 事件委托如果你希望在用户点击特定的元素时才执行函数，但又不知道这个元素何时会被插入到页面中，你可以使用 on() 方法来进行事件委托。
例如，如果你有一些动态添加到页面的按钮，你可以这样设置点击事件：javascript$(document)on('click', '#myButton', function() {alert("用户点击了按钮");});在这个例子中，我们使用了 document 作为父元素，这意味着任何在document 中的元素（或后来添加的元素）只要满足选择器（这里是#myButton）就会绑定事件。
3 取消点击事件如果你想取消某个元素的点击事件，你可以使用 off() 方法。
例如：javascript$("#myButton")off('click');这会移除所有绑定到 #myButton 的点击事件。
如果你只想移除特定的点击事件，你可以这样做：javascript$("#myButton")off('click', ''); // 移除所有点击事件$("#myButton")off('click', 'someFunction'); // 移除特定的点击事件这里的 '' 是通配符，代表所有事件；'someFunction' 是你想要移除的事件名称。
jquery中trigger（）方法自动触发事件（摘抄：加强记忆）
jquery中trigger（）⽅法⾃动触发事件（摘抄：加强记忆）⼀、常⽤事件在页⾯加载完成时，⾃动触发input的点击事件；在移动端可以实现⾃动弹出输⼊法，获得焦点；$('input').trigger('click').focus();⼆、⾃定义事件$('#btn').on('myClick',function(){alert('⾃定义事件');})$('#btn').trigger(‘myClick’);三、传递参数trigger(type,[,data]);⽅法有两个参数：第⼀个参数type是要触发的事件类型；第⼆个参数是要传递给事件处理函数的附加数据，以数组形式；通常可以通过判断第⼀个参数来区别是代码触发还是⽤户触发；$('#btn).bind('myClick',function(event,msg1,msg2){$('#test').append(msg1+msg2);})$('#btn').trigger('myClick',['⾃定义的','事件']);四、执⾏默认操作trigger()⽅法触发事件后，会执⾏浏览器默认操作；例如：$('input').trigger('focus');以上代码不仅会触发为input元素的绑定的focus事件，也会使input元素本⾝获得焦点（浏览器默认操作）；如果只是想触发绑定的focus事件，⽽不想执⾏浏览器默认的操作，可以使⽤jquery中另⼀个⽅法triggerHander()$('input').trigger('focus');额外⼩知识点：mouseover 和 mousemove区别：当⿏标在指定的元素上移动，就是mousemove；当⿏标指针位于元素上⽅时，就是mouseover。
jquery笔记(6)jQuery事件之鼠标事件
jQuery事件之鼠标事件鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。
(1):click事件：click事件于用户在元素敲击鼠标左键，并在相同元素上松开左键时触发。
$('p').click(function(){alert('click function is running !');});(2):dbclick事件：dbclick事件在用户完成迅速连续的两次点击之后触发，双击的速度取决于操作系统的设置。
一般双击事件在页面中不经常使用。
$('p').dbclick(function(){alert('dbclick function is running !');});(3):mousedown事件：mousedown事件在用户敲击鼠标键时触发，跟keydown事件不一样，该事件仅在按下鼠标时触发。
$('p').mousedown(function(){alert('mousedown function is running !');});(4):mouseup事件：mouseup事件在用户松开鼠标时触发，如果在与按下鼠标的元素相同元素上松开，那么click事件也会触发。
$('p').mouseup(function(){alert('mouseup function is running !');}).click(function(){alert('click function is running too !');});(5):mouseover事件：mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发，如果需要知道来自那个元素可以使用，relatedTagrget属性。
(6):mouseout事件：mouseout事件于用户把鼠标移出一个元素时触发，这包括从父元素移动到子元素上，或者使用键盘跳到元素上。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
元素事件列表说明
注:不带参数的函数 其参数为可选的 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 来包围该元素
注:不带参数的函数 其参数为可选的 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 来包围该元素