Dieser Artikel bietet Ihnen eine grundlegende Praxis für die JQuery-Auswahl (Erklärung mit Beispielen). Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
1. Geben Sie die Nummer in das Eingabefeld ein und klicken Sie auf die Schaltfläche, um die Funktion des entsprechenden Ereignisses auszuführen.
HTML-Code:
<input id="txt1" type="text" value="2" />
<input id="Button5" type="button" value="改变大于N的行背景为绿色" />
Nach dem Login kopieren
jQuery-Code:
//改变大于N的行背景为绿色
$("#Button5").click(function () {
//获取到ID为txt1的输入框的文本值
var num = $("#txt1").val();
//tr的行的下标从0开始，故现实中的数字应该减一
num = num - 1;
$("tr:gt("+num+")").css("background-color", "green");
});Nach dem Login kopieren
2. Wenn Sie in jedem blauen Drahtmodell auf das p klicken, ändern Sie das Element direkt dahinter. Der Hintergrund ist grün
HTML-Code:
<p class="mainbox">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</p>
Nach dem Login kopieren
jQuery-Code:
$("p").click(function () {
$(this).next("p").css("background-color","green");
});Nach dem Login kopieren
Lassen Sie nach dem Laden der Seite die Schriftfarbe aller p's mit ungeraden Zahlen Drittens: Schreiben Sie Javascript-Code für Blau
//2.页面加载完毕后，让所有数字为奇数的p的字体颜色该为blue
//$("p.mainbox>p:even").css("color", "blue");
for (var i = 0; i < $(".mainbox>p").length; i++) {
//获取到每p的集合
var valu = $(".mainbox>p");
//获取到每一个p中的文本内容
var txt = $(valu[i]).text();
//将string转换为int
value = parseInt(txt);
//取模进行奇偶判断
if (value%2!=0) {
$(valu[i]).css("color", "blue");
}
}Nach dem Login kopieren
, um die folgenden Funktionsanforderungen zu erfüllen:
Realisieren Sie alle Auswahl-, Umkehrauswahl- und keine Auswahlfunktionen
HTML-Code:
<tr>
<td>
<label>
<input type="radio" name="selectMode" id="selectAll" />全选
</label>
<label>
<input type="radio" name="selectMode" id="selectNotAll" />全不选
</label>
<label>
<input type="radio" name="selectMode" id="selectRevorse" />反选
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" id="Checkbox3" />刘德华
</label>
<label>
<input type="checkbox" id="Checkbox4" />张学友
</label>
<label>
<input type="checkbox" id="Checkbox5" />孙燕姿
</label>
<label>
<input type="checkbox" id="Checkbox6" />刘欢
</label>
</td>
</tr>
Nach dem Login kopieren
jQuery-Code:
$(function () {
//全选
//方法1：
$("#selectAll").click(function () {
$("#Checkbox3,#Checkbox4,#Checkbox5,#Checkbox6").prop("checked",true);
});
//方法2：
$("#selectAll").click(function () {
//:checkbox--选取所有类型为checkbox的input标签
$(":checkbox").prop("checked", true);
});
//全不选
$("#selectNotAll").click(function () {
$(":checkbox").prop("checked", false);
});
//反选方法1：
$("#selectRevorse").click(function () {
$(":checkbox").each(function () {
$(this).prop("checked", !$(this).prop("checked"));
});
});
//反选方法二2：
$("#selectRevorse").click(function () {
$("input[type=checked]").each(function (i, n) {
n.checked = !n.checked;
});
});
//反选方法3：
$("#selectRevorse").click(function () {
var $bob = $("input[type=checked]");
for (var i = 0; i < $bob.length; i++) {
if ($bob[i].checked == true) {
$bob[i].checked == false;
}
else {
$bob[i].checked == true;
}
}
});
});Nach dem Login kopieren
4. Ändern Sie die Vordergrundfarbe des Sohns p unter allen p-Tags in Rot
Ändern Sie die Vordergrundfarbe der Enkelspanne aller p-Tags in Grün
Ändern Sie die Vordergrundfarbe von i's Opa in Orange
HTML-Code:
<p>
<span>七大洲有哪些：大米粥、小米粥、绿豆粥、八宝粥... ...</span>
<p>
<span>中国四大发明时什么：油盐酱醋</span>
</p>
<p>
我拿什么拯救你，<span>我的<i>瞌睡虫</i></span>
</p>
</p>
Nach dem Login kopieren
jQuery-Code:
$(function () {
//将所有p标记下的儿子p前景色改为red
$("#Button1").click(function () {
$("p>p").css("color","red");
});
//将所有p标记的孙子span前景色改为green
$("#Button2").click(function () {
$("p").children().children().css("color","green");
});
//将i的的爷爷的前景色改为Orange
$("#Button3").click(function () {
$("i").parent().parent().css("color","orange");
});
});Nach dem Login kopieren
5. Bitte schreiben Sie Javascript-Code, um die folgenden Funktionsanforderungen zu erfüllen:
Alle Zahlen alle 1 Sekunde gegen den Uhrzeigersinn drehen
Der Effekt ist wie folgt:
HTML-Code:
<p class="box">
<table id="table1" class="mytable">
<tr>
<td>
<label id="Label1">
1
</label>
</td>
<td>
<label id="Label2">
2
</label>
</td>
Nach dem Login kopieren
jQuery-Code:
$(function () {
window.setInterval(fun, 1000);
});
//方法一：
function fun() {
$("#table1 label").each(function (i, n) {
//获取到当前label的文本值
var $item = $(n).text();
//将其转换为int型
$item = parseInt($item);
if ($item == 8) {
//给当前label赋值
$(n).text("1");
}
else {
//给当前label赋值
$(n).text($item+1);
}
});
};
//方法二：
function fun2() {
$("#table1 label").each(function () {
var n = $(this).text();
n++;
if (n > 8) {
n = 1;
}
this.textContent = n;
//$(this).text() = n;
});
}Nach dem Login kopieren
Verwandte Empfehlungen:
Detaillierte Erläuterung des CSS-Attributselektors
Detaillierte Erläuterung der Verwendung des Hover-Selektors in CSS
jQuery-Selektorsymbolanalyse
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der JQuery-Selektorpraxis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
