一、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)