<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.min.js"></script>
<style type="text/css">
#aa{ 100px; height:100px;}
</style>
</head>
<body>
<div id="aa" style="color: #9A0000"><span>aaaaaa</span></div>
<div class="a1">div1</div>
<div class="a1">div2</div>
<span class="a1">span1</span>
<input type="text" name="uid" id="bd" value="aa">
<input type="checkbox" id="ck">全选
<br><br>
<input type="checkbox" class="ck">
<input type="checkbox" class="ck">
</body>
<script type="text/javascript">
//js.jquery找元素
//js找元素
// var a = document.getElementById("aa");//找id
//alert(a);
// var a = document.getElementsByClassName("a1");//找class.
// alert(a[2]);
//var a = document.getElementsByName("uid");//找name.
//alert(a[0]);
//var a = document.getElementsByTagName("div");//找div标签.
//alert(a[0]);
//jquery找元素
// var a = $("#aa");//找id
//lert(a);
// var a = $(".a1");//找class.
//alert(a.eq(2));//要想取某一个class用eq()方法.
//var a = $("div");//找div标签.
//alert(a[0]);
//var a = $("[name=uid]");//根据属性筛选
//alert(a);
//js.jQuery操作内容
//js操作内容
//非表单元素
//alert(a.innerText);//文本
//alert(a.innerHTML);//HTML代码
//表单元素
//alert(a.value);//获取表单值
//a.value="hello world";//改变里面的值
//Jquery操作内容
//非表单元素
//alert(a.text());//获取文本
//a.text("bbbbbb");//改变值
//alert(a.html());//HTML代码
//表单元素
//alert(a.val());//获取表单值
//a.val("bb");//修改表单里的值
//js.jquery操作属性
//js操作属性
//a.setAttribute("test","test");//添加属性
//a.removeAttribute("type");//删除属性
//alert(a.getAttribute("value"));//输出值
//jquery操作属性
//a.attr("text","text");//添加属性
//a.removeAttr("text");//删除属性
//alert(a.attr("value"));//输出值
//a.prop("text","text");//添加属性（这个方法不显示，但功能正常使用。）
//a.removeProp(a.prop("text"));//删除属性
//alert(a.prop("text"));//输出值
//js.jquery操作样式
//js操作样式
//a.style.fontSize = "30px";//通过style修改字体大小
//alert(a.style.color);//输出查看字体颜色
//jquery操作样式
//a.css("background-color","green");//背景颜色改为绿色
//alert(a.css("width"));输出查看宽度
//js.jquery统一操作样式
//js统一操作样式
// var d = document.getElementsByClassName("a1");
// for(var i = 0;i<d.length;i++)
// {
// d[i].style.fontSize = "30px";
// }
//jquery统一操作
//$(".a1").css("font-size","30px");//统一修改字体大小
// //点击事件
// $("#ck").click(function(){
// alert($(this));
// $(".ck").prop("checked",$(this).prop("checked"));
// })//全选
</script>
</html>