jquery是javascript嗎-前端問答-PHP中文網

首頁

web前端

前端問答

jquery是javascript嗎

青灯夜游

Nov 26, 2021 pm 04:07 PM

javascriptjquery

jquery不是javascript。 javascript是一種解釋性腳本語言，而jquery是一個JavaScript函數庫，是基於JavaScript語言寫出來的一個框架；且兩者在語法上有不少差異。

jquery是javascript嗎

本教學操作環境：windows7系統、javascript1.8.5&&jquery1.10.2版、Dell G3電腦。

jquery不是javascript。

javascript是一種解釋性腳本語言，而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 官方

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 src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script>
　　//使用JQuery取到的是jquery对象都是一个数组，即使只有一个元素被选中,但是在使用时候不一定需要使用:eq(0)来拿到这一个在使用可以直接使用
    $("#first");　　　　　　　　　　　　
    $(".cls");
    $("li type[name=&#39;na&#39;]");
    $("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 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=&#39;color: #ff3a29&#39;>呵呵</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 src="/js/jquery.min.js"></script>
<script>
    $("#serven_times").html();
    $("#serven_times").html("<span style=&#39;color: #ff3a29&#39;>呵呵</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 src="js/jquery-1.10.2.js"></script>
<script>
     $("button:eq(0)").click(function () {
        alert(123);
     });
</script>

###　　②：使用## #on進行事件綁定######

<body>
    <button>按钮</button>
</body>
<script 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>

###【相關推薦：###javascript學習教學######】#######

以上是jquery是javascript嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

CSS：使用ID選擇器不好嗎？May 13, 2025 am 12:14 AM

使用ID選擇器在CSS中並非固有地不好，但應謹慎使用。 1）ID選擇器適用於唯一元素或JavaScript鉤子。 2）對於一般樣式，應使用類選擇器，因為它們更靈活和可維護。通過平衡ID和類的使用，可以實現更robust和efficient的CSS架構。

HTML5：2024年的目標May 13, 2025 am 12:13 AM

html5'sgoalsin2024focusonrefinement和optimization，notNewFeatures.1）增強performanceandeffipedroptimizedRendering.2）inviveAccessibilitywithRefinedwithRefinedTributesAndEllements.3）explityconcerns，尤其是withercercern.4.4）

HTML5試圖改進的主要領域是什麼？May 13, 2025 am 12:12 AM

html5aimedtotoimprovewebdevelopmentInfourKeyAreas：1）多中心供應，2）語義結構，3）formcapabilities.1）offlineandstorageoptions.1）html5intoryements html5introctosements introdements and toctosements and toctosements，簡化了inifyingmediaembedingmediabbeddingingandenhangingusexperience.2）newsements.2）

CSS ID和類：常見錯誤May 13, 2025 am 12:11 AM

IDsshouldbeusedforJavaScripthooks,whileclassesarebetterforstyling.1)Useclassesforstylingtoallowforeasierreuseandavoidspecificityissues.2)UseIDsforJavaScripthookstouniquelyidentifyelements.3)Avoiddeepnestingtokeepselectorssimpleandimproveperformance.4

課程和ID選擇器之間的差異是什麼？May 12, 2025 am 12:13 AM

classSelectorSareVersAtileAndReusable，whileIdSelectorSareEctorAreNiqueAndspecific.1）USECLASSSELECTORS（表示）forStylingmultilemtsswithsharedCharacteristics.2）UseIdSelectors.2）UseIdSelectors（eustotedBy＃）

CSS IDS vs類：真正的差異May 12, 2025 am 12:10 AM

IDSareuniqueIdentifiersForsingLelements，而LileclassesstyLemultiplelements.1）useidsforuniquelementsand andjavascripthooks.2）useclassesforporporporblesable，flexiblestylestylestylinglingactossmultiplelements。