JQuery学习笔记(一)：basic knowledge

使用 CSS 选择器来访问和操作网页上的HTML 元素（DOM 对象）

jQuery 同时提供 companionUI（用户界面）和插件

 

1.引用 jQuery

Baidu CDN:<scriptsrc="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

又拍云 CDN:<scriptsrc="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">

新浪 CDN: <scriptsrc="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">

Microsoft CDN:<scriptsrc="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">

Google CDN:<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

本地:<scriptsrc="jquery-1.10.2.min.js"></script>

2.$() 函数

1）主要的 jQuery 函数是 $() 函数（jQuery 函数）。如果您向该函数传递DOM 对象，它会返回 jQuery 对象，带有向其添加的 jQuery 功能。

2）jQuery 允许您通过 CSS 选择器来选取元素。

function myFunction()

{

$("#h01").html("Hello jQuery");

}

$(document).ready(myFunction);

*jQuery 返回 jQuery 对象，与已传递的 DOM 对象不同。

*jQuery 对象拥有的属性和方法，与 DOM 对象的不同。

*您不能在 jQuery 对象上使用 HTML DOM 的属性和方法。

3）jQuery 允许链接（链式语法）即在同一对象上执行多个任务的便捷方法。

function myFunction()

{

$("#h01").attr("style","color:red").html("HellojQuery")

}

3.jQuery功能

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

 除此之外，Jquery还提供了大量的插件

4.JQuery 语法

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

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$("p .test").hide() - 隐藏所有class="test" 的段落

$("#test").hide() - 隐藏所有 id="test"的元素

*jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合

2)文档就绪事件:文档在完全加载（就绪）之后运行以下 jQuery 代码

$(document).ready(function(){

   // jQuery methods go here...

});

$(function(){

   // jQuery methods go here...

});

以上两种写法效果相同

5.jQuery 选择器

元素选择器

#id选择器

.class选择器

语法	描述
$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$(".test")	选取 class 为 test 的 元素
$("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> 元素
$(this).parents(".ex")	选取当前父元素中class为ex的元素

6.jQuery 事件

常见 DOM 事件：

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

在jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法

常见的jQuery事件方法：

方法	描述
$(document).ready()	在文档完全加载完后执行函数
click()	单击
dblclick()	双击
mouseenter()	当鼠标指针穿过元素时，会发生 mouseenter 事件
mouseleave()	当鼠标指针离开元素时，会发生 mouseleave 事件
mousedown()	当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
mouseup()	当在元素上松开鼠标按钮时，会发生 mouseup 事件
hover()	hover()方法用于模拟光标悬停事件 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave) $("#p1").hover(function(){   alert("You entered p1!");   },   function(){   alert("Bye! You now leave p1!"); });
focus()	当元素获得焦点时，发生 focus 事件 当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
blur()	当元素失去焦点时，发生 blur 事件。

方法	描述
$(document).ready()	在文档完全加载完后执行函数
click()	单击
dblclick()	双击
mouseenter()	当鼠标指针穿过元素时，会发生 mouseenter 事件
mouseleave()	当鼠标指针离开元素时，会发生 mouseleave 事件
mousedown()	当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
mouseup()	当在元素上松开鼠标按钮时，会发生 mouseup 事件
hover()	hover()方法用于模拟光标悬停事件 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave) $("#p1").hover(function(){   alert("You entered p1!");   },   function(){   alert("Bye! You now leave p1!"); });
focus()	当元素获得焦点时，发生 focus 事件 当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
blur()	当元素失去焦点时，发生 blur 事件。