6.21 jquery 事件
Posted sun1987
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了6.21 jquery 事件相关的知识，希望对你有一定的参考价值。
1 attr() 方法设置或返回被选元素的属性值。
$("button").click(function(){
$("img").attr("width","180");
});
2 append() 方法在被选元素的结尾（仍然在内部）插入指定内容。
$("button").click(function(){
$("p").append(" <b>Hello world!</b>");
});
3 prepend() 方法在被选元素的开头（仍位于内部）插入指定内容。
$("button").click(function(){
$("p").prepend("<b>Hello world!</b>");
});
4 after() 方法在被选元素后插入指定的内容(外部)。
$("button").click(function(){
$("p").after("<p>Hello world!</p>");
});
5 before() 方法在被选元素前插入指定的内容(外部)。
$("button").click(function(){
$("p").before("<p>Hello world!</p>");
});
6 addClass() 方法向被选元素添加一个或多个类。
$("button").click(function(){
$("p:first").addClass("class样式名");
});
7 removeClass() 方法从被选元素移除一个或多个类
$("button").click(function(){
$("p:first").removeClass("class样式名");
});
8 hasClass() 方法检查被选元素是否包含指定的 class
$("button").click(function(){
alert($("p:first").hasClass("class样式名"));
9 toggleClass() 从匹配的元素中添加或删除一个类。
$("button").click(function(){
$("p").toggleClass("class样式名");
});
=====================事件==================
1 bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
$("button").bind("click",function(){
$("p").append(" <b>Hello world!</b>");
});
2 blur()当元素失去焦点时发生 blur 事件。
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});
3 change()当元素的值发生改变时，会发生 change 事件
$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});
4 delegate()向匹配元素的当前或未来的子元素附加一个或多个事件处理器
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
5 pageX() 属性是鼠标指针的位置，相对于文档的左边缘。
6 result 属性包含由被指定事件触发的事件处理器返回的最后一个值，除非这个值未定义。
7 keydown() 触发、或将函数绑定到指定元素的 key down 事件
keypress() 触发、或将函数绑定到指定元素的 key press 事件
keyup() 触发、或将函数绑定到指定元素的 key up 事件
完整的 key press 过程分为两个部分，按键被按下，然后按键被松开并复位。
当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
当按钮被按下时，发生 keyup 事件。
8 mousedown() 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。
$("button").mousedown(function(){
$("p").css("background-color","#FFFFCC");
});
9 mouseenter()当鼠标指针穿过元素时，会发生 mouseenter 事件。
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
10 mouseleave()当鼠标指针离开元素时，会发生 mouseleave 事件。
$("p").mouseleave(function(){
$("p").css("background-color","#E9E9E4");
});
11 mousemove()当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
mouseout() 当鼠标指针从元素上移开时，发生 mouseout 事件
mouseover() 当鼠标指针位于元素上方时，会发生 mouseover 事件。
mouseup() 当在元素上放松鼠标按钮时，会发生 mouseup 事件。
12 resize() 当调整浏览器窗口的大小时，发生 resize 事件。
x =0
$(window).resize(function() {
$("span").text(x+=1);
});
13 scroll() 当用户滚动指定的元素时，会发生 scroll 事件。
14 select()当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
15 submit()当提交表单时，会发生 submit 事件。
16 toggle() toggle() 方法切换元素的可见状态。
17 trigger() trigger() 方法触发被选元素的指定事件类型。
$("input").select(function(){
$("input").after("文本被选中！");
});
$("button").click(function(){
$("input").trigger("select");
});
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="../public/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> Enter your name: <input type="text" /> <p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p> <p>在某个域被使用或改变时，它会改变颜色。</p> Enter your name: <input class="field" type="text" /> <div style="background-color:red"> <p>这是一个段落。</p> <button>请点击这里</button> </div> <p>鼠标指针位于： <span></span></p> Enter your name: <input type="text" /> <p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p> Enter your name: <input type="text" /> <p>Keypresses:<span>0</span></p> Enter your name: <input type="text" /> <p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p> <p style="background-color:#E9E9E4">请把鼠标指针移动到这个段落上。</p> </body> </html> <script type="text/javascript"> /*$("input").focus(function(){ $("input").css("background-color","#FFFFCC"); }); $("input").blur(function(){ $("input").css("background-color","#D6D6FF"); });*/ $(".field").change(function(){ $(this).css("background-color","#FFFFCC"); }); $("div").delegate("button","click",function(){ $("p").slideToggle(); }); $(document).mousemove(function(e){ $("span").text("X: " + e.pageX + ", Y: " + e.pageY); }); $("input").keydown(function(){ $("input").css("background-color","#FFFFCC"); }); $("input").keyup(function(){ $("input").css("background-color","#D6D6FF"); }); i=0; $("input").keypress(function(){ $("span").text(i+=1); }); $("input").keydown(function(){ $("input").css("background-color","#FFFFCC"); }); $("input").keyup(function(){ $("input").css("background-color","#D6D6FF"); }); $("p").mouseenter(function(){ $("p").css("background-color","yellow"); }); $("p").mouseleave(function(){ $("p").css("background-color","#E9E9E4"); }); </script>
以上是关于6.21 jquery 事件的主要内容，如果未能解决你的问题，请参考以下文章