<style type="text/css">
#aa{ color:#F90}
</style>
<script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="aa" style="width:100px; height:100px; background-color:#63F">端口号非空</div>
<div class="aa"></div>
<span class="aa"></span>
<input name="aa" type="text" bs="1" id="cc" />
<input type="button" value="测试" class="test" />
<input type="button" value="测试1" class="test" />
<input type="button" value="测试2" class="test" />
<input type="button" value="测试3" class="test" />
<input type="button" value="测试4" class="test" />
</body>
<script type="text/javascript">
JS
取元素
var a = document.getElementById("aa"); //DOM对象
var a = document.getElementsByClassName("aa");
var a = document.getElementsByTagName("div");
var a = document.getElementsByName("aa");
操作内容
非表单元素
a.innerText = "ceshi";
alert(a.innerText);
a.innerHTML = "<span style='color:red'>hello</span>";
alert(a.innerHTML);
表单元素
a.value = "请输入用户名";
alert(a.value);
操作属性
alert(a.getAttribute("bs")); //获取属性
a.setAttribute("test","test"); //添加属性
a.removeAttribute("bs"); //移除属性
操作样式
alert(a.style.color); //获取样式，只能获取内联
a.style.color = "green"; //设置样式
Jquery
取元素
var a = $("#aa"); //Jquery对象
var a = $(".aa"); //根据class名找
alert(a.eq(0)); //取第几个jquery对象
var a = $("div"); //根据标签名找
var a = $("[bs=1]"); //根据属性找
操作内容
非标单元素
a.text("hello");
alert(a.text());
a.html("aaa");
alert(a.html());
表单元素
a.val("aa");
alert(a.val());
操作属性
a.attr("test","test"); //添加属性
alert(a.attr("bs")); //获取属性
a.removeAttr("bs"); //移除属性
操作样式
alert(a.css("color")); //获取样式
a.css("background-color","red"); //设置样式，可以操作内联、内嵌、外联
加事件
$("#cc").blur(function(){ //匿名函数
alert("失去焦点了");
})
//事件一般有两个参数：事件源 事件数据
//Jquery事件源不写，事件数据可写可不写
//批量加事件
$(".test").click(function(e){
alert($(this).val());
alert(e.clientX);
})
</script>
