**JQUERY**系列一：jQuery简介

>作用

---

>>jQuery是JS的一个库，简化了JS的编程。

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

>>调用方法

<script type = "text/javascript" src= "jquery.js" ></script>

<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js></script>

<script src = "http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js">

>语法

---

>>基本形式

$(selector).action()

$定义了jQuery变量或函数

selector表示选择符，指向某个对象

action执行对元素的操作

>>四种不同的选择器

$(this).hide()

$(#test").hede()

$("p").hide()

$(".test").hide()

>>文档就绪函数

$(document).ready(function(){

函数实体

})

>选择器

---

>>选择器允许对DOM元素组或单个DOM节点进行操作

>>选择器可以是标签名、属性名、内容、id、类名等

>>选择器分类：

jQuery元素选择器：

$("p")选取<p>的元素

$"p.intro"选取所有class = intro的元素

$("p#demo")选取id = demo的元素

jQuery属性选择器：

$("[href]")选取所有带有href属性的元素

$("[href = '#']")选取特定的属性选择器

jQuery css选择器：

$(this).hide()

$(#test").hede()

$("p").hide()

$(".test").hide()

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

>jQuery处理事件

---

>>举例

$(docment).ready(

$("button").click(

function(){

$("p").hide();

}

));

>>jQuery处理事件遵循的原则

把所有的jQuery代码至于事件处理函数中

把所有时间处理函数置于文档就绪事件处理器中

把jQuery代码置于单独的.js 文件中

如果存在名称冲突，则重命名jQuery库

$(this).hide()

$(#test").hede()

$("p").hide()

$(".test").hide()

>>jquery中常见的函数

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

$(this).hide()

$(#test").hede()

$("p").hide()

$(".test").hide()