03-jQuery操作元素
jQuery操作元素的属性：
<html>
<head>
<title>jQuery操作元素的属性</title>
<meta charset="UTF-8"/>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<!--
jQuery操作元素属性：
获取:
对象名.attr("属性名") //返回当前属性值
注意此种方式不能获取value属性的实时数据，使用对象名.val()进行获取。
修改
对象名.attr("属性名","属性值");
-->
<!--声明js代码域-->
<script type="text/javascript">
function testField(){
//获取元素对象
var uname=$("#uname");
//获取
alert(uname.attr("type")+":"+uname.attr("value")+":"+uname.val());
}
function testField2(){
//获取元素对象
var uname=$("#uname");
uname.attr("type","button");
}
</script>
</head>
<body>
<h3>jquery操作元素属性</h3>
<input type="button" name="" id="" value="测试获取元素属性" onclick="testField()" />
<input type="button" name="" id="" value="测试修改元素属性" onclick="testField2()" />
<hr />
用户名:<input type="text" name="uname" id="uname" value="哈哈" />
</body>
</html>
jQuery操作元素：
<html>
<head>
<title>jQuery操作元素HTML</title>
<meta charset="UTF-8"/>
<!--引入jQuery文件-->
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<!--
jquery 操作元素内容学习：
获取元素对象
1、获取
对象名.html()//返回当前对象的所有内容，包括HTML标签。
对象名.text()//返回当前对象的文本内容，不包括HTML标签
2、修改
对象名.html("新的内容")//新的内容会将原有内容覆盖，HTML标签会被解析执行
对象名.text("新的内容")//新的内容会将原有内容覆盖，HTML标签不会被解析
-->
<!--声明js代码域-->
<script type="text/javascript">
//声明函数
function testHtml(){
//获取元素对象
var showdiv=$("#showdiv");
//获取元素的内容
alert(showdiv.html());
}
function testHtml2(){
//获取元素对象
var showdiv=$("#showdiv");
//修改元素内容
showdiv.html(showdiv.html()+"<i>今天天气真好，适合抓鬼子</i>");
}
function testText(){
//获取元素对象
var showdiv=$("#showdiv");
//获取元素内容
alert(showdiv.text());
}
function testText2(){
//获取元素对象
var showdiv=$("#showdiv");
//修改元素内容
showdiv.text("<i>今天天气真好，适合抓鬼子</i>");
}
</script>
</head>
<body>
<h3>操作元素HTML</h3>
<input type="button" name="" id="" value="测试获取元素内容--html()" onclick="testHtml()" />
<input type="button" name="" id="" value="测试修改元素内容--html()" onclick="testHtml2()" />
<input type="button" name="" id="" value="测试获取元素内容--text()" onclick="testText()" />
<input type="button" name="" id="" value="测试修改元素内容--text()" onclick="testText2()" />
<div id="showdiv">
<b>皇军，前面有八路的干活</b>
</div>
</body>
</html>
操作元素样式<：
<html>
<head>
<title>操作元素样式</title>
<meta charset="UTF-8"/>
<!--声明css-->
<style type="text/css">
#showdiv{
width: 300px;
height: 300px;
border: solid 1px;
}
.common{
width: 300px;
height: 300px;
border: solid 1px;
background-color: blueviolet;
}
.dd{
font-size: 30px;
font-weight: bold;
}
</style>
<!--引入jQuery文件-->
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<!--
jquery操作元素的样式
1、使用css()
对象名.css("属性名")//返回当前属性的样式值
对象名.css("属性名","属性值")//增加、修改元素的样式
对象名.css({"样式名":"样式值","样式名":"样式值"……})//使用json传参，提升代码书写效率。
2、使用addClass()
对象名.addClass("类选则器名")//追加一个类样式
对象名.removeClass("类选择器 名")//删除一个指定的类样式
-->
<!--声明js代码域-->
<script type="text/javascript">
//jQuery操作样式---css()
function testCss(){
//获取元素对象
var showdiv=$("#showdiv");
//操作样式--增加
showdiv.css("background-color","orange");
//操作样式--获取
alert(showdiv.css("width"));
}
function testCss2(){
//获取元素对象
var div=$("#div01");
//操作样式
div.css({"border":"solid 1px","width":"300px","height":"300px"});
}
//jquery操作样式--addClass()
function testAddClass(){
//获取元素对象
var div=$("#div01");
//操作元素样式
div.addClass("common");
}
function testAddClass2(){
//获取元素对象
var div=$("#div01");
//操作元素样式
div.addClass("dd");
}
function testRemoveClass(){
//获取元素对象
var div=$("#div01");
//删除元素样式
div.removeClass("dd");
}
</script>
</head>
<body>
<h3>操作元素样式</h3>
<input type="button" name="" id="" value="操作样式---css()" onclick="testCss()" />
<input type="button" name="" id="" value="操作样式---css()--json" onclick="testCss2()" />
<input type="button" name="" id="" value="操作样式---addClass()" onclick="testAddClass()" />
<input type="button" name="" id="" value="操作样式---addClass()--2" onclick="testAddClass2()" />
<input type="button" name="" id="" value="操作样式---removeClass" onclick="testRemoveClass()" />
<hr />
<div id="showdiv">
</div>
<div id="div01" class="common dd">
我是div01
</div>
</body>
</html>
操作文档结构：
<html>
<head>
<title>操作文档结构</title>
<meta charset="UTF-8"/>
<!--引入jQuery文件-->
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<!--
操作文档结构学习：
获取元素对象
1、内部插入
append("内容") 将指定的内容追加到对象的内部
appendTo(元素对象或者选择器) 将制定的元素对象追加到指定的对象内容
prepend() 将指定的内容追加到对象的内部的前面
prependTo() 将制定的元素对象追加到指定的对象内容前面
2、外部插入
after 将指定的内容追加到指定的元素后面
before 将指定的内容追加到指定的元素前面
insertAfter 把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
3、包裹
4、替换
5、删除
empty()
-->
<!--声明js代码域-->
<script type="text/javascript">
//内部插入
function testAppend(){
//获取元素对象
var div=$("#showdiv");
//使用内部插入
div.append("<i>，饭</i>");
}
function testAppendTo(){
//获取元素对象
var div=$("#showdiv");
//使用appendTo()
$("#u1").appendTo(div);
}
function testPrepend(){
//获取元素对象
var div=$("#showdiv");
//使用prepend()
div.prepend("<i>你好，</i>");
}
//外部插入
function testAfter(){
//获取元素对象
var div=$("#showdiv");
//使用after外部插入
div.after("<b>今天天气不错，适合学习</b>");
}
function testBefore(){
//获取元素对象
var div=$("#showdiv");
//使用before外部插入
div.before("<b>今天天气不错，适合学习</b>")
}
function testEmpty(){
$("#showdiv").empty()
}
</script>
<style type="text/css">
#showdiv{
width: 300px;
height: 300px;
border: solid 3px orange;
}
</style>
</head>
<body>
<h3>操作文档结构</h3>
<input type="button" name="" id="" value="测试append" onclick="testAppend()" />
<input type="button" name="" id="" value="测试appenTo" onclick="testAppendTo()" />
<input type="button" name="" id="" value="测试prepend" onclick="testPrepend()" />
<hr />
<input type="button" name="" id="" value="测试after" onclick="testAfter()" />
<input type="button" name="" id="" value="测试before" onclick="testBefore()" />
<input type="button" name="" id="" value="测试删除--empty()" onclick="testEmpty()" />
<hr />
<u id="u1">每天下午都是充斥着面包浓浓的香味</u>
<div id="showdiv">
<b>今天中午吃什么</b>
</div>
</body>
</html>
操作表格：
<html>
<head>
<title>jQuery操作表格</title>
<meta charset="UTF-8"/>
<!--
jQuery学习的内容：
1、jQuery的封装原理（闭包，匿名自调用）
2、jQuery的选择器
3、jQuery操作元素的属性、内容、样式、文档结构
4、jQuery中的事件
5、jQuery中的动画
注意：
一定不要二合一操作
js、jQuery是动态的脚本语言，用来操作HTML的，让网页和用户之间互动
HTML用来格式化展示信息
CSS用来增加网页样式
都是由浏览器解析执行的
注意：
所有的网页都是存储在服务器端，运行在浏览器端。
所有的网页都是服务器实时的根据请求发送给浏览器执行的。
所有的网页数据可以实现动态的拼接。
-->
<!--
1、jquery操作checkbox
操作checkbox的选择状态使用prop()方法
prop("checked")//返回选择的状态，选择返回true,未选返回false
prop("checked",true)//置为选择状态
prop("checked",false)//置为未选状态
使用each进行遍历
对象名.each(fn)//在遍历的时候会给每个对象默认执行fn函数
this表示js对象
$(this)表示jQuery对象
parents("标签名")//获取指定的上级元素对象
parent()
2、jQuery操作表格
-->
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//实现全选
$(function(){
//给按钮绑定单击事件
$("#btn1").click(function(){
//实现全选
$("input[type='checkbox']").prop("checked",true);
});
})
//实现取消选择
$(function(){
//给按钮绑定事件
$("#btn2").click(function(){
//实现全不选
$("input[type='checkbox']").prop("checked",false);
})
})
//反选
$(function(){
//给按钮绑定事件
$("#btn3").click(function(){
$("input[type='checkbox']").each(function(){
//alert(this.checked);
$(this).prop("checked",!$(this).prop("checked"));
})
})
})
//选择奇数行
$(function(){
$("#btn4").click(function(){
$("input[type=checkbox]:odd").prop("checked",true)
})
})
//隔行变色
$(function(){
$("#btn5").click(function(){
$("tr:odd").css("background-color","orange");
})
})
//删除选中的行
$(function(){
$("#btn6").click(function(){
$(":checkbox:checked").parents("tr").remove();
})
})
//添加行---操作文档结构
$(function(){
$("#btn7").click(function(){
$("tr:last").after("<tr><td><input type='checkbox' name='chk' id='chk' value='' /></td><td>"+name+"</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>");
})
})
</script>
<style type="text/css">
tr{
height: 35px;
}
td{
width: 100px;
}
</style>
</head>
<body>
<h3>操作表格</h3>
<input type="button" name="" id="btn1" value="全选" />
<input type="button" name="" id="btn2" value="全不选" />
<input type="button" name="" id="btn3" value="反选" />
<input type="button" name="" id="btn4" value="选择奇数行" />
<input type="button" name="" id="btn5" value="隔行变色" />
<input type="button" name="" id="btn6" value="删除行" />
<input type="button" name="btn7" id="btn7" value="添加行" />
<hr />
<table border="1px">
<tr>
<td><input type="checkbox" name="chk" id="chk" value="" /></td>
<td>12344</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="chk" value="" /></td>
<td>12355</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="chk" value="" /></td>
<td>12366</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="chk" value="" /></td>
<td>12377</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</table>
</body>
</html>
