jquery和javascript在语法上有哪些差异

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

这篇文章主要介绍“jquery和javascript在语法上有哪些差异”，在日常操作中，相信很多人在jquery和javascript在语法上有哪些差异问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”jquery和javascript在语法上有哪些差异”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

jquery不是javascript。javascript是一种解释性脚本语言，而jquery是一个JavaScript函数库，是基于JavaScript语言写出来的一个框架；且两者在语法上有不少差异。

本教程操作环境：windows7系统、javascript1.8.5&&jquery1.10.2版、Dell G3电脑。

jquery不是javascript。

javascript是一种解释性脚本语言，而jquery是一个JavaScript函数库，是基于JavaScript语言写出来的一个框架

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

<script class="lazy" data-src="js/jquery.min.js"></script>

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

<script class="lazy" data-src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>　　//Google
或者：
<script class="lazy" data-src="http://code.jquery.com/jquery-1.6.min.js"></script> 　　//jQuery 官方

jquery和javascript在语法上有不少差异

1.操作元素节点

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 class="lazy" data-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.操作属性节点

a.JavaScript使用

getAttribute("属性名") 、 setAttribute("属性名","属性值")

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

b.JQuery使用

.attr()传入一个参数获取，传入两个参数设置

.prop()

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

两者的不同在读取checked，disabled，等属性名=属性值的属性时

attr返回属性值或者undefined，当读取的checked属性时不会根据是否选中而改变

prop返回true和false 当读取的checked属性时会根据是否选中而改变

也就是说attr要取到的属性必须是在标签上写明的属性，否则不能取到

<body>
    <ul>
        <li id="first">哈哈</li>
    </ul>
</body>
<script class="lazy" data-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>

3.操作文本节点

a.JavaScript使用

innerHTML：取到或设置一个节点的HTML代码,可以取到css，以文本的形式返回

innerText：取到或设置一个节点的HTML代码，不能取到css

value:取到input[type='text']输入的文本

<body>
    <ul>
        <li id="serven_times" ><span style="color: chartreuse">嘿嘿</span></li>
        <li id="eight_times" ><span style="color: chartreuse">嘿嘿</span> </li>
    </ul>
     姓名：<input type="text" id="input">
</body>
<script>
    document.getElementById("serven_times").innerHTML;
    document.getElementById("serven_times").innerHTML = "<span style='color: #ff3a29'>呵呵</span>";
    document.getElementById("eight_times").innerText;
    document.getElementById("eight_times").innerText = "啦啦";
    document.getElementById("input").value;
 </script>

b.JQuery使用

.html()取到或设置节点中的html代码
.text()取到或设置节点中的文本
.val()取到或设置input的value属性值

<body>
    <ul>
        <li id="serven_times" ><span style="color: chartreuse">嘿嘿</span></li>
        <li id="eight_times" ><span style="color: chartreuse">嘿嘿</span> </li>
    </ul>
     姓名：<input type="text" id="input">
</body>
<script class="lazy" data-src="/js/jquery.min.js"></script>
<script>
    $("#serven_times").html();
    $("#serven_times").html("<span style='color: #ff3a29'>呵呵</span>");
    $("#eight_times").text();
    $("#eight_times").text("啦啦");
    $("#input").val();
    $("#input").val("哈哈");
 </script>

4.操作css样式的时候

JavaScript:

1、使用setAttribute设置class和style

document.getElementById("first").setAttribute("style","color:red");

2、使用.className添加一个class选择器

document.getElementById("third").className = "san";

3、使用.style.样式直接修改单个样式。注意样式名必须使用驼峰命名法

document.getElementById("four_times").style.fontWeight = "900";

4、使用.style或.style.cssText添加一串行级样式：

document.getElementById("five_times").style = "color: blue;";//IE不兼容
document.getElementById("six_times").style.cssText = "color: yellow;font-size : 60px;";

JQuery:

$("#p2").css("color","yellow");

$("#p2").css({
    "color" : "white",
    "font-weight" : "bold",
    "font-size" : "50px",
});

5.操作层次节点

JavaScript:

*1.childNodes：获取当前节点的所有子节点（包括元素节点和文本节点）
*  children：获取当前节点的所有元素子节点（不包括文本节点）
*2.parentNode:获取当前节点的父节点
*3.firstChild:获取第一个元素节点，包括回车等文本节点
*  firstElementChild:获取第一个元素节点，不包括回车节点
*  lastChild、lastElementChild 同理
*4.previousSibling：获取当前元素的前一个兄弟节点
*  previousElementSibling：：获取当前元素的前一个兄弟节点
*  nextSibling、nextElementSibling

JQuery:

1.提供了大量的选择器：

:first-child
:first-of-type1.9+
:last-child
:last-of-type1.9+
:nth-child
:nth-last-child()1.9+
:nth-last-of-type()1.9+
:nth-of-type()1.9+
:only-child
:only-of-type

2.除此之外也提供了对应的函数：

first()
last()
children()
parents()
parent()
siblings()

6.给一个节点绑定事件

JavaScript:

　　使用了Dom0事件模型和Dom2事件模型，具体内容见我上一篇博客

JQuery：

　　①.事件绑定的快捷方式

<body>
    <button>按钮</button>
</body>
<script class="lazy" data-src="js/jquery-1.10.2.js"></script>
<script>
     $("button:eq(0)").click(function () {
        alert(123);
     });
</script>

　　②：使用on进行事件绑定

<body>
    <button>按钮</button>
</body>
<script class="lazy" data-src="js/jquery-1.10.2.js"></script>
<script>    //①使用on进行单事件的绑定
     $("button:eq(0)").on("click",function () {
        alert(456);
    });     //②使用on同时给同一对象绑定多个事件
    $("button:eq(0)").on("click dblclick mouseover",function () {
        console.log(123);
    });    //③使用on，给一个对象绑定多个事件
    $("button:eq(0)").on({        "click":function () {
            console.log("click");
        },        "mouseover":function () {
            console.log("mouseover");
        },        "mouseover":function () {
            console.log("mouseover2");
        }
    });    //④使用on给回调函数传参，要求是对象格式，传递的参数可以在e.data中取到；jquery中的e只能通过参数传进去，不能用window.event
    $("button:eq(0)").on("click",{"name":"zhangsan","age":15},function (e) {
        console.log(e);
        console.log(e.data);
        console.log(e.data.name);
        console.log(e.data.age);
        console.log(window.event);//js中的事件因子
    });    
</script>

到此，关于“jquery和javascript在语法上有哪些差异”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