文章目录
提示：以下是本篇文章正文内容，前端系列学习将会持续更新
一、JQuery 对象
JQuery 是⼀套兼容多浏览器的 JavaScript 脚本库.。核心理念是写得更少，做得更多，使⽤ JQuery 将极⼤的提高编写 JavaScript 代码的效率，帮助开发者节省了⼤量的⼯作，让写出来的代码更加优雅，更加健壮，“如⻁添翼”。同时网络上丰富的 JQuery 插件，也让我们站在巨⼈的肩膀上。
1.1 安装和使用
选择 Download the uncompressed, development jQuery 3.4.1 开发版下载：
1.完整版：jquery-3.4.1.js --> 学习版本 (学习源码 向⾼⼿学习是最好学习⽅法)。
2.压缩版：jquery3.4.1.min.js --> 开发版本 (压缩版，减少传输)。
<!-- 在需要使用的页面引入即可 -->
<script src="js/jquery-3.4.1.js" type="text/javascript" ></script>
1.2 JQuery包装集对象
$ 符号在 jQuery 中代表对 jQuery 对象的引⽤， “jQuery” 是核⼼对象。通过该符号可以获取 jQuery 对象，只有 jQuery 对象才能调⽤ jQuery 提供的⽅法。
①Dom 对象
var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");
②Jquery 包装集对象
var jQueryObject = $("#testDiv"); // 方法一
var jQueryObject = jQuery("#testDiv"); // 方法二
③Dom对象转Jquery对象
var domDiv = document.getElementById('mydiv'); // 获取Dom对象
var jQueryObject = $(domDiv);
④Jquery对象转Dom对象
var jqueryDiv = $("#mydiv"); // 获取jQuery对象
var domDiv = jqueryDiv[0]; // 将以获取的jquery对象转为dom
二、JQuery 选择器
2.1 基础选择器
| 选择器 | 名称 | 举例 |
|---|---|---|
| id选择器 | #id |
$("#testDiv") 选择id为testDiv的元素 |
| 元素名称选择器 | element |
$("div")选择所有div元素 |
| 类选择器 | .class |
$(".blue")选择所有class=blue的元素 |
| 选择所有元素 | * |
$("*")选择⻚⾯所有元素 |
| 组合选择器 | selector1,selector2,selectorN |
$("#testDiv,span,.blue")同时选中多个选择器匹配的元素 |
// id选择器
var idSelecter = $('#mydiv1');
// 元素选择器
var nameSe = $('div'); // 有多个div元素
// 类选择器 .class
var classSe = $('.blue'); // 有多个class=blue的元素
// 通⽤选择器：*
var all = $("*");
// 组合选择器
var unionSe = $('span, .blue, div');
2.2 层次选择器
| 选择器 | 名称 | 举例 |
|---|---|---|
| 后代选择器 | 祖先 后代 |
$("#parent div")选择id=parent的元素的所有div元素，所有后代 |
| 子代选择器 | parent > child |
$("#parent > div")选择id=parent的直接div⼦元素，所有儿子集 |
| 相邻选择器 | prev + next |
$(".blue + img")选择class=blue的下⼀个img元素，必须相邻 |
| 同辈选择器 | prev ~ sibling |
$(".blue ~ img")选择class=blue的之后的img元素，所有同辈元素 |
console.log("=========后代选择器-选择所有后代=====");
var ancestorS = $('#parent div');
console.log("=========⼦代选择器-选择⼉⼦辈=====");
var child = $('#parent>div');
console.log("=========相邻选择器=====");
var pre_next = $(".gray + img");
console.log("=========同辈选择器,其后，（弟弟）=====");
var pre_siblings = $(".gray ~ img");
2.3 表单选择器
| Forms | 名称 | 举例 |
|---|---|---|
| 表单选择器 | :input |
查找所有的input元素：$(":input") 注意：会匹配所有的 input、textarea、select 和 button元素。 |
| ⽂本框选择器 | :text |
查找所有⽂本框：$(":text") |
| 密码框选择器 | :password |
查找所有密码框：$(":password") |
| 单选按钮选择器 | :radio |
查找所有单选按钮：$(":radio") |
| 复选框选择器 | :checkbox |
查找所有复选框：$(":checkbox") |
| 提交按钮选择器 | :submit |
查找所有提交按钮：$(":submit") |
| 图像域选择器 | :image |
查找所有图像域：$(":image") |
| 重置按钮选择器 | :reset |
查找所有重置按钮：$(":reset") |
| 按钮选择器 | :button |
查找所有按钮：$(":button") |
| ⽂件域选择器 | :file |
查找所有⽂件域：$(":file") |
三、JQuery Dom 操作
3.1 操作元素
3.1.1 操作属性
| 获取属性 | 说明 | 举例 |
|---|---|---|
| attr(属性名) | 获取指定的属性值，固有属性和自定义属性均可操作 | attr('checked')attr('name') |
| prop(属性名) | 获取指定的属性值，只能操作固有属性 | prop('checked') |
| 设置属性 | 说明 | 举例 |
|---|---|---|
| attr(属性名,属性值) | 设置指定的属性值，固有属性和自定义属性均可操作 | attr('checked',’checked’)attr('name',’zs’) |
| prop(属性名,属性值) | 设置指定的属性值，只能操作固有属性。一般用于设置具有boolean类型的属性值 | prop('checked','true') |
| 移除属性 | 说明 | 举例 |
|---|---|---|
| removeAttr(属性名) | 移除指定的属性 | removeAttr('checked') |
<body>
<input type="checkbox" name="ch" checked="checked" id="aa" abc="aabbcc"/> aa
<input type="checkbox" name="ch" id="bb" /> bb
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/** 获取属性 **/
var name = $("#aa").attr("name");
var name2 = $("#aa").prop("name");
// 返回值是boolean的属性（元素设置了属性）
var ck1 = $("#aa").attr("checked"); // checked 或 undefined
var ck2 = $("#aa").prop("checked"); // true 或 false
/** 设置属性 **/
$("#aa").attr("value","1");
$("#bb").prop("value","2");
// 返回值是boolean的属性
$("#bb").attr("checked","checked");
$("#bb").prop("checked",false);
/** 移除属性 **/
$("#aa").removeAttr("checked")
</script>
attr()和prop()的区别：
1. 如果是固有属性，attr()和prop()方法均可操作
2. 如果是自定义属性，attr()可操作，prop()不可操作
3. 如果是返回值是boolean类型的属性
若设置了属性，attr()返回具体的值，prop()返回true；
若未设置属性，attr()返回undefined，prop()返回false；
总结：
如果属性的类型是boolean（checked单选/多选、selected下拉菜单、disabled按钮禁用），则使用prop()方法；否则使用attr()方法。
3.1.2 操作样式
| 方法 | 说明 |
|---|---|
attr("class") |
获取class属性的值，即样式名称 |
attr("class","样式名") |
修改class属性的值，修改样式 |
addClass("样式名") |
添加样式名称 |
css() |
添加具体的样式，如css("font-size","40px")、css({"font-family":"楷体","color":"green"}) |
removeClass("样式名") |
移除样式名称 |
<head>
<meta charset="utf-8">
<title>操作元素的样式</title>
<style type="text/css">
div{
padding: 8px;
width: 180px;
}
.blue{
background: blue;
}
.larger{
font-size: 30px;
}
.pink{
background: pink;
}
.green {
background : green;
}
</style>
</head>
<body>
<h3>css()方法设置元素样式</h3>
<div id="conBlue" class="blue larger">天蓝色</div>
<div id="conRed">大红色</div>
<div id="remove" class="blue larger">天蓝色</div>
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// attr("class") 获取元素的样式名
var cla = $("#conBlue").attr("class");
// attr("class","样式名") 设置元素的样式
$("#conBlue").attr("class","green");
// addClass("样式名") 添加样式
$("#conBlue").addClass("larger");
$("#conBlue").addClass("pink");
// css() 添加具体的样式（添加行内样式）
$("#conRed").css("font-size","40px");
$("#conRed").css({
"font-family":"楷体","color":"green"});
// removeClass("样式名") 移除样式
$("#remove").removeClass("larger");
</script>
3.1.3 操作内容
| 方法 | 说明 |
|---|---|
html() |
获取元素的html内容 |
html("html, 内容") |
设定元素的html内容 |
text() |
获取元素的⽂本内容，不包含html |
text("text 内容") |
设置元素的⽂本内容，不包含html |
val() |
获取元素value值 |
val("值") |
设定元素的value值 |
<body>
<h3><span>html()和text()方法设置元素内容</span></h3>
<div id="div1"></div>
<div id="div2"></div>
<div id="text">北京</div>
<div id="text2"><h2>北京</h2></div>
<input type="text" name="uname" id="op" value="oop" />
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// html("内容") 设置元素的内容，包含html标签（非表单元素）
$("#html").html("<h2>上海</h2>");
$("#html2").html("上海");
// html() 获取元素的内容，包含html标签（非表单元素）
var div1 = $("#div1").html();
var div2 = $("#div2").html();
// text("内容") 设置元素的纯文本内容，不识别HTML标签（非表单元素）
$("#text").text("北京");
$("#text2").text("<h2>北京</h2>");
// text() 获取元素的纯文本内容，不识别HTML标签（非表单元素）
var txt = $("#text").text();
var txt2 = $("#text2").text();
// val() 获取元素的值（表单元素）
var val = $("#op").val();
// val("值") 设置元素的值（表单元素）
$("#op").val("今天天气不错");
</script>
3.2 添加元素
创建元素：直接使⽤核⼼函数即可
$('元素内容');
$('<p>this is a paragraph!!!</p>');
| 添加元素 | 说明 |
|---|---|
prepend(content) |
头插，在被选元素内部的开头插入元素或内容，被追加的 content 参数 |
$(content).prependTo(selector) |
头插，把 content 元素或内容加⼊ selector 元素开头 |
append(content) |
尾插，在被选元素内部的结尾插入元素或内容，被追加的 content 参数 |
$(content).appendTo(selector) |
尾插，把 content元素或内容插⼊selector 元素内，默认是在尾部 |
before() |
同级前插，在元素前插⼊指定的元素或内容:$(selector).before(content) |
after() |
同级后插，在元素后插⼊指定的元素或内容:$(selector).after(content) |
<body>
<span class="red">男神</span>
<span class="blue">偶像</span>
<div class="green">
<span >小鲜肉</span>
</div>
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/* 添加元素 */
var span = "<span>小奶狗</span>";
// 得到指定元素，并在元素的内部最前面追加内容
$(".green").prepend(span);
var span2 = "<span>小狼狗</span>";
$(span2).prependTo($(".green"));
// 尾部插入
var span3 = "<span>小奶狗1</span>";
var span4 = "<span>小奶狗2</span>";
$(".green").append(span3);
$(span4).appendTo($(".green"));
// 将已存在内容追加到指定元素中
$(".green").append($(".red"));
/* 同级追加 */
var sp1 = "<span class='pink'>女神</span>";
var sp2 = "<span class='gray'>歌手</span>";
$(".blue").before(sp1);
$(".blue").after(sp2);
</script>
3.3 删除元素
| 方法 | 说明 |
|---|---|
remove() |
删除所选元素或指定的⼦元素，包括整个标签和内容⼀起删。 |
empty() |
清空元素内容 |
// 删除元素
$("#div1").remove();
// 清空元素
$("p").empty();
3.4 遍历元素
| 方法 | 示例 | 说明 |
|---|---|---|
each() |
$(selector).each(function(index,element)) |
参数 function 为遍历时的回调函数，index为元素索引，element是当前元素 |
// 获取所有的span，并遍历打印到控制台
$("span").each(function(index,element){
console.log(index);
console.log(element); // <span class="green">jquery</span>
console.log(this); // <span class="green">jquery</span>
console.log($(this)); // jQuery对象: jQuery.fn.init(1)
});
四、JQuery 事件
4.1 ready 加载事件
- ready() 类似于 onLoad() 事件，预加载事件 (当页面的 Dom 结构加载完毕后执行)。
- ready() 可以写多个，按顺序执行。
// 语法：
$(document).ready(function(){
// 执行代码
});
// 简写为：
$(function(){
// 执行代码
});
示例：
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
console.log("ready加载事件...");
});
$(document).ready(function(){
console.log($("#p1"));
});
</script>
<body>
<p id="p1">文本</p>
</body>
4.2 bind() 绑定事件
为被选元素添加⼀个或多个事件处理程序，并规定事件发⽣时运⾏的函数。
$(selector).bind(eventType, [eventData], handler(eventObject));
eventType：是⼀个字符串类型的事件类型，就是你所需要绑定的事件。
这类类型可以包括：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick
mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave,change, select, submit, keydown, keypress, keyup, error[eventData]：可省略，传递的参数，格式：{名:值,名2:值2}。handler(eventObject)：该事件触发执行的函数。
①为元素绑定单个事件
// 原生js绑定事件
document.getElementById("test").onclick = function(){
console.log("test...");
};
// bind() 绑定
$("#test").bind("click",function(){
console.log("世上无难事，只怕有心人");
});
// 直接绑定
$("#btntest").click(function(){
$(this).prop("disabled",true); // 禁用按钮
});
②为元素绑定多个事件
// 方式一：链式编程
$("#btn2").bind("click",function(){
console.log("按钮2被点击了...");
}).bind("mouseout",function(){
console.log("按钮2移开了...");
});
// 方式二：JSON格式
$("#btn3").bind({
"click":function(){
console.log("按钮3被点击了...");
},
"mouseout":function(){
console.log("按钮3移开了...");
}
});
// 方式三：直接绑定
$("#btn4").click(function(){
console.log("按钮4被点击了...");
}).mouseout(function(){
console.log("按钮4移开了...");
});
③同时为多个事件绑定同一个函数
$("#btn1").bind("click mouseout",function(){
console.log("按钮1...");
});
五、JQuery Ajax
5.1 $.ajax()
| 参数 | 说明 |
|---|---|
| type | 请求⽅式 GET/POST |
| url | 请求地址 url |
| async | 是否异步，默认是 true 表示异步 |
| data | 要求为Object或String类型的参数，发送到服务器的数据 |
| dataType | 要求为String类型的参数，预期服务器返回的数据类型。如：xml, html, script, json, jsonp, text |
| contentType | 设置请求头，默认为"application/x-www-form-urlencoded" |
| success | 请求成功时调⽤此函数 |
| error | 请求失败时调⽤此函数 |
①发送GET请求
@GetMapping("/books")
@ResponseBody
public List<Book> bookList() {
return bookService.getBooks();
}
<body>
<table id="table" border="1px">
<tr>
<th>序号</th>
<th>标题</th>
<th>描述</th>
</tr>
</table>
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
<script>
$.ajax({
type: "get",
url: "/books",
async: true,
dataType: "json",
success: function(result) {
result.forEach(function(book) {
var tbody = `<tr><td>${
book.bid}</td><td>${
book.title}</td><td>${
book.desc}</td></tr>`;
$("#table").append(tbody);
})
}
});
</script>
②发送POST请求
@PostMapping("/addBook2")
@ResponseBody
public Boolean add2(Book book) {
// 不要加 @RequestBody注解
return bookService.addBook(book) > 0;
}
<body>
<button id="addBook">添加书籍</button>
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
<script>
$("#addBook").click(function() {
$.ajax({
type: "post",
data: {
bid: 8,
title: "铁道游击队",
desc: "一群英雄智斗日本鬼子"
},
url: "/addBook2",
async: true,
dataType: "json",
success: function(result) {
if(result) {
alert("添加成功！");
}else {
alert("添加失败！");
}
},
error: function() {
alert("添加失败！");
}
});
});
</script>
5.2 $.get()
// 1.请求json⽂件，忽略返回值
$.get('js/cuisine_area.json');
// 2.请求json⽂件，传递参数，忽略返回值
$.get('js/cuisine_area.json', {
name:"tom",age:100});
// 3.请求json⽂件,拿到返回值,请求成功后可拿到返回值
$.get('js/cuisine_area.json', function(data){
console.log(data);
});
// 4.请求json⽂件,传递参数,拿到返回值
$.get('js/cuisine_area.json', {
name:"tom",age:100}, function(data){
console.log(data);
});
5.3 $.post()
// 1.请求json⽂件，忽略返回值
$.post('../js/cuisine_area.json');
// 2.请求json⽂件，传递参数，忽略返回值
$.post('js/cuisine_area.json', {
name:"tom",age:100});
// 3.请求json⽂件,拿到返回值,请求成功后可拿到返回值
$.post('js/cuisine_area.json', function(data){
console.log(data);
});
// 4.请求json⽂件,传递参数,拿到返回值
$.post('js/cuisine_area.json', {
name:"tom",age:100}, function(data){
console.log(data);
});
5.4 $.getJSON()
// 表示请求返回的数据类型是JSON格式的ajax请求
$.getJSON('js/cuisine_area.json', {
name:"tom",age:100}, function(data){
console.log(data); // 要求返回的数据格式是JSON格式
});
总结:
提示：这里对文章进行总结：
本文是对JQuery的学习，首先认识了JQuery包装集对象和Dom对象的区别，又学习了JQuery选择器，后续又学习了JQuery对元素的增删查改，以及加载事件和绑定事件，最后使用了JQuery Ajax的四种封装方法。