jQuery操作属性与元素

最新推荐文章于 2021-06-23 10:36:42 发布

爱吃的H先生

最新推荐文章于 2021-06-23 10:36:42 发布

阅读量262

点赞数

操作元素的属性
attr(attr) 获取属性的值
attr(attr,val) 给指定属性赋值
removeAttr(attr) 去掉指定属性

prop(prop) 获取属性的值
prop(prop,val) 给指定属性赋值
jQuery 1.6增加了.prop()方法。
如 checked, selected、readonly、disabled 使用prop()等，返回值是true或者false
更加方便处理。

each(index) 对符合条件的元素逐个处理

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM操作-操作属性</title>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function changeA(){
//获取超链接
//var aElem = $("a#a1");
alert($("a#a1").attr("href")+" "+$("a#a1").attr("target"));
//修改文本
$("a#a1").html("京东");
//修改两个属性 href target
$("a#a1").attr("href","http://www.jd.cn");//setAttribute()
$("a#a1").attr("target","_self");
alert($("a#a1").attr("href")+" "+$("a#a1").attr("target"));
}

function changeSubmit(){
//获取协议框的值
//var flag = $("#agreement").attr("checked");
//alert(flag);
var flag = $("#agreement").prop("checked");//Property Attribute
alert(flag);
//根据协议框的值修改提交按钮的状态
/*
if(flag){
$("#sub1").prop("disabled",false);
}else{
$("#sub1").prop("disabled",true);
}*/
$("#sub1").prop("disabled",!flag);
}

function changeImg(){
//$("img").attr("src","img/img1.jpg");//此时不能使用隐式迭代了，因为每个元素的属性值不同
//var arr = $("img");
/*
for(var i=0;i<arr.length;i++){
arr[i].src = "img/img"+(5-i)+".jpg";
}
*/
$("img").each(function(i){
//this.src = "img/img"+(5-i)+".jpg";
$(this).attr("src","img/img"+(5-i)+".jpg");
});
}
</script>
</head>
<body>
<h3>注册用户</h3>
<form action="doRegister.jsp" method="get">
<table border="0" width="40%">
<tr>
<td>手机号码</td>
<td><input type="text" name="username" id="username" value="请输入姓名"/></td>
</tr>
<tr>
<td>密 码</td>
<td><input type="password" name="pwd" id="pwd" /></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="repwd" id="repwd"/></td>
</tr>
<tr>
<td> </td>
<td><input type="checkbox" name="agreement" id="agreement" onchange="changeSubmit()"/>我同意该协议</td>
</tr>
<tr>
<td colspan="2" align="center">
<input id="sub1" type="submit" disabled="disabled" value="提交" />
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>

<a id="a1" href="http://www.taobao.com" target="_blank">淘宝</a>
<input type="button" value="改变超链接" onclick="changeA()"/>
<hr />
<img src="img/img1.jpg"/>
<img src="img/img2.jpg"/>
<img src="img/img3.jpg"/>
<img src="img/img4.jpg"/>
<img src="img/img5.jpg"/>
<input type="button" value="改变图片" onclick="changeImg()"/>
</body>
</html>

DOM节点操作
append()、appendTo() 添加子元素（末尾）
prepend() prependTo() 添加子元素（前置）
insertBefore()、before() 添加平级元素（前面）
insertAfter() 、 after()添加平级元素（后面）

replaceWith()和replaceAll() 用于替换某个节点
remove() 删除元素 empty() 删除子元素

$作用4：$(HTML代码)
将HTML代码转换成jQuery对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM操作-操作元素</title>
<style type="text/css">
div{
font-size:16px;
border:1px solid #003a75;
margin:5px;
}
.myClass{
background-color:#7FFFD4;
}
</style>

<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var newDiv = $("<div><p>口才训练课</p></div>")
//append()、appendTo() 添加子元素（末尾）
//$("div").append(newDiv);
//newDiv.appendTo($("div:first"));
//prepend() prependTo() 添加子元素（前置）
//$("div").prepend(newDiv);
//newDiv.prependTo($("div:last"));
//insertBefore()、before() 添加平级元素（前面）
//$("div:first").before(newDiv);
//insertAfter() 、 after()添加平级元素（后面）
//$("div:first").after(newDiv);

//
//replaceWith()和replaceAll() 用于替换某个节点
//$("div:last").replaceWith(newDiv);
//remove() 删除元素 empty() 删除子元素
//$("div:first").remove(); //自己讲自己删除
//$("div:first").empty();

//删除上级（多层上级）
//$("#p1").parent().parent().remove();
//$("#p1").parents("body").remove();
//删除自己
//$("#p1").remove();
//删除下级（多层下级）
//$("#div1").children().remove();
//$("#div1").find("p#p1").remove();

//删除平级
//$("#p8").nextAll().remove();
$("p").has("span").remove();
});

</script>
</head>
<body>

<div id="div1">
<p id="p1">1. JavaSE</p>
<p>2. Oracle</p>
</div>

<div>
<p>3. HTML/CSS/JS</p>
<p>4. jQuery/EasyUI</p>
<p>5. JSP/Servlet/Ajax</p>

</div>

<div>
<p>6. SSM</p>
<p>7. SpringBoot/SpringCloud/SpringData</p>
<p id="p8">8. Maven/Linux</p>
<p><span>9. Redis/Solr/Nginx</span></p>
    <p>10. SpringBoot/SpringCloud/SpringData</p>
</div>

<div>
<p>11. 就业指导</p>
</div>
</body>
</html>

通过函数间接的查找元素
平级元素 first() last()
next() nextAll() prev() prevAll()
siblings() has()
上级元素：parent() parents()
下级元素：children() find()

以上很多函数可以通过选择器直接实现

注意：如果html代码中出现了多级单引号和双引号，需要使用转义字符来实现转义，保证正确运行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM操作-操作元素</title>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function addFileItem2(){
//1.创建一个tr
var newRow = $('<tr>'+
'<td> </td>'+
'<td>'+
'<input type="file" name="photo" id="photo"/>'+
'<input type="button" value="删除" onclick="delFileItem(this)"/>'+
'</td>'+
'</tr>');
//2.将新创建的tr加入到指定的位置
$("#lastrow").before(newRow);
}
function delFileItem2(obj){
//console.info(obj);
//$(obj).parent().parent().remove();
$(obj).parents("tr").remove();
}

function addFileItem(){
//1.创建一个tr
var newRow = $('<tr>'+
'<td> </td>'+
'<td>'+
'<input type="file" name="photo" id="photo"/>'+
'<input type="button" value="删除" onclick="delFileItem(\'bjsxt\')"/>'+
'</td>'+
'</tr>');
//2.将新创建的tr加入到指定的位置
$("#lastrow").before(newRow);
}
function delFileItem(obj){
//console.info(obj);
//$(obj).parent().parent().remove();
//$(obj).parents("tr").remove();
alert(obj);
//console.info(this);
}
</script>
</head>
<body>
<h3>注册用户</h3>
<form action="doRegister.jsp" method="get">
<table id="table1" border="1" width="40%">
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username" value="请输入姓名"/></td>
</tr>
<tr>
<td>照片 </td>
<td>
<input type="file" name="photo" id="photo"/>
<input type="button" value="添加" onclick="addFileItem()"/>
</td>
</tr>


<tr id="lastrow">
<td colspan="2" align="center">
<input type="submit" value="提交" />
<input type="reset" value="重置"/>
</td>
</tr>

</table>
</form>
</body>
</html>