本文共 11192 字，大约阅读时间需要 37 分钟。

內容

jQuery 教程 一 什么是 jQuery 二 jQuery 语法 三 jQuery 选择器 四 jQuery 事件 五 jQuery 效果- 隐藏和显示 六 jQuery - 链(Chaining) 七 jQuery - 获取内容和属性 八 jQuery - 设置内容和属性 九 jQuery - 添加元素 十 jQuery - 删除元素 十一 jQuery - 获取并设置 CSS 类 十二 jQuery 尺寸 十三 jQuery 遍历 十四 jQuery 遍历- 过滤 十五 jQuery - AJAX 简介

**jQuery **

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。 在开始学习 jQuery 之前，您应该对以下知识有基本的了解： • HTML • CSS • JavaScript

一 什么是 jQuery ？

---

jQuery 是一个 JavaScript 函数库。

jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。 jQuery 库包含以下功能： • HTML 元素选取 • HTML 元素操作 • CSS 操作 • HTML 事件函数 • JavaScript 特效和动画 • HTML DOM 遍历和修改 • AJAX • Utilities 提示： 除此之外，jQuery 还提供了大量的插件。

很多用戶的瀏覽器已緩存了JQUERY

可以在浏览器的 Console 窗口中使用 $.fn.jquery 命令查看当前 jQuery 使用的版本：

二 jQuery 语法

---

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action() • 美元符号定义 jQuery • 选择符（selector）“查询"和"查找” HTML 元素 • jQuery 的 action() 执行对元素的操作

1.文档就绪事件

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){
    // 开始写 jQuery 代码... });等價于: $(function(){
    // 开始写 jQuery 代码...    });$(document).ready(function() {
   $(“p”).click(function() {
       $(this).hide(); });});

三 jQuery 选择器

---

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

实例: • $(this).hide() - 隐藏当前元素 • $(“p”).hide() - 隐藏所有

元素

• $(“p.test”).hide() - 隐藏所有 class=“test” 的

元素

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

四jQuery 事件

---

hover()

hover()方法用于模拟光标悬停事件。 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。 实例

$("#p1").hover( function(){
    alert("你进入了 p1!"); }, function(){
    alert("拜拜! 现在你离开了 p1!"); });

focus()

当元素获得焦点时，发生 focus 事件。 当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。 focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数： 实例

$("input").focus(function(){
    $(this).css("background-color","#cccccc"); });

五 jQuery 效果- 隐藏和显示

---

jQuery hide() 和 show()和 toggle()

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素： 1.基本用法 实例

$("#hide").click(function(){
    $("p").hide(); });$("#show").click(function(){
    $("p").show(); });

2.進階用法

语法: $(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。 下面的例子演示了带有 speed 参数的 hide() 方法： 实例

$("button").click(function(){
    $("p").hide(1000); });

下面的例子演示了带有 speed 参数的 hide() 方法，并使用回调函数：

实例

$(document).ready(function(){
    $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
    alert("Hide() 方法已完成!"); }); }); });

第二个参数是一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 “swing”，其他可以使用相关的插件）。

---

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素： 实例

$("button").click(function(){
    $("p").toggle(); });

语法:

$(selector).toggle(speed,callback); 可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

六 jQuery - 链(Chaining)

---

通过 jQuery，可以把动作/方法链接在一起。

Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。 下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。“p1” 元素首先会变为红色，然后向上滑动，再然后向下滑动：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

七 jQuery - 获取内容和属性

---

jQuery DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。 jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。 获得内容 - text()、html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法： • text() - 设置或返回所选元素的文本内容 • html() - 设置或返回所选元素的内容（包括 HTML 标记） • val() - 设置或返回表单字段的值 下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容： 获取属性 - attr() jQuery attr() 方法用于获取属性值。 下面的例子演示如何获得链接中 href 属性的值： 实例

$("button").click(function(){
    alert($("#runoob").attr("href")); });

八jQuery - 设置内容和属性

---

设置内容 - text()、html() 以及 val()

我们将使用前一章中的三个相同的方法来设置内容： • text() - 设置或返回所选元素的文本内容 • html() - 设置或返回所选元素的内容（包括 HTML 标记） • val() - 设置或返回表单字段的值

