JQuery（学习笔记一）初识JQuery

一、JQuery语法

（1）基础语法： $(selector).function()

• $ 定义 jQuery
• selector查询元素
• function() 执行对元素的操作

实例:

• $(this).function() -操作当前元素

• $("p").function() - 操作所有 <p> 元素

• $("p.test").function() - 操作所有 class="test" 的 <p> 元素

• $("#test").function() - 操作所有 id="test" 的元素

（2）文档就绪

$(document).ready(function(){ // your Jq code }); //也可以更如下 $(function(){ // your Jq code }); //JavaScript 入口函数 window.onload = function(){ //your js code }

ready()防止文档在完全加载（就绪）之前运行 jQuery 代码，必须在 DOM 加载完成后对 DOM 进行操作。

jQuery 入口函数与 JavaScript 入口函数的区别：

•  jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
•  JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

二、JQuery 选择器

（1）元素选择器

在页面中选取所有 <p> 元素:

$("p")

（2）#id 选择器

在页面中选取id为test元素:

$("#test")

（3）.class 选择器

在页面中选取class为test元素:

$(".test")

（4）更多选取

语法	描述
$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$("p.intro")	选取 class 为 intro 的 <p> 元素
$("p:first")	选取第一个 <p> 元素
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")	选取带有 href 属性的元素
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")	选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even")	选取偶数位置的 <tr> 元素
$("tr:odd")	选取奇数位置的 <tr> 元素

三、JQuery常用事件

事件	事件类型	使用
click	鼠标事件	$(selector).click(function)
dbclick	鼠标事件	$(selector).dblclick(function)
mouseenter	鼠标事件	$(selector).mouseenter(function)
mouseleave	鼠标事件	$(selector).mouseleave(function)
keypress	键盘事件	$(selector).keypress(function)
keydown	键盘事件	$(selector).keydown(function)
keyup	键盘事件	$(selector).keyup(function)
hover	键盘事件	$(selector).hover(inFunction,outFunction)
submit	表单事件	$(selector).submit(function)
change	表单事件	$(selector).change(function)
focus	表单事件	$(selector).focus(function)
blur	表单事件	$(selector).blur(function)
load	文档/窗口事件	$(selector).load(function)
resize	文档/窗口事件	$(selector).resize(function)
scroll	文档/窗口事件	$(selector).scroll(function)
unload	文档/窗口事件	$(selector).unload(function)