js和jquery在操作dom节点时各自的方法

js操作dom的方式如下：

<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>

jquery的使用方式如下：

<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>

例子

<div class="divDemo">   <span>haha</span>hello world</div> var test = $('.divDemo').html(); alert(test);//弹出<span>haha</span>hello world var text = $('.divDemo').text(); alert(text);//弹出‘hahahello world’

jquery挂元素与移除元素

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");            })    });