目录

  • 什么是 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 进行遍历。

h5 jquery h5jquery教程_入门教程


遍历 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() 提供一种方法来执行一个或多个对象的回调函数