ホームページ > 記事 > ウェブフロントエンド > jQueryってJavaScriptですか？

jQueryってJavaScriptですか？

青灯夜游オリジナル: 2021-11-26 16:07:273983ブラウズ

jquery は JavaScript ではありません。 JavaScript は解釈型スクリプト言語であり、jquery は JavaScript 関数ライブラリ、つまり JavaScript 言語に基づいて作成されたフレームワークであり、この 2 つの間には構文に多くの違いがあります。

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

jquery は JavaScript ではありません。

javascript は解釈型スクリプト言語であり、jquery は JavaScript 関数ライブラリであり、JavaScript 言語に基づいて記述されたフレームワークです。

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

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

ライブラリファイルはローカルに配置することも、有名な会社の CDN を直接使用することもできます。利点は、これらの大企業の方が人気があり、ユーザーはあなたの Web サイトに長時間アクセスできなくなります。他の Web サイトにアクセスしたときにブラウザーにキャッシュされている可能性があるため、Web サイトを開く速度が速くなる可能性があります。もう 1 つの利点は明らかで、Web サイトのトラフィック帯域幅を節約できます。例:

<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 シリーズ、クエリシリーズ

6c04bd5ca3fcae76e30b72ad730ca86d
    ff6d136ddc5fdfeffaf53ff6ee95f185
        f720c45ccc45a0fb64cf9d40e6aab528哈哈bed06894275b65c1ab86501b08a632eb
        cf1867405928e86c5f34ccfa5e1981eb啦啦bed06894275b65c1ab86501b08a632eb
        0b4e0e7a752f25a03382c188595aae70呵呵bed06894275b65c1ab86501b08a632eb
        4b092670435d4bbf91b8df6a5cec99d9嘿嘿bed06894275b65c1ab86501b08a632eb
    929d1f5ca49e04fdcb27f9465b944689
    7b2cfc96e4c0d74da423eefa2832bb6a
        ff6d136ddc5fdfeffaf53ff6ee95f185
            0b4e0e7a752f25a03382c188595aae70呵呵bed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6嘿嘿bed06894275b65c1ab86501b08a632eb
        929d1f5ca49e04fdcb27f9465b944689
    16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
3f1c4e4b6b16bbbd69b2ee476dc4f83a
　　document.getElementById("first");　　　　　　　　//是一个元素
　　document.getElementsByClassName("cls");　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.getElementsByName("na");　　　　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.getElementsByTagName("li");　　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
　　document.querySelector("#div");　　　　　　　　//是一个元素 
　　document.querySelectorAll("#div li");　　　　//是一个数组，即使只有一个元素，使用时需要用[0]取到第一个再使用
2cacc6d41bbb37262a98f745aa00fbf0

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

.prop( )

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

2 つの違いは、属性名 = 属性値である、checked、disabled などの属性を読み取る場合です。

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 コードを取得または設定します。 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() 入力

<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 の value 属性値を取得または設定します。css スタイルを操作する場合JavaScript:

1. setAttribute を使用してクラスとスタイルを設定します

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

2. .className を使用してクラスセレクターを追加します

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

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

:最初の子
##:last-of-type1.9
:n 番目の子
:n 番目の最後-child ()1.9
:nth-last-of-type()1.9
:nth-of-type()1.9
:only-child
:only-of-type
2. さらに、対応する関数が提供されています:

first()

last()
children( )
#両親()
親()
兄弟()

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 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScriptの配列とは何ですか次の記事：JavaScriptの配列とは何ですか

続きを見る