成都网站建设设计

将想法与焦点和您一起共享

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

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

站在用户的角度思考问题,与客户深入沟通,找到德城网站设计与德城网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站设计制作、成都网站建设、企业官网、英文网站、手机端网站、网站推广、空间域名、网站空间、企业邮箱。业务覆盖德城地区。

html代码:


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

1
2
3
4
5
6
7
8
9

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代码,完成如下功能要求:

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

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

HTML代码:


        
          
          
          
        
      
      
        
          
          
          
          
        
      

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

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

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

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

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秒,让所有的数字逆时针旋转

效果如下:

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

HTML代码:

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


分享题目:jquery之基本选择器practice(实例讲解)
文章地址:http://chengdu.cdxwcx.cn/article/ippghc.html