検索

ホームページ >ウェブフロントエンド >フロントエンドQ&A >JavaScriptとJQueryの違いは何ですか

JavaScriptとJQueryの違いは何ですか

青灯夜游
青灯夜游オリジナル
2021-09-07 13:16:402510ブラウズ

違い: 1. JavaScript は軽量プログラミング言語ですが、JQuery は JavaScript 関数ライブラリです。2. js は DOM メソッドを使用して要素ノードを作成し、jQuery は $ を使用して DOM 要素を直接作成できます。3.要素ノードの操作方法が異なる; 4. 属性ノードの操作方法が異なります。

JavaScriptとJQueryの違いは何ですか

このチュートリアルの動作環境: Windows7 システム、javascript1.8.5&&jquery1.10.0 バージョン、Dell G3 コンピューター。

1. 本質的な違い

1.JavaScript は 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 タグを通じて HTML ページに挿入され、すべての人が使用する 最新のブラウザで実装される軽量プログラミング言語。

2.JQuery は JavaScript 関数ライブラリです。言い換えれば、JavaScript で最も人気のあるフレームワークです。

JQuery を使用するには、まず HTML コードの先頭に jQuery ライブラリへの参照を追加する必要があります。例: 

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

ライブラリ ファイルはローカルに配置することも、直接配置することもできます。 CDN の利点は、これらの大企業の CDN が比較的人気があることです。ユーザーは Web サイトにアクセスする前に、他の Web サイトにアクセスするときにブラウザーに CDN をキャッシュする可能性が高いため、高速化できます。ウェブサイトを開く速度。もう 1 つの利点は明らかで、Web サイトのトラフィック帯域幅を節約できます。例: 

<script src=></script>　　//Google

或者：

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

2. 構文の違い

1. 要素ノードの操作方法の違い

a.JavaScript は

#getElement シリーズ、クエリ シリーズを使用します

<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=&#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() を使用して渡します。取得するパラメータ、渡す 2 つのパラメータ設定を入力します

.prop()

prop と attr はどちらもテキスト属性の読み取りと設定が可能です;

2 つの違いは次のとおりです。読み取り時にチェックあり、無効など 属性名 = 属性値の場合

attr は属性値または未定義を返します チェック済みの属性を読み込んだ場合、選択されているかどうかで変化しません。

prop は true と false を返します チェックされた属性を読み込む際、選択されているかどうかで属性が変わります。

つまり、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 コードを取得または設定します。これはできません。 get css

value: Get 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() を使用して取得しますまたは、node.text() に HTML コードを設定します。 node

.val() にテキストを取得または設定します。 input

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


の value 属性値を取得または設定します。

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。多数のセレクターを提供します:


:最初の子

  • :最初のタイプ
    • #1.9

  • :最後の子

  • :last-of-type
    • 1.9

  • :nth-child

  • ##:nth -last-child()

    1.9

  • :nth-last-of-type()

    1.9

  • :nth-last-of-type()1.9

  • :only-child

  • :only -of-type

    1.9

  • 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>

7. 違いJQuery のドキュメントレディ関数と window.onload 

*①.window.onload必须等待网页资源（包括图片等）全部加载完成后，才能执行；
*      而文档就绪函数只需要等到网页DOM结构加载完成后，即可执行
*②.window.onload在一个页面中，只能写一次，写多次会被最后一次覆盖
*      而文档就绪函数在一个页面中可以有N个

3. JavaScript オブジェクトと JQuery オブジェクトのメソッドを混在させることはできません。

#1.JavaScript オブジェクトと JQuery オブジェクト

① 使用$("")取到的节点为JQuery对象，只能调用JQuery方法，不能调用JavaScript方法；
*      $("#p").click(function(){})√
*      $("#p").onclick = function(){}× 使用JQuery对象调用JavaScript方法
*
*      同理，使用、document.getElement系列函数取到的对象为JavaScript对象，也不能调用JQery函数

2.JavaScript オブジェクトと JQuery オブジェクトの相互変換

*① JQuery --->  JavaScript :使用get(index)或者[index]选中的就是JavaScript对象
*  $("p").get(0).onclick = function(){}
*  $("p").[0].onclick = function(){}
* ② JavaScript ---> JQuery :使用$()包裹JavaScript对象        (我们发现JQuery不管获得几个对象都是一个数组，可以直接给整个数组都添加某一事件)
*  var p = document.getElementById("p");
*  $(p).click(function(){});

【推荐学习：javascript高级教程】

以上がJavaScriptとJQueryの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：vuejsとはどのようなフレームワークですか?次の記事：vuejsとはどのようなフレームワークですか?

関連記事

続きを見る