目录
【前文回顾】👉 jQuery操作之如何查找元素_02
❣️ 如何修改元素: 3种
强调: 所有和修改相关的函数，一律一个函数两用
1. 内容: 3种
(1). 开始标签到结束标签之间的原始的HTML内容
a. DOM中: 元素.innerHTML
b. jq中: $元素.html("新HTML内容")
注意：( )里可写可不写，写与不写执行的是相反的操作
👉 不写新的html内容，默认执行读取旧内容操作
👉若写了新的html内容，就切换为修改操作
(2). 开始标签到结束标签之间的纯文本内容
a. DOM中: 元素.textContent
b. jq中: $元素.text("新文本内容")
(3). 表单元素的值
a. DOM中: 元素.value
b. jq中: $元素.val("新值")
(4). 示例: 尝试获得元素的三种内容:
14_html_val.html
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8">
</head>
<body>
<p>来自<a href="javascript:;"><<新华社>></a>的消息</p>
<input><button>百度一下</button>
<script src="js/jquery-1.11.3.js"></script>
<script>
//获得p元素的原始html内容
console.log($("p").html());
//获得p元素的纯文本内容
console.log($("p").text());
//想点按钮获得文本框中用户输入的搜索关键词
$("button").click(function(){
//获得文本框的内容
var value=$("input").val();
console.log(`搜索 ${value} 相关的内容`)
})
</script>
</body>
</html>运行结果：
(5). 示例: 表单验证
14_html_val2.html
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8">
</head>
<body>
<h1>操作元素的内容和值</h1>
<form action="">
用户名:<input type="text" name="uname">
<span></span><br>
密码:<input type="password" name="upwd">
<span></span><br>
<input type="button" value="提交注册信息">
</form>
<script src="js/jquery-1.11.3.js"></script>
<script>
//正确时，使用图片:"<img src='img/ok.png'>"
//姓名错误时: "<img src='img/err.png'>用户名必须介于3~9位之间!"
//密码错误时: "<img src='img/err.png'>密码必须介于6~8位之间!"
//DOM 4步:
//1. 查找触发事件的元素
//本例中:姓名文本框失去焦点时触发验证
var $inputName=$(":text");
//2. 绑定事件处理函数
$inputName.blur(function(){
var $this=$(this);
//3. 查找要修改的元素
//本例中：无论验证是否通过，都要修改当前input文本框旁边的下一个兄弟span
var $span=$this.next();
// jq家的简化版函数！
//this.nextElementSibling;
//4. 修改元素
//先获得当前文本框中用户输入的姓名
var uname=$this.val();
//如果验证当前文本框的内容通过
if(uname.length>=3&&uname.length<=9){
//修改span的内容为验证通过的内容
$span.html(`<img src='img/ok.png'>`);
}else{//否则如果验证当前文本框的内容不通过
//修改span的内容为验证失败的内容
$span.html(`<img src='img/err.png'>用户名必须介于3~9位之间!`);
}
})
</script>
</body>
</html>运行结果:
2. 属性: 3类
(1). 字符串类型的HTML标准属性
a. DOM中: 2种:
1). 旧核心DOM: 4个函数
i. 获取属性值: 元素.getAttribute("属性名")
ii. 修改属性值: 元素.setAttribute("属性名","属性值")
iii. 判断是否包含: 元素.hasAttribute("属性名")
iv. 移除属性: 元素.removeAttribute("属性名")
2). 新HTML DOM: 元素.属性名
property
b. jq中: 2种:
1). 代替旧核心DOM: $元素.attr("属性名", "属性值")
2). 代替新HTML DOM: $元素.prop("属性名","属性值")
(2). bool类型的HTML标准属性
a. DOM中，只能用: 元素.属性名
b. jq中，也只能用: $元素.prop("属性名", bool值)
(3). 自定义扩展属性
a. DOM中，只能用旧核心DOM4个函数访问
b.jq中，也只能用$元素.attr("属性名","属性值")
(4). 示例: 点击图片切换下一张:
2_attr.html
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8">
</head>
<body>
<h1>操作元素的属性</h1>
<img src="img/1.jpg" alt="1">
<script src="js/jquery-1.11.3.js"></script>
<script>
//单击图片，切换下一张
//DOM 4步
//1. 查找触发事件的元素
//本例中: 单击img触发变化
var $img=$("img")
//2. 绑定事件处理函数
$img.click(function(){
//3. 查找要修改的元素
//本例中:要改的就是自己
var $this=$(this);
//4. 修改元素
//4.1 先获得现在正在看第几张图片
//本例中: 利用img元素的alt属性临时存储第几张图片的序号，所以获得alt属性值
//因为alt属性是字符串类型的HTML标准属性，所以即可用.attr()又可用.prop()
var i=parseInt($this.attr("alt"))
//4.2 如果i<4，就i++，否则i=1
if(i<4){
i++;
}else{
i=1;
}
//4.3 即要将i拼接成新的图片路径保存到当前图片的src属性中，又要修改当前图片的alt属性值为新的i。
//因为src属性也是字符串类型的HTML标准属性，所以即可用.attr()又可用.prop()
// $this.attr("src",`img/${i}.jpg`);
// $this.attr("alt",i);
// 简写: 如果同时修改一个元素的多个属性或css属性时都可简写为对象语法:
$this.attr({
src:`img/${i}.jpg`,
alt:i
})
})
</script>
</body>
</html>运行结果:
(5). 示例:点小图片，切换大图片
3_attr2.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<img src="img/1.jpg" data-target="img/1-l.jpg" class="my-small">
<img src="img/2.jpg" data-target="img/2-l.jpg" class="my-small">
<img src="img/3.jpg" data-target="img/3-l.jpg" class="my-small">
<img src="img/4.jpg" data-target="img/4-l.jpg" class="my-small">
<hr/>
<img src="img/1-l.jpg" class="my-big">
<script src="js/jquery-1.11.3.js"></script>
<script>
//点击小图片，下方my-big中显示大图片
//DOM 4步
//1. 查找触发事件的元素
//本例中:四个class为my-small的img元素都可点击
var $imgs=$(".my-small");
//2. 绑定事件处理函数函数
$imgs.click(function(){
//3. 查找要修改的元素
//本例中: 无论点哪个小图片，都要修改下方的大图片
var $big=$(".my-big");
//4. 修改元素
//4.1 获得当前点击的小图片上的data-target属性值中保存的对应的大图片路径
//因为data-target是自定义扩展属性，所以只能用.attr()，不能用.prop()
var target=$(this).attr("data-target");
//4.2 将获得的大图片路径设置为大图片的src属性值
//因为src属性值字符串类型的HTML标准属性，所以即能用.attr()，又能用.prop()
$big.attr("src",target);
})
</script>
</body>
</html>运行结果：
⏬ 补：jQuery中attr()和prop()的区别是什么？
1、对于HTML元素本身就带有的固有属性，或者说W3C标准里就包含有这些属性，更直观的说法就是，编辑器里面可以智能提示出来的一些属性，如：src、href、value、class、name、id等。在处理时，使用prop()方法。
2、对于HTML元素我们自定义的DOM属性，即元素本身是没有这个属性的，如：data-*。在处理时，使用attr()方法。
<a href="#" id="link1" class="btn" action="delete">删除</a>这个例子里的<a>元素的dom属性值有"id、href、class和action"，很明显，前三个是固有属性，而后面一个action属性是我们自己定义上去的<a>元素本身是没有属性的。这种就是自定义的dom属性。处理这些属性时，建议使用attr方法，使用prop方法对自定义属性取值和设置属性值时，都会返回undefined值。
像checkbox，radio和select这样的元素，选中属性对应“checked”和"selected"，这些也属于固有属性，因此需要使用prop方法去操作才能获取正确答案
3. 样式: 统一使用.css()
(1). DOM中:
a. 修改内联样式: 元素.style.css属性名="属性值"
b. 获取样式: getComputedStyle(元素对象)
(2). jq中: 统一了！无论获取还是修改样式，只用.css()就够了:
a. $元素.css("css属性名","属性值")
b. 原理:
1). 如果调用.css()函数时，没给新属性值，则.css()默认执行获取属性值的操作。此时，.css()函数内自动执行的就是DOM中的getComputedStyle()，获得的就是计算后的样式！
2). 如果调用.css()函数时，给了新属性值，则.css()自动切换为修改属性值的操作。此时，.css()函数内自动执行的就是DOM中.style.css属性=新值，修改的就是内联样式。
(3). 批量修改一个元素的多个css属性:
a. DOM中: 元素.className="class名"
b. 问题: className="class名"是整体替换元素的class属性值！如果原来的元素被多个class名同时修饰，则很难只修改其中某一个class。
c. jq中: 提供了一套专门单独操作某一个class名的函数
1). 为元素添加一个新class:
$元素.addClass("class名")
2). 从元素上移除一个class:
$元素.removeClass("class名")
3). 判断一个元素是否包含某个class
$元素.hasClass("class名")
4). 在有和没有一个class之间来回切换
$元素.toggleClass("class名")
切换
内部封装的其实就是一个判断:
if($元素.hasClass("class名")){
$元素.removeClass("class名")
}else{
$元素.addClass("class名")
}
d. 示例: 使用class批量修改一个元素的多个css属性
4_class.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.btn {
padding: 5px 10px;
border-radius: 3px;
border: 1px solid #aaa;
outline: none;
}
/*准备了两个class*/
/*按钮抬起时的样式*/
.up {
background: #fff;
color: #333;
}
/*按钮按下时的样式*/
.down {
background: #ddd;
color: #fff;
}
</style>
</head>
<body>
<!--开局, 按钮默认是抬起的，所以已经提前放好了up样式类-->
<!--当单击按钮时，只要添加down样式类，就可覆盖up样式类。再次单击按钮，只要移除down样式类，就可恢复成up样式类-->
<button class="btn up">双态按钮</button>
<script src="js/jquery-1.11.3.js"></script>
<script>
//双态按钮: 让按钮的class在up和down之间切换
//DOM 4步
//1. 查找触发事件的元素
//本例中: 点按钮触发变化
var $btn=$("button");
//2. 绑定事件处理函数
$btn.click(function(){
//3. 查找要修改的元素
//本例中: 就要修改自己
// var $this=$(this)
//4. 修改元素
//如果当前按钮有down样式类
// if($this.hasClass("down")){
// //就移除down
// $this.removeClass("down");
// }else{//否则如果没有down样式类
// //就添加down样式类
// $this.addClass("down");
// }
//最简化写法:
$(this).toggleClass("down");
//自动在有down和没有down之间切换
})
</script>
</body>
</html>运行结果:
⏬简写：如果同时修改一个元素的多个属性或css属性时都可简写为对象语法: 😇
$元素.attr或prop或css({
属性名 : 属性值,... : ...
})如果css属性名中有-，两种选择: 要么加""，要么去横线变驼峰
❣️ 总结：jQuery简化版函数3大特点
1. 自带for循环
2. 一个函数两用
3. 绝大多数函数都会自动返回正在操作的.前的主语jq对象。如果后一句话所需的.前的主语，刚好和前一句话返回的主语相同，则可以直接用.继续操作，不用把.前主语反复写2遍！——链式操作。👉 链式操作具体示例——参看按节点间关系查找之示例7_tabs.html⏫
❣️ 总结：$()共有4种
1. $("选择器") 查找DOM元素，并包装进jQuery对象中
2. $(DOM元素对象) 不用查找，直接将DOM元素包装进jQuery对象中
3. $(`HTML片段`) 创建新元素
4. $(function(){ ... }) 绑定DOMContentLoaded事件处理函数，在DOM内容加载后就自动提前执行！
❣️ 总结：知识点提炼
1. 引入jQuery.js: 2种
(1). 引入项目本地jquery.js文件:
<script src="js/jquery-1.11.3.js">
(2). 引入CDN网络中共享的jquery.js文件:
<script src="官方提供的CDN上jquery.js文件地址">
2. 创建jQuery类型子对象: 2种
(1). 只有jQuery类型子对象才能使用jQuery家简化版函数。
DOM家元素对象无权直接使用jQuery家简化版函数。
所以只要使用jQuery家简化版函数，都要先创建jQuery家子对象，其中保存一个要操作的DOM元素对象。
(2). 如何:2种:
a. 查找DOM元素对象，并保存进新创建的jQuery对象中:
var $jq子对象=$("选择器")
b. 不查找，直接将DOM元素对象保存进新创建的jQuery对象中:
var $jq子对象=$(DOM元素对象)
3. 原理:
(1). $=jQuery=new jQuery
(2). jq子对象其实是一个类数组对象，可保存找到的多个DOM元素对象
(3). 对jq子对象调用简化版函数，会被自动翻译为对应的原生DOM的方法和属性。
所以jQuery中的所有简化版函数效果和DOM中原生方法和属性效果一样。
jQuery中的this、e、e.target等，和DOM中的完全一样！
4. jQuery简化版函数3大特点:
(1). 自带for循环: 对整个jquery子对象调用一次简化版函数，等效于对jQuery子对象中保存的每个DOM元素对象分别调用一次对等的DOM原生方法或属性——不用自己写for循环
(2). 一个函数两用: 调用函数时:
a. 没给新值作为参数，默认执行获取旧值的操作
b. 给了新值作为参数，自动切换为执行修改操作
(3). 多数函数都会返回正在操作的.前的主语jq对象——链式操作。
5. 查找元素:
(1). jQuery支持用所以CSS3选择器查找
(2). jQuery新增选择器: (css中不能用)
a. 基本过滤: (下标从0开始)
:first :last :eq(i) :lt(i) :gt(i) :even :odd
b. 内容过滤:
:contains(文本) :has(选择器) :parent :empty
c. 可见性过滤:
:visible :hidden(只能选择display:none和input type="hidden")
d. 表单元素过滤:
:input :text :password :radio :checkbox ... ...
(3).用节点间关系查找: 2大类关系, 8个函数
a. 父子关系：3个函数:
$元素.parent()
$元素.children("选择器")
$元素.find("选择器")
b. 兄弟关系：5个
$元素.prev()
$元素.prevAll("选择器")
$元素.next()
$元素.nextAll("选择器")
$元素.siblings("选择器")
6. 修改元素: 3种: ⏬ 👇
修改中的所有函数，都是一个函数两用！
(1). 内容: 3种:
a. 原始HTML内容:
$元素.html("新HTML内容") 代替.innerHTML
b. 纯文本内容:
$元素.text("纯文本内容") 代替.textContent
c. 表单元素的值:
$元素.val("新值") 代替.value
(2). 属性: 3种:
a. 字符串类型的HTML标准属性:2种:
1). $元素.attr("属性名","新属性值")
代替 元素.getAttribute()和setAttribute()
2). $元素.prop("属性名", bool值)
代替 元素.属性名=bool值
b. bool类型的HTML标准属性: 只有1种
$元素.prop("属性名", bool值)
代替 元素.属性名=bool值
c. 自定义扩展属性:只有一种:
$元素.attr("属性名","新属性值")
代替 元素.getAttribute()和setAttribute()
反过来总结:
$元素.attr()可修改一切字符串类型的属性(字符串类型HTML标准属性+自定义扩展属性)
$元素.prop()可修改一切可用.访问的属性(所有HTML标准属性)
(3). 样式:
a. 获取或修改单个css属性: 只有1种
$元素.css("css属性名", "属性值")
获取属性值时被翻译为getComputedStyle(元素)
修改属性值时被翻译为.style.css属性=属性值
b. 使用class批量修改样式:
$元素.addClass("class名")
$元素.removeClass("class名")
$元素.hasClass("class名")
$元素.toggleClass("class名")
💥 修改相关的函数都可同时修改多个属性值：
$元素.attr或prop或css({
属性名:"属性值",
... : ...
})
🆕【后文传送】👉 jQuery操作之添加/删除/替换/克隆元素_04
如果这篇【文章】有帮助到你，希望可以给【青春木鱼】点个赞👍，创作不易，相比官方的陈述，我更喜欢用【通俗易懂】的文笔去讲解每一个知识点，如果有对【前端技术】感兴趣的小可爱，也欢迎关注❤️❤️❤️【青春木鱼】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】💕💕！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
