jQuery学习

Bertha 。 2022-08-21 02:12 103阅读 0赞

jQuery 语法  
  
1、jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。  
基础语法是：$(selector).action()  
    美元符号定义 jQuery  
    选择符（selector）“查询”和“查找” HTML 元素  
    jQuery 的 action() 执行对元素的操作  
示例  
$(this).hide() - 隐藏当前元素  
$("p").hide() - 隐藏所有段落  
$(".test").hide() - 隐藏所有 class="test" 的所有元素  
$("\#test").hide() - 隐藏所有 id="test" 的元素  
  
2、文档就绪函数  
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：  
$(document).ready(function()\{  
  
\--- jQuery functions go here ----  
  
\});  
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。  
如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：  
    试图隐藏一个不存在的元素  
    获得未完全加载的图像的大小  
  
3、jQuery 元素选择器  
jQuery 使用 CSS 选择器来选取 HTML 元素。  
$("p") 选取 <p> 元素。  
$("p.intro") 选取所有 class="intro" 的 <p> 元素。  
$("p\#demo") 选取所有 id="demo" 的 <p> 元素。  
  
4、jQuery 属性选择器  
jQuery 使用 XPath 表达式来选择带有给定属性的元素。  
$("\[href\]") 选取所有带有 href 属性的元素。  
$("\[href='\#'\]") 选取所有带有 href 值等于 "\#" 的元素。  
$("\[href!='\#'\]") 选取所有带有 href 值不等于 "\#" 的元素。  
$("\[href$='.jpg'\]") 选取所有 href 值以 ".jpg" 结尾的元素。  
  
5、jQuery CSS 选择器  
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。  
下面的例子把所有 p 元素的背景颜色更改为红色：  
实例  
$("p").css("background-color","red");  
  
6、更多的选择器实例  
语法     描述  
$(this)     当前 HTML 元素  
$("p")     所有 <p> 元素  
$("p.intro")     所有 class="intro" 的 <p> 元素  
$(".intro")     所有 class="intro" 的元素  
$("\#intro")     id="intro" 的元素  
$("ul li:first")     每个 <ul> 的第一个 <li> 元素  
$("\[href$='.jpg'\]")     所有带有以 ".jpg" 结尾的属性值的 href 属性  
$("div\#intro .head")     id="intro" 的 <div> 元素中的所有 class="head" 的元素  
  
6、获得内容 - text()、html() 以及 val()  
三个简单实用的用于 DOM 操作的 jQuery 方法：  
    text() - 设置或返回所选元素的文本内容  
    html() - 设置或返回所选元素的内容（包括 HTML 标记）  
    val() - 设置或返回表单字段的值  
  
7、获取属性 - attr()  
jQuery attr() 方法用于获取属性值。  
下面的例子演示如何获得链接中 href 属性的值：  
实例  
$("button").click(function()\{  
  alert($("\#w3s").attr("href"));  
\});  
  
8、设置内容 - text()、html() 以及 val()  
我们将使用前一章中的三个相同的方法来设置内容：  
    text() - 设置或返回所选元素的文本内容  
    html() - 设置或返回所选元素的内容（包括 HTML 标记）  
    val() - 设置或返回表单字段的值  
下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：  
实例  
$("\#btn1").click(function()\{  
  $("\#test1").text("Hello world!");  
\});  
$("\#btn2").click(function()\{  
  $("\#test2").html("<b>Hello world!</b>");  
\});  
$("\#btn3").click(function()\{  
  $("\#test3").val("Dolly Duck");  
\});  
  
  
9、text()、html() 以及 val() 的回调函数  
上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。  
实例  
$("\#btn1").click(function()\{  
  $("\#test1").text(function(i,origText)\{  
    return "Old text: " + origText + " New text: Hello world!  
    (index: " + i + ")";  
  \});  
\});  
  
10、添加新的 HTML 内容  
我们将学习用于添加新内容的四个 jQuery 方法：  
    append() - 在被选元素的结尾插入内容  
    prepend() - 在被选元素的开头插入内容  
    after() - 在被选元素之后插入内容  
    before() - 在被选元素之前插入内容  
  
11、删除元素/内容  
如需删除元素和内容，一般可使用以下两个 jQuery 方法：  
    remove() - 删除被选元素（及其子元素）  
    empty() - 从被选元素中删除子元素  
  
12、过滤被删除的元素  
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。  
该参数可以是任何 jQuery 选择器的语法。  
下面的例子删除 class="italic" 的所有 <p> 元素：  
实例  
$("p").remove(".italic");  
  
13、jQuery 操作 CSS  
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：  
    addClass() - 向被选元素添加一个或多个类  
    removeClass() - 从被选元素删除一个或多个类  
    toggleClass() - 对被选元素进行添加/删除类的切换操作  
    css() - 设置或返回样式属性  
  
14、jQuery css() 方法  
css() 方法设置或返回被选元素的一个或多个样式属性。  
    返回 CSS 属性  
    如需返回指定的 CSS 属性的值，请使用如下语法：  
    css("propertyname");  
    下面的例子将返回首个匹配元素的 background-color 值：  
    实例  
    $("p").css("background-color");  
  
    设置 CSS 属性  
    如需设置指定的 CSS 属性，请使用如下语法：  
    css("propertyname","value");  
    下面的例子将为所有匹配元素设置 background-color 值：  
    实例  
    $("p").css("background-color","yellow");  
  
    设置多个 CSS 属性  
    如需设置多个 CSS 属性，请使用如下语法：  
    css(\{"propertyname":"value","propertyname":"value",...\});  
    下面的例子将为所有匹配元素设置 background-color 和 font-size：  
    实例  
    $("p").css(\{"background-color":"yellow","font-size":"200%"\});  
  
