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*/);
});
});
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（）方法
});
});
这是段落中的粗体文本。
<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（）方法
});
});
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:
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 + ")";
}); 》》》》》》回调函数
});
});
这是粗体文本。
这是另一段粗体文本。
设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变（设置）链接中 href 属性的值：
<script></script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
});
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";
});
});
});
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
Text.
"; // HTMLに新しい要素を作成します var txt2=$("").text("Text."); // jQuery で新しい要素を作成しますvar txt3=document.createElement("p");txt3.innerHTML="Text." // DOM を通じてテキストを作成します
$("body").append( txt1 ,txt2,txt3); // 新しい要素を追加します}
クエリ() メソッド 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 の別の段落です。
削除された要素をフィルタリングする
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 型を取得します。または、送信されたフォームの値、または特定のフォームで送信されたデータを読み取るために使用されます
。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
