<script src="../jquery-1.11.2.min.js"></script>

<script type="text/javascript">

    根据ID取元素,取到的是具体的元素

    var a = document.getElementById("p1");

    根据CLASS取

    var a = document.getElementsByClassName("aa");

    根据标签名取

    var a = document.getElementsByTagName("div");

    根据name取

    var a = document.getElementsByName("cc");

    alert(a); 

    操作元素

    操作内容

        非表单元素

        a.innerText = "hello";

        a.innerHTML = "<span style='color:red'>world</span>";

        表单元素

        a.value = "hello";

    操作属性

        a.setAttribute("bs","1");

        a.getAttribute("bs");

        a.removeAttribute("bs");

    操作样式

        a.style.color = red;　　　　//只能获取内联属性

    三个DIV隐藏

    var a = document.getElementsByClassName("aa");

    for(var i=0;i<a.length;i++)

    {

        a[i].style.display = "none";

    }

<script>

<script type="text/javascript">

    根据ID找元素,取到的是JQUERY对象

    var b = $("#a1");

    根据CLASS取

    var b = $(".aa");

    根据标签名取

    var b = $("div");

    根据属性筛选

    var b = $("[name=aa]");

    操作元素

    操作内容

        非表单元素

        b.text();

        b.html();

赋值：<div id="a1">11</div>
　　　　var b = $("#a1");
　　　　b.text("aaa")
　　　　//b.html("aaa")

取值：var b = $("#a1");
　　　alert(b.text());
　　 //alert(b.html());

        表单元素

        b.val();

赋值：

var b = $("#a1");

b.val("aaa")

取值：

var b = $("#a1");

b.val();

操作属性 b.attr("bs","1"); 
　　　　 b.attr("bs"); 
　　　　 b.removeAttr("bs"); 

操作样式 alert(b.css("color")); 
　　　　 b.css("font-size","50px");　　　　　　//可以获取、设置任意样式 

alert(b[0]); 取jquery对象用eq()取元素本身用[] 

隐藏三个元素 $(".aa").css("display","none"); 

</script>

<style type="text/css">

#a1{color:red}

.aa{ width:100px; height:100px; background-color:#39F}

</style>

<div id="a1" style="width:100px; height:200px;">11</div>

<div class="aa" bs="1">aaaa</div>

<div class="aa" bs="2">bbbbb</div>

<div class="aa" bs="3">ccccc</div>

<input type="text" id="p1" />

<input type="button" id="b1" value="挂事件" />

<input type="button" id="b2" value="移除事件" />

    Jquery【加】事件

    页面加载完成

    $(document).ready(function(e) {

        给a1加点击

        $("#a1").click(function(){

                alert('aa');

            })

        给class为aa的所有元素加事件

        $(".aa").click(function(){

                alert($(this).attr("bs"));

                $(".aa").css("background-color","#39F");

                $(this).css("background-color","red");

            })

        第二种方式【挂】事件

        $("#b1").click(function(){

                $("#a1").bind("click",function(){

                    alert("我是挂上的事件");

                    });

            })

        $("#b2").click(function(){

                $("#a1").unbind("click");

            })

    });