JQUERY

jQuery 要素セレクター

jQuery は CSS セレクターを使用して HTML 要素を選択します。

$("p") は

要素を選択します。

$("p.intro") は、class="intro" を持つすべての

要素を選択します。

$("p#demo") は、id="demo" を持つ最初の

要素を選択します。

jQuery 属性セレクター

jQuery は、XPath 式を使用して、指定された属性を持つ要素を選択します。

$("[href]") href 属性を持つすべての要素を選択します。

$("[href='#']") href 値が「#」に等しいすべての要素を選択します。

$("[href!='#']") href 値が「#」に等しくないすべての要素を選択します。

$("[href$='.jpg']") href 値が「.jpg」で終わるすべての要素を選択します。

jQuery CSS セレクター

jQuery CSS セレクターは、HTML 要素の CSS プロパティを変更するために使用できます。

次の例では、すべての p 要素の背景色を赤に変更します:

$(document).ready(function(){

  $("button").click(function(){              》》》》》》》元素选择器

    $("p").css("background-color","yellow");

  });

});

これは見出しです

これは段落です。

これは別の段落です。

クリックしてください

jQuery AJAX の例

$(document).ready(function(){

  $("#b01").click(function(){   》》》》》》》》》属性选择器

  $('#myDiv').load('../jquery/test1.txt.htm'/*tpa=http://www.w3school.com.cn/jquery/test1.txt*/);

  });

});

このテキストを AJAX に変更してもらいましょう

Change Content

jQuery - 获得内容和属性

jQuery DOM 操作

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

 

 

<script></script>

$(document).ready(function(){

  $("#btn1").click(function(){

    alert("Text: " + $("#test").text());     >>>>>>>text()方法

  });

  $("#btn2").click(function(){

    alert("HTML: " + $("#test").html());    》》》》》》》》html（）方法

  });

});

 

这是段落中的粗体文本。

显示文本

显示 HTML

 

 

 

 

 

<script></script>

$(document).ready(function(){

  $("button").click(function(){

    alert("Value: " + $("#test").val());      >>>>>>>>>val（）方法

  });

});

 

姓名：

显示值

 

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值：

 

 

 

<script></script>

$(document).ready(function(){

  $("button").click(function(){

    alert($("#w3s").attr("href"));     》》》》》》》attr（）方法

  });

});

 

W3School.com.cn

显示 href 值

jQuery - 设置内容和属性

设置内容 - text()、html() 以及 val()

<script></script>

$(document).ready(function(){

  $("#btn1").click(function(){

    $("#test1").text("Hello world!");     》》》》》》设置text（）方法

  });

  $("#btn2").click(function(){

    $("#test2").html("Hello world!");    》》》》》设置html（）方法

  });

  $("#btn3").click(function(){

    $("#test3").val("Dolly Duck");    》》》》》设置val（）方法

  });

});

这是段落。

这是另一个段落。

Input field:

设置文本

设置 HTML

设置值

 

 

 

 

 

text()、html() 以及 val() 的回调函数

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 text() 和 html()：

<script></script>

$(document).ready(function(){

  $("#btn1").click(function(){

    $("#test1").text(function(i,origText){

      return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";

    });     》》》》》回调函数

  });

  $("#btn2").click(function(){

    $("#test2").html(function(i,origText){

      return "Old html: " + origText + " New html: Hello world! (index: " + i + ")";

    });    》》》》》》回调函数

  });

});

这是粗体文本。

这是另一段粗体文本。

显示旧/新文本

显示旧/新 HTML

设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。

下面的例子演示如何改变（设置）链接中 href 属性的值：

<script></script>

$(document).ready(function(){

  $("button").click(function(){

    $("#w3s").attr("href","http://www.w3school.com.cn/jquery");

  });

});

W3School.com.cn

改变 href 值

attr() 方法也允许您同时设置多个属性。

下面的例子演示如何同时设置 href 和 title 属性：

$(document).ready(function(){

       $("button").click(function(){

       $("#a1").attr({

           "href":"http://www.w3school.com.cn",

           "title":"W3School jQuery 教程"

       });

       });

});

      百度

  

   改变

 

attr() 的回调函数

jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 attr() 方法：

$(document).ready(function(){

  $("button").click(function(){

    $("#w3s").attr("href", function(i,origValue){

      return origValue + "/jquery";

    });

  });

});

w3school.com.cn

改变 href 值

jQuery - 要素を追加する

新しい HTML コンテンツを追加する

新しいコンテンツを追加するための 4 つの jQuery メソッドを学習します:

