Detailed explanation of jquery selector practice-JS Tutorial-php.cn

This article will bring you a basic selector practice of jquery (explanation with examples). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

1. Enter the number in the input box and click the button to implement the function of the corresponding event.

html code:

Copy after login

jQuery code:

//改变大于N的行背景为绿色 $("#Button5").click(function () { 　　　　　　　　//获取到ID为txt1的输入框的文本值 var num = $("#txt1").val(); 　　　　　　　　//tr的行的下标从0开始，故现实中的数字应该减一 num = num - 1; $("tr:gt("+num+")").css("background-color", "green"); });

Copy after login

2. When you click on the p in each blue wireframe, change the background of the element immediately behind it to green

html code:

Copy after login

jQuery code:

$("p").click(function () { $(this).next("p").css("background-color","green"); });

Copy after login

After the page is loaded, change the font color of all p's with odd numbers to blue

//2.页面加载完毕后，让所有数字为奇数的p的字体颜色该为blue //$("p.mainbox>p:even").css("color", "blue"); for (var i = 0; i < $(".mainbox>p").length; i++) { //获取到每p的集合 var valu = $(".mainbox>p"); //获取到每一个p中的文本内容 var txt = $(valu[i]).text(); //将string转换为int value = parseInt(txt); //取模进行奇偶判断 if (value%2!=0) { $(valu[i]).css("color", "blue"); } }

Copy after login

3. Write javascript code to complete the following functional requirements:

Realize all selection, inverse selection, and none selection functions

HTML code:

   全选   全不选   反选       刘德华   张学友   孙燕姿   刘欢

Copy after login

jQuery code:

$(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; } } }); });

Copy after login

4. Change the foreground color of all son p tags under p tags to red

Change the foreground color of all grandchild span tags under p tags to green

Change the foreground color of i’s grandfather to Orange

HTML code:

七大洲有哪些：大米粥、小米粥、绿豆粥、八宝粥... ...

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

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

Copy after login

jQuery code:

$(function () { //将所有p标记下的儿子p前景色改为red $("#Button1").click(function () { $("p>p").css("color","red"); }); //将所有p标记的孙子span前景色改为green $("#Button2").click(function () { $("p").children().children().css("color","green"); }); //将i的的爷爷的前景色改为Orange $("#Button3").click(function () { $("i").parent().parent().css("color","orange"); }); });

Copy after login

5. Please write javascript code and complete as follows Functional requirements:

Every 1 second, rotate all numbers counterclockwise

The effect is as follows: