今天在多分享一些jquery的基本练习

最新推荐文章于 2022-07-19 18:02:36 发布
最新推荐文章于 2022-07-19 18:02:36 发布
阅读量119 收藏
点赞数
分类专栏： 基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45116848/article/details/94479861
版权

分享一些小习题
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行换色</title>
</head>
<body>
<table id="table" align="center" border="1px" width="70%" style="border-collapse: collapse;">
    <tr>
        <th>分类ID</th>
        <th>分类名称</th>
        <th>分类描述</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td>
            <a href="#">修改</a>
            <a href="#">删除</a>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td>
            <a href="#">修改</a>
            <a href="#">删除</a>
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td>
            <a href="#">修改</a>
            <a href="#">删除</a>
        </td>
    </tr>
    <tr>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td>
            <a href="#">修改</a>
            <a href="#">删除</a>
        </td>
    </tr>
</table>
</body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    //隔行换色
        //选择下标大于指定值的tr元素,在选择所有的奇数下标的元素
    $("tr:gt(0):odd").css("background","pink");
    $("tr:gt(0):even").css("background","skyblue");

</script>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选,全不选</title>
</head>
<body>
<table class="tb" align="center" border="1px" width="50%" style="border-collapse: collapse;">
    <tr>
        <th>
            <input type="checkbox" id="all" >
            <button id="checkNot">反选</button>
        </th>
        <th>分类ID</th>
        <th>分类名称</th>
        <th>分类描述</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="ck" /></td>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td>
            <a href="#">修改</a>
            <a href="#">删除</a>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" name="ck"/></td>
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td>
            <a href="#">修改</a>
            <a href="#">删除</a>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" name="ck"/></td>
        <td>3</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td>
            <a href="#">修改</a>
            <a href="#">删除</a>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" name="ck"/></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td>
            <a href="#">修改</a>
            <a href="#">删除</a>
        </td>
    </tr>
</table>
</body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
//全选&全不选
//通过最上面的复选框来决定下方的复选框是否选中,把上面的复选框绑定点击事件,点击时判断当前复选框状态,选中则下方全选中,否则选取消
//通过id选择器给复选框绑定点击事件
    $("#all").click(function(){
        //获取除了第一个复选框外的所有复选框元素
        var cks=$(":checkbox[name='ck']");
        //当前选中则去选中
        //得到最上面的复选框的选中状态
        var cked =$("#all").prop("checked");
        //设置下方复选框的选中状态
        cks.prop("checked",cked);
    });
    //反选
    //给反选按钮绑定点击事件
    $("#checkNot").click(function(){
        //得到下方所有的复选框
        var cks=$(":checkbox[name='ck']");
        //遍历复选框
        cks.each(function() {
            //得到遍历的复选框的状态
            var flag = $(this).prop("checked");
            //取反
            $(this).prop("checked", !flag)
        });
    });
</script>
</html>

在这里插入图片描述
JQuery的制作方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
籍贯:
<select id="pro">
    <option value="">请选择</option>
</select>
<select id="city">
    <option value="">请选择</option>
</select>
</body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    //准备初始数据
    //定义省市的数据
    var proList = ["北京","山西","山东","河北","河南"];
    //定义城市的数据
    var cityList = [
        ["东城区","西城区","朝阳区","丰台区","海淀区","昌平区"],
        ["太原市","大同市","运城市","临汾市","忻州市","晋中市"],
        ["济南市","青岛市","威海市","烟台市","临沂市","德州市"],
        ["石家庄市","邢台市","保定市"],
        ["郑州市","焦作市","三门峡市"],
    ];
    //给省市下拉框填充数据
    //遍历省份数组
    for(var i=0;i<=proList.length-1;i++){
       //得到了每个省份的值
        var proDate=proList[i];
        //创建对应的option对象
        var opt ="<option value='"+proDate+"'>"+proDate+"</option>";
        //将option选项添加到省份下拉框中
        $("#pro").append(opt);
    }
    //给省份下拉框绑定change事件
    $("#pro").change(function(){
        //得到当前选中项的索引
        var index=this.selectedIndex;
        //通过索引获取二维数组中对应的城市数据
        var citys=cityList[index-1];//index-1:因为省份下拉框第一个是"请选择"
        //清空城市下拉框的选项
        $("#city option:gt(0)").remove();//除了城市下拉框中的第一个选项之外,其它全部移除
        //遍历城市数组
        for(var i=0;i<citys.length;i++){
            $("#city").append("<option>"+citys[i]+"</option>")
        }
    })
