2.jQuery选择器

3.jQuery选择器

---

一、栗子的关键代码

<p id="para-1" class="color-red">JavaScript</p>
<p id="para-2" class="color-green">Haskell</p>
<p class="color-red color-green">Erlang</p>
<p name="name" class="color-black">Python</p>

 

<div>
<button id="oneBtn">只选择JavaScript</button>
<button id="twoBtn">只选择Erlang</button>
<button id="threeBtn">选择JavaScript和Erlang</button>
<button id="fourBtn">选择所有编程语言</button>
</div>

 

<script>/*类选择器*//*若干选择*/
$("#threeBtn").click(function () {
var twoElements = $(".color-red");
for(var j = 0; j < twoElements.length; j++){
twoElements[j].innerHTML = "two elements";
}
});
$("#twoBtn").click(function () {
var Erlang = $(".color-red.color-green").get(0);
Erlang.innerHTML = "foucs the Erlang";
});
/*id选择器*/
$("#oneBtn").click(function () {
var para_1 = $("#para-1").get(0);
para_1.innerHTML = "I am choose the javaScript!";
});/*选择所有*/
$("#fourBtn").click(function () {
var language = $(".color-red,.color-green,.color-black");
for(var i=0; i < language.length; i++){
language[i].innerHTML = "select all";
}
});
</script>