属性节点操作—attr方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery.min.js"></script>
</head>
<body>
<img id="star" src="../img/bady.jpg" remark="图片备注"><br>
<button id="change">改变图片属性</button>
<script>
/**
* 通过attr()方法操作属性，可以是固有属性，也可以是自定义属性。
* 固有属性：元素上本身就有的属性(被工具提示出来)
* 自定义属性：手动添加到元素上的属性(不被工具提示出来)
* 设置属性：attr(属性名，属性值)
* 获取属性：attr(属性名)
*
* removeAttr()：删除指定的属性
* 设置多个属性：attr(
* {
* 属性名:值1,
* 属性名2:值2
* })
*
*/
$("#change").click(function() {
//设置图片的src属性
$('#star').attr("src", "../img/tly.jpg");
console.log("图片的src:" + $("#star").attr("src"));
//删除指定属性remark
$('#star').removeAttr("remark");
console.log("图片的remark:" + $("#star").attr("remark"));
$("#star").attr({
"title":"大美女",
"remark":"佟丽娅"
})
});
</script>
</body>
</html>
属性节点操作—prop方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
性别:<input type="radio" name="sex" id="sex1" value="man" />男
<input type="radio" name="sex" id="sex2" value="woman" />女<br>
爱好:
<input type="checkbox" name="hobby" id="hb1" value="篮球" />篮球
<input type="checkbox" name="hobby" id="hb2" value="足球" />足球
<input type="checkbox" name="hobby" id="hb3" value="旅游" />旅游<br>
故乡：
<select name="city" id="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">武汉</option>
</select>
<button id="sel1">设置选中的性别</button>
<button id="sel2">设置选中的爱好</button>
<button id="sel3">设置选中的故乡</button>
<button id="sel4">获取元素的选中状态</button>
<button id="sel5">设置元素的禁用(禁用按钮2)</button>
<script src="../js/jquery.min.js"></script>
<script>
/*prop():操作表单元素的checked,disabled,selected属性
* 语法：
* 设置属性 -- prop(属性名，值)
* 获取属性-- prop(属性名)
* */
$("#sel1").click(function(){
//设置"女"被选中
$("input[name=sex]:eq(1)").prop("checked",true);
});
$("#sel2").click(function(){
//设置"篮球"和"足球"被选中
// $("#hb1,#hb2").prop("checked",true);
for(var i=0;i<=1;i++){
$("input[name=hobby]:eq("+i+")").prop("checked",true);
}
});
$("#sel3").click(function(){
//让第2项"上海"被选中
$("#city>option:eq(1)").prop("selected",true);
})
$("#sel4").click(function(){
//获取"上海"这一项的选中状态
var flag= $("#city>option:eq(1)").prop("selected");
console.log("上海这项的选中状态:"+flag);
});
$("#sel5").click(function(){
$("#sel2").prop("disabled",true);
})
</script>
</body>
</html>
属性节点操作—操作class属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.boxstyle {
width: 100px;
height: 100px;
background-color: red;
}
.boxstyle2 {
font-size: 26px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box">我是div</div>
<button id="sel1">添加class</button>
<button id="sel2">移除class</button>
<button id="sel3">切换class</button>
<!-- 引入jQuery库文件 -->
<script src="../js/jquery.min.js"></script>
<script>
/* 操作class属性的方法:
* 1. addClass():给元素添加1个或多个类(class),相当于在元素上写class="xxx",参数是类名
* 如果添加多个类，多个类名之间用空格隔开,当多个类里面有相同样式名，后者的样式值会覆盖前者
* 2. removeClass()：从元素上移除一个或多个类，参数是类名(多个类名之间用空格隔开),
* 如果没有参数表示移除所有的类
* 3.hasClass():可以用来判断元素中是否含有某个class，有返回true,否则返回false
* 4.toggleClass():切换被选元素的类，如果元素中有指定的类，就移除，没有就添加该类,
*参数也是类名
* 相当于先判断是否有指定的类，没有就添加，有就移除
*
* if(元素.hasClass(类名)){
* 元素.removeClass(类名)
* }else{
* 元素.addClass(类名)
* }
*
* */
$('#sel1').click(function(){
//给元素添加类boxstyle
//$("#box").addClass("boxstyle");
$("#box").addClass("boxstyle boxstyle2");
});
$('#sel2').click(function(){
//移除元素上的boxstyle类
$("#box").removeClass("boxstyle");
});
$("#sel3").click(function(){
$("#box").toggleClass("boxstyle");
})
</script>
</body>
</html>
1521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
