<!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 type="text/javascript" src="jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="aa" bs="test"><span>DIV1</span></div>
<div id="bb" class="a">DIV2</div>
<div id="cc" class="a">DIV3</div>
<div id="dd" class="a">DIV4</div>
<input id="txt" bs="w" name="txt" value="hello" />
</body>
<script type="text/javascript">
$(document).ready(function(e) {
//1.找到元素
var a1 = document.getElementById("aa"); //JS找到的DOM对象
var bd = document.getElementById("txt");
//alert(a1);
//var a2 = $("#aa"); //Jquery找到的是Jquery对象
var bd1 = $("#txt");
//alert(a2[0]);
var b1 = document.getElementsByClassName("a");
var b2 = $(".a");
//alert(b2.eq(0)[0]);
document.getElementsByTagName("div");
$("div");
document.getElementsByName("txt");
var c1 = $("[name=txt]"); //属性筛选
//alert(c1[0]);
//2.操作内容
//alert(a1.innerHTML);
//a1.innerHTML = "<span style='color:red'>hello</span>";
//a1.innerText="<span style='color:red'>hello</span>";
//alert(bd.value);
//bd.value = "world";
//alert(a2.text());
//a2.text("hello");
//alert(a2.html());
//a2.html("<span style='color:red'>hello</span>");
//alert(bd1.val());
//bd1.val("world");
//3.操作属性
//a1.getAttribute("bs");
//a1.setAttribute("bs","");
//a1.removeAttribute("bs");
//alert(a2.attr("bs"));
//a2.attr("bs","testjquery");
//4.操作样式
//a1.style.color = "red";
//a1.style.fontSize = "24px";
//alert(a2.css("color"));
//a2.css("background-color","pink");
//5.事件
$("#aa").click(function(){
$(this).css("background-color","red");
alert("aa");
})
$(".a").click(function(){
var s1 = $(this).text();
alert(s1);
})
//6.Json数据
var js = {
"a":"hello",
"b":123,
"c":[1,2,3],
"d":{"aa":5555,"bb":"hello world"},
};
});
</script>
</html>
