文章目录
一、JQuery简介
jQuery 是一个 JavaScript 库,提供了大量的拓展,它极大地简化了 JavaScript 编程。了解常用操作之前,有必要了解一下jQuery对象和DOM对象的区别。
- DOM对象:是用传统的方法(javascript)获得的对象。在js对网页进行操作时,认为网页中的每个标签就是一个对象,使用面向对象的思想来操作,js中提供了一个document对象,表示整个html文档对象,网页加载后会自动生成表示此文档的document对象,通过document提供的方法精确获得网页中要操作的标签;
- jQuery对象:是用jQuery类库的选择器获得的对象。jQuery对象就是通过jQuery包装DOM对象后产生的对象,它是jQuery独有的。如果一个对象是jQuery对象,那么就可以使用jQuery里的方法。
- DOM对象和JQuery对象的相互转化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dom对象与JQuery对象</title>
</head>
<body>
<div id="mydiv">div文本</div>
</body>
<script src="jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// Dom对象
var divDom = document.getElementById("mydiv");
console.log(divDom);
//Jquery包装集对象
var divJquery = $("#mydiv");
console.log(divJquery);
//Dom对象转Jquery对象
var domToJquery = $(divDom);
console.log(domToJquery);
//Jquery对象转Dom对象
var JqueryToDom = divJquery[0];
console.log(JqueryToDom);
</script>
</html>
二、常用操作
1.JQuery选择器
基础选择器
选择器 | 格式 | 实例 | 含义 |
---|---|---|---|
id选择器 | #id | $(“#testDiv”) | 选择id为testDiv的元素 |
元素名称选择器 | element | $(“div”) | 选择所有div元素 |
类选择器 | .class | $(“.blue”) | 选择所有class=blue的元素 |
选择所有元素 | * | $(“*”) | 选择页面所有元素 |
组合选择器 | selector1,selector2,… | $(“#testDiv,span,.blue”) | 同时选中多个选择器匹配的元素 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基础选择器</title>
<style type="text/css">
.blue{
background-color: blue;
}
.yellow{
background-color: yellow;
}
</style>
</head>
<body>
<div id="mydiv">基础选择器
<div class="yellow">
<span class="blue">
这是一行文本
</span>
</div>
</div>
<input type="text" value="今天是星期六" />
</body>
<script src="jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//id选择器
var ele1 = $("#mydiv");
console.log(ele1);//包含div#mydiv
//类选择器
var ele2 = $(".yellow");
console.log(ele2);//包含div.yellow
//元素名称选择器
var ele3 = $("span");
console.log(ele3);//包含span.blue
//选择所有元素
var ele4 = $("*");
console.log(ele4);//包含所有
//组合选择器
var ele5 = $("#mydiv,.yellow,span,input")
console.log(ele5);//包含div#mydiv、div.yellow、span.blue、input
</script>
</html>
层次选择器
选择器 | 格式 | 实例 | 含义 |
---|---|---|---|
后代选择器 | 父元素 指定元素 | $(“父元素 指定元素”) | 选择父元素的所有指定元素(包含第一代,第二代等) |
子代选择器 | 父元素>指定元素 | $(“父元素>指定元素”) | 选择父元素的所有第一代指定元素 |
相邻选择器 | 父元素+指定元素 | $(“元素+指定元素”) | 选择元素的下一个指定元素 |
同辈选择器 | 父元素~指定元素 | $(“父元素~指定元素”) | 选择父元素下面的所有指定元素 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery层次选择器</title>
</head>
<body>
<div id="parent">层次选择器
<div id="select1">选择器1
<div class="gray">
选择器1中的div
</div>
</div>
<div id="select2">选择器2
<div class="blue">
选择器2中的div
</div>
</div>
</div>
</body>
<script src="jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//后代选择器
var ele1 = $("#parent div");
console.log(ele1);//包含div#select1\div#gray\div#select2\div#blue
//子代选择器
var ele2 = $("#parent>div");
console.log(ele2);//包含div#select1\div#select2
//邻居选择器
var ele3 = $("#select1+div");
console.log(ele3);//包含div#select2
//同辈选择器
var ele4 = $("#select1~div");
console.log(ele4);//包含div#select2
</script>
</html>
表单选择器
选择器 | 格式 | 实例 | 含义 |
---|---|---|---|
表单选择器 | :input | $(“:input”) | 查找所有的input、textarea、select和button元素 |
文本框选择器 | :text | $(“:text”) | 查找所有的文本框 |
密码框选择器 | :password | $(“password”) | 查找所有的密码框 |
单选框选择器 | :radio | $(“:radio”) | 查找所有单选按钮 |
复选框选择器 | :checkbox | $(":checkbox ") | 选择所有复选框 |
提交按钮选择器 | :submit | $(":submit ") | 查找提交按钮 |
图像域选择器 | :image | $(“:image”) | 查找所有图像域 |
重置按钮选择器 | :reset | $(“:reset”) | 查找所有重置按钮 |
按钮选择器 | :button | $(“:button”) | 查找所有按钮 |
文件域选择器 | :file | $(“:file”) | 查找所有文件域 |
2.操作元素的属性
属性可以分为固有属性、返回值是Boolean的属性和自定义属性:
- 固有属性:元素本身就有的属性(id、name、class、style)等;
- 返回值是Boolean的属性:checked、selected、disabled 等;
- 自定义属性:用户自己定义的属性。
操作元素方式 | 语法 |
---|---|
|
|
| |
|
|
| |
|
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作元素的属性</title>
</head>
<body>
姓名:<input type="text" id="uname" name="uname" value="zhangsan" test="XiAn" /><br />
年龄:<input type="text" id="uage" name="uage" value="22" /><br />
性别:<input type="radio" id="ugender1" name="ugender" checked="checked" />
<input type="radio" id="ugender2" name="ugender" />
</body>
<script src="jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//获取属性
var ele1 = $("#uname").attr("name");
console.log(ele1); //输出uname
var ele2 = $("#uname").prop("name");
console.log(ele2); //输出uname
var ele3 = $("#ugender1").attr("checked");
console.log(ele3); //输出checked
var ele4 = $("#ugender1").prop("checked");
console.log(ele4); //输出true
var ele5 = $("#uname").attr("test");
console.log(ele5); //输出AiAn
var ele6 = $("#uname").prop("test");
console.log(ele6); //输出undefine
//设置属性与移除属性
$("#uname").removeAttr("value");
$("#ugender2").prop("checked", "true");
</script>
</html>
由以上例子可知:attr()和prop()的区别有:
- 如果是固有属性,attr()和prop()方法均可获取
- 如果使自定义属性,attr()可获取,prop()不可获取
- 如果使返回值是boolean类型的属性,若设置了属性,attr()返回具体的值,prop()返回true;若未设置属性,attr()返回undefined,prop()返回false;
因此一般用法是:如果属性的类型是boolean,则使用prop()方法;否则使用attr()方法
3.操作元素的样式
方法 | 说明 |
---|---|
attr(“class”) | 获取元素的样式名 |
attr(“class”, “样式名”) | 设置元素的样式(原本的样式会被覆盖) |
addClass(“样式名”) | 添加样式(在原来的样式基础上添加样式,原来的样式会保留;如果出现相同的样式,则会以后定义的为准) |
css(“样式名”,“样式值”) | 添加单个样式 |
css({“样式名1”:“样式值1”,“样式名2”:“样式值2”}) | 添加多个样式 |
removeClass(“样式名”) | 移除样式 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作元素的样式</title>
<style type="text/css">
div{
padding: 8px;
width: 180px;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
.larger{
font-size: 30px;
}
</style>
</head>
<body>
<div id="conBlue" class="blue larger">天蓝色</div>
<div id="conGreen">草绿色</div>
<div id="remove" class="blue larger">天蓝色</div>
</body>
<script src="jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//获取样式名
var cla = $("#conBlue").attr("class");
console.log(cla);//输出blue larger
//设置样式
$("#conGreen").attr("class","green");
//添加样式
$("#conBlue").addClass("green");//结果仍然显示蓝色
//添加具体样式
$("#conGreen").css("font-size","30px");
$("#conGreen").css({"color":"red","font-family":"楷体"});
//移除样式
$("#remove").removeClass("blue");
</script>
</html>
4.操作元素的内容
-
表单元素:文本框text、密码框password、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉框select
-
非表单元素:div、span、h1~h6、table、tr、td、li、p等
方法 | 说明 |
---|---|
html() | 获取元素的内容,包含html标签 (非表单元素) |
html(“内容”) | 设置元素的内容,包含html标签 (非表单元素) |
text() | 获取元素的纯文本内容,不识别HTML标签 (非表单元素) |
text(“内容”) | 设置元素的纯文本内容,不识别HTML标签(非表单元素) |
val() | 获取元素的值 (表单元素) |
val(“值”) | 设置元素的值(表单元素) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作元素的内容</title>
</head>
<body>
<div id="mydivhtml"><p>这是一段用来测试的文字1</p></div>
<div id="mydivtext"><p>这是一段用来测试的文字2</p></div>
姓名:<input type="text" id="uname" name="uname" value="zhangsan" test="XiAn" /><br />
年龄:<input type="text" id="uage" name="uage" value="22" /><br />
性别:<input type="radio" id="ugender1" name="ugender" checked="checked" />
<input type="radio" id="ugender2" name="ugender" />
</body>
<script src="jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//获取元素内容
var html = $("#mydivhtml").html();
console.log(html);//输出:<p>这是一段用来测试的文字1</p>
//设置元素的内容
$("#mydivhtml").html("<h2>学生信息选择</h2>");
var htmldata = $("#mydivhtml").html();
console.log(htmldata);//输出:<h2>学生信息选择</h2>
//获取元素的纯文本内容
var text = $("#mydivtext").text();
console.log(text);//输出:这是一段用来测试的文字2
//设置元素的纯文本内容
$("#mydivtext").text("<h2>学生信息选择</h2>");
var mydivtext1 = $("#mydivtext").text();
console.log(mydivtext1);//输出:<h2>学生信息选择</h2>,这里h2是纯文本,不是标签
//获取元素的值
var val1 = $("#uname").val();
console.log(val1);//输出:zhangsan
//设置元素的值
$("#uname").val("Lisi");
var val2 = $("#uname").val();
console.log(val2);//输出:Lisi
</script>
</html>
5.创建元素
语法: $('元素内容')
例如:$('<p>this is a paragraph!!!</p>');
6.添加元素
1.前追加元素
指定元素.prepend(内容) 在指定元素内部的最前面追加内容,内容可以是字符串、html元素或jquery对象。
$(内容).prependTo(指定元素); 把内容追加到指定元素内部的最前面,内容可以是字符串、html元素或jquery对象 √
2.后追加元素
指定元素.append(内容) 在指定元素内部的最后面追加内容,内容可以是字符串、html元素或jquery对象。
$(内容).appendTo(指定元素); 把内容追加到指定元素内部的最后面,内容可以是字符串、html元素或jquery对象 √
3.前追加同级元素
before(内容) 在指定元素的前面追加内容
4.后追加同级元素
after(内容) 在指定元素的后面追加内容
注:
在添加元素时,如果元素本身不存在(新建的元素),此时会将元素追加到指定位置
如果元素本身存在 (已有元素) ,会将原来元素直接剪切设置到指定位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>创建元素和添加元素</title>
</head>
<body>
<div id="mydiv">
<span id="han">汉朝</span>
<span id="tang">唐朝</span>
</div>
</body>
<script src="jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//前追加元素
$("#mydiv").prepend("<span>秦朝</span>");
$("<span>商朝</span>").prependTo($("#mydiv"));
//后追加元素
$("#mydiv").append("<span>元朝</span>");
$("<span>明朝</span>").appendTo($("#mydiv"));
//前追加同级元素
$("#han").before("<span>楚汉</span>")
//后追加同级元素
$("#tang").after("<span>宋朝</span>")
</script>
</html>
7.删除元素
方法 | 说明 |
---|---|
remove() | 删除所选元素及其对应的的子元素,包括整个标签和内容一起删 |
empty() | 清空所选元素的内容 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>删除元素</title>
</head>
<body>
<div id="mydiv">
<div id="han">汉朝
<span>东汉</span><br />
<span>西汉</span>
</div>
<span id="tang">唐朝</span>
</div>
</body>
<script src="jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$("#han").remove();
$("#tang").empty();
</script>
</html>
8.遍历元素
$(selector).each(function(index,element))
其中:
function为遍历时的回调函数
index为遍历元素的序列号,从0开始
element时当前的元素,此时是dom元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>遍历元素</title>
<style type="text/css">
.green{
background-color: green;
}
</style>
</head>
<body>
<span class="green">jquery</span>
<span class="green">javase</span>
<span class="green">http</span>
<span class="green">servlet</span>
</body>
<script src="jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$("span").each(function(index,ele){
console.log(index + ":" + $(ele).text());
})
</script>
</html>
9.ready加载事件
ready加载事件也叫预加载事件,当页面的dom结构加载完毕后执行,类似于JS中的load事件,ready事件可以写多个,语法为
$(document).ready(function(){
})
可以简写为:
$(function()){
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ready加载事件</title>
<script src="jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
console.log($("#p1"));
})
</script>
</head>
<body>
<p id="p1">这是测试文本</p>
</body>
</html>