一、在输入框中输入数字,点击按钮,实现对应事件的功能。
html代码:
<input id="txt1" type="text" value="2" /> <input id="Button5" type="button" value="改变大于N的行背景为绿色" />
jQuery代码:
//改变大于N的行背景为绿色 $("#Button5").click(function () { //获取到ID为txt1的输入框的文本值 var num = $("#txt1").val(); //tr的行的下标从0开始,故现实中的数字应该减一 num = num - 1; $("tr:gt("+num+")").css("background-color", "green"); });
二、点击每一个蓝色线框中的div时,改变它后面紧邻的元素的背景为green
html代码:
<div class="mainbox"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div>
jQuery代码:
$("div").click(function () { $(this).next("div").css("background-color","green"); });
页面加载完毕后,让所有数字为奇数的div的字体颜色改为blue
//2.页面加载完毕后,让所有数字为奇数的div的字体颜色该为blue //$("div.mainbox>div:even").css("color", "blue"); for (var i = 0; i < $(".mainbox>div").length; i++) { //获取到每div的集合 var valu = $(".mainbox>div"); //获取到每一个div中的文本内容 var txt = $(valu[i]).text(); //将string转换为int value = parseInt(txt); //取模进行奇偶判断 if (value%2!=0) { $(valu[i]).css("color", "blue"); } }
三、编写javascript代码,完成如下功能要求:
实现全选、反选、全不选功能
HTML代码:
<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>
jQuery代码:
$(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; } } }); });
四、 将所有div标记下的儿子p前景色改为red
将所有div标记的孙子span前景色改为green
将i的爷爷的前景色改为Orange
HTML代码:
<div> <span>七大洲有哪些:大米粥、小米粥、绿豆粥、八宝粥... ...</span> <p> <span>中国四大发明时什么:油盐酱醋</span> </p> <p> 我拿什么拯救你,<span>我的<i>瞌睡虫</i></span> </p> </div>
jQuery代码:
$(function () { //将所有div标记下的儿子p前景色改为red $("#Button1").click(function () { $("div>p").css("color","red"); }); //将所有div标记的孙子span前景色改为green $("#Button2").click(function () { $("div").children().children().css("color","green"); }); //将i的的爷爷的前景色改为Orange $("#Button3").click(function () { $("i").parent().parent().css("color","orange"); }); });
五、请编写javascript代码,完成如下功能要求:
每隔1秒,让所有的数字逆时针旋转
效果如下:
HTML代码:
<div class="box"> <table id="table1" class="mytable"> <tr> <td> <label id="Label1"> 1 </label> </td> <td> <label id="Label2"> 2 </label> </td>
jQuery代码:
$(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; }); }
以上这篇jquery之基本选择器practice(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新日志
2024年11月14日
2024年11月14日
- 魔兽世界wlk暗牧一键输出宏是什么 wlk暗牧一键输出宏介绍
- 群星.1996-红不让台语原唱2辑【福和唱片】【WAV+CUE】
- 郭书瑶.2009-爱的抱抱(EP)【种子音乐】【FLAC分轨】
- 郑瑞芬.1989-BE.MY.BABY【现代】【WAV+CUE】
- 花钱请人每周放30万只不咬人的蚊子 防治登革热传播
- 饭制《第一后裔》丧尸版弗蕾娜
- 贝克汉姆亲临!2024FC品类游戏嘉年华圆满落幕
- 「命轨爻错之翼」风之翼发放说明
- 《原神》前瞻特别节目回顾长图
- 米游币抽抽乐-原神专场现已开启!
- 黑鸭子2001《风情中国HQCD》[日本版][WAV+CUE]
- 陈杰洲1990-成人礼[滚石][WAV+CUE]
- MarkAanderud-HandsFree(2024)[24-44,1]FLAC
- 孙露《观心》1:1母盘直刻限量版[低速原抓WAV+CUE][361M]
- 钟志刚《汽车DJ玩主》[低速原抓WAV+CUE][1G]