遇见1995

jQuery 快速入门

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

语法

模板:$(selector).action()

  • $:定义 jQuery
  • selector:查询或查找 HTML 元素
  • action:执行操作
1
2
3
4
5
6
7
8
9
10
11
// 隐藏当前元素
$(this).hide()

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

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

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

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

1
2
3
4
5
6
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 属性

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

image-20200512122734009

参考手册-选择器

事件

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

就绪事件(文档加载完毕)

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){

// 开始写 jQuery 代码...

});

// 或者(简洁写法)

$(function(){

// 开始写 jQuery 代码...

});

image-20200511190954486

html

获取

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值
  • attr() - 方法用于获取属性值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 设置值

$("#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 参数是请求成功后所执行的函数名。

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

POST

$.post(URL,data,callback);

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

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

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

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);
});
});

专题:

本文发表于 2020-05-14,最后修改于 2020-05-19。

本站永久域名yujian95.cn,也可搜索「 遇见1995 」找到我。

期待关注我的微信公众号「 编程图解 」 ,查看最近的文章和动态。


上一篇 « JDK - System 下一篇 » SQL 练习题

赞赏支持

请我吃包子 =^_^=

i ali

支付宝

i wechat

微信

推荐阅读

Big Image