分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

2.jQuery选择器

发布时间:2023-09-06 01:40责任编辑:白小东关键词:jQuery选择器
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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved