jQuery基础【1】 | 易学教程

jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery 很容易学习。jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性：

　　•HTML 元素选取　　　　　 •HTML 元素操作

　　•CSS 操作　　　　　　　 •HTML 事件函数

　　•JavaScript 特效和动画　　•HTML DOM 遍历和修改

　　•AJAX　　　　　　　　　　•Utilities

1.向页面添加jQuery 库

1     <script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script>
2     <%--使用 Google 的 CDN--%>
3     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
4 /jquery/1.4.4/jquery.min.js"></script>
5     <%--使用 Microsoft 的 CDN--%>
6     <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
7 /jquery-1.4.4.min.js"></script>

2.jQuery 语法

　　jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。基础语法：$(selector).action()，其中美元符号$定义 jQuery选择符，(selector)“查询”和“查找” HTML 元素，action()执行对元素的操作。

1 //实例
2 $(this).hide() - 隐藏当前元素
3 $("p").hide() - 隐藏所有段落
4 $("p.test").hide() - 隐藏所有 class="test" 的段落
5 $("#test").hide() - 隐藏所有 id="test" 的元素

　　所有 jQuery 函数位于一个 document ready 函数中。这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

　　•试图隐藏一个不存在的元素　　•获得未完全加载的图像的大小

1 //文档就绪函数
2 $(document).ready(function(){
3 -- jQuery functions go here --
4  });

3.jQuery 选择器

　　jQuery 选择器允许您对元素组或单个元素进行操作。jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。选择器允许您对 HTML 元素组或单个元素进行操作。在 HTML DOM 术语中，选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

1 //jQuery 使用 CSS 选择器来选取 HTML 元素。
2 $("p") - 选取 <p> 元素。
3 $("p.intro") - 选取所有 class="intro" 的 <p> 元素。
4 $("p#demo") - 选取 id="demo" 的第一个 <p> 元素。

1 //jQuery 使用 XPath 表达式来选择带有给定属性的元素。
2 $("[href]") - 选取所有带有 href 属性的元素。
3 $("[href='#']") - 选取所有带有 href 值等于 "#" 的元素。
4 $("[href!='#']") - 选取所有带有 href 值不等于 "#" 的元素。
5 $("[href$='.jpg']") - 选取所有 href 值以 ".jpg" 结尾的元素。

1 //更多的选择器实例
2 $(this) - 当前 HTML 元素
3 $("p") - 所有 <p> 元素
4 $("p.intro") - 所有 class="intro" 的 <p> 元素
5 $(".intro") - 所有 class="intro" 的元素
6 $("#intro") - id="intro" 的第一个元素
7 $("ul li:first") - 每个 <ul> 的第一个 <li> 元素
8 $("[href$='.jpg']") - 所有带有以 ".jpg" 结尾的属性值的 href 属性
9 $("div#intro .head") - id="intro" 的 <div> 元素中的所有 class="head" 的元素

4.jQuery 事件

　　jQuery 事件处理方法是 jQuery 中的核心函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

1 //实例：当按钮的点击事件被触发时会调用一个隐藏所有 <p> 元素的方法
2 <script type="text/javascript">
3 $(document).ready(function(){
4   $("button").click(function(){
5     $("p").hide();
6   });
7 });
8 </script>

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

5.jQuery HTML 操作

 1 //jQuery HTML 操作
 2 $(selector).html(content) - 改变被选元素的（内部）HTML
 3 $("p").html("jQuery");
 4 $(selector).append(content) - 向被选元素的（内部）HTML 追加内容
 5 $("p").append("jQuery")
 6 $(selector).prepend(content) - 向被选元素的（内部）HTML “预置”（Prepend）内容
 7 $("p").prepend("jQuery")
 8 $(selector).after(content) - 在被选元素之后添加 HTML
 9 $("p").after("jQuery")
10 $(selector).before(content) - 在被选元素之前添加 HTML
11 $("p").before("jQuery")