$("#btn1").click(function(){
    $("#test1").text("Hello world!"); }); $("#btn2").click(function(){
    $("#test2").html("Hello world!"); }); $("#btn3").click(function(){
    $("#test3").val("RUNOOB"); });

text()、html() 以及 val() 的回调函数

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。 下面的例子演示带有回调函数的 text() 和 html()： 实例

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
    return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; }); }); $("#btn2").click(function(){
    $("#test2").html(function(i,origText){
    return "旧 html: " + origText + " 新 html: Hello world! (index: " + i + ")"; }); });

设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。 下面的例子演示如何改变（设置）链接中 href 属性的值：

实例$("button").click(function(){
    $("#runoob").attr("href","http://www.runoob.com/jquery"); });attr() 方法也允许您同时设置多个属性。下面的例子演示如何同时设置 href 和 title 属性：实例$("button").click(function(){
    $("#runoob").attr({
    "href" : "http://www.runoob.com/jquery", "title" : "jQuery 教程" }); });

attr() 的回调函数

jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。 下面的例子演示带有回调函数的 attr() 方法： 实例

$("button").click(function(){
    $("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"; }); });

九 jQuery - 添加元素

---

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法： • append() - 在被选元素的结尾插入内容 //$(“p”).append(“追加文本”); • prepend() - 在被选元素的开头插入内容 • after() - 在被选元素之后插入内容 • before() - 在被选元素之前插入内容 通过 append() 和 prepend() 方法批量添加若干新元素

function appendText(){
   var txt1="
文本-1。
"; // 使用 HTML 标签创建文本var txt2=$("
").text("文本-2。"); // 使用 jQuery 创建文本 var txt3=document.createElement("p"); txt3.innerHTML="文本-3。"; // 使用 DOM 创建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素 }

十 jQuery - 删除元素

---

删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法： remove() - 删除被选元素（及其子元素） //$("#div1").remove(); • empty() - 从被选元素中删除子元素 过滤被删除的元素 jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。 该参数可以是任何 jQuery 选择器的语法。 下面的例子删除 class=“italic” 的所有

元素：

实例

$("p").remove(".italic");

十一 jQuery - 获取并设置 CSS 类

---

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些： • addClass() - 向被选元素添加一个或多个类

$("button").click(function(){
    $("h1,h2,p").addClass("blue");  $("div").addClass("important"); });$("button").click(function(){
    $("body div:first").addClass("important blue"); });

• removeClass() - 从被选元素删除一个或多个类

$("button").click(function(){
    $("h1,h2,p").removeClass("blue"); });

• toggleClass() - 对被选元素进行添加/删除类的切换操作

$("button").click(function(){
    $("h1,h2,p").toggleClass("blue"); });

• css() - 设置或返回样式属性

css() 方法设置或返回被选元素的一个或多个样式属性。

$("p").css({
   "background-color":"yellow","font-size":"200%"});

十二 jQuery 尺寸

---

jQuery 提供多个处理尺寸的重要方法：

• width() • height() • innerWidth() • innerHeight() • outerWidth() • outerHeight()

$("button").click(function(){
    var txt=""; txt+="div 的宽度是: " + $("#div1").width() + "
"; txt+="div 的高度是: " + $("#div1").height(); $("#div1").html(txt); });

十三 jQuery 遍历

---

jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

向上遍历 DOM 树

这些 jQuery 方法很有用，它们用于向上遍历 DOM 树： • parent() // $("span").parent();•parents()//$(“span”).parents(); $("span").parents("ul");//返回所有<span>元素的所有祖先，并且它是<ul>元素：•parentsUntil()//$(“span”).parentsUntil(“div”);//返回介于span , div之間的元素 向下遍歷DOM樹 下面是两个用于向下遍历 DOM 树的 jQuery 方法： • children()//$(“div”).children(); $(“div”).children(“p.1”);//返回类名为 “1” 的所有

元素，并且它们是

在 DOM 树中水平遍历

有许多有用的方法让我们在 DOM 树进行水平遍历： • siblings() //$(“h2”).siblings(); • next() • nextAll() • nextUntil() • prev() • prevAll() • prevUntil()

十四 jQuery 遍历- 过滤

---

1.三个最基本的过滤方法是：

first(), //$(“div p”).first(); last() eq()方法返回被选元素中带有指定索引号的元素。 索引号从 0 开始 它们允许您基于其在一组元素中的位置来选择一个特定的元素。

2.其它過濾

1) 同时满足type为text的而且，其值为a，请问jquery方式如何写？

$("input[type='text'][value='a']") 就可以了 jquery里有多条件的选择器[selector1][selector2][selectorN]

2) 匹配字符串的開始和結束

[pro=‘val’] 属性为val [pro^=‘val’] 属性以val 开始 [pro$=‘val’] 属性以val 结束 [pro!=‘val’] 属性不包含 val

3) not

