当前位置：
  1. 首页
  2. jquery
  3. 正文
本文介绍: 本文是对JQuery的学习，首先认识了JQuery包装集对象和Dom对象的区别，又学习了JQuery选择器，后续又学习了JQuery对元素的增删查改，以及加载事件和绑定事件，最后使用了JQuery Ajax的四种封装方法。

文章目录

提示：以下是本篇文章正文内容，前端系列学习将会持续更新

一、JQuery 对象

JQuery 是⼀套兼容多浏览器的 JavaScript 脚本库.。核心理念是写得更少，做得更多，使⽤ JQuery 将极⼤的提高编写 JavaScript 代码的效率，帮助开发者节省了⼤量的⼯作，让写出来的代码更加优雅，更加健壮，“如⻁添翼”。同时网络上丰富的 JQuery 插件，也让我们站在巨⼈的肩膀上。

1.1 安装和使用

官网：https://jquery.com
在这里插入图片描述

选择 Download the uncompressed, development jQuery 3.4.1 开发版下载：
 1.完整版：jquery-3.4.1.js --> 学习版本 (学习源码 向⾼⼿学习是最好学习⽅法)。
 2.压缩版：jquery3.4.1.min.js --> 开发版本 (压缩版，减少传输)。

<!-- 在需要使用的页面引入即可 -->
&lt;script src="js/jquery-3.4.1.js" type="text/javascript" &gt;</script&gt;

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 加载事件

// 语法：
$(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));

①为元素绑定单个事件

// 原生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的四种封装方法。

原文地址:https://blog.csdn.net/qq15035899256/article/details/130611530

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_39944.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

上一篇 借用jQuery发送Http请求的实现（内附源码）
下一篇 什么是数据增强，为什么会让模型更健壮？

相关文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。