js和jQuery的区别

一、本质区别：

            1.js都知道是网页脚本语言，类似java是一种开发常用语言；
            2.jQuery是基于js语言封装出来的一个前端框架；
            3.jq对象不能使用js对象的方法和属性，js对象不能使用jq对象的方法和属性。
            4.jq对象全部都是一个数组对象。
二、用法区别：

    1、外观上jQuery对象比js对象多了"$()"一层马甲，这是最直观的区别；

    2、操作内容

        1）.非表单元素（如果是文本就用text方法，如果是html代码就用html方法）

例:div.text();——无参数的情况下是取值
        
   div.text("aaaa");——有参数的情况下是赋值
        
   div.html();——无参数的情况下是取值
   
   div.html("aaaa");——有参数的情况下是赋值

    2）.表单元素

    JS：div.value;——取值；div.value = xxx;——赋值
            
    JQuery：div.val();——无参数是取值，有参数是赋值。

*******************************************************************

    3、操作属性

    JS里面用来操作属性的方法是
            
    div.setAttribute("","");——设置属性、修改属性
            
    div.removeAttribute("");——移除属性，引号里面写一个属性名
            
    div.getAttribute();——获取属性
            
    JQUERY里面用来操作属性的方法
            
    添加属性：div.attr("test","aa");——给这个attr方法加入参数，属性名叫做test，属性的值是aa
                
    移除属性：div.removeAttr("test");——移除test这条属性
            
    获取属性：div.attr("test");——在attr方法里面直接写入一个属性的名就可以了

*******************************************************************

    4、操作样式

        JS里面操作样式的关键字是style

     例:div.style.backgroundColor = "red";——把这个div的背景色设置成为了红色

        JQuery里面操作样式的关键字是css

    例:div.css("background-color","yellow");——把这个div的背景色变为黄色，
       在这里CSS里面所有的样式和css样式表里面的样式是一模一样的没有任何变化

        JS操作样式的方法只能获取内联样式，不能取内嵌的和外部的！！！！！

        JQuery操作样式的方法可以是内联的也可以是内嵌的

*******************************************************************

5、js和jQuery的转换

    1.js对象转换成jq对象的方式： $(js对象) 
    2.jq对象转换成js对象方式： jq对象[索引值]  ||  jq对象.get(索引值)。
    3.代码
        //var input = document.getElementById("userName");  //js对象
                //把js对象转换成jquery对象
                //var input2 = $(input);
                //input2.val("呵呵");
        $("#userName").get(0).value = "aaa";  //jquery对象全部都是一个数组对象

*******************************************************************   

 6、注册事件上的区别

	//jquery与js在注册注册事件上的区别
	/*var button = document.getElementById("b1");
		button.onclick = function(){
			alert("呵呵..");
	}
	*/
	//jquery注册方式
	$("#b1").click(function(){
		alert("嘻嘻");
	});

*******************************************************************

    7、窗口加载完毕的区别

	//js方式
	/*window.onload = function(){
		alert("窗口加载完毕了..");
	}
	*/
	$(function(){
		alert("窗口加载完毕了..");
	});