开始使用 jQuery

引入 jQuery:

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

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

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

使用示例:

1
2
3
4
5
6
$(document).ready(function() {			// 相当于 window.onload
// jQuery function go here
})

$(this).hide() // 隐藏当前元素
$("#hide").hide() // 隐藏 id 为 hide 的元素

选择器

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

1
2
3
4
5
6
7
8
$("p.intro")		// 选取所有 class="intro" 的 <p> 元素
$("ul li:first") // 选取每个 <ul> 的第一个 <li> 元素
$(this) // 选取当前元素

$("[href]") // 选取所有带有 href 属性的元素
$("[href='#']") // 选取所有带有 href 值等于 "#" 的元素
$("[href!='#']") // 选取所有带有 href 值不等于 "#" 的元素
$("[href$='.jpg']") // 选取所有 href 值以 ".jpg" 结尾的元素

为元素添加事件

事件函数 为元素绑定的事件
$(document).ready(function) 文档就绪事件
$(selector).click(function) 单击事件
$(selector).dblclick(function) 双击事件
$(selector).mouseover(function) 鼠标悬停事件
$(selector).focus(function) 获得焦点事件
$(selector).on('click mouseover', function) 绑定事件的通用方法。可以绑定多个事件
$(selector).off(['click', function]) 解绑指定元素的指定类型事件的指定回调函数。如果不写任何参数,则解绑所有事件。
$(window/selector).scroll(function) 为整个页面或某个元素绑定滚动事件

jQuery 效果和动画

  1. 显示和隐藏元素:

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

    可选参数 speed 规定隐藏/显示的速度,可以取以下值:"slow""fast""normal"毫秒

    可选参数 callback 是隐藏或显示完成后所执行的函数名称。

  2. 淡入淡出:

    • fadeIn([speed, callback]):淡入元素

    • fadeOut([speed, callback]):淡出元素

    • fadeToggle([speed, callback]):在淡入和淡出之间切换

    • fadeTo(speed, opacity[, callback]):将元素渐变为给定的不透明度

      speedopacity 是必需的参数。opacity 的值为 0-1。

  3. 滑动:

    • 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 对象
    1
    2
    3
    4
    5
    6
    7
    8
    $("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 设置两个参数:datastatus

    1
    2
    3
    4
    5
    $("button").click(function(){
    $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
    });
    });
  • $.post(URL, data, callback):以 POST 方式向指定 URL 请求数据。data 是一个对象,会随请求发送给指定 URL。callback 设置两个参数:datastatus

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $("button").click(function(){
    $.post("demo_test_post.asp",
    {
    name:"Donald Duck",
    city:"Duckburg"
    },
    function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
    });
    });