$(function () {
               $("#div :radio").click(function () {
             //添加div中所有radiobutton点击事件                          $("#div :checked").not(this).attr("checked", "");                  //除自己以外的取消选中               });      })

4)使用jquery获取radio或radiobuttonlist的值

最重要的是掌握jquery选择器的使用，在一个表单中我们通常是要获取被选中的那个radio项的值，所以要加checked来筛选，比如有以下的一些radio项：

jquery获取radio的值
 jquery获取checkbox的值
 jquery获取select的值

要想获取某个radio的值有以下的几种方法,直接给出代码：

1.$('input[name="testradio"]:checked').val(); 2. $('input:radio:checked').val(); 3. $('input[@name="testradio"][checked]'); 4. $('input[name="testradio"]').filter(':checked');

如果我们要遍历name为testradio的所有radio呢，代码如下

$('input[name="testradio"]').each(function(){
    alert(this.value); });

如果要取具体某个radio的值，比如第二个radio的值，这样写

$(‘input[name=“testradio”]:eq(1)’).val()

十五 jQuery - AJAX 简介

---

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新.

jQuery - AJAX load() 方法

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。 下面的例子把 “demo_test.txt” 文件中 id=“p1” 的元素的内容，加载到指定的

$("#div1").load("demo_test.txt #p1");

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

• responseTxt - 包含调用成功时的结果内容 • statusTXT - 包含调用的状态 • xhr - 包含 XMLHttpRequest 对象

$("button").click(function(){
    $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success") alert("外部内容加载成功!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); }); });

jQuery - AJAX get() 和 post() 方法

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。 $.get() 方法通过 HTTP GET 请求从服务器上请求数据。 $.get(URL,callback); 必需的 URL 参数规定您希望请求的 URL。 可选的 callback 参数是请求成功后所执行的函数名。

//get test        function getTest() {
                        $.ajax({
                   url: "/api/ContextTable",                type: "GET",                             success: function (data) {
    alert(data); }            });        }

或者:

$("button").click(function(){
    $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status); }); });

$.post() 方法通过 HTTP POST 请求向服务器提交数据。

语法: $.post(URL,data,callback); 必需的 URL 参数规定您希望请求的 URL。 可选的 data 参数规定连同请求发送的数据。 可选的 callback 参数是请求成功后所执行的函数名。 下面的例子使用 $.post() 连同请求一起发送数据：

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php", {
    name:"菜鸟教程", url:"http://www.runoob.com" }, function(data,status){
    alert("数据: \n" + data + "\n状态: " + status); });  });

或者:

//add:        function add() {
               var now = new Date();            //从本地缓存中读取token值            var token = window.localStorage.getItem("token");            $.ajax({
                   url: "/api/ContextTable/",                type: "POST",                headers: {
   "auth":token},                data: {
    Title: "This is a test title", AddTime: now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate(), Context: "This is a test context." },                success: function (data) {
    alert(data); },                //当安全校验未通过的时候进入这                error: function (xhr) {
                       alert("Save data error.");                    if (xhr.status == 401) {
                           var jsonData = JSON.parse(xhr.responseText);                        console.log("Error in auth：" + jsonData.Message);                    }                }                 });        }

(完)

转载地址：http://ipmdi.baihongyu.com/