6.jQuery CSS 函数

 1 //jQuery CSS 函数
 2 $(selector).css(name,value) - 为匹配元素设置样式属性的值
 3 $("p").css("background-color","red");
 4 $(selector).css({properties}) - 为匹配元素设置多个样式属性
 5 $("p").css({"background-color":"red","font-size":"200%"});
 6 $(selector).css(name) - 获得第一个匹配元素的样式属性值
 7 $(this).css("background-color");
 8 $(selector).height(value) - 设置匹配元素的高度
 9 $("#id100").height("200px");
10 $(selector).width(value) - 设置匹配元素的宽度
11 $("#id200").width("300px");

7.jQuery AJAX 函数

　　jQuery 提供了用于 AJAX 开发的丰富函数（方法）库。通过 jQuery AJAX，使用 HTTP Get 和 HTTP Post，可以从远程服务器请求 TXT、HTML、XML 或 JSON，可以直接把远程数据载入网页的被选 HTML 元素中。写的更少，做的更多。

 1 //jQuery AJAX 函数
 2 $(selector).load(url,data,callback) - 把远程数据加载到被选的元素中
 3 $.ajax(options) - 把远程数据加载到 XMLHttpRequest 对象中
 4 $.get(url,data,callback,type) - 使用 HTTP GET 来加载远程数据
 5 $.post(url,data,callback,type) - 使用 HTTP POST 来加载远程数据
 6 $.getJSON(url,data,callback) - 使用 HTTP GET 来加载远程 JSON 数据
 7 $.getScript(url,callback) - 加载并执行远程的 JavaScript 文件
 8 //(url) 被加载的数据的 URL（地址）
 9 //(data) 发送到服务器的数据的键/值对象
10 //(callback) 当数据被加载时，所执行的函数
11 //(options) 完整 AJAX 请求的所有键/值对选项
12 //(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)

8.jQuery 效果

 1 //jQuery 隐藏和显示
 2 $("#hide").click(function () {
 3     $("p").hide();
 4 });
 5 $("#show").click(function () {
 6     $("p").show();
 7 });
 8 
 9 //jQuery 切换
10 $("button").click(function () {
11     $("p").toggle();
12 });
13 
14 //jQuery 滑动
15 $(".flip").click(function () {
16     $(".panel").slideDown();
17 });
18 $(".flip").click(function () {
19     $(".panel").slideUp()
20 })
21 $(".flip").click(function () {
22     $(".panel").slideToggle();
23 });
24 
25 //jQuery 淡化
26 $(selector).fadeIn(speed, callback) - 淡入被选元素
27 $(selector).fadeOut(speed, callback) - 淡出被选元素
28 $("button").click(function () {
29     $("div").fadeOut(4000);
30 });
31 $(selector).fadeTo(speed, opacity, callback) - 把被选元素淡出为给定的不透明度
32 $("button").click(function () {
33     $("div").fadeTo("slow", 0.25);
34 });
35 //speed 参数可以设置这些值："slow", "fast", "normal" 或 毫秒。
36 //callback 参数是在该函数完成之后被执行的函数名称。
37 
38 //jQuery 自定义动画
39 $(selector).animate({params},[duration],[easing],[callback]) - 对被选元素执行自定义动画
40 animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
41 <script type="text/javascript">
42 $(document).ready(function(){
43 $("#start").click(function(){
44 $("#box").animate({height:300},"slow");
45 $("#box").animate({width:300},"slow");
46 $("#box").animate({height:100},"slow");
47 $("#box").animate({width:100},"slow");
48 });
49 });
50 </script> 
51 //HTML 元素默认是静态定位，且无法移动。
52 //如需使元素可以移动，请把 CSS 的 position 设置为 relative 或 absolute。

9.jQuery 名称冲突

1 //实例：重命名 jQuery 库
2 <script type="text/javascript">
3 var jq=jQuery.noConflict();
4 jq(document).ready(function(){
5   jq("button").click(function(){
6     jq("p").hide();
7   });
8 });
9 </script>

10.由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：

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