jQuery操作
☀jQuery操作
☽★☆☛
<script src="../jquery-1.11.2.min.js"></script>
<style type="text/css">
#one
{
color:red;
font-size:30px;
background-color:#60F;
}
</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" />
<input type="button" id="btn" value="取消绑定" />
<input type="button" id="add" value="绑定事件" />
</body>
<script type="text/javascript">
$(document).ready(function(e) {
ready 页面加载完成，function是匿名函数
e 是事件里面的一个参数，可以不写
引用jquery包，.js结尾
.min.js结尾：这是压缩的
*<script
src="">script>调用jQuery
☀JS方式
☽选取元素
☆1.根据ID取元素，DOM对象,只能取到一个具体的元素
var div = document.getElementById("one");
☆2.根据class取元素，取到一个数组
var div = document.getElementsByClassName("test");
☆3.根据name取, 数组
var bd =
document.getElementsByName("uid");
☆4.根据标签名取
var div =
document.getElementsByTagName("div");
☽操作内容
☆
1.非表单元素
alert(div.innerText); 取值，div里面的文本
div.innerText = "aaaa";赋值，
div.innerHTML; 往里加HTML代码
☆ 2.表单元素
div.value
☽操作属性
div.setAttribute("","");设置属性
div.removeAttribute("");移除属性
div.getAttribute("");获取属性
☽操作样式
div.style.backgroundColor =
"red";
alert(div.style.color);只能获取内联样式
在数组里面如果要取DOM对象使用索引的方式，如果要取Jquery
☀JQUERY方式
☽选取元素
☆ 1.根据ID取元素，Jquery对象
var div = $("#one");//输出数组
alert(div[0]);//取出其中的DOM对象,索引方式
☆ 2.根据class取，取到数组，存jQuery对象
var div = $(".test");
alert(div.eq(0)[0]);
☆ 3.根据属性取
var bd = $("[bs='aa']");
☆ 4.根据标签名取,返回数组
var div = $("div");
☆ 5.组合选取
var div = $("div
span"); 标签的后代关系
☽操作内容
☆1.非表单元素
alert(div.text()); 取里面的文本内容
div.text("aaaa"); 赋值
div.html(); 不写参数是取值，写上参数是赋值
☆2.表单元素
div.val("aaa");不写参数是取值，写上参数是赋值
☽操作属性
div.attr("test","aa");
属性名，属性值
div.removeAttr("test");移除属性
div.attr("test");获取属性
☽操作样式
div.css("background-color","yellow");
与css样式表相同
alert(div.css("color"));可以获取内联内嵌的样式
☽操作元素
var str = "<div id='a'
style='width:100px; height:100px; background-color:red'></div>";
div.html();直接替换
div.append(str); 追加元素
$("#a").remove(); 移除某个元素
☽事件
$(".test").click(function(){
alert($(this).text());
})
$(".test").bind("click",function(){
alert($(this).text());this找到该元素本身，区分点击了谁
});
$("#btn").click(function(){
$(".test").unbind("click");
});
根据btn找到所有元素，添加一个点击事件
$("#add").click(function(){
$(".test").bind("click",function(){
alert($(this).text());this找到该元素本身，区分点击了谁
});
});
});
</script>
</html>
