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

一、在输入框中输入数字，点击按钮，实现对应事件的功能。html代码：<inputid="txt1"type="te

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

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(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。