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.设置图片的高度属性
* 3.给图片设置多个属性(宽度和高度)
* 4.移出图片的高度属性
*/
/**
* 方法分析：
* 1.attr(name):读(获)取属性的值
* 2.attr(key,value)：设置属性值
* 3.attr(properties)：同时设置多个属性
* 4.removeAttr(name)：删除某个属性
*
* 所有方法注意查看运行显示结果，查看其中的某个方法时，请注释其它方法，后面的案例不再说明！
*/
/*
* 代码实现
*/
$(function(){
//1.attr(name):该方法用于获取属性的值(根据属性的名称)
var srcEle = $("img").attr("src");
alert(srcEle);//输出结果为该图片的路径：../../img/1.jpg
//2.attr(key,value):该方法用于设置属性和值
$("img").attr("height","800px");//设置该图片的高度属性，注意观察图片的高度变化
//3.attr(properties)：同时设置多个属性值
//$("img").attr({"width":"1300px","height":"300px"});//注意观察图片发生的变化(宽高都改变)
//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的背景颜色变为 黄色
* 2.点击button，清空之前设置的背景颜色
* 3.通过toggleClass(class) 实现点击字体变为紅色，再点击样式还原
*/
/**
* 方法分析：
* 1.addClass(class) 添加一个class属性
* 2.removeClass([class]) 移除一个class属性
* 3.toggleClass(class) 如果存在(不存在)就删除(添加)一个类
*/
/**
*代码实现
*/
$(function() {
// 1.点击button，使一个div的背景颜色变为黄色
$("#button1").click(function() {
$("#div1").addClass("div1");
});
// 2.点击button，清空之前设置的背景颜色
$("#button2").click(function() {
$("#div1").removeClass("div1");
});
// 3.通过toggleClass(class) 实现点击字体变为紅色，再点击样式还原
$("#button3").click(function() {
$("#div1").toggleClass("divclass");
});
});
</script>
</head>
<body>
<div id="father">
<div id="div1">AAAAAA</div><br />
<input type="button" value="背景颜色变为黄色" id="button1" />
<input type="button" value="背景颜色清空" id="button2" />
<input type="button" value="字体颜色开关" 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.点击按钮设置div中html
*/
/**
* 方法分析
* 1.html()方法用于读取innerHTML
* 2.html(val)方法用于设置innerHTML
*/
/**
*代码实现
*/
$(function(){
//1.点击按钮获取div中 html
$("#btn1").click(function(){
var divEle = $("div").html();
alert(divEle);//<p>CSDN</p>
});
//2.点击按钮设置div中html
$("#btn2").click(function(){
$("div").html("Java学院");//覆盖之前此位置的内容
});
})
</script>
</head>
<body>
<div><p>CSDN</p></div>
<input type="button" value="获取html" id="btn1" />
<input type="button" value="设置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.点击按钮设置div中text
*/
/**
* 方法分析
* 1.text()方法用于读取文本内容
* 2.text(val)方法用于设置文本内容
*/
/**
*代码实现
*/
$(function(){
//1.点击按钮获取div中 text
$("#btn1").click(function(){
var divEle = $("div").text();
alert(divEle);//CSDN
});
//2.点击按钮设置div中text
$("#btn2").click(function(){
$("div").text("Java学院");//覆盖之前此位置的内容
});
})
</script>
</head>
<body>
<div><p>CSDN</p></div>
<input type="button" value="获取text" id="btn1" />
<input type="button" value="设置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.点击按钮设置用户名的默认值为“老王”
*/
/**
* 方法分析
* 1.val()方法用于读取元素value属性
* 2.val(val)方法用于设置元素value属性
*/
/**
*代码实现
*/
$(function(){
//1.点击按钮获得文本框、下拉框、单选框选中的value
$("#btn1").click(function(){
alert($("#username").val());
alert($("#city").val());
alert($("input[type='radio']:checked").val());
});
//2.点击按钮设置用户名的默认值为“老王”
$("#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="设置val" id="btn2" />
</body>
</html>
