JQuery（二）val()、html()、text()
属性操作：val()、html()、text()：
val():获取页面元素的value属性值。
val(值):为页面元素设置value属性值
html():获取页面元素的html代码，如果有标签，一并获取。
html(值)：为页面元素设置html代码。如果有标签，则进行解析
text():获取页面元素的纯文本内容。如果有标签，忽略
text(值):为页面元素设置文本内容。如果有标签，原样输出
val用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性val操作页面</title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
//获取到页面元素的value属性值
/*var name = $("#username").val();
alert(name);
var pwd = $("#pwd").val();
alert(pwd);
var sex = $("input[type='radio']:checked").val();
alert(sex);*/
var kecheng = $("select option:selected").val();
alert(kecheng);
})
$("#btn2").click(function(){
$("#username").val("李四");
})
})
</script>
</head>
<body>
<form action="" method="">
用户名：<input type="text" id="username" value=""/><br/>
密码：<input type="password" id="pwd" value=""/><br/>
性别：<input type="radio" id="nan" value="男" name="sex"/>男
<input type="radio" id="nv" value="女" name="sex"/>女
<br/>
课程选择：
<select id="kecheng">
<option>--请选择--</option>
<option value="数学" selected>数学</option>
<option value="英语">英语</option>
<option value="语文">语文</option>
</select>
<hr />
<input type="button" value="获取val的值" id="btn1"/>
<input type="button" value="设置val()的值" id="btn2"/>
</form>
</body>
</html>
text用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性text操作页面</title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
var str = $("#divId1").text();
alert(str);
})
$("#btn2").click(function(){
$("#divId2").text("<span style='color:red;'>第二个极客营</span>");
})
})
</script>
</head>
<body>
<input type="button" value="获取text()的值" id="btn1"/>
<input type="button" value="设置text()的值" id="btn2"/>
<div id="divId1"><span>欢迎大家来到极客营</span></div>
<div id="divId2"></div>
</body>
</html>
html用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性html操作页面</title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
var str = $("#divId1").html();
alert(str);
})
$("#btn2").click(function(){
$("#divId2").html("<span style='color:red;'>第二个极客营</span>");
})
})
</script>
</head>
<body>
<input type="button" value="获取html()的值" id="btn1"/>
<input type="button" value="设置html()的值" id="btn2"/>
<div id="divId1"><span>欢迎大家来到极客营</span></div>
<div id="divId2"></div>
</body>
</html>
遍历函数：
方式一：$(ele).each(fn);
方式二：
$.each($ele,fn);
回调函数fn：function(index,docEle)
参数index：遍历的索引值
参数docEle：遍历当前对象 docile==this
方式一用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>遍历方式一$(ele).each(fn)的页面</title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
//遍历方式一：$(ele).each(fn)
$(function(){
$("#checkAll").click(function(){
var checkAll = this.checked;//这是全选的状态
$("input[name='hobby']").each(function(){
this.checked = checkAll;//把全选的状态值赋值给当前遍历对象的状态
})
})
})
</script>
</head>
<body>
兴趣爱好：<input type="checkbox" id="checkAll"/>全选/不全选<br />
<hr />
<input type="checkbox" value="足球" name="hobby" checked/>足球
<input type="checkbox" value="篮球" name="hobby"/>篮球
<input type="checkbox" value="排球" name="hobby"/>排球
<input type="checkbox" value="羽毛球" name="hobby"/>羽毛球
<input type="checkbox" value="乒乓球" name="hobby"/>乒乓球
</body>
</html>
方式二用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>遍历方式二$.each($ele,fn)的页面</title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
//遍历方式二$.each($ele,fn) 用的是最广泛的
$(function(){
//给按钮绑定事件
$("#checkAll").click(function(){
var checkAll = this.checked;//这是全选的状态
//$.each($ele,fn)：$ele：你要遍历的数组 i:遍历的下标 j:遍历的当前对象j==this
$.each($("input[name='hobby']"),function(i,j){
alert(i);
j.checked = checkAll;
})
})
})
</script>
</head>
<body>
兴趣爱好：<input type="checkbox" id="checkAll"/>全选/不全选<br />
<hr />
<input type="checkbox" value="足球" name="hobby" checked/>足球
<input type="checkbox" value="篮球" name="hobby"/>篮球
<input type="checkbox" value="排球" name="hobby"/>排球
<input type="checkbox" value="羽毛球" name="hobby"/>羽毛球
<input type="checkbox" value="乒乓球" name="hobby"/>乒乓球
</body>
</html>
文档处理：内部插入
A.append(B) :将B插入到A内部后面
B.appendTo(A) :将B插入到A内部后面。
<A>
…….
<B></B>
</A>
//HTML 代码: <p>I would like to say: </p> //jQuery 代码: $("p").append("<b>Hello</b>"); //结果: [ <p>I would like to say: <b>Hello</b></p> ]
A.prepend(B):将B插入到A内部前面
B.prependTo(A):将B插入到A内部前面。
<A>
<B></B>
…………..
</A>
三种：将html添加至指定元素内部前面
//HTML 代码: <p>I would like to say: </p> //jQuery 代码: $("p").prepend("<b>Hello</b>"); //结果: [ <p><b>Hello</b>I would like to say: </p> ]
将一个DOM元素前置入所有段落
//HTML 代码: <p>I would like to say: </p> <p>I would like to say: </p> <b class="foo">Hello</b> <b class="foo">Good Bye</b> //jQuery 代码: $("p").prepend( $(".foo")[0] ); //结果: <p><b class="foo">Hello</b>I would like to say: </p> <p><b class="foo">Hello</b>I would like to say: </p> <b class="foo">Hello</b> <b class="foo">Good Bye</b>
向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。
//HTML 代码: <p>I would like to say: </p><b>Hello</b> //jQuery 代码: $("p").prepend( $("b") ); //结果: <p><b>Hello</b>I would like to say: </p>
内部插入的案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery内部插入操作</title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
//创建元素
//document.createElement("option");
$(function(){
$("#btn").click(function(){
var node_A = $("#selectAll");
var newNode_B = $("<option value='武汉市'>武汉市</option>")
/*内部插入：
* A.append(B) :将B插入到A内部后面
* A.appendTo(B) :将A插入到B内部后面
* A.prepend(B):将B插入到A内部前面
* A.prependTo(B):将A插入到B内部前面
*/
//node_A.append(newNode_B);
//newNode_B.appendTo(node_A);
node_A.prepend(newNode_B);
/*外部插入：
* A.after(B):将B插入到A的后面
* A.before(B):将B插入到A的前面
* A.inserAfter(B)
* A.inserBefore(B)
*/
$("#su").before(newNode_B);
})
})
</script>
</head>
<body>
城市选择：
<select id="selectAll">
<option value="无锡市">无锡市</option>
<option value="苏州市" id="su">苏州市</option>
<option value="常州市">常州市</option>
<option value="南京市">南京市</option>
</select>
<br />
<input id="btn" type="button" value="点我"/>
</body>
</html>
删除：
两种方式：
$ele.empty()：清空元素内部所有内容（文本或者子元素），保留当前元素
$ele.remove()：删除当前元素
remove()用法一：
//从DOM中把所有段落删除 //HTML 代码: <p>Hello</p> how are <p>you?</p> //jQuery 代码: $("p").remove(); //结果: how are
remove()用法二：
//从DOM中把带有hello类的段落删除 //HTML 代码: <p class="hello">Hello</p> how are <p>you?</p> //jQuery 代码: $("p").remove(".hello"); //结果: how are <p>you?</p>
删除案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery删除操作的页面</title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
// $ele.empty():清空元素内部所有的内容(文本或子元素),保留当前元素
// $ele.remove():删除当前元素
$(function(){
$("#btn1").click(function(){
$("#selectAll").empty();
})
$("#btn2").click(function(){
$("#selectAll").remove();
})
})
</script>
</head>
<body>
城市选择：
b
<br />
<input id="btn1" type="button" value="点我empty"/>
<input id="btn2" type="button" value="点我remove"/>
</body>
</html>
