想到之前所学的javascript 我们会想到这几个方面：找元素； 操作内容； 操作属性；操作样式；统一操作元素；
jquery 也是从这几个方面来学习的。
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>无标题文档</title> 4 <script src="jquery-1.11.2.min.js"></script> //首先要引入jquery包 5 <style type="text/css"> 6 #aa{ width:100px; height:100px;} 7 </style> 8 </head> 9 <body> /*举了几个例子*/ 10 <div id="aa" style="color:red"><span>aaaaaa</span></div> 11 <div class="a1">div1</div> 12 <div class="a1">div2</div> 13 <span class="a1" bs="1">span1</span> 14 <input type="text" name="uid" id="bd" value="aa" /> 15 </body>
1 找元素：（1）javascript 找元素
1 <script type="text/javascript"> 2 var a=document.getElementById("aa"); //获取ID 3 var a=document.getElementsByClassName("a1");//获取class 4 var a=document.getElementsByTagName("div");//找标签 5 var a=document.getElementsByName();//表单元素用的比较多 6 </script>
（2）jquery 找元素
1 <script type="text/javascript"> 2 var a = $("#aa"); 3 var a = $(".a1"); 4 alert(a.eq(2)); //读取的是span的class 5 var a = $("div"); 6 var a = $("[name=xx]");//如果是读取name值 可以直接赋值 7 </script>
2 操作内容
（1）javascript
var a = document.getElementById("aa")
//非标单元素 alert(a.innerText); //文本 alert(a.innerHTML); //HTML代码 //表单元素 alert(a.value); a.value="hello";
（2）jquery
var a=$("#aa") //非表单元素 alert(a.text()); a.text("bbbbb"); //直接更改 alert(a.html()); //表单元素 a.val("hello");
3 操作属性
（1）javascript
a.setAttribute("test","test"); //设置属性和属性值
a.removeAttribute("test");
alert(a.getAttribute("value"));
（2）jquery
a.attr("test","test"); //设置属性和属性值
a.removeAttr("test");//直接移除
alert(a.attr("value"));
a.prop("test","test");// 用prop 可以减少bug
a.removeProp("test");
alert(a.prop("test"));
4操作样式
（1）javascript
a.style.fontSize = "30px"; //无法获取外部样式表 alert(a.style.color);
（2）jquery
a.css("background-color","green");
alert(a.css("width")); //这里是从外部样式表获得的，可以直接读出
5 统一操作样式
（1）javascript
var d = document.getElementsByClassName("a1"); //获取的是cLassname 是一个数组 要利用循环才能修改每一个class for(var i=0;i<d.length;i++) { d[i].style.fontSize = "30px"; }
（2）jquery
$(".a1").css("font-size","30px"); //利用jquery可以直接修改
$(".ck").prop("checked",true); //可以直接添加元素
下面是一个全选的例子，用jquery来写非常方便
当点击全选的时候 下面的选项都被选中，移除后，都不选中
1 <script src="jquery-1.11.2.min.js"></script> 2 <script type="text/javascript"> 3 $("#ck").click(function() { 4 5 //$(this); //获取自身 6 //$(this).prop("checked"); 返回值是true,或者false 点击的时候是true,移除的时候是false 7 8 $(".ck").prop("checked",$(this).prop("checked")) 9 10 })
下面的例子是关于外部样式表的：
1 <script src="jquery-1.11.2.min.js"></script> 2 <style type="text/css"> 3 .aa{ width:100px; height:100px; float:left; background-color:green; margin:2px;} 4 </style> 5 </head> 6 7 <body> 8 9 <div class="aa"></div> 10 <div class="aa"></div> 11 <div class="aa"></div> 12 <div class="aa"></div> 13 14 </body>
如图所示：流式布局
我想做一个效果，就是点击某一个方块的时候就让它变红色（其他的方块是绿色的）
运用jquery来写
//首先要引用jquery包，我就不写了 从网上下载就可以 <script type="text/javascript"> $(".aa").click(function(){ $(".aa").css("background-color","green"); //原本的都是绿色的 $(this).css("background-color","red"); //点击的这个方块变红色 }) </script>
效果如图所示：