• 技术文章 >web前端 >js教程

    jquery和javascript的区别有哪些

    coldplay.xixicoldplay.xixi2021-04-09 14:30:36原创99

    jquery和javascript的区别:1、js是通过【<script>】标签插入HTML页面,而JQuery是JavaScript函数库;2、js使用getElement系列,而JQuery使用【$()】包裹选择器。

    本教程操作环境:windows7系统、javascript1.8.5版,DELL G3电脑。

    jquery和javascript的区别:

    一、本质上的区别

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

    2.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 官方 

    二、语法上的差异

    操作元素节点

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

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

    相关免费学习推荐:javascript学习教程

    以上就是jquery和javascript的区别有哪些的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:jquery javascript
    上一篇:javascript正则表达式如何替换 下一篇:javascript如何清除缓存
    第15期线上培训班

    相关文章推荐

    • javascript继承方法有哪些• javascript如何在浏览器运行• ie浏览器不支持javascript怎么办• javascript如何设置select

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网