15、jQuery 尺寸 方法  
    jQuery width() 和 height() 方法  
    width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。  
    height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。  
  
    jQuery innerWidth() 和 innerHeight() 方法  
    innerWidth() 方法返回元素的宽度（包括内边距）。  
    innerHeight() 方法返回元素的高度（包括内边距）。  
  
    jQuery outerWidth() 和 outerHeight() 方法  
    outerWidth() 方法返回元素的宽度（包括内边距和边框）。  
    outerHeight() 方法返回元素的高度（包括内边距和边框）。  
  
16、向上遍历 DOM 树  
    parent()  返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。  
    实例  
    $(document).ready(function()\{  
      $("span").parent();  
    \});  
    parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。实例  
    $(document).ready(function()\{  
      $("span").parents();  
    \});  
    您也可以使用可选参数来过滤对祖先元素的搜索。  
    下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：  
    实例  
    $(document).ready(function()\{  
      $("span").parents("ul");  
    \});  
    parentsUntil() 返回介于两个给定元素之间的所有祖先元素。  
    下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：  
    实例  
    $(document).ready(function()\{  
      $("span").parentsUntil("div");  
    \});  
  
17、向下遍历 DOM 树  
    children() 返回被选元素的所有直接子元素。  
    该方法只会向下一级对 DOM 树进行遍历。  
    下面的例子返回每个 <div> 元素的所有直接子元素：  
    实例  
    $(document).ready(function()\{  
      $("div").children();  
    \});  
    您也可以使用可选参数来过滤对子元素的搜索。  
    下面的例子返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：  
    实例  
    $(document).ready(function()\{  
        $("div").children("p.1");  
    \});  
  
    find() 返回被选元素的后代元素，一路向下直到最后一个后代。  
    下面的例子返回属于 <div> 后代的所有 <span> 元素：  
    实例  
    $(document).ready(function()\{  
      $("div").find("span");  
    \});  
    下面的例子返回 <div> 的所有后代：  
    实例  
    $(document).ready(function()\{  
      $("div").find("\*");  
    \});  
  
18、在 DOM 树中水平遍历  
    siblings() 返回被选元素的所有同胞元素。  
    您也可以使用可选参数来过滤对同胞元素的搜索。  
    下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素：  
    实例  
    $(document).ready(function()\{  
      $("h2").siblings("p");  
    \});  
  
    next() 返回被选元素的下一个同胞元素。  
    该方法只返回一个元素。  
    nextAll() 返回被选元素的所有跟随的同胞元素。  
    nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。  
    prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。  
  
19、jQuery 遍历 - 过滤  
    first() 方法返回被选元素的首个元素。  
    下面的例子选取首个 <div> 元素内部的第一个 <p> 元素：  
    实例  
    $(document).ready(function()\{  
      $("div p").first();  
    \});  
    last() 方法返回被选元素的最后一个元素。  
    eq() 方法返回被选元素中带有指定索引号的元素。  
    索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：  
    实例  
    $(document).ready(function()\{  
      $("p").eq(1);  
    \});  
    filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。  
    下面的例子返回带有类名 "intro" 的所有 <p> 元素：  
    实例  
    $(document).ready(function()\{  
      $("p").filter(".intro");  
    \});  
    not() 方法返回不匹配标准的所有元素。  
    提示：not() 方法与 filter() 相反。  
    下面的例子返回不带有类名 "intro" 的所有 <p> 元素：  
    实例  
    $(document).ready(function()\{  
      $("p").not(".intro");  
    \});  
  
20、什么是 AJAX？  
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。  
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。  
  
21、load() 方法  
jQuery load() 方法是简单但强大的 AJAX 方法。  
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。  
语法：  
$(selector).load(URL,data,callback);  
必需的 URL 参数规定您希望加载的 URL。  
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。  
可选的 callback 参数是 load() 方法完成后所执行的函数名称。  
这是示例文件（"demo\_test.txt"）的内容：  
<h2>jQuery and AJAX is FUN!!!</h2>  
<p id="p1">This is some text in a paragraph.</p>  
下面的例子会把文件 "demo\_test.txt" 的内容加载到指定的 <div> 元素中：  
示例  
$("\#div1").load("demo\_test.txt");  
也可以把 jQuery 选择器添加到 URL 参数。  
下面的例子把 "demo\_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：  
实例  
$("\#div1").load("demo\_test.txt \#p1");  
可选的 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);  
  \});  
\});  
  
22、GET vs. POST  
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。  
    GET - 从指定的资源请求数据  
    POST - 向指定的资源提交要处理的数据  
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。  
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。  
  
23、get() 方法  
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。  
语法：  
$.get(URL,callback);  
必需的 URL 参数规定您希望请求的 URL。  
可选的 callback 参数是请求成功后所执行的函数名。  
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：  
实例  
$("button").click(function()\{  
  $.get("demo\_test.asp",function(data,status)\{  
    alert("Data: " + data + "\\nStatus: " + status);  
  \});  
\});  
  
24、post() 方法  
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。  
语法：  
$.post(URL,data,callback);  
必需的 URL 参数规定您希望请求的 URL。  
可选的 data 参数规定连同请求发送的数据。  
可选的 callback 参数是请求成功后所执行的函数名。  
下面的例子使用 $.post() 连同请求一起发送数据：  
实例  
$("button").click(function()\{  
  $.post("demo\_test\_post.asp",  
  \{  
    name:"Donald Duck",  
    city:"Duckburg"  
  \},  
  function(data,status)\{  
    alert("Data: " + data + "\\nStatus: " + status);  
  \});  
\});