jquery構文構造はどの部分で構成されていますか?

jquery 構文構造は 3 つの部分で構成されます。 1. ファクトリ関数 "$()" は、"()" 内のパラメータに基づいて HTML ドキュメント内の要素を検索および選択し、次の要素を含む jquery オブジェクトを返します。要素; 2. セレクター、ファクトリー関数 "()" のパラメーターです; 3. 選択された関数を操作するために使用される組み込みメソッド (関数)。

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

jQuery ステートメントには主に 3 つの部分が含まれています。$()、document、action() はそれぞれファクトリー関数、セレクター、メソッドと呼ばれます。

#構文: #

 $(selector).action();

#selectorselector

• $（selector）

# jQuery $

の jquery

メソッド action()

jQuery对象.addClass（[样式名]）

$() は次のことを表します取得の意味は

document.getElemenById("id name")

と同等ですが、もちろん document.getElementsByClassName("class name") などと同等です。 . 上記の理由と同じです。 $ シンボルは主に要素オブジェクトを取得するために使用され、オブジェクトを取得することで jquery メソッドを使用して操作することができます。

$ は実際には jQuery の別名で、jQuery オブジェクトを指します。jQuery は jQuery ライブラリによって提供される関数です。この関数の機能は、次の内容に基づいて HTML を検索して選択することです。 () 内のパラメーター ドキュメント内の要素の場合、関数関数の 1 つは GetElementByID を置き換えることですが、() は ID だけでなく、さまざまなセレクターにすることもできます。

例:

$(document )

ドキュメント オブジェクト全体を選択することです

$ でのみ置き換えることはできますか? いいえ。名前の競合を防ぐために、jQuery ライブラリは、jQuery 関数に追加のエイリアスを与える追加のメカニズムを提供します。 例:

var jq = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

コード内で jQuery および $ の代わりに jq を使用できます。

簡単に言うと、$はjqueryオブジェクト、$()はパラメータを渡せるjQuery()、要素を取得する関数です。

jquery のセレクター

jQuery セレクターを使用すると、HTML 要素のグループまたは個々の要素に対する操作が可能になります。 jQuery セレクターは、要素の ID、クラス、タイプ、属性、属性値などに基づいて HTML 要素を「検索」(または選択) します。これは、いくつかのカスタム セレクターに加えて、既存の CSS セレクターに基づいています。

1.基本セレクター

$("#test")             　　　　   选择id值为test的元素，id值是唯一的所以返回单个元素。
$("div")               　　　　   选择所有的div标签元素，返回div元素数组 
$(".myclass")          　　　　   选择使用myclass类的css的所有元素 
$("*")                 　　　　   选取所有元素。
$("#test,div,.myclass")  　　    选取多个元素。

2.階層セレクター

$("div span") 　　　　　　　　　　  选取<div>里的所有<span>元素
$("div >span")   　　　　　　　　  选取<div>元素下元素名是<span>的子元素
$("#one +div")   　　　　　　　　  选取id为one的元素的下一个<div>同辈元素    　　　　等同于$("#one").next("div")
$("#one~div")    　　　　　　　　  选取id为one的元素的元素后面的所有<div>同辈元素    等同于$("#one").nextAll("div")
$("#one").siblings("div") 　　   获取id为one的元素的所有<div>同辈元素（不管前后）
$("#one").prev("div") 　　 　　 　获取id为one的元素的前面紧邻的同辈<div>元素

所以 获取元素范围大小顺序依次为：
$("#one").siblings("div")>$("#one~div")>$("#one +div")  
或是
$("#one").siblings("div")>$("#one").nextAll("div")>$("#one").next("div")

3.基本フィルター選択 Filter

$("div:first")               　　选取所有<div>元素中第1个<div>元素
$("div:last")                   选取所有<div>元素中最后一个<div>元素
$("input:not(.myClass)")        选取class不是myClass的<input>元素 
$("input:even")                 选取索引是偶数的<input>元素(索引从0开始) 
$("input:odd")                  选取索引是基数的<input>元素(索引从0开始) 
$("input:eq(2)")                选取索引等于2的<input>元素 
$("input:gt(4)")                选取索引大于4的<input>元素
$("input:lt(4)")                选取索引小于4的<input>元素
$(":header")                    过滤掉所有标题元素，例如：h1、h2、h3等
$("div:animated")               选取正在执行动画的<div>元素  
$(":focus")                     选取当前获取焦点的元素

4. コンテンツ フィルター セレクター

$("div:contains(&#39;Name&#39;)")       选取所有<div>中含有&#39;Name&#39;文本的元素 
　　
$("div:empty")                  选取不包含子元素（包括文本元素）的<div>空元素 

$("div:has(p)")                 选取所有含有<p>元素的<div>元素 

$("div:parent")                 选取拥有子元素的（包括文本元素）<div>元素

5. 可視性フィルター セレクター

　　　　$("div:hidden")                 选取所有不可见的<div>元素 

　　　　$("div:visible")                选取所有可见的<div>元素

