本文详细介绍了Jquery的使用。包括Dom对象与Jquery对象的区别及相互转换，Jquery选择器如基础、层次和表单选择器，Dom操作涵盖属性、样式、内容操作及元素创建、添加、删除和遍历，还介绍了Jquery事件和Ajax的使用方法。
Jquery
在这里插入图片描述
在需要使用jquery的页面引入jquery的核心js文件
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
一、Dom对象 与 Jquery包装集对象
原始的Dom对象只有DOM接口提供的方法和属性，通过js代码获取的对象都是dom对象；
而通过jQuery获取的对象是jQuery包装集对象，简称jQuery对象，只有jQuery对象才能使用jQuery提供的方法。
1.Dom对象
javascript 中获取 Dom 对象，Dom 对象只有有限的属性和方法：
通过js方式获取的元素对象（document）
<div id="mydiv">文本</div>
/* Dom对象 */
var divDom = document.getElementById("mydiv");
console.log(divDom);
var divsDom = document.getElementsByTagName("div");
console.log(divsDom);
// js获取不存在的元素
var spanDom = document.getElementsByTagName("span");
console.log(spanDom);
var spanDom2 = document.getElementById("myspan");
console.log(spanDom2);
2.Jquery对象
通过jquery方法获取的元素对象，返回的是jquery包装集
引入jquery的核心js文件 （如果未引入jquery，则报错：$ is not defined）
/* Jquery对象 */
// 通过id选择获取元素对象 $("#id属性值")
var divJquery = $("#mydiv");
console.log(divJquery);
// jquery获取不存在的元素
var spanJquery = $("#myspan");
console.log(spanJquery);
3.Dom对象 转 Jquery对象
Dom对象转为jQuery对象，只需要利用$()方法进行包装即可
var divDomToJquery = $(divDom);
console.log(divDomToJquery);
4.Jquery对象 转 Dom对象
获取包装集对象中指定下标的元素，将jquery对象转换成dom对象
var divJqueryToDom = divJquery[0];
console.log(divJqueryToDom);
二、Jquery选择器
1.基础选择器
id选择器 #id属性值 $("#id属性值") 选择id为指定值的元素对象（如果有多个同名id，则以第一个为准）
类选择器 .class属性值 $(".class属性值 ") 选择class为指定值的元素对象
元素选择器 标签名/元素名 $("标签名/元素名") 选择所有指定标签的元素对象
通用选择器 * $("*") 选择页面中所有的元素对象
组合选择器 选择器1,选择器2,.. $("选择器1,选择器2,..") 选择指定选择器选中的元素对象
// id选择器 #id属性值
var mydiv = $("#mydiv1");
console.log(mydiv);
// 类选择器 .class属性值
var clas = $(".blue");
console.log(clas);
// 元素选择器 标签名/元素名
var spans = $("span");
console.log(spans);
// 通用选择器 *
var all = $("*");
console.log(all);
// 组合选择器 选择器1,选择器2,..
var group = $("#mydiv1,div,.blue");
console.log(group);
<div id="mydiv1" class="blue">元素选择器</div>
<div id="mydiv1">id选择器1<span>span中的内容</span></div>
<span class="blue">样式选择器</span>
2.层次选择器
层次选择器
后代选择器
格式： 父元素 指定元素 （空格隔开）
示例： $("父元素 指定元素")
选择父元素的所有指定元素（包含第一代、第二代等）
子代选择器
格式： 父元素 > 指定元素 （大于号隔开）
示例： $("父元素 > 指定元素")
选择父元素的所有第一代指定元素
相邻选择器
格式： 元素 + 指定元素 （加号隔开）
示例： $("元素 + 指定元素")
选择元素的下一个指定元素（只会查找下一个元素，如果元素不存在，则获取不到）
同辈选择器
格式： 元素 ~ 指定元素 （波浪号隔开）
示例： $("元素 ~ 指定元素")
选择元素的下面的所有指定元素
<div id="parent">层次择器
<div id="child" class="testColor">父选择器
<div class="gray">子选择器</div>
<img src="http://www.baidu.com/img/bd_logo1.png"
width="270" height="129" />
<img src="http://www.baidu.com/img/bd_logo1.png"
width="270" height="129" />
</div>
<p>p元素</p>
<div>
选择器2<div>选择器2中的div</div>
</div>
</div>
// 后代选择器
var hd = $("#parent div");
console.log(hd);
// 子代选择器
var zd = $("#parent > div");
console.log(zd);
// 相邻选择器
var xl = $("#child + div");
console.log(xl);
// 同辈选择器
var imgs = $(".gray ~ img");
console.log(imgs);
3.表单选择器
表单选择器
表单选择器 :input 查找所有的input元素：$(":input")；
注意：会匹配所有的input、textarea、select和button元素。
文本框选择器 :text
密码框选择器 :password
单选按钮选择器 :radio
多选按钮选择器 :checkbox
提交按钮选择器 :sunmit
图像按钮选择器 :image
重置按钮选择器 :reset
文件域选择器 :file
按钮选择器 :button
<form id='myform' name="myform" method="post">
<input type="hidden" name="uno" value="9999" disabled="disabled"/>
姓名:<input type="text" id="uname" name="uname" /><br />
密码:<input type="password" id="upwd" name="upwd" value="123456" /><br />
年龄:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩
<input type="radio" name="uage" value="1"/>你懂得 <br />
爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
<input type="checkbox" name="ufav" value="爬床"/>爬床
<input type="checkbox" name="ufav" value="代码"/>代码<br />
来自:<select id="ufrom" name="ufrom">
<option value="-1" selected="selected">请选择</option>
<option value="0">北京</option>
<option value="1">上海</option>
</select><br />
简介:<textarea rows="10" cols="30" name="uintro"></textarea><br />
头像:<input type="file" /><br />
<input type="image" src="http://www.baidu.com/img/bd_logo1.png"
width="20" height="20"/>
<button type="submit" onclick="return checkForm();">提交</button>
<button type="reset" >重置</button>
</form>
// 表单选择器 :input
var inputs = $(":input");
console.log(inputs);
// 元素选择器
var inputs2 = $("input");
console.log(inputs2);
三、Jquery Dom操作
1.操作元素的属性
属性的分类：
固有属性：元素本身就有的属性（id、name、class、style）
返回值是boolean的属性：checked、selected、disabled
自定义属性：用户自己定义的属性
attr()和prop()的区别：
-
如果是固有属性，attr()和prop()方法均可操作
-
如果是自定义属性，attr()可操作，prop()不可操作
-
如果是返回值是boolean类型的属性
若设置了属性，attr()返回具体的值，prop()返回true；
若未设置属性，attr()返回undefined，prop()返回false；
-
获取属性
attr(“属性名”)
prop(“属性名”)
-
设置属性
attr(“属性名”,“属性值”)
prop(“属性名”,“属性值”)
-
移除属性
removeAttr(“属性名”);
总结：
如果属性的类型是boolean（checked、selected、disabled），则使用prop()方法；否则使用attr()方法。
<input type="checkbox" name="ch" checked="checked" id="aa" abc="aabbcc"/> aa
<input type="checkbox" name="ch" id="bb" /> bb
/* 获取属性 */
// 固有属性
var name = $("#aa").attr("name");
console.log(name);
var name2 = $("#aa").prop("name");
console.log(name2);
// 返回值是boolean的属性（元素设置了属性）
var ck1 = $("#aa").attr("checked"); // checked
var ck2 = $("#aa").prop("checked"); // true
console.log(ck1);
console.log(ck2);
// 返回值是boolean的属性（元素未设置属性）
var ck3 = $("#bb").attr("checked"); // undefined
var ck4 = $("#bb").prop("checked"); // false
console.log(ck3);
console.log(ck4);
// 自定义属性
var abc1 = $("#aa").attr("abc"); // aabbcc
var abc2 = $("#aa").prop("abc"); // undefined
console.log(abc1);
console.log(abc2);
/* 设置属性 */
// 固有属性
$("#aa").attr("value","1");
$("#bb").prop("value","2");
// 返回值是boolean的属性
$("#bb").attr("checked","checked");
$("#bb").prop("checked",false);
// 自定义属性
$("#aa").attr("uname","admin");
$("#aa").prop("uage",18);
/* 移除属性 */
$("#aa").removeAttr("checked")
2.操作元素的样式
操作元素的样式
attr("class") 获取元素的样式名
attr("class","样式名") 设置元素的样式 （设置样式，原本的样式会被覆盖）
addClass("样式名") 添加样式 （在原来的样式基础上添加样式，原本的样式会保留，如果出现相同样式，则以样式中后定义的为准）
css() 添加具体的样式（添加行内样式）
css("具体样式名","样式值"); 设置单个样式
css({"具体样式名":"样式值","具体样式名":"样式值"}); 设置多个样式
removeClass("样式名") 移除样式
<h3>css()方法设置元素样式</h3>
<div id="conBlue" class="blue larger">天蓝色</div>
<div id="conRed">大红色</div>
<div id="remove" class="blue larger">天蓝色</div>
// attr("class") 获取元素的样式名
var cla = $("#conBlue").attr("class");
console.log(cla);
// 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");
3.操作元素的内容
操作元素的内容
html() 获取元素的内容，包含html标签（非表单元素）
html("内容") 设置元素的内容，包含html标签（非表单元素）
text() 获取元素的纯文本内容，不识别HTML标签（非表单元素）
text("内容") 设置元素的纯文本内容，不识别HTML标签（非表单元素）
val() 获取元素的值（表单元素）
val("值") 设置元素的值（表单元素）
表单元素：
文本框text、密码框password、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉框select
非表单元素：
div、span、h1~h6、table、tr、td、li、p等
<h3><span>html()和text()方法设置元素内容</span></h3>
<div id="html"></div>
<div id="html2"></div>
<div id="text">北京</div>
<div id="text2"><h2>北京</h2></div>
<input type="text" name="uname" id="op" value="oop" />
// html("内容") 设置元素的内容，包含html标签（非表单元素）
$("#html").html("<h2>上海</h2>");
$("#html2").html("上海");
// html() 获取元素的内容，包含html标签（非表单元素）
var html = $("#html").html();
var html2 = $("#html2").html();
console.log(html);
console.log(html2);
// text("内容") 设置元素的纯文本内容，不识别HTML标签（非表单元素）
//$("#text").text("北京");
//$("#text2").text("<h2>北京</h2>");
// text() 获取元素的纯文本内容，不识别HTML标签（非表单元素）
var txt = $("#text").text();
var txt2 = $("#text2").text();
console.log(txt);
console.log(txt2);
// val() 获取元素的值（表单元素）
var val = $("#op").val();
console.log(val);
// val("值") 设置元素的值（表单元素）
$("#op").val("今天天气不错");
4.创建元素和添加元素
1.创建元素
$(“内容”)
2.添加元素
1. 前追加子元素
指定元素.prepend(内容) 在指定元素内部的最前面追加内容，内容可以是字符串、html元素或jquery对象。
$(内容).prependTo(指定元素); 把内容追加到指定元素内部的最前面，内容可以是字符串、html元素或jquery对象。
2. 后追加子元素
指定元素.append(内容) 在指定元素内部的最后面追加内容，内容可以是字符串、html元素或jquery对象。
$(内容).appendTo(指定元素); 把内容追加到指定元素内部的最后面，内容可以是字符串、html元素或jquery对象。
3. 前追加同级元素
before() 在指定元素的前面追加内容
4. 后追加同级元素
after() 在指定元素的后面追加内容
注：
在添加元素时，如果元素本身不存在（新建的元素），此时会将元素追加到指定位置；
如果元素本身存在（已有元素），会将原来元素直接剪切设置到指定位置
div {
margin: 10px 0px;
}
span{
color: white;
padding: 8px
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.green{
background-color: green;
}
.pink {
background-color: pink;
}
.gray{
background-color: gray;
}
<h3>prepend()方法前追加内容</h3>
<h3>prependTo()方法前追加内容</h3>
<h3>append()方法后追加内容</h3>
<h3>appendTo()方法后追加内容</h3>
<span class="red">男神</span>
<span class="blue">偶像</span>
<div class="green">
<span >小鲜肉</span>
</div>
// 创建元素
var p = "<p>这是一个p标签</p>";
console.log(p);
console.log($(p));
/* 添加元素 */
// 创建元素
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);
5.删除元素
remove()
删除元素及其对应的子元素，标签和内容一起删除
指定元素.remove();
empty()
清空元素内容，保留标签
指定元素.empty();
span{
color: white;
padding: 8px;
margin: 5px;
float: left;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
<h3>删除元素</h3>
<span class="green">jquery<a>删除</a></span>
<span class="blue">javase</span>
<span class="green">http协议</span>
<span class="blue">servlet</span>
// 删除元素
$(".green").remove();
// 清空元素
$(".blue").empty();
6.遍历元素
each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element是当前的元素，此时是dom元素。
<h3>遍历元素 each()</h3>
<span class="green">jquery</span>
<span class="green">javase</span>
<span class="green">http协议</span>
<span class="green">servlet</span>
// 获取指定元素 并遍历
$(".green").each(function(index,element){
console.log(index);
console.log(element);
console.log(this);
console.log($(this));
});
四、Jquery事件
1.ready加载事件
ready加载事件：
预加载事件
当页面的dom结构加载完毕后执行
类似于js中load事件
ready事件可以写多个
语法：
$(document).ready(function(){
});
简写：
$(function(){
});
$(function(){
console.log("ready加载事件...");
});
$(document).ready(function(){
// 获取元素
console.log($("#p1"));
});
<p id="p1">文本</p>
2.绑定事件
bind绑定事件
为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
语法：
$(selector).bind( eventType [, eventData], handler(eventObject));
eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。
[, eventData]：传递的参数，格式：{名:值,名2:值2}
handler(eventObject)：该事件触发执行的函数
绑定单个事件
bind绑定
$("元素").bind("事件类型",fucntion(){
});
直接绑定
$("元素").事件名(function(){
});
绑定多个事件
bind绑定
1. 同时为多个事件绑定同一个函数
指定元素.bind("事件类型1 事件类型1 ..",function(){
});
2. 为元素绑定多个事件，并设置对应的函数
指定元素.bind("事件类型",function(){
}).bind("事件类型",function(){
});
3. 为元素绑定多个事件，并设置对应的函数
指定元素.bind({
"事件类型":function(){
},
"事件类型":function(){
}
});
直接绑定
指定元素.事件名(function(){
}).事件名(function(){
});
<h3>bind()方简单的绑定事件</h3>
<!-- style="cursor:pointer" 设置鼠标图标 -->
<div id="test" style="cursor:pointer">点击查看名言</div>
<input id="btntest" type="button" value="点击就不可用了" />
<hr >
<button type="button" id="btn1">按钮1</button>
<button type="button" id="btn2">按钮2</button>
<button type="button" id="btn3">按钮3</button>
<button type="button" id="btn4">按钮4</button>
/*
1.确定为哪些元素绑定事件
获取元素
2.绑定什么事件（事件类型）
第一个参数：事件的类型
3.相应事件触发的，执行的操作
第二个参数：函数
* */
/* 绑定单个事件 */
$("#test").bind("click",function(){
console.log("世上无难事，只怕有心人");
});
// 原生js绑定事件
/* document.getElementById("test").onclick = function(){
console.log("test...");
} */
// 直接绑定
$("#btntest").click(function(){
// 禁用按钮
console.log(this);
$(this).prop("disabled",true);
});
/* 绑定多个事件 */
// 1. 同时为多个事件绑定同一个函数
$("#btn1").bind("click mouseout",function(){
console.log("按钮1...");
});
// 2. 为元素绑定多个事件，并设置对应的函数
$("#btn2").bind("click",function(){
console.log("按钮2被点击了...");
}).bind("mouseout",function(){
console.log("按钮2移开了...");
});
// 3. 为元素绑定多个事件，并设置对应的函数
$("#btn3").bind({
"click":function(){
console.log("按钮3被点击了...");
},
"mouseout":function(){
console.log("按钮3移开了...");
}
});
// 直接绑定
$("#btn4").click(function(){
console.log("按钮4被点击了...");
}).mouseout(function(){
console.log("按钮4移开了...");
});
Jquery Ajax
一、$.ajax
jquery调用ajax方法：
格式：$.ajax({});
参数：
type：请求方式GET/POST
url：请求地址url
async：是否异步，默认是true表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数
error：请求失败时调用此函数
<button type="button" id="btn">查询数据</button>
$.ajax({
type:"get", // 请求方式
url:"js/data.txt", // 请求地址
data:{ // 请求数据，json对象
uname:"zhangsan" // 如果没有参数，则不需要设置
},
// 请求成功时调用的函数
success:function(data){ // data是形参名，代表的是返回的数据
console.log(data); // 字符串
// 将字符串转换成json对象
var obj = JSON.parse(data);
console.log(obj);
}
});
/**
* 点击按钮，发送ajax请求，将数据显示到页面中
*/
$("#btn").click(function(){
$.ajax({
type:"get", // 请求方式
url:"js/data.txt", // 请求地址
data:{ // 请求数据，json对象
// uname:"zhangsan" // 如果没有参数，则不需要设置
},
dataType:"json", // 预期返回的数据类型，如果是json格式，在接收到返回值时会自动封装成json对象
// 请求成功时调用的函数
success:function(data){ // data是形参名，代表的是返回的数据
console.log(data); // 字符串
// 将字符串转换成json对象
// var obj = JSON.parse(data);
// console.log(obj);
// Dom操作
// 创建ul
var ul = $("<ul></ul>");
// 遍历返回的数据数组
for(var i = 0; i < data.length; i++) {
// 得到数组中的每一个元素
var user = data[i];
// 创建li元素
var li = "<li>"+user.userName+"</li>";
// 将li元素设置到ul元素中
ul.append(li);
}
console.log(ul);
// 将ul设置到body标签中
$("body").append(ul);
}
});
});
二、.get和.get和.get和.post
$.get();
语法：
$.get("请求地址","请求参数",function(形参){
});
$.post();
语法：
$.post("请求地址","请求参数",function(形参){
});
$.get("js/data.json",{},function(data){
console.log(data);
});
$.post("js/data.json",{},function(data){
console.log(data);
});
三、$.getJSON
$.getJSON
语法：
$.getJSON("请求地址","请求参数",function(形参){
});
注：getJSON方式要求返回的数据格式满足json格式（json字符串）
$.getJSON("js/data.json",{},function(d){
console.log(d);
});
$.get("js/test.txt",{},function(d){
console.log(d);
});
// 如果返回的数据不是json格式的，则无法获取
/* $.getJSON("js/test.txt",{},function(d){
console.log(d);
}); */
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
