jQuery 事件方法文档
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`。
JQUERY常用方法大全
JQUERY常用方法大全JQuery是一个快速、简洁的JavaScript库，它简化了HTML文档的遍历、事件处理、动画和AJAX交互等操作。
下面是JQuery中常用的一些方法：1.选择器方法：- `$(this)`：选择当前元素。
- `$(document)`：选择整个文档。
- `$(window)`：选择浏览器窗口。
2.事件方法：- `$(selector).click(function)`：给元素绑定点击事件。
- `$(selector).dblclick(function)`：给元素绑定双击事件。
- `$(selector).mouseenter(function)`：给元素绑定鼠标进入事件。
- `$(selector).mouseleave(function)`：给元素绑定鼠标离开事件。
- `$(selector).keydown(function)`：给元素绑定键盘按下事件。
- `$(selector).keyup(function)`：给元素绑定键盘松开事件。
3.DOM操作方法：- `$(selector).html(content)`：设置元素的HTML内容。
- `$(selector).text(content)`：设置元素的文本内容。
- `$(selector).val(value)`：设置或获取输入框的值。
- `$(selector).append(content)`：在元素内部的结尾插入内容。
- `$(selector).prepend(content)`：在元素内部的开头插入内容。
- `$(selector).after(content)`：在元素的后面插入内容。
- `$(selector).before(content)`：在元素的前面插入内容。
- `$(selector).remove(`：删除元素。
4.属性和样式方法：- `$(selector).attr(attributeName)`：获取元素的属性值。
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})。
jquery移除事件的方法
jquery移除事件的方法
jQuery提供了多种方法来移除事件，以下是其中几种常用的方法：1. off()方法：该方法可以移除指定事件类型的所有事件处理程序，也可以
移除指定的事件处理程序。
例如：```。
// 移除所有click事件处理程序。
$(selector).off("click");// 移除指定的click事件处理程序。
$(selector).off("click", handler);。
```2. unbind()方法：该方法可以移除指定事件类型的所有事件处理
程序，也可以移除指定的事件处理程序。
与off()方法不同的是，
unbind()方法可以移除通过bind()方法绑定的事件处理程序。
例如：```。
// 移除所有click事件处理程序。
$(selector).unbind("click");// 移除指定的click事件处理程序。
$(selector).unbind("click", handler);。
```3. remove()方法：该方法可以移除元素及其所有事件处理程序。
例如：```。
//移除元素及其所有事件处理程序。
$(selector).remove();。
```需要注意的是，以上方法都可以传递多个事件类型或事件处理程
序作为参数，以一次性移除多个事件。
另外，如果要移除通过on()方法
绑定的事件处理程序，可以使用off()方法，并将事件类型和处理程序作
为参数传递给它。
jQuery中事件绑定
jQuery中事件绑定⼀、前⾔最近在做项⽬中要⽤到jQuery来绑定事件，⾸先想到的是$(selector).事件名();这样绑定事件的⽅式，这种⽅式对事件进⾏绑定其实也就是bind()⽅法，但当选择器匹配的元素过多，$(selector).事件名();对每个元素进⾏迭代绑定，会影响性能。
除了这种⽅式可以绑定事件以外，还有live()(已过期)、delegate()、on()⽅法绑定事件，接下来分析⼀下它们的区别，以及使⽤哪种⽅式最值得推荐。
由于live()⽅法已过期，只分析另外三种，欢迎拍砖、吐槽~~~⼆、⽤法与区别先准备⼀个example，⽤于不同⽅法绑定事件测试与对⽐。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>on()、delegate()、bind()事件绑定测试</title><link rel="stylesheet" type="text/css" href="bootstrap.css"></head><body><div style="width:800px;margin:50px auto;"><botton class="btn btn-success" id="btn">新增⼀个p元素</botton><p>1</p><p>2</p></div><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn').click(function(){$('div').append('<p>新增⼀个p元素</p>');});});</script></body></html>接下来对所有的p元素绑定click事件，如：bind()⽅法：为被选元素添加⼀个或多个事件处理程序，并规定事件发⽣时运⾏的函数。
$(document).ready原理
$(document).ready原理$(document).ready是jQuery中的一个重要方法，用于在文档就绪后执行指定的JavaScript代码。
它的工作原理是通过监听浏览器加载文档的完成事件，确保在DOM（文档对象模型）完全加载和解析后再执行代码，从而避免了在文档尚未完全加载时执行代码可能引发的错误和问题。
一、原理概述$(document).ready的工作原理基于JavaScript的事件监听器机制。
当浏览器接收到HTML文档已经加载完成的通知时，会触发一个名为"DOMContentLoaded"的事件。
jQuery通过将特定的代码包装在$(document).ready函数中，并将其作为事件监听器的回调函数注册到该事件上，实现了在文档就绪后执行代码的效果。
二、工作流程1.jQuery库在浏览器中加载并解析完成，准备执行。
2.当浏览器接收到文档已经加载完成的通知时，触发"DOMContentLoaded"事件。
3.jQuery通过事件监听器机制，将$(document).ready函数作为回调函数注册到该事件上。
4.文档加载完成后，jQuery执行$(document)对象上的ready函数，加载并执行指定的JavaScript代码。
三、优点与缺点优点：$(document).ready方法避免了在文档尚未完全加载时执行代码的问题，提高了代码的稳定性和可靠性。
它适用于需要在文档完全加载和解析后才能运行的场景，如滚动事件、动画效果等。
缺点：由于依赖事件监听器机制，$(document).ready方法可能存在一些性能问题。
尤其是在高负载或复杂网页中，频繁的事件监听和注册可能会导致不必要的资源消耗和性能瓶颈。
四、应用场景与注意事项$(document).ready方法适用于需要在文档完全加载和解析后才能运行的场景，如滚动事件、动画效果、交互效果等。
jq click方法
jq click方法当我们在使用jQuery时，click()方法是一个非常常用的方法，用于处理元素的点击事件。
以下是一些关于click()方法的常见用法和注意事项。
1. 基本用法使用click()方法非常简单，只需要选择要绑定点击事件的元素，然后调用click()方法即可。
例如：```javascript$("#myButton").click(function() {alert("按钮被点击了！");});```在这个例子中，当用户点击ID为"myButton"的按钮时，就会弹出一个警告框显示"按钮被点击了！"。
2. 事件绑定除了直接在元素上调用click()方法外，还可以在选择器选择多个元素后调用click()方法，一次性给多个元素绑定点击事件。
例如：```javascript$("button").click(function() {alert("按钮被点击了！");});这个例子中，会给页面上所有button元素绑定点击事件，当用户点击任何一个button时，都会弹出一个警告框。
3. 事件冒泡和默认行为当用户点击一个元素时，会触发该元素的click事件，同时会触发其父元素的click事件，这就是事件冒泡。
如果父元素的click事件有默认行为（比如链接跳转），那么可以通过event.stopPropagation()方法阻止事件冒泡，从而阻止默认行为。
例如：```javascript$("#myButton").click(function(event) {event.stopPropagation();alert("按钮被点击了！");});```这个例子中，当用户点击"myButton"按钮时，会先弹出警告框，然后页面不会跳转到链接的href属性指定的URL。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
触发、或将函数绑定到指定元素的load事件
load()
触发、或将函数绑定到指定元素的load事件
mousedown()
触发、或将函数绑定到指定元素的mouse down事件
mouseenter()
触发、或将函数绑定到指定元素的mouse enter事件
mouseleave()
触发、或将函数绑定到指定元素的mouse leave事件
触发、或将函数绑定到指定元素的submit事件
toggle()
绑定两个或多个事件处理器函数，当发生轮流的click事件时执行。
unload()
触发、或将函数绑定到指定元素的unload事件
event.type
描述事件的类型。
event.which
指示按了哪个键或按钮。
focus()
触发、或将函数绑定到指定元素的focus事件
keydown()
触发、或将函数绑定到指定元素的key down事件
keypress()
触发、或将函数绑定到指定元素的key press事件
keyup()
触发、或将函数绑定到指定元素的key up事件
mousemove()
触发、或将函数绑定到指定元素的mouse move事件
mouseout()
触发、或将函数绑定到指定元素的mouse out事件
mouseover()
触发、或将函数绑定到指定元素的mouse over事件
mouseup()
触发、或将函数绑定到指定元素的mouse up事件
one()
向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready()
文档就绪事件（当HTML文档就绪可用时）
resize()
触发、或将函数绑定到指定元素的resize事件
scroll()
触发、或将函数绑定到指定元素的scroll事件
select()
触发、或将函数绑定到指定元素的select事件
submit()
event.pageX
相对于文档左边缘的鼠标位置。
event.pageY
相对于文档上边缘的鼠标位置。
event.preventDefault()
阻止事件的默认动作。
event.result
相对于文档上边缘的鼠标位置。
event.target
触发事件的DOM元素。
event.timeStamp
该属性返回从1970年1月1日到事件发生时的毫秒数。
delegate()
向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die()
移除所有通过live()函数添加的事件处理程序。
error()
触发、或将函数绑定到指定元素的error事件
event.isDefaultPrevented()
返回event对象上是否调用了event.preventDefault()。
方法
描述
bind()
向匹配元素பைடு நூலகம்加一个或更多事件处理器
blur()
触发、或将函数绑定到指定元素的blur事件
change()
触发、或将函数绑定到指定元素的change事件
click()
触发、或将函数绑定到指定元素的click事件
dblclick()
触发、或将函数绑定到指定元素的double click事件