jQueryってJavaScriptですか？-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

jQueryってJavaScriptですか？

青灯夜游

Nov 26, 2021 pm 04:07 PM

javascriptjquery

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

jQueryってJavaScriptですか？

このチュートリアルの動作環境: 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 シリーズ、クエリシリーズ

哈哈
啦啦
呵呵
嘿嘿

呵呵
嘿嘿

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 までご連絡ください。

クラスセレクターとIDセレクターの間の差別化とは何ですか？May 12, 2025 am 12:13 AM

classSelectorEctorSareverSatileAndReusable、whiledseLectorSareUniqueandspecific.1）useclassselectors（notedby。）forstylingMultipleElementswithsharedCharacteristics.2）useidselectors（notedby＃）forstylinguniqueeletementonapage.classselectorectorotorsoffermoreflexibili

CSS IDS対クラス：実際の違いMay 12, 2025 am 12:10 AM

idsareuniqueIdentifiersforsingleelements、whileclassesstylemultipleements.1）useidsforuniqueelementsandjavascripthooks.2）useclasses forReusable、flexiblestylingacrossmultipletements。

CSS：クラスだけを使用した場合はどうなりますか？May 12, 2025 am 12:09 AM

クラスのみのセレクターを使用すると、コードの再利用性と保守性が向上しますが、クラス名と優先順位の管理が必要です。 1.再利用性と柔軟性を向上させる、2。複数のクラスを組み合わせて複雑なスタイルを作成する3。長いクラス名と優先順位につながる可能性があります。4。パフォーマンスへの影響は小さい、5。簡潔な命名や使用規則などのベストプラクティスに従ってください。

CSSのIDおよびクラスセレクター：初心者向けガイドMay 12, 2025 am 12:06 AM

IDおよびクラスセレクターは、それぞれ一意でマルチエレメントスタイルの設定にCSSで使用されます。 1. IDセレクター（＃）は、特定のナビゲーションメニューなどの単一の要素に適しています。 2.クラスセレクター（。）は、統一ボタンスタイルなどの複数の要素に使用されます。 IDは注意して使用し、過度の特異性を避け、スタイルの再利用性と柔軟性を向上させるためにクラスに優先順位を付ける必要があります。

HTML5仕様の理解：主要な目的と利点May 12, 2025 am 12:06 AM

HTML5の主要な目標と利点には、1）Webセマンティック構造の強化、2）マルチメディアサポートの改善、3）クロスプラットフォームの互換性の促進。これらの目標は、アクセシビリティの向上、ユーザーエクスペリエンスの豊富な開発、より効率的な開発プロセスにつながります。

HTML5の目標：Webの未来への開発者のガイドMay 11, 2025 am 12:14 AM

HTML5の目標は、開発プロセスを簡素化し、ユーザーエクスペリエンスを改善し、動的でアクセス可能なネットワークを確保することです。 1）オーディオおよびビデオ要素をネイティブにサポートすることにより、マルチメディアコンテンツの開発を簡素化します。 2）コンテンツ構造とSEO親しみやすさを改善するために、などのセマンティック要素を紹介します。 3）アプリケーションキャッシュを介してオフライン機能を強化します。 4）要素を使用して、ページのインタラクティブ性を向上させます。 5）モバイル互換性を最適化し、レスポンシブデザインをサポートします。 6）フォーム機能を改善し、検証プロセスを簡素化します。 7）AsyncやDefer属性などのパフォーマンス最適化ツールを提供します。

HTML5：新しい機能と機能でWebを変換しますMay 11, 2025 am 12:12 AM

HTML5TRANSFORMSWEBDEVELOPMENTBYINTRODUCINGSEMANTICELEMENTS、MULTIMEDIACAPABITIATION、POFFING APIS、およびPERFORMANCEOPTIMIZATIONTOOLS.1）semanticElementslige like like like.2）MultimediaElementsandallowdirectemdingwithuthindunsuns、Inftruging

ID対CSSのクラス：包括的な比較May 11, 2025 am 12:12 AM

その後、susaClassincssisthatidsareuniqueandhavehigherspeficity、whileclasseSeSaRereReareReaslingMultipleElements.useidsforjavascripthooksoruniqueelements、anduseclassespurposessstystystystystyのsuseidsforjavascripthooksoruniqueを

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ドリームウィーバー CS6

ビジュアル Web 開発ツール

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。