微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

HTML代码

rush:xhtml;">

jQuery代码

rush:xhtml;"> //改变大于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代码

rush:xhtml;">
Box">
1
2
3
4
5
6
7
8
9

jQuery代码

rush:xhtml;"> $("div").click(function () { $(this).next("div").css("background-color","green"); });

页面加载完毕后,让所有数字为奇数的div的字体颜色改为blue

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

rush:xhtml;"> 全选 刘德华

jQuery代码

rush:xhtml;"> $(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代码

rush:xhtml;">
七大洲有哪些:大米粥、小米粥、绿豆粥、八宝粥... ...

中国四大发明时什么:油盐酱醋

我拿什么拯救你,我的瞌睡虫

</p>

jQuery代码

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

rush:xhtml;">
Box">

jQuery代码

8) { n = 1; } this.textContent = n; //$(this).text() = n; }); }

以上这篇jquery之基本选择器practice(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