3.jQuery选择器
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345004443979a29e0e0be054e75a652613f132f7f0b000
一、栗子的关键代码
<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> |
2.jQuery选择器
原文地址:https://www.cnblogs.com/Nick-Hu/p/8408844.html