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 Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jquery实现轮播图特效
Apr 12 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 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编写的导航条程序
2006/10/09 PHP
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
Django基础知识与基本应用入门教程
2018/07/20 Python
python协程之动态添加任务的方法
2019/02/19 Python
Pygame的程序开始示例代码
2020/05/07 Python
Python如何读写二进制数组数据
2020/08/01 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
银行实习人员自我鉴定
2013/09/22 职场文书
物流经理自我评价
2013/09/23 职场文书
计算机应用毕业生自荐信
2013/10/23 职场文书
单位单身证明样本
2014/10/11 职场文书
三人合伙协议书范本
2014/10/29 职场文书
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript