您现在的位置是:php教程网 > 编程技术 >

[db:作者] 2019-09-10 00:31 PHP学习

jquery和javascript的区别是什么?

jquery和javascript的区别是什么?下面本篇文章就来给大家介绍一下jquery和javascript的区别,希望对大家有所帮助。

一、本质上的区别

JavaScript 是通过<script></script>标签插入到HTML页面,可由所有的现代浏览器执行的一种轻量级的编程语言。

JQuery是一个JavaScript函数库。或者说是JavaScript中最流行的一种框架。

使用JQuery首先要在 HTML 代码最前面加上对 jQuery 库的引用,比如:

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

库文件既可以放在本地,也可以直接使用知名公司的 CDN,好处是这些大公司的 CDN 比较流行,用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了,所以能加快网站的打开速度。另外一个好处是显而易见的,节省了网站的流量带宽。例如:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>  //Google

或者:

<script src="http://code.jquery.com/jquery-1.6.min.js"></script>   //jQuery 官方 

二、语法上的差异

1、操作元素节点

JavaScript使用:getElement系列、query系列

<body>
    <ul>
        <li id="first">哈哈</li>
        <li class="cls" name ="na">啦啦</li>
        <li class="cls">呵呵</li>
        <li name ="na">嘿嘿</li>
    </ul>
    <div id="div">
        <ul>
            <li class="cls">呵呵</li>
            <li>嘿嘿</li>
        </ul>
    </div>
</body>
<script>
  document.getElementById("first");        //是一个元素
  document.getElementsByClassName("cls");    //是一个数组,即使只有一个元素,使用时需要用[0]取到第一个再使用
  document.getElementsByName("na");       //是一个数组,即使只有一个元素,使用时需要用[0]取到第一个再使用  
  document.getElementsByTagName("li");     //是一个数组,即使只有一个元素,使用时需要用[0]取到第一个再使用
  document.querySelector("#div");        //是一个元素   
  document.querySelectorAll("#div li");    //是一个数组,即使只有一个元素,使用时需要用[0]取到第一个再使用
</script>

JQuery使用:大量的选择器同时使用$()包裹选择器

<body>
    <ul>
        <li id="first">哈哈</li>
        <li class="cls" name ="na">啦啦</li>
        <li class="cls">呵呵</li>
        <li name ="na">嘿嘿</li>
    </ul>
    <div id="div">
        <ul>
            <li class="cls">呵呵</li>
            <li>嘿嘿</li>
        </ul>
    </div>
</body>
<script src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script>  //使用JQuery取到的是jquery对象都是一个数组,即使只有一个元素被选中,
            //但是在使用时候不一定需要使用:eq(0)来拿到这一个在使用可以直接使用
    $("#first");            
    $(".cls");
    $("li type[name='na']");
    $("li");

    $("#div");
    $("#div li");
</script>

2、操作属性节点

JavaScript使用:getAttribute("属性名") 、 setAttribute("属性名","属性值")

<body>
    <ul>
        <li id="first">哈哈</li>
    </ul>
</body>
<script>
  document.getElementById("first").getAttribute("id");
  document.getElementById("first").setAttribute("name","nafirst");  
    document.getElementById("first").removeAttribute("name");
</script>

JQuery使用

.attr()传入一个参数获取,传入两个参数设置;.prop()

prop和attr一样都可以对文本的属性进行读取和设置;

<body>
    <ul>
        <li id="first">哈哈</li>
    </ul>
</body>
<script src="js/jquery.js"></script>
<script>
  $("#first").attr("id");
  $("#first").attr("name","nafirst");
  $("#first").removeAttr("name");
  $("#first").prop("id"); 
  $("#first").prop("name","nafirst"); 
  $("#first").removeProp("name");
</script>

三、JavaScript对象和JQuery对象的方法不能混用。

1、JavaScript对象和JQuery对象

① 使用$("")取到的节点为JQuery对象,只能调用JQuery方法,不能调用JavaScript方法;

* $("#div").click(function(){})√

* $("#div").onclick = function(){}× 使用JQuery对象调用JavaScript方法

* 同理,使用、document.getElement系列函数取到的对象为JavaScript对象,也不能调用JQery函数

2、JavaScript对象和JQuery对象互转

*① JQuery ---> JavaScript :使用get(index)或者[index]选中的就是JavaScript对象

* $("div").get(0).onclick = function(){}

* $("div").[0].onclick = function(){}

* ② JavaScript ---> JQuery :使用$()包裹JavaScript对象 (我们发现JQuery不管获得几个对象都是一个数组,可以直接给整个数组都添加某一事件)

* var div = document.getElementById("div");

* $(div).click(function(){});

以上就是jquery和javascript的区别是什么?的详细内容,更多请关注html中文网其它相关文章!

上一篇:上一篇:javascript跟java有什么区别

下一篇:下一篇:javascript如何判断文件是否存在?