</script>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table align="center">
    <tr>
        <td>
            <select id="left" multiple="true" style="width:150px" size="10">
                <option>a</option>
                <option>b</option>
                <option>c</option>
                <option>d</option>
                <option>e</option>
                <option>f</option>
                <option>g</option>
                <option>h</option>
                <option>i</option>
                <option>j</option>
            </select>
        </td>
        <td>
            <input type="button" value=">" id="toRight1"><br>
            <input type="button" value=">>" id="toRight2"><br>
            <input type="button" value=">>>" id="toRight3"><br><br>
            <input type="button" value="<" id="toLeft1"><br>
            <input type="button" value="<<" id="toLeft2"><br>
            <input type="button" value="<<<" id="toLeft3">
        </td>
        <td>
            <select id="right" multiple="true" style="width:150px" size="10">
            </select>
        </td>
    </tr>
</table>
</body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    //将左侧选中的第一个选项移到右边
    $("#toRight1").click(function(){
        //通过后代选择器得到左侧下拉框的所有option子元素,得到选中的选选项,并得到第一个被选中的选项;将获取的元素追加到右侧的下拉框中
        //#left:    通过ID选择器得到指定对象
        //#left option: 通过后代选择器,选定指定元素的指定后代
        //:selected:得到下拉框所有被选中的内容
        //eq(0):匹配当前元素的指定下标的元素
        //appendTo:在指定元素的内部的最后追加子元素:如果追加的元素本身是存在的,则会直接剪切.
        $("#left option:selected:eq(0)").appendTo($("#right"));
    });
    //将左侧选中的全部移到右边
    $("#toRight2").click(function(){
        //通过后代选择器得到左侧下拉框的所有option子元素,得到选中的选选项,;将获取的元素追加到右侧的下拉框中
        //#left :  通过ID选择器得到指定对象
        //#left option: 通过后代选择器,选定指定元素的指定后代
        //:selected:得到下拉框所有被选中的内容
        //appendTo:在指定元素的内部的最后追加子元素:如果追加的元素本身是存在的,则会直接剪切.
        $("#left option:selected").appendTo($("#right"))
    });
    /* 将左侧所有下拉选项移动到右边 */
    $("#toRight3").click(function(){
        //通过后代选择器得到左侧下拉框的所有option子元素,将所有的元素追加到右侧的下拉框中
        //#left:  通过ID选择器得到指定对象
        //#left option: 通过后代选择器,选定指定元素的指定后代
        //appendTo:在指定元素的内部的最后追加子元素:如果追加的元素本身是存在的,则会直接剪切.
        $("#left option").appendTo($("#right"))
    });
    //将右侧选中的第一个移到左边来
    $("#toLeft1").click(function(){
        //#right 通过ID选择器得到对象
        //#right option 通过后代选择器,选定指定元素的指定后代
        //:selected  得到被选中的元素
        //eq(0)   匹配当前元素的第一个下标元素
       // appendTo  在指定元素的内部的最后追加子元素:如果追加的元素本身是存在的,则会直接剪切.
        $("#right option:selected:eq(0)").appendTo($("#left"));
    });
    //将右侧选中的全部移到左边
    $("#toLeft2").click(function(){
        //通过ID选择器得到对象
        $("#right option:selected").appendTo($("#left"));
    });
    //将右侧所有的元素全部移到左边来
    $("#toLeft3").click(function(){
        //通过ID选择器得到对象
        $("#right option").appendTo($("#left"));
    })
