-
Javascript知识【jQuery属性操作&案例：重写复选框操作】
目录
jQuery属性操作【阶段重点】
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.blueDiv{
background-color: #87CEFA;
width:300px;
height:300px;
}
.redDiv{
background-color: red;
width:300px;
height:300px;
}
style>
<script src="../js/jquery-3.3.1.min.js">script>
<script>
$(function(){
//attr和prop有区别的：
//attr 操作的是html自带属性
//prop 操作的是自定义属性
//1、获取d2这个div标签的class值
//var v1 = $("#d2").prop("class");
var v1 = $("#d2").attr("class");
alert(v1);
//2、设置d1这个div标签样式为blueDiv
//$("#d1").prop("class","blueDiv");
$("#d1").attr("class","blueDiv");
//3、移除d2这个div标签的redDiv样式
//$("#d2").removeProp("class");
$("#d2").removeAttr("class");
//$("#d2").prop("key1","value1");
});
script>
head>
<body>
<div id="d1">11111div>
<div id="d2" class="redDiv">22222div>
body>
html>
prop无效，切attr即可
扩展：
何时使用Prop何时使用attr：
若需要操作属性，需要在页面DOM上进行改变，使用attr
若需要操作的属性，值不需要在页面DOM改变，要动态保存 使用prop
敏感信息操作，使用prop。
建议：先用prop，若prop无效果，切换attr
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="../js/jquery-3.3.1.min.js">script>
<script>
$(function(){
//HTML自带属性:attr会更改页面DOM值，prop不会更改页面DOM值，对动态值进行改变。【prop若无法改变，立刻切换attr】
//获取value展示
//alert($("#t1").prop("value"));
//alert($("#t1").attr("value"));
//设置value
//$("#t1").prop("value","v2");//未改变页面元素中的value，仅对value的动态值进行了改变
//$("#t1").attr("value","v2");//改变了页面元素中的value
//自定义属性：attr会将自定义属性保存在页面元素中，prop动态保存不会保存页面元素。
//设置自定义属性，k1=v1
//$("#t1").prop("k1","v1");//不会向页面中添加自定义属性，而是动态保存
//$("#t1").attr("k1","v1");//会修改页面元素，添加k1=v1属性值
//获取自定义属性, k1=v1
//alert($("#t1").prop("k1"));
//alert($("#t1").attr("k1"));
//页面书写自定义属性：仅能使用attr获取
//获取自定义书写属性，memeda
//alert($("#t1").prop("memeda"));//undefined
//alert($("#t1").attr("memeda"));
});
script>
head>
<body>
<input type="text" id="t1" value="hehe" memeda="么么哒"/>
body>
html>案例：重写复选框操作
- 分析：
关键点：
1、jQuery获取元素
$(".itemSelect");
2、jQuery操作属性
jq.prop("checked",true);
jq.prop("checked",false);
jq.prop("checked",function(){
//this 指当前复选框对象
return !this.checked;
});
步骤：
1、页面加载完成时，为三个按钮绑定点击事件
2、全选：进行为true
3、全不选：进行为false
4、反选：进行 匿名函数取反操作
- 代码实现：
<script src="../js/jquery-3.3.1.min.js">script>
<script>
//1、页面加载完成时，为三个按钮绑定点击事件
$(function () {
var cbs = $(".itemSelect");
//2、全选：进行为true
$("input[value='全选']").click(function () {
cbs.prop("checked",true);
});
//3、全不选：进行为false
$("input[value='全不选']").click(function () {
cbs.prop("checked",false);
});
//4、反选：进行 匿名函数取反操作
$("input[value='反选']").click(function () {
cbs.prop("checked",function () {
return !this.checked;
});
});
});
script>
1,jQuery获取元素$(".itemSelect");
2,jQuery操作属性 jq.prop("checked",true)
jq.prop("checked",false)
jq.prop("checked",function(){
//this 指当前复选框对象
return !this.checked;
})
匿名函数使用：可以用于作为回调函数。
也可以用于进行一些值处理。（JS函数一定有返回值）
-
相关阅读:
【四：Unittest框架】
Android 13 现已正式发布，看看有哪些更新！
mybatis实现插入数据时获取主键
XCTF---MISC---Wire1
【滴滴出行安全应急响应平台DSRC2倍积分卡】
Windows下IntelliJ IDEA工具连接TDEngine集群环境
我总结了3个做好事情的万能动作，简单高效！
两道相似的三维dp动态规划题
简述曼切斯特码的编码规则，并画出00000011的数字时钟，nrz码和曼彻斯特编码波形图。
iOS 16 SwiftUI列表（List）项包含 Label 视图导致分隔线变短的解决
- 原文地址：https://blog.csdn.net/m0_64550837/article/details/126291049