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> |