append() - 選択した要素の末尾にコンテンツを挿入する

prepend() - コンテンツを挿入する前選択した要素の先頭

after() - 選択した要素の後にコンテンツを挿入

before() - 選択した要素の前にコンテンツを挿入

jQuery append() メソッド

jQuery append() メソッド選択した要素の末尾にコンテンツを挿入します。

$(document).ready(function(){

$("#b2").click(function(){

$("p").append("追加テキスト.");》 》append()メソッド

});

$("#b3").click(function(){

} $("ol").append("

追加テキスト

.");

} ) ;

});

asdfsdfads

asdfsa

cccccccc

2. テキストを追加

3. リストを追加

append() を通じていくつかの新しい要素を追加しますと prepend() メソッド

上の例では、選択した要素の先頭/末尾にテキスト/HTML のみを挿入します。

ただし、append() メソッドと prepend() メソッドは、パラメーターを介して無制限の数の新しい要素を受け取ることができます。テキスト/HTML は、jQuery (上の例のように)、または JavaScript コードと DOM 要素を介して生成できます。

function appendText()

{

var txt1="

Text.

"; // HTMLに新しい要素を作成します

var txt2=$("

").text("Text."); // jQuery で新しい要素を作成します

var txt3=document.createElement("p");

txt3.innerHTML="Text." // DOM を通じてテキストを作成します

$("body").append( txt1 ,txt2,txt3); // 新しい要素を追加します

}

クエリ() メソッド

jQuery after() メソッドは、選択した要素の後にコンテンツを挿入します。

jQuery before() メソッドは、選択した要素の前にコンテンツを挿入します。

$(document).ready(function(){

$("#btn1").click(function(){

$("img").before("

Before

"); >>> >>>>>メソッド

});

$("#btn2").click(function(){

$("img").after("

After

");

});

});

画像の前にテキストを追加します

画像の後ろにテキストを追加します

after() と before( ) メソッド いくつかの新しい要素を追加します

after() メソッドと before() メソッドは、パラメーターを通じて無制限の数の新しい要素を受け取ることができます。新しい要素は、text/HTML、jQuery、または JavaScript/DOM 経由で作成できます。 OnFunction afterst () {

var txt1 = "

i "; // HTML で要素を作成します

var txt2 = $ ("

") 要素を作成します

var txt3=document.createElement("big") ; // DOM を通じて要素を作成します txt3.innerHTML="jQuery!";

$("img").after(txt1,txt2,txt3) ; 要素とコンテンツは、通常、次の 2 つの jQuery メソッドを使用できます。 remove() - 選択した要素 (およびそのサブ要素) を削除します。

empty() - 選択した要素からサブ要素を削除します。

jQueryのremove() メソッド

jQuery要素とその子要素。

$(document).ready(function(){

$("button").click(function(){ $("#div1").remove(); 》》》》に変更可能empty () メソッド

});});

これは div 内のテキストです

これは div 内の段落です

これは div の別の段落です。

div要素を削除する

削除された要素をフィルタリングする

jQueryのremove()メソッドはパラメータも受け入れ、削除された要素をフィルタリングすることができます。

このパラメータには、任意の jQuery セレクター構文を使用できます。

次の例では、class="italic" のすべての

要素を削除します。

(document).ready(function(){

$("button").click(function(){

$("p" ).remove(".italic"); 》》》》パラメータを受け入れます

});

});

これはdiv内の段落です.

これは div の別の段落です

》》》》パラメーターを定義するクラスを設定します

これは div の別の段落です

class="italic" p をすべて削除しますelement

要素セレクター

jQuery 要素セレクターは、名前に基づいて要素を選択します。

ページ内のすべての

要素を選択します:

$("p")

$(document).ready(function(){

$("button").click(function(){

$("p ").hide(); ******
});
});

#id selector

jQuery #id selector は、HTML 要素の id 属性を通じて指定された要素を選択します。

ページ内の要素の ID は一意である必要があるため、ページ内で一意の要素を選択したい場合は、#id セレクターを使用する必要があります。

ID で要素を選択するための構文は次のとおりです:

$(document).ready(function(){

$("button").click(function(){

$("#test").hide (); * ******
});
});

.class selector

jQuery クラスセレクターは、指定されたクラスで要素を検索できます。

構文は次のとおりです:

$(document).ready(function(){

$("button").click(function(){

$(".test").hide();
} );
});

getParameter はすべての String 型を取得します。または、送信されたフォームの値、または特定のフォームで送信されたデータを読み取るために使用されます

。