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


Posted in jQuery onSeptember 30, 2017

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

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

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

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

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

效果如下:

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

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

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jquery 键盘事件的使用方法详解
Sep 13 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 #jQuery
jQuery选择器之子元素过滤选择器
Sep 28 #jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 #jQuery
jquery实现左右轮播图效果
Sep 28 #jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 #jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 #jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 #jQuery
You might like
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
js倒计时小程序
2013/11/05 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
深入Python解释器理解Python中的字节码
2015/04/01 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
Python线性回归实战分析
2018/02/01 Python
python使用tornado实现登录和登出
2018/07/28 Python
在python中做正态性检验示例
2019/12/09 Python
史泰博(Staples)中国官方网站:办公用品一站式采购
2016/09/05 全球购物
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
市场营销职业生涯规划书范文
2014/01/12 职场文书
幼儿园秋游感想
2014/03/12 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
新课程改革心得体会
2016/01/22 职场文书
《火烧云》教学反思
2016/02/23 职场文书
python字符串的一些常见实用操作
2022/04/06 Python