[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 库
