jQuery事件大全
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 键盘事件函数的全部知识点内容，更多内容可以到相关栏⽬查找。
- 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 来包围该元素