jQuery教程——jQuery的快速入门

女爷i 2021-09-22 22:26 738阅读 0赞

### 目录 ###

*  什么是 jQuery ？
 *  基础jQuery 语法
 *  jQuery 选择器
 *  jQuery DOM 操作
 *  jQuery 操作 CSS
 *  jQuery 遍历
 *  jQuery - AJAX 简介
 *   *   *  jQuery load () 方法
 *  jQuery - AJAX get () 和 post () 方法
 *   *   *  jQuery $.get () 方法
         *  jQuery $.post () 方法
 *  jQuery 杂项方法

# 什么是 jQuery ？ #

> jQuery 是一个 JavaScript 函数库。  
> jQuery 是一个轻量级的 “写的少，做的多” 的 JavaScript 库。  
> jQuery 库包含以下功能：

*  HTML 元素选取
 *  HTML 元素操作
 *  CSS 操作
 *  HTML 事件函数
 *  JavaScript 特效和动画
 *  HTML DOM 遍历和修改
 *  AJAX
 *  Utilities  
    提示： 除此之外，Jquery 还提供了大量的插件。

# 基础jQuery 语法 #

> jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。  
> 通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行 “操作”（actions）。  
> 基础语法： $(selector).action()

*  美元符号定义 jQuery
 *  选择符（selector）“查询” 和 “查找” HTML 元素
 *  jQuery 的 action () 执行对元素的操作

**所有 jQuery 函数位于一个 document ready 函数中：**

$(document).ready(function(){ 
         
           // 开始写 jQuery 代码...
         
        });

*这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。  
如果在文档没有完全加载之前就运行函数，操作可能失败。*  
**提示：简洁写法（与以上写法效果相同）:**

$(function(){ //这是jQuery的入口函数
     
       // 开始写 jQuery 代码...
     
    });

# jQuery 选择器 #

*  jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
 *  jQuery 选择器基于元素的 id、类、类型、属性、属性值等 “查找”（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
 *  jQuery 中所有选择器都以美元符号开头：$()。

1.  **\#id 选择器**  
    当用户点击按钮后，有 id=“test” 属性的元素将被隐藏：  
    **实例**

$(document).ready(function(){ 
      $("button").click(function(){ 
        $("#test").hide();
      });
    });

1.  **.class 选择器**  
    用户点击按钮后所有带有 class=“test” 属性的元素都隐藏：  
    **实例**

$(document).ready(function(){ 
      $("button").click(function(){ 
        $(".test").hide();
      });
    });

# jQuery DOM 操作 #

> jQuery 中非常重要的部分，就是操作 DOM 的能力。

*三个简单实用的用于 DOM 操作的 jQuery 方法：*

*  text () - 设置或返回所选元素的文本内容
 *  html () - 设置或返回所选元素的内容（包括 HTML 标记）
 *  val () - 设置或返回表单字段的值

**实例：**

//获得内容 - text ()、html () 以及 val ()
    $("#btn1").click(function(){ 
      alert("Text: " + $("#test").text());
    });
    $("#btn2").click(function(){ 
      alert("HTML: " + $("#test").html());
    });
    
    //设置内容 - text ()、html () 以及 val ()
    $("#btn1").click(function(){ 
        $("#test1").text("Hello world!");
    });
    $("#btn2").click(function(){ 
        $("#test2").html("<b>Hello world!</b>");
    });
    $("#btn3").click(function(){ 
        $("#test3").val("RUNOOB");
    });

# jQuery 操作 CSS #

> jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

*  addClass () - 向被选元素添加一个或多个类
 *  removeClass () - 从被选元素删除一个或多个类
 *  toggleClass () - 对被选元素进行添加 / 删除类的切换操作
 *  css () - 设置或返回样式属性

**实例**

$("button").click(function(){ 
      $("h1,h2,p").addClass("blue");
      $("div").addClass("important");
    });
    
    //使用此方法，某些标签会增添class这个属性，如果此时在配合css样式

**例如：**

.blue
    { 
            color:blue;
    }
    //就可以让标签达到变色的效果。

# jQuery 遍历 #

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

*下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。*  
![20190315115418452.png][]  
**遍历 DOM 树**  
这些 jQuery 方法很有用，它们用于遍历 DOM 树：

*  parent() ：方法返回被选元素的直接父元素。
 *  parents()：方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
 *  parentsUntil()：方法返回介于两个给定元素之间的所有祖先元素。
 *  children () 方法返回被选元素的所有直接子元素。
 *  find () 方法返回被选元素的后代元素，一路向下直到最后一个后代。

下面的例子返回介于 `<span>`与`<div>` 元素之间的所有祖先元素：  
**实例**

$(document).ready(function(){ 
      $("span").parentsUntil("div");
    });

下面的例子返回属于 `<div>`后代的所有 `<span>`元素：  
**实例**

$(document).ready(function(){ 
      $("div").find("span");
    });

# jQuery - AJAX 简介 #

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

### jQuery load () 方法 ###

*jQuery load () 方法是简单但强大的 AJAX 方法。  
load () 方法从服务器加载数据，并把返回的数据放入被选元素中。*

**语法:**

$(selector).load(URL,data,callback);

必需的 **URL** 参数规定您希望加载的 URL。  
可选的 **data** 参数规定与请求一同发送的查询字符串键 / 值对集合。  
可选的 **callback** 参数是 load () 方法完成后所执行的函数名称。

可选的data (Map) 是 发送至服务器的 key/value 数据。  
**实例：**

$("#box").load("testa.html",{ name:"bingo",sex:"man"});

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

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

*下面的例子会在 load () 方法完成后显示一个提示框。如果 load () 方法已成功，则显示 “外部内容加载成功！”，而如果失败，则显示错误消息：*

**实例**

$("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 请求从服务器请求数据。  
> HTTP 请求：GET vs. POST  
> 两种在客户端和服务器端进行请求 - 响应的常用方法是：GET 和 POST。

*  GET - 从指定的资源请求数据
 *  POST - 向指定的资源提交要处理的数据

> *GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。  
> POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。*

### jQuery $.get () 方法 ###

*$.get () 方法通过 HTTP GET 请求从服务器上请求数据。*  
**语法：**

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。  
可选的 callback 参数是请求成功后所执行的函数名。  
下面的例子使用 $.get () 方法从服务器上的一个文件中取回数据：  
实例

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

### jQuery $.post () 方法 ###

*$.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);
        });
    });

**$.post函数会从页面传信息到php页面，PHP页面通过  
$.get () 和 $.post () 方法是 jQuery 中的全局函数，而在此之前讲的 load () 是对 jQuery 对象进行操作的。**

# jQuery 杂项方法 #

*  data() 向被选元素附加数据，或者从被选元素获取数据
 *  each() 为每个匹配元素执行函数
 *  get() 获取由选择器指定的 DOM 元素
 *  index() 从匹配元素中搜索给定元素
 *  $.noConflict() 释放变量 $ 的 jQuery 控制权
 *  $.param() 创建数组或对象的序列化表示形式（可在生成 AJAX 请求时用于 URL 查询字符串中）
 *  removeData() 移除之前存放的数据
 *  size() 在版本 1.8 中被废弃。返回被 jQuery 选择器匹配的 DOM 元素的数量
 *  toArray() 以数组的形式检索所有包含在 jQuery 集合中的所有 DOM 元素
 *  pushStack() 将一个 DOM 元素集合加入到 jQuery 栈
 *  $.when() 提供一种方法来执行一个或多个对象的回调函数

[20190315115418452.png]: /images/20210920/b1fe640df21e4f28a45edcd06eb4c543.png