</script>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table id="rating" align="center">
    <tr>
        <td id="0">☆</td>
        <td id="1">☆</td>
        <td id="2">☆</td>
        <td id="3">☆</td>
        <td id="4">☆</td>
    </tr>
</table>
</body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    //得到所有的td对象
    var tds = $("#rating td")
    console.log(tds);
    //遍历td对象,给每个td对象绑定鼠标悬停事件
    tds.each(function () {
        //设置鼠标样式
        $(this).css("cursor", "pointer");
        //给td绑定鼠标悬停事件
        $(this).mouseover(function () {
            //得到当前鼠标悬停的td对象的id属性值
            var index = $(this).attr("id");
            //将鼠标悬停位置的td及其前面的td都变黑
            for (var i = 0; i <= index; i++) {
                $(tds[i]).html("★");
            }
            ;
            // 将鼠标悬停位置的td其后面的td中星星变白
            for (var i = tds.length; i > index; i--) {
                $(tds[i]).html("☆");
            }
        });
    });
</script>
</html>
vitorl_Ch
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现图片水平滚动效果代码分享
10-23
【jQuery实现图片水平滚动效果】 在网页设计中，图片滚动是一种常见的动态展示方式，它可以吸引用户的注意力并增加网站的...如果你希望增加更多的交互性或视觉效果，可以考虑使用专门的jQuery插件，如`jCoverflip`。
xmascounterjQuery:学校作业，jQuery练习
03-17
【xmascounterjQuery】是一个基于jQuery的学校作业项目，旨在帮助学生熟悉并实践JavaScript库jQuery的基本用法。在这个项目中，开发者将学习如何利用jQuery来实现动态计数器功能，通常这种功能在节日主题的网页中...
jQuery的基本过滤器与jQuery实现隔行换色实例
weixin_30296405的博客
03-17 172
没加过滤器之前： 加过滤器之后： 总的代码： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>奇数与偶数过滤器的基本应用</title> ...
jQuery过滤选择器新手练习（又是隔行变色）-来自于三人行慕课
weixin_44424187的博客
07-01 224
原文来源：https://www.3mooc.com/front/articleinfo/186 上次发过一篇jQuery关于DOM对象和jQuery对象使用的隔行变色效果实现的新手练习文章。 今天在这里再做一次隔行变色，来练习使用jQuery过滤选择器。 第一步：创建HTML 我是第1个li 我是第2个li 我是第3个li 我是第4个li 我是第5个li 我是第6个li 我是第7个li 我是第...
html选择器隔行选择,jQuery实现隔行变色、悬停变色 （ CSS3伪类选择器：nth-child() ）...
weixin_28843191的博客
06-15 397
实现隔行变色body{font-size:12px;text-align:center;}#tbStu{width:160px;height:50px;border:1pxsolidgrey;background-color:#eee;}#tbStutr{line-height:23px;}#tbStutrth{background-color:#CCC;color:Bl...
前端小白学习笔记分享：jQuery初体验
qq_42775711的博客
08-21 347
jQuery基本概念 学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常见的效果。 为什么要学习jQuery？ 【01-让div显示与设置内容.html】 使用javascript开发过程中，有许多的缺点： 1. 查找元素的方法太少，麻烦。 2. 遍历伪数组很麻烦，通常要嵌套一大堆的for循环。 3. 有兼容性问题。 4. 想要实现简单的动画效果，也很...
jquery超全基础实例练习
ohdajing的博客
03-31 6591
今天我们继续探讨jquery的相关内容。首先，我们看看基本过滤选择器：                       一、选中单行或双行能不能选中指定的某一个呢？ 二、筛选大于，小于的 三、注意选择的顺序呦:not(选择器) 选取不满足“选择器”条件的元素，$("input:not(.myClass)")选取样式名不是myClass的&lt;input&gt;插入代码位置：View Code 四、h...
【JavaWeb - 网页编程】四 jQuery 操作
woailuo8214的博客
07-19 234
【jQuery 操作】{jQuery 的属性操作}{DOM 的增删改} {jQuery 操作练习}{CSS 样式操作}{jQuery 动画} {jQuery 事件操作}
分享7个不错的jQuery游戏
a994182的博客
03-15 213
jQuery框架经过这么几年的发展，基于jQuery的开源插件库越来越多，而且很多都比较实用。对于我们网站开发者来说，jQuery的确帮了我们很大的忙，让我们真正体会到“write less，do more”的精神宗旨，这里先感谢jQuery。 今天我们的话题是“jQuery小游戏”，主要要向大家分享7个比较经典的基于jQuery的游戏，其中一个是jQuery游戏引擎GameQuery...
ajax jquery 跨域请求天气预报,ajax跨域访问--天气预报小练习分享~【论坛炸了】...
weixin_29284885的博客
08-05 443
快要升级了,最近有学json。所以就有了一个小的练习。因为要升级的原因，所有就赶紧来一波，以后有好的技术分享肯定会第一时间发来的~先来一波图片天气预报介绍首先 介绍下用的东西. HTMLAJAX JavaScript jQuery简单说明没有什么技术含量，按老师的说法是ajax实现网页不刷新动态更新，jQuery 跨域访问 。因为ajax虽然可以实现不刷新页面的更新，但是它不支持跨域访问，jQ...
net jquery ajax 框架,浅谈jQuery框架Ajax常用选项
weixin_31957989的博客
08-05 202
json(JavaScript Object Notation):轻量级的数据交换(交换的数据转换成与平台无关的)格式java对象转换成json字符串,使用ObjectMapper类的writeValueAsString(java对象);将json字符串或者json对象组成的数组字符串转成javascript对象使用javascript内置对象JSON提供的parse函数$.ajax()方法$.a...
jQuery学习的基础部分
weixin_54721820的博客
01-18 266
zhuyaijchuj'chu学习目标： 先听先看---动手练习---分享交流（自己理解内容并尝试讲述） 学习内容： 主要学习的是PC端网站的布局 最终网站：自己制作一个静态网站 目的：精通网页布局，是前端人员的必备技能 学习的路线 html基础 + css3基础 +H5C3提高 ===项目 html基础：主要学习最常见的没有兼容性的HTML标签 css3基础：主要学习最常用的兼容CSS样式 H5C3提高：包括新增的html5的标签,CSS样式，与未来更好的接轨 项目:使用自己学习
Head First Jquery（中文版）最新版本 PDF
12-28
通过阅读《Head First jQuery》中文版，你不仅可以掌握jQuery的基本用法，还能了解到如何将这些技术应用到实际项目中。书中的实例和练习将帮助你巩固所学知识，并提供实践经验。无论是网页设计师还是开发者，都能...
锋利的jquery_第二版（高清）+书中源码及扩展训练
09-03
7. **性能优化**：分享了使用jQuery时的一些性能优化技巧，如减少DOM操作、延迟加载和缓存选择器结果等。 8. **实战演练**：提供的源码和扩展训练可能包含实际项目案例，帮助读者将所学应用于实际开发场景，增强...
jq分享会ppt及练习题
10-23
分享会的PPT通常会涵盖jQuery的基本概念、常用方法、实际应用示例等，而练习题目则是检验理解并加深记忆的好方式。这些题目可能包括选择题、填空题和实践操作题，涵盖了上述提到的所有知识点。 通过深入学习和完成...
财务收支管理系统（带对账）Excel模板
07-16
【作品名称】：财务收支管理系统（带对账）Excel模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
人工智能机器学习基础非线性回归
07-16
使用python实现机器学习基础非线性回归
Python编程惯例.md
最新发布
07-16
python安装
传感器习题集.doc
07-16
传感器
jquery基本语法练习
09-27
jQuery基本语法包括选择器（Selector）、事件处理（Event Handling）和DOM操作（DOM Manipulation）等。 1. 选择器： 使用$()函数以及相应的选择器来选择DOM元素。例如： ``` $(".bb") // 选取class为"bb"的元素 $...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值