JavaScript和Jquery的区别

news/2024/7/19 13:29:10 标签: js, jquery

1、本质上的区别

Javascript是一门编程语言,我们用它来编写客户端浏览器脚本。jQuery是基于javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发。

jQuery能做的javascipt都能做到,而javascript能做的事情,jQuery不一定能做到

2、兼容性的区别

JavaScript有各种浏览器兼容问题,代码复杂冗余,而jQuery中完全没有兼容性问题。

3、语法上的差异

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>

http://www.niftyadmin.cn/n/1659745.html

相关文章

UML视频初总结

前言 都说人的潜力是无穷的&#xff0c;人不逼自己一把你永远不会发现自己的潜力到底都多么无穷。本篇文章主要是对UML视频进行大概的概括&#xff0c;看看38集的视频终究让我们学到了什么&#xff01; 内容总结 先来一张图大体概括一下&#xff1a;      UML视频共分为五…

jQuery必知必熟基础知识

1.特点: 小巧 功能强 跨浏览器 插件 2.使用 实际是js文件 a) 复制js到WebRoot b) 页面 3.核心对象及常用方法和属性 a)名称 jQuery和$ 用$找出来的对象叫jQuery对象 用document找出来的对象叫Dom对象 b)dom和jquery对象转换 jQuery对象.get(0) —>dom对象 $(dom对象)—>…

常见jquery面试题

1. jQuery 库中的 $() 是什么&#xff1f;&#xff08;答案如下&#xff09;    ()函数是jQuery()函数的别称&#xff0c;乍一看这很怪异&#xff0c;还使jQuery代码晦涩难懂。一旦你适应了&#xff0c;你会爱上它的简洁。() 函数是 jQuery() 函数的别称&#xff0c;乍一看这…

VB代码片段总结

前言 VB已经结束了一段时间了&#xff0c;中间对VB代码的理解也更加的深入了&#xff0c;这种变化尤其发生在机房的时候&#xff0c;学生的时候对代码还不是很理解&#xff0c;到机房之后这些代码就差不多理解了&#xff0c;之前也对很多代码进行总结过&#xff0c;这段时间又在…

Dom中的节点详解

查找节点 document.getElementById(‘id属性值’);返回拥有指定id的第一个对象的引用document/element.getElementsByClassName(‘class属性值’);返回拥有指定class的对象集合document/element.getElementsByTagName(‘标签名’);返回拥有指定标签名的对象集合document.getEl…

UML--静态图

前言 静态图显示了系统的静态结构&#xff0c;特别是存在事物的种类的内部结构、相互之间的联系。主要包括类图、对象图、包图。 类图 1.类图描述的是一种静态关系&#xff0c;是系统静态部分的呈现&#xff0c;在系统的整个生命周期都是有效的。   2.类图包含7个元素&#…

JS里的DOM操作注意点

1.Windows对象&#xff1a;浏览器窗口。 2.document&#xff1a;页面文件 3.通用的事件&#xff1a; onclick 单击&#xff1b; onmousemove 鼠标移动&#xff1b; onmouseout 鼠标移出&#xff1b; onmouseover 鼠标移上&#xff1b; 4.window.open 第一部分&#xff1a…

js正则表达式最详细解说(包含常见案例)

1.正则表达式基本语法 两个特殊的符号’^‘和’$’。他们的作用是分别指出一个字符串的开始和结束。 例子如下&#xff1a; "^The"&#xff1a;表示所有以"The"开始的字符串&#xff08;"There"&#xff0c;"The cat"等&#xff09…