6.属性フィルター セレクター

$("div[id]")              　　　　选取所有拥有属性id的元素
$("input[name=&#39;test&#39;]")     　　 选取所有的name属性等于&#39;test&#39;的<input>元素 
 
$("input[name!=&#39;test&#39;]")  　　　　选取所有的name属性不等于&#39;test&#39;的<input>元素 
 
$("input[name^=&#39;news&#39;]")        选取所有的name属性以&#39;news&#39;开头的<input>元素 
$("input[name$=&#39;news&#39;]")        选取所有的name属性以&#39;news&#39;结尾的<input>元素 
$("input[name*=&#39;news&#39;]")        选取所有的name属性包含&#39;news&#39;的<input>元素 
$("div[title|=&#39;en&#39;]")           选取属性title等于&#39;en&#39;或以&#39;en&#39;为前缀(该字符串后跟一个连字符&#39;-&#39;)的<div>元素
$("div[title~=&#39;en&#39;]")           选取属性title用空格分隔的值中包含字符en的<div>元素

$("div[id][title$=&#39;test&#39;]")     选取拥有属性id,并且属性title以&#39;test&#39;结束的<div>元素

7. サブ要素フィルター セレクター

$("div .one:nth-child(2)")       选取class为&#39;one&#39;的<div>父元素下的第2个子元素

$("div span:first-child")        选取每个<div>中的第1个<span>元素 

$("div span:last-child")         选取每个<div>中的最后一个<span>元素 

$("div button:only-child")       在<div>中选取是唯一子元素的<button>元素

8. フォーム オブジェクト属性フィルター セレクター

$("#form1 :enabled")             选取id为'form1'的表单内所有可用元素
$("#form2 :disabled")            选取id为'form2'的表单内所有不可用元素 
$("input :checked")              选取所有被选中的<input>元素 　　
$("select option:selected")      选取所有的select 的子元素中被选中的元素

9. フォームセレクター

$(":input")                      选取所有<input>,<textarea>,<select> 和 <button>元素 
$(":text")                    　　选取所有的单行文本框
$(":password")                   选取所有的密码框 
$(":radio")                      选取所有单的选框 
$(":checkbox")                   选取所有的多选框 
$(":submit")                     选取所有的提交按钮
$(":image")                      选取所有的图像按钮 
$(":reset")                      选取所有的重置按钮
$(":button")                     选取所有的按钮 
$(":file")                       选取所有的上传域
$(":hidden")                     选取所有不可见元素

jquery のメソッド

jquery の組み込みメソッド (関数)、選択した機能を操作するために使用されます例:

要素スタイルを直接操作する方法

##CSSプロパティ

説明#要素のスタイルを間接的に操作するメソッドjquery では、要素の属性を操作することで要素のスタイルを間接的に操作できます。

css()	一致する要素のスタイル属性を設定または返します。
height()	一致する要素の高さを設定または返します。
offset()	最初に一致した要素のドキュメントに対する相対的な位置を返します。
position()	最初に一致した要素の親要素に対する相対的な位置を返します。
scrollLeft()	スクロール バーの左側を基準とした一致する要素のオフセットを設定または返します。
scrollTop()	スクロール バーの上部を基準とした一致する要素のオフセットを設定または返します。
width()	一致する要素の幅を設定または返します。

#メソッド

説明

addClass()attr()prop()removeAttr()removeClass()toggleClass()

知識を広げる:

DOM モデル

DOM にはさまざまな種類のノードがあり、通常、要素ノード、テキストノード、属性ノードの3種類に分かれます。

DOM オブジェクト

JavaScript では、getElementsByTagName() または getElementsById() を使用して要素ノードを取得できます。結果は DOM オブジェクトであり、以下で使用できます。 JavaScript メソッド。

jQuery オブジェクト

DOM オブジェクトを jQuery でラップして生成されたオブジェクトは、jQuery のメソッドを使用できます。

例: $("#title").html(); //ID が title である要素の HTML コードを取得します

[document.getElementsById("title") と同等. innerHTML]

jQuery オブジェクトと DOM オブジェクトの相互変換

1) jQuery オブジェクトから DOM オブジェクトへの変換

①jQuery オブジェクトは配列です-like object 、対応する DOM オブジェクトは [index] メソッドを通じて取得できます。

②get(index) メソッドを通じて、対応する DOM オブジェクトを取得します。

2) DOM オブジェクトを jQuery オブジェクトに変換する

$() 関数を使用して DOM オブジェクトをラップし、jQuery オブジェクトを取得する必要があります。

[推奨学習: jQuery ビデオ チュートリアル 、Web フロントエンド ビデオ ]

指定された要素を要素クラス名が一致しました。
一致する要素の属性と値を設定または返します。
選択した要素の属性/値を設定または返します
一致するすべての要素から指定された属性を削除します。
一致するすべての要素からすべてのクラスまたは指定されたクラスを削除します。
一致した要素にクラスを追加または削除します。

以上がjquery構文構造はどの部分で構成されていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。