jQuery 快速入门

为了面试，快速掌握一下jQuery相关知识。

语法

模板：$(selector).action()

  • $：定义 jQuery
  • selector：查询或查找 HTML 元素
  • action：执行操作
// 隐藏当前元素
$(this).hide()

// 隐藏所有 <p> 元素
$("p").hide()

// 隐藏所有 class="test" 的 <p> 元素
$("p.test").hide()

// 隐藏 id="test" 的元素
$("#test").hide()

noConflict() 可返回对 jQuery 的引用，您可以把它存入变量.

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍在运行！");
  });
});

选择器

  • 基本选择器：id选择器、标签选择器、类选择器
  • 层次选择器：$("form input") 选择所有的form元素中的input元素 $("#main > *")选择id为main的所有子元素
  • 过滤选择器:$("tr:first")选择所有tr元素的第一个 $("tr:last")选择所有tr元素的最后一个
  • 表单选择器：$(":input")选择所有的表单输入元素 $(":text")选择所有的text的input元素

元素选择器

  • $("p")选取 <p> 元素。

  • $("p.intro") 选取所有 class="intro" 的 <p> 元素。

  • $("p#demo")选取所有 id="demo" 的 <p> 元素。

属性选择器

  • $("[href]") 选取所有带有 href 属性的元素。

  • $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

  • $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

  • $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

CSS选择器

可用于改变 HTML 元素的 CSS 属性

$("p").css("background-color","red");

参考手册-选择器

事件

  • 在元素上移动鼠标。
  • 选取单选按钮
  • 点击元素

就绪事件（文档加载完毕）

$(document).ready(function(){

   // 开始写 jQuery 代码...

});

// 或者（简洁写法）

$(function(){

   // 开始写 jQuery 代码...

});

image-20200511190954486

html

获取

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容（包括 HTML 标记）
  • val() - 设置或返回表单字段的值
  • attr() - 方法用于获取属性值
// 设置值

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});

$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});

$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});

添加

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容

遍历

用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。

向上遍历 DOM 树

  • parent() - 返回直接父元素
  • parents() - 返回所有祖先元素
  • parentsUntil() - 返回介于两个给定元素之间的所有祖先元素

向下遍历 DOM 树

  • children() - 所有直接子元素
  • find() - 返回被选元素的后代元素，一路向下直到最后一个后代

水平遍历

  • siblings() - 被选元素的所有同胞元素
  • next() - 返回被选元素的下一个同胞元素
  • nextAll() - 返回被选元素的所有跟随的同胞元素
  • nextUntil() - 返回介于两个给定参数之间的所有跟随的同胞元素
  • prev()
  • prevAll()
  • prevUntil()

返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前

过滤

  • first() - 首个元素
  • last() - 最后一个元素
  • eq() - 被选元素中带有指定索引号的元素（从0开始）
  • filter() - 匹配的元素会被返回
  • not() - 返回不匹配的元素

AJAX

在不重载全部页面的情况下，实现了对部分网页的更新。

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）

GET

$.get(URL,callback);

  • 必需的 URL 参数规定您希望请求的 URL。

  • 可选的 callback 参数是请求成功后所执行的函数名。

// 从服务器上的一个文件中取回数据
$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

POST

$.post(URL,data,callback);

  • 必需的 URL 参数规定您希望请求的 URL。

  • 可选的 data 参数规定连同请求发送的数据。

  • 可选的 callback 参数是请求成功后所执行的函数名。

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