JS方式
1.根据ID取元素,DOM对象
var div=document.getElementById("one");
2.根据class取元素
var div=document.getElementsByClassName("test");
3.根据name取
var bd=document.getElementsByName("uid");//取到数组
alert(bd[0]);
4.根据标签名取
var div=document.getElementsByTagName("div");
操作内容
1.非表单元素
alert(div.innerText);//取值 针对文本
div.innerText="aaaa";//赋值
div.innerHTML;
2.表单元素
div.value //取值不加参数，赋值加参数
操作属性
div.setAttribute("","");
div.removeAttribute("");
div.getAttribute("");
操作样式
div.style.backgroundColor="red";
alert(div.style.color);只能获取内联样式
在数组里，如果要取DOM对象使用索引方式，如果要取JQuery对象使用eq()
Jquery方式
1.根据ID取元素，Jquery对象
var div=$("#one");//id # class . 标签名直接放
alert(div[0]);
2.根据class取元素
var div=$(".test");
div[0][0];
div.eq();
3.根据属性取
var bd=$("[bs='aa']")//属性用[]
alert(bd[0]);
4.根据标签名取
var div=$("div");
alert(div[0]);
5.组合选取
var div=$("div span");
alert(div[0]);
操作内容
1.非表单元素
alert(div.text());//取值
div.text("aaaa");//赋值
div.html();
2.表单匀速
div.val();//取值不加参数，赋值加参数
操作属性
div.attr("test","aa");//设置
div.removeAttr("test");
div.attr("test");//获取
操作样式
div.css("background-color","yellow");
alert(div.css("color"));
操作元素
var str="<div id='abc' style='100px; height:100px;background-color:red'></div>";
div.html(str);//替换
div.append(str);//追加元素
$("#abc").remove();//移除元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
<style type="text/css">
#one
{
color:#0F0;
font-size:36px;
background-color:#FC6;
}
</style>
</head>
<body>
<div id="one"><span>one</span></div>
<div class="test" bs="aa">two</div>
<div class="test">three</div>
<div class="test">four</div>
<input type="text" name="uid" bs="aa" id="uid" onblur="Show()"/>
<input type="button" id="btn" value="取消绑定"/>
<input type="button" id="add" value="绑定事件"/>
</body>
<script type="text/jscript">
$(document).ready(function(e) {
//JS方式
//1.根据ID取元素,DOM对象
//var div=document.getElementById("one");
//2.根据class取元素
//var div=document.getElementsByClassName("test");
//3.根据name取
//var bd=document.getElementsByName("uid");//取到数组
//alert(bd[0]);
//4.根据标签名取
//var div=document.getElementsByTagName("div");
//操作内容
//1.非表单元素
//alert(div.innerText);//取值 针对文本
//div.innerText="aaaa";//赋值
//div.innerHTML;
//2.表单元素
//div.value //取值不加参数，赋值加参数
//操作属性
//div.setAttribute("","");
//div.removeAttribute("");
//div.getAttribute("");
//操作样式
//div.style.backgroundColor="red";
//alert(div.style.color);只能获取内联样式
//在数组里，如果要取DOM对象使用索引方式，如果要取JQuery对象使用eq()
//Jquery方式
//1.根据ID取元素，Jquery对象
var div=$("#one");//id # class . 标签名直接放
//alert(div[0]);
//2.根据class取元素
//var div=$(".test");
//div[0][0];
//div.eq();
//3.根据属性取
//var bd=$("[bs='aa']")//属性用[]
//alert(bd[0]);
//4.根据标签名取
//var div=$("div");
//alert(div[0]);
//5.组合选取
//var div=$("div span");
//alert(div[0]);
//操作内容
//1.非表单元素
//alert(div.text());//取值
//div.text("aaaa");//赋值
//div.html();
//2.表单匀速
//div.val();//取值不加参数，赋值加参数
//操作属性
//div.attr("test","aa");//设置
//div.removeAttr("test");
//div.attr("test");//获取
//操作样式
//div.css("background-color","yellow");
//alert(div.css("color"));
//操作元素
//var str="<div id='abc' style='100px; height:100px;background-color:red'></div>";
//div.html(str);//替换
//div.append(str);//追加元素
//$("#abc").remove();//移除元素
/*$(".test").click(function(){
alert($(this).text());
});//点击事件*/
//先找到元素，通过.选择事件
$(".test").bind("click",function(){//bind绑定
alert($(this).text());
});//点击事件
$("#btn").click(function(){
$(".test").unbind("click");//unbind解绑
});
$("#add").click(function(){
$(".test").bind("click",function(){
alert($(this).text());
});
});
});
/*function Show()
{
alert($("#one").text());
//alert("aa");
}*/
</script>
</html>