[jQuery] 初识jQuery

(1) 引入jQuery函数库
在使用jQuery库之前要在网页里先引入Jquery库
<script type="text/javascript" src="jquery.js"></script>
 
如果网页里有中文字符，要设置浏览器的编码，否则会出现乱码
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

(2) 写法详解

jQuery 使用 $ 符号作为 jQuery 的简写

<script tyep="text/javascript">
 $(document).ready(function(){
 $("button").click(function(){
 $("p").hide();
 });
 });
</script>

这个复杂的写法是这样写出来的

先获取文档根元素，准备好。注意这里的document是浏览器级别的，代指本页面，因此不用加引号。
$(document).ready(①);

获取被单击的button元素。
函数① function(){
$("button").click(②);
}

获取要被渲染效果的元素，并执行"隐藏"的操作
函数② function(){
$("p").hide();
}

也可以这样认为：其实整个写法分为两步

1）先获取要操作的元素并为其指定动作
$(document).ready();
$("button").click();
$("p").hide();

2）把后两个分别放入function()函数中，合起来作为ready()方法的参数。

注意：每一个操作之后都要加上分号;

(3)jQuery的语法可以操作四种元素

基本语法：$(selector).action();

1）当前元素
$("button").click(function(){
$(this).hide();
});
 
2）通过标签获得的元素
$("button").click(function(){
$("p").hide();
});

3）通过id属性获得的元素
$("button").click(function(){
$("#test").hide();
});

<p id="test">This is a paragraph.</p>

4）通过class属性获得的元素
$("button").click(function(){
$(".test").hide();
});

<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>

（4）jQuery 选择器

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

其中：
元素选择器允许您通过 ①标签名 ②属性名 ③内容 对HTML元素进行选择。
属性选择器允许您通过 ①标签名 ②属性名 ③内容 对HTML元素进行选择。

1）jQuery 元素选择器

$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取 id="demo" 的第一个 <p> 元素。

2）jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

3）jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

$("p").css("background-color","red");

4）更多

$(this) 当前 HTML 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

完整的选择器类型参见参考手册

注意区分选择和操作：
$(selector).action();
$("选择").操作();

（5）jQuery事件

jQuery的优势就是事件处理！

当按钮的点击事件被触发时会调用一个函数：
$("button").click(function() {
$("p").hide(); //该方法隐藏所有 <p> 元素
});

示例：

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

（6）原则
把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库