js和jQuery对比

jQuery可以说是js的封装，大多数情况下jquery比js简单，它们两个可以相互写对方的里面，使用jquery需要导入jquery文件。

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

jquery文件名格式为，jquery-版本号[.min] .js   其中min表示压缩版

$在jquery中专门用来做选择，相当于选择器

1.页面加载初始化

jQuery：

//方法一
$(function(){
 
})
//方法二
$(document).ready(function(){

})

js：

window.οnlοad=function(){ 

}

 2.通过id、name、className、TagName获取对象、

js：

        var a = document.getElementById("XX");                //id

        var b = document.getElementsByClassName("XX");//classname

        var d = document.getElementsByTagName("XX");    //tagname

        var c = document.getElementsByName(XX");          //name

jQuery:

        var aj = $("#XX");                 //id

        var bj = $(".XX");                    //classname

        var cj = $("XX");                        //tagname

        var dj = $("[name='XX']");    //name

        var ej = $("div.test");                //div中class为test的元素，Jquery可以使用选择器找对象.

3.操作内容

js:

（ps:a, aj为对象）

        a.innerText;                   //非表单元素的取值，赋值是：a.innerText = "aaaa";             

        a.innerHTML;                //非表单元素的取值，赋值是：a.innerHTML = "<a>123</a>";  可以解析html标签

        a.value;                         //表单元素的取值，赋值是：a.value = "aaaa";

jQuery:

        aj.text();                        //非表单元素的取值，赋值是：aj.text("aaaa");

        aj.html();                       //非标单元素的取值，赋值是：aj.html("<a>123</a>");    可以解析html标签

        aj.val();                         //标签元素的取值，赋值是：aj.val("aaaa");

 4.操作样式

js:

        a.style.backgroundColor = red;    //设置样式

        a.style.color;                                    //获取样式，只能获取内联样式，也就是写在标签里面的样式

jQuery:

        aj.css("color","yellow");                                    //设置样式

        aj.css("color");                                        //可以获取到内嵌式的样式属性

5.显示与隐藏

js:

a.style.display = '';    a.style.display = 'none';

jQuery:

$(a).show(); $(a).hide();

6.jQuery中的事件

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

                    alert($(this).text());

                });

            $(".test").bind("click",function(){                //绑定事件，注意可以同时绑定多个

                    alert($(this).text());

                });

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

                    $(".test").unbind("click");                    //解除绑定事件

            });

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

                    $(".test").bind("click",function(){

                    alert($(this).text());

                    });

jQuery事件