jQuery学习之路一

jQuery Study

jQuery 语法

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。

基础语法： $(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）“查询"和"查找” HTML 元素
• jQuery 的 action() 执行对元素的操作

实例:

• (“p”).hide() - 隐藏所有 <p> 元素
• (“p.test”).hide() - 隐藏所有 class=“test” 的 <p> 元素
• (this).hide() - 隐藏当前元素
• ("#test").hide() - 隐藏所有 id=“test” 的元素

文档就绪事件

jQuery入口函数：jQuery 函数位于一个 document ready 函数中。

 $(document).ready(function(){
       // 开始写 jQuery 代码...
    });

简洁写法（与以上写法效果相同）:

$(function(){
   // 开始写 jQuery 代码...
});

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

jQuery 选择器

• 元素选择器: $("p")
• #id选择器: $("#test")
• .class 选择器: $(".test")

更多实例

语法	描述
$("*")	选取所有元素
$(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 事件

常见 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave	hover	blur	unload

• click() 方法是当按钮点击事件被触发时会调用一个函数。
• dblclick() 当双击元素时，会发生 dblclick 事件。
• mouseenter() 当鼠标指针穿过元素时，会发生 mouseenter 事件。
• mouseleave() 当鼠标指针离开元素时，会发生 mouseleave 事件。
• mousedown() 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
• mouseup() 当在元素上松开鼠标按钮时，会发生 mouseup 事件。
• hover() 用于模拟光标悬停事件。
• focus() 当元素获得焦点时，发生 focus 事件。
• blur() 当元素失去焦点时，发生 blur 事件。
• keydown() 在键盘上按下某键时发生,一直按着则会不断触发（opera浏览器除外）, 它返回的是键盘代码。
• keypress() 在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
• keyup() 用户松开某一个按键时触发, 与keydown相对, 返回键盘代码。
• resize() 对浏览器窗口调整大小进行计数。