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 tip提示插件(实例分享)
Apr 28 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
详解jquery选择器的原理
Aug 01 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
PHP实现小偷程序实例
2016/10/31 PHP
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
Python三级菜单的实例
2017/09/13 Python
scrapy爬虫完整实例
2018/01/25 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
解决python 上传图片限制格式问题
2019/10/30 Python
np.random.seed() 的使用详解
2020/01/14 Python
Python中os模块功能与用法详解
2020/02/26 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
应届生妇产科护士求职信
2013/10/27 职场文书
安全生产责任书范本
2014/04/15 职场文书
高中生操行评语
2014/04/25 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript