文档就绪事件
$(document).ready(function(){ // 开始写 jQuery 代码... });
元素选择器
$("p")
用户点击按钮后，所有 <p> 元素都隐藏：
$(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>this is a title</h2>
<p>this is a prams</p>
<p>this is a prams</p>
<button>click me</button>
<script src="../jquery-3.31.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
$("p").hide();
});
$('button').dblclick(function(){
$("p").show()
});
})
</script>
</body>
</html>
#id 选择器
$("#test")
实例
当用户点击按钮后，有 id="test" 属性的元素将被隐藏：
$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); </script> </head> <body> <h2>这是一个标题</h2> <p>这是一个段落</p> <p id="test">这是另外一个段落</p> <button>点我</button> </body> </html>
.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下：
$(".test")
$(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });
$("*") 选取所有元素
$(this) 选取当前HTML 元素
$(document).ready(function(){ $("button").click(function(){ $(this).hide(); //button隐藏 }); });
$("p.intro") 选取 class 为 intro 的 <p> 元素
$("p:first") 选取第一个 <p> 元素
$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素
$("ul:first") 选取第一个 <ul> 元素
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素
jQuery 事件
什么是事件？
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
在元素上移动鼠标
选取单选按钮
点击元素
在事件中经常使用术语"触发"（或"激发"）例如： "当按下按键时触发 keypress 事件"。
鼠标事件
当单击元素时，发生 click 事件。
click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。
$(document).ready(function(){ $("p").click(function(){ alert("parms was click") }) })
dblclick 当双击元素时，触发 dblclick 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数。
提示：dblclick 事件也会产生 click 事件。如果这两个事件都被应用于同一个元素，则会产生问题。
$(document).ready(function(){ $("p").dblclick(function(){ alert("parms was click") }) })
$(document).ready(function(){ $("p").dblclick(function(){ $(this).fadeOut(); }); });
mouseenter()
当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。
当鼠标指针进入 <p> 元素时，设置背景色为黄色：
该事件通常与 mouseleave事件一起使用。
$(document).ready(function(){ $("#p2").mouseenter(function(){ $("#p2").css("background-color","yellow"); }); $("#p2").mouseleave(function(){ $("p").css("background-color","white"); }); });
键盘事件
keypress()
i=0 $(document).ready(function(){ $("input").keypress(function(){ $("span").text(i+=1); }); });
与 keypress 事件相关的事件顺序：
- keydown - 键按下的过程
- keypress - 键被按下
- keyup - 键被松开
keypress() 方法触发 keypress 事件，或规定当发生 keypress 事件时运行的函数。
keypress 事件与 keydown 事件类似。当按钮被按下时发生该事件。
然而，keypress 事件不会触发所有的键（比如 ALT、CTRL、SHIFT、ESC）。请使用 keydown() 方法来检查这些键。
keydown 当键盘键被按下时发生 keydown 事件。
$("input").keydown(function(){
$("input").css("background","yellow");
});
$("input").keyup(function(){
$("input").css("background","pink");
});
hover
hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
方法触发 mouseenter和 mouseleave 事件。
$("p").hover(function(){
$("p").css("background","green");
},function(){
$("p").css("background","yellow");
});
表单事件
当提交表单时，会发生 submit 事件。
该事件只适用于 <form> 元素。
submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。
<form action=""> First name: <input type="text" name="firstname" value="jack"/><br> Last name: <input type="text" name="lastname" value="boob"/><br> <input type="submit" value="提交"/> </form> <script> $(document).ready(function(){ $("form").submit(function(){ alert("提交"); }); }); </script>
change
当元素的值改变时发生 change 事件（仅适用于表单字段）。
change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。
注意：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。
<input type="text" class="field"/> <p> 汽车匹配： <select name="cars" id="cars" class="field"> <option value="volvo">volvo</option> <option value="byd">byd</option> <option value="w">w</option> </select> </p>、 $(document).ready(function(){ $(".field").change(function(){ $(this).css("background","#D6D6FF"); }); });
文档窗口事件
load
该事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）以及 window 对象。
根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。
$(document).ready(function(){ $("img").load(function(){ alert("图片已载入"); }); });
scroll() 方法
当用户滚动指定的元素时，会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。
<p>尝试滚动 div 中的滚动条</p> <div class="school"style="border:1px solid black;200px;height:100px;overflow:scroll;"> dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd </div> <p>滚动了 <span class="span1">0</span>次 </p> x=0; $(document).ready(function(){ $(".school").scroll(function(){ $(".span1").text(x+=1); }); });
jquery 效果
显示和隐藏
<p>点我隐藏1</p> <p>点我隐藏2</p> <p>点我隐藏3</p> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); });
jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
<button>显示/隐藏</button> <p class="p3">sdf1</p> <p class="p3">sdf2</p> <p class="p3">sdf3</p> $(document).ready(function(){ $("button").click(function(){ $(".p3").toggle(1000); }); });