宝哥软件园

jquery之基本选择器练习(实例讲解)

编辑:宝哥软件园 来源:互联网 时间:2021-09-03

一、在输入框中输入数字,点击按钮,实现对应事件的功能。

超文本标记语言代码:

输入id='txt1 '类型=“文本”值=' 2 '/输入id='Button5 '类型='按钮'值='改变大于普通的行背景为绿色/jQuery代码:

//改变大于普通的行背景为绿色$('#Button5 ').单击(函数(){//获取到身份为txt1的输入框的文本值var num=$('#txt1 ').val();//tr的行的下标从0开始,故现实中的数字应该减一num=num-1;$(“tr : gt”(“num”)).css(“”背景色','绿色');});二、点击每一个蓝色线框中的差异时,改变它后面紧邻的元素的背景为绿色的

超文本标记语言代码:

分区一/二/三/四/五/六/七/八/九/九分区代码:

$(“div”).单击(function () { $(this)).下一个(' div ').css(“”背景色','绿色');});页面加载完毕后,让所有数字为奇数的差异的字体颜色改为蓝色

//2.页面加载完毕后,让所有数字为奇数的差异的字体颜色该为blue//$(' div。mainbox div : even ').css('color ',' blue ');for(var I=0;i $(' .mainboxdiv ').长度;i ) { //获取到每差异的集合var valu=$(' .mainbox div’);//获取到每一个差异中的文本内容var txt=$(valu[i]).text();//将线转换为(同Internationalorganizations)国际组织值=ParSeint(txt);//取模进行奇偶判断如果(值%2!=0){ $(value[I]).css('color ',' blue ');} }三、编写爪哇岛描述语言代码,完成如下功能要求:

实现全选、反选、全不选功能

超文本标记语言代码:

tr td标签输入类型='收音机'名称='selectMode' id='selectAll' /全选/标签标签输入类型='收音机'名称=' selectMode ' id=' selectNotAll '/全不选/标签标签输入类型='收音机'名称=' selectMode ' id=' selectreverse '/反选/标签/TD/tr/TD标签输入类型='checkbox' id='Checkbox3' /刘德华/标签标签输入类型='checkbox' id='Checkbox4' /张学友/标签标签输入类型='checkbox' id='Checkbox5' /孙燕姿/标签标签输入类型='checkbox' id='Checkbox6' /刘欢/label /td /trjQuery代码:

$(function () { //全选//方法1: $('#selectAll ').单击(function () { $('#Checkbox3,#Checkbox4,#Checkbox5,#Checkbox6 ').prop('checked ',true);});//方法2: $('#selectAll ').单击(function () { //:checkbox -选取所有类型为检验盒的投入标签$(“:复选框”).prop('checked ',true);});//全不选$('#selectNotAll ').单击(function () { $(':checkbox ').prop('checked ',false);});//反选方法1:$(' # selectreverse ').单击(function () { $(':checkbox ').每个(函数(){ $(此)).道具('选中',$(这个)。道具('选中');});});//反选方法二2:$(' # selectreverse ').单击(function(){ $(' input[type=checked]').每个(函数(I,n) { n.checked=!n。已检查;});});//反选方法3:$(' # selectreverse ').click(function(){ var $ bob=$(' input[type=checked]');for(var I=0;如果(鲍勃[我].选中==true) { $bob[i].选中==false} else { $bob[i].checked==true } } });});四、将所有差异标记下的儿子p前景色改为红色

将所有差异标记的孙子跨度前景色改为绿色的

将我的爷爷的前景色改为柑橘

超文本标记语言代码:

七大洲有哪些:米粥、小米粥、绿豆粥、八宝粥./span p span中国的四大发明是什么:油盐酱醋/span/p/p我能救你什么,span我困了/i/span /p /divjQuery代码:

$(function () {//将所有div标签下son p的前景色改为红色$ ('# button1 ')。click (function () {$ ('divp '))。CSS('颜色','红色');});//将所有div标记的孙代跨度前景色更改为绿色$ ('# button2 ')。单击(function () {$ ('div ')。儿童()。儿童()。CSS('颜色','绿色');});//把我爷爷的前景色改成橙色$ ('# button3 ')。单击(function () {$ ('I '))。父项()。父项()。CSS('颜色','橙色');});});五、请编写javascript代码,满足以下功能需求:

每隔1秒钟,让所有的数字逆时针旋转

效果如下:

HTML代码:

Div类=' box '表id=' table1 '类=' my table ' tr TD label id=' label 1 ' 1/label/TDT label id=' label 2 ' 2/label/tdj query代码:

$(function(){ window . setinterval(fun,1000);});//方法1:function fun(){ $(' # table 1 label ')。每个(函数(I,n){//获取文本值var $item=$(n)。当前标签的文本();//将其转换为int类型$ item=parseInt($ item);If ($item==8) {//Assign $(n)。当前标签的文本(“^ 1”);} else {//assign $(n)。当前标签的文本($item 1 );} });};//方法2:function fun 2(){ $(' # table 1 label ')。每个(函数(){var n=$ (this))。text();n;if(n8){ n=1;} this . TextContent=n;//$(这个)。text()=n;});}以上jquery的基本选择器练习是边肖与大家分享的全部内容,希望能给大家一个参考,多多支持我们。

更多资讯
游戏推荐
更多+