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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jQuery实现简单轮播图效果
Dec 27 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
mysql建立外键
2006/11/25 PHP
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
php获取从html表单传递数组的方法
2015/03/20 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
python基础教程之匿名函数lambda
2017/01/17 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
Django 路由控制的实现代码
2018/11/08 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
最小二乘法及其python实现详解
2020/02/24 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
高级护理实习生自荐信
2013/09/28 职场文书
人事部主管岗位职责
2013/12/26 职场文书
经济管理专业自荐信
2013/12/30 职场文书
公司薪酬管理制度
2014/01/31 职场文书
工作睡觉检讨书
2014/02/25 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书