<!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>
全部
//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"},
};
Json数据