jQuery屬性操作
屬性attr操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>屬性操作_attr</title>
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
<script>
/**
* 需求：
* 1.獲取圖片的路徑
* 2.設(shè)置圖片的高度屬性
* 3.給圖片設(shè)置多個屬性(寬度和高度)
* 4.移出圖片的高度屬性
*/
/**
* 方法分析：
* 1.attr(name):讀(獲)取屬性的值
* 2.attr(key,value)：設(shè)置屬性值
* 3.attr(properties)：同時設(shè)置多個屬性
* 4.removeAttr(name)：刪除某個屬性
*
* 所有方法注意查看運行顯示結(jié)果，查看其中的某個方法時样屠，請注釋其它方法痪署，后面的案例不再說明！
*/
/*
* 代碼實現(xiàn)
*/
$(function(){
//1.attr(name):該方法用于獲取屬性的值(根據(jù)屬性的名稱)
var srcEle = $("img").attr("src");
alert(srcEle);//輸出結(jié)果為該圖片的路徑：../../img/1.jpg
//2.attr(key,value):該方法用于設(shè)置屬性和值
$("img").attr("height","800px");//設(shè)置該圖片的高度屬性浮入，注意觀察圖片的高度變化
//3.attr(properties)：同時設(shè)置多個屬性值
//$("img").attr({"width":"1300px","height":"300px"});//注意觀察圖片發(fā)生的變化(寬高都改變)
//4.removeAttr(name)：刪除某個屬性和值
$("img").removeAttr("width");//清除width屬性后牡拇，圖片變回其自身原有的大小
});
</script>
</head>
<body>
</body>
</html>
CSS類操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>屬性操作_CSS類</title>
<style type="text/css">
.divclass {
color: red;
}
.div1 {
background-color: yellow;
}
#div1 {
border: 1px solid black;
width: 400px;
height: 250px;
margin: auto;
}
#father {
border: 1px solid white;
width: 450px;
height: 300px;
margin: auto;
text-align: center;
}
</style>
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
<script>
/**
* 需求：
* 1.點擊button帚稠，使一個div的背景顏色變?yōu)?黃色
* 2.點擊button怎囚，清空之前設(shè)置的背景顏色
* 3.通過toggleClass(class) 實現(xiàn)點擊字體變?yōu)榧t色卿叽，再點擊樣式還原
*/
/**
* 方法分析：
* 1.addClass(class) 添加一個class屬性
* 2.removeClass([class]) 移除一個class屬性
* 3.toggleClass(class) 如果存在(不存在)就刪除(添加)一個類
*/
/**
*代碼實現(xiàn)
*/
$(function() {
// 1.點擊button，使一個div的背景顏色變?yōu)辄S色
$("#button1").click(function() {
$("#div1").addClass("div1");
});
// 2.點擊button恳守，清空之前設(shè)置的背景顏色
$("#button2").click(function() {
$("#div1").removeClass("div1");
});
// 3.通過toggleClass(class) 實現(xiàn)點擊字體變?yōu)榧t色考婴，再點擊樣式還原
$("#button3").click(function() {
$("#div1").toggleClass("divclass");
});
});
</script>
</head>
<body>
<div id="father">
<div id="div1">AAAAAA</div><br />
<input type="button" value="背景顏色變?yōu)辄S色" id="button1" />
<input type="button" value="背景顏色清空" id="button2" />
<input type="button" value="字體顏色開關(guān)" id="button3" />
</div>
</body>
</html>
HTML代碼操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>屬性操作_html代碼</title>
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
<script>
/**
* 需求：
* 1.點擊按鈕獲取div中 html
* 2.點擊按鈕設(shè)置div中html
*/
/**
* 方法分析
* 1.html()方法用于讀取innerHTML
* 2.html(val)方法用于設(shè)置innerHTML
*/
/**
*代碼實現(xiàn)
*/
$(function(){
//1.點擊按鈕獲取div中 html
$("#btn1").click(function(){
var divEle = $("div").html();
alert(divEle);//<p>CSDN</p>
});
//2.點擊按鈕設(shè)置div中html
$("#btn2").click(function(){
$("div").html("Java學(xué)院");//覆蓋之前此位置的內(nèi)容
});
})
</script>
</head>
<body>
<div><p>CSDN</p></div>
<input type="button" value="獲取html" id="btn1" />
<input type="button" value="設(shè)置html" id="btn2" />
</body>
</html>
文本text操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>屬性操作_文本text</title>
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
<script>
/**
* 需求：
* 1.點擊按鈕獲取div中text
* 2.點擊按鈕設(shè)置div中text
*/
/**
* 方法分析
* 1.text()方法用于讀取文本內(nèi)容
* 2.text(val)方法用于設(shè)置文本內(nèi)容
*/
/**
*代碼實現(xiàn)
*/
$(function(){
//1.點擊按鈕獲取div中 text
$("#btn1").click(function(){
var divEle = $("div").text();
alert(divEle);//CSDN
});
//2.點擊按鈕設(shè)置div中text
$("#btn2").click(function(){
$("div").text("Java學(xué)院");//覆蓋之前此位置的內(nèi)容
});
})
</script>
</head>
<body>
<div><p>CSDN</p></div>
<input type="button" value="獲取text" id="btn1" />
<input type="button" value="設(shè)置text" id="btn2" />
</body>
</html>
值val操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>屬性操作_值val</title>
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
<script>
/**
* 需求：
* 1.點擊按鈕獲得文本框、下拉框催烘、單選框選中的value
* 2.點擊按鈕設(shè)置用戶名的默認值為“老王”
*/
/**
* 方法分析
* 1.val()方法用于讀取元素value屬性
* 2.val(val)方法用于設(shè)置元素value屬性
*/
/**
*代碼實現(xiàn)
*/
$(function(){
//1.點擊按鈕獲得文本框沥阱、下拉框、單選框選中的value
$("#btn1").click(function(){
alert($("#username").val());
alert($("#city").val());
alert($("input[type='radio']:checked").val());
});
//2.點擊按鈕設(shè)置用戶名的默認值為“老王”
$("#btn2").click(function(){
$("#username").val("老王");
});
})
</script>
</head>
<body>
用戶名 <input type="text" id="username" /> <br/>
性別 <input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" checked="checked"/> 女<br/>
城市
<select id="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="廣州">廣州</option>
</select> <br/>
<input type="button" value="獲取val" id="btn1" />
<input type="button" value="設(shè)置val" id="btn2" />
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
