ホームページ  >  記事  >  ウェブフロントエンド  >  JQuery API で JQuery を学ぶパート 2 Properties_jquery

JQuery API で JQuery を学ぶパート 2 Properties_jquery

WBOY
WBOYオリジナル
2016-05-16 18:29:521116ブラウズ

多くの場合、ノードの属性、コンテンツ、テキストを変更する必要があるため、ここではいくつかの関数を使用する必要があります。

1 属性
ここでは、attr() 関数が示されています。この関数には 4 つの形式があります。Attr(name) は、選択された属性値、attr(properties)attr (key) を取得します。 , value) attr (key, fn) は属性に値を代入することです
ここで言いたいのは、Jquery にもそのような設計があるということです オブジェクトの値を取得して代入するのにも同じ関数が使用されます。オブジェクトに値を割り当てるには fn(name) を使用し、オブジェクトに値を割り当てるには fn(name, value) を使用します。
まず、attr(name) が属性値を取得する方法を見てみましょう

JQuery API で JQuery を学ぶパート 2 Properties_jqueryこのようにして、img の stc の値を取得したいと考えています。まず、セレクターを使用して選択します。この img $ ("img") は上のノードを取得し、attr() を使用して src の値を取得します: $("img").attr("src")
このようにして値を取得しますof 1.jpg

ここで、画像 1.jpg を画像 2.jpg に置き換えたいと思います。$("img").attr("src","2.jpg") を使用するだけです。は fn ( name, key) です。もちろん、JavaScript では onclick が関数になる可能性があることはわかっています。もちろん、他の属性も関数になる可能性があるため、キーも関数 $("img") になる可能性があります。 attr("src ”, function(){return '3.jpg'})、これは 2 番目の形式で、実際には最初のものと同じです
3 番目の形式、つまり attr (プロパティ) は次のとおりです。 josn 形式。Name: value は属性を割り当てるために使用されます。Jquery では、このメソッドは非常によく使用され、構造も非常に明確です。
たとえば、img の alt と src を直接設定することができます。 $("img").attr( {src:”4.jpg”,alt:”Description”})
一般にシステムを構築する場合、追加、変更、削除が必要になります。最初の 2 つについては前に説明しましたが、属性を削除するにはどうすればよいでしょうか?
ここでは、わかりやすいように、removeAttr(name) を使用する必要があります。これは、arrt(name) の逆です。もう 1 つは属性を削除することです。属性 $("img").removeAttr("alt")

それでは、属性を操作するためのいくつかの関数をまとめてみましょう。
検索: $("img ").attr("src") src の値を検索
追加/変更 $("img").attr("src","2.jpg") $("img").attr("src" ”,function(){return “2 .jpg”}) $("img").attr({src:"2.jpg"})
削除 $("img").removeAttr("src")

2 css クラス

などのノードに CSS スタイルを追加する必要がある場合、 上記の属性メソッドに従って、まず css クラススタイルを作成します .sty{...} を追加し、この div を選択してクラス $("div").attr("class","sty") を追加します,
後でこれもそうなのかが分かりました 面倒なので上記の
$("div").addClass("sty")を省略するaddClass(class)を考案して終わりです。
追加されているので、クラス sty を削除するには $("div").removeClass("sty") を削除するのは当然です

toggleClass(class) という関数もありますが、存在する場合は削除し、存在しない場合は削除します。追加するだけです。
これは実に奇妙な関数です。たとえば、





  • li からのマウス入力とマウス移動の両方にこの関数を追加すると、マウス移動の効果を実現できます

3 html

ここでは、html() と html(val) が表示されます。これは、前に説明した関数のタイプです。 fn(name) fn(name, value)Html( ) は最初に一致した要素の HTML クラスの内容を取得します Html(val) は一致したノードの HTML クラスの内容を設定します


4 テキスト

もありますここには 2 つの関数があり、text() text(val) 1 つは値を取得するもので、もう 1 つは値を設定するものです。これは html に似ています。値の違いは、html() が HTML クラスのコンテンツを取得することです。一致する最初の要素であり、text は取得されたテキストです。HTML ノード
が無視され、値が割り当てられた場合、text() は

などの HTML クラスのコンテンツをテキストに変換し、html() は依然として HTML 要素として解釈されます
5 値

ここでも同じ val() と val(val) があり、1 つは値を取得するもので、もう 1 つは値を取得するものです。たとえば、
この値をテキストで取得します $("input").val ()
この値を設定します $("input").val("xxiu" )

ここで属性の確認は終了し、いくつかの関数だけを確認しただけであることがわかりました
attr(name[,val,|fn]) RemoveAttr(name) 削除する設定を追加します属性
addClass(class) RemoveClass(class) クラスを削除するための設定を追加します
html([val]) heml を取得/設定します
text([val]) テキストを取得/設定します
val([val]) 値を取得/設定します
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。