开始使用 jQuery

引入 jQuery：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

基础语法：$(selector).action()

• 美元符号定义 jQuery
• 选择器（selector）查找 HTML 元素
• action() 是对元素的操作

使用示例：

$(document).ready(function() {            // 相当于 window.onload
    // jQuery function go here
})
$(this).hide()            // 隐藏当前元素
$("#hide").hide()        // 隐藏 id 为 hide 的元素

选择器

jQuery 使用 css 选择器来选取元素：

$("p.intro")        // 选取所有 class="intro" 的 <p> 元素
$("ul li:first")    // 选取每个 <ul> 的第一个 <li> 元素
$(this)                // 选取当前元素
$("[href]")            // 选取所有带有 href 属性的元素
$("[href='#']")        // 选取所有带有 href 值等于 "#" 的元素
$("[href!='#']")    // 选取所有带有 href 值不等于 "#" 的元素
$("[href$='.jpg']")    // 选取所有 href 值以 ".jpg" 结尾的元素

为元素添加事件

jQuery 效果和动画

1. 显示和隐藏元素：
   • show([speed, callback]) ：显示元素
   • hide([speed, callback])：隐藏元素
   • toggle([speed, callback])：切换元素状态。显示被隐藏的元素，隐藏被显示的元素

可选参数 speed 规定隐藏/显示的速度，可以取以下值："slow"、"fast"、"normal" 或 毫秒。
可选参数 callback 是隐藏或显示完成后所执行的函数名称。

1. 淡入淡出：

   • fadeIn([speed, callback])：淡入元素
   • fadeOut([speed, callback])：淡出元素
   • fadeToggle([speed, callback])：在淡入和淡出之间切换
   • fadeTo(speed, opacity[, callback])：将元素渐变为给定的不透明度
     speed 和 opacity 是必需的参数。opacity 的值为 0-1。

2. 滑动：

   • slideDown([speed, callback])：向下滑动元素
   • slideUp([speed, callback])：向上滑动元素
   • slideToggle([speed, callback])：在向上滑动和向下滑动之间切换

操作 HTML

1. 获取和设置内容：

   • text([content])：如果没有指定 content，则获取元素内的文本内容；如果指定了 content，则将元素内的文本内容设置为 content。
   • html([content])：与 text() 的区别是，text() 只获取或返回元素内的文本内容，html() 会获取和设置元素内的所有内容（包括 HTML 标签）。
   • val([content])：获取或设置表单控件的值。
   • attr("属性名"[, "值"])：获取或设置指定属性的值。
   • attr({"属性1": "值1", "属性2": "值2"})：同时设置多个属性的值。

2. 添加和删除 HTML：

   • append(text1, text2, ...) 和 prepend(text1, text2, ...)：在被选中的元素的 结尾 和 开头 插入 HTML。
   • after(text1, text2, ...) 和 before(text1, text2, ...)：在被选中的元素 之后 和 之前 插入 HTML。
   • remove() 和 empty()：remove() 删除被选中的元素；empty() 删除被选中的元素的所有子元素。

3. 操作 CSS 类：

   • addClass("类1 类2")：为元素添加类。
   • removeClass("类名")：删除被选中元素的指定类。
   • toggleClass("类名")：添加或删除指定类。
   • hasClass("类名")：判断指定类是否存在。

4. 获取和设置 CSS 属性：

   • css("属性名"[, 值])：获取或设置指定 CSS 属性。
   • css({"属性名1": "值1", "属性名2": "值2"})：同时设置多个 CSS 属性。

5. 获取和设置滚动条位置：

   • $(window/selector).scrollTop([数值])：获取或设置垂直滚动条的位置。
   • $(window/selector).scrollLeft([数值])：获取或设置水平滚动条的位置。

遍历 DOM

• parent()：获取直接父元素。
• parents(["filter"])：获取所有祖先元素。
• children(["filter"])：获取所有直接子元素。
• siblings(["filter"])：获取所有兄弟元素。
• next()：获取下一个兄弟元素。
• prev()：获取上一个兄弟元素。

"filter" 是过滤器，使用 CSS 选择器语法。使用过滤器后只有符合条件的元素会被返回。

jQuery Ajax

编写常规的 Ajax 代码并不容易，因为不同的浏览器对 Ajax 的实现并不相同。但使用 jQuery 可以不用在意这个问题。

• $(selector).load(URL[, callback])：从服务器加载数据并放入被选择的元素中。
  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);
    });
    });

• $.get(URL, callback)：以 GET 方式向指定 URL 请求数据。callback 设置两个参数：data 和 status。

  $("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
  });

• $.post(URL, data, callback)：以 POST 方式向指定 URL 请求数据。data 是一个对象，会随请求发送给指定 URL。callback 设置两个参数：data 和 status。

  $("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
  });