jQuery基础案例

已于 2022-08-20 22:56:19 修改
阅读量86 收藏
点赞数
文章标签： jquery
于 2022-08-20 22:17:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45753617/article/details/126445197
版权

    坚持就是胜利。（自我安慰一下，哈哈哈哈） 橙色标记为主要代码片段，其余可以不看；

1.隔行换色/全选全部选案例

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script src="js/jquery-3.3.1.min.js"></script>
      <script>
                //全选全部选
         function selectAll(obj){
            $(".it").prop("checked",obj.checked);
         }
         //需求：将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow
         $(function () {
            var tr = $("tr:gt(1):odd");
            tr.css("backgroundColor","pink");
            var tr1 = $("tr:gt(1):even");
            tr1.css("backgroundColor","yellow");
         });
      </script>
   </head>
   <body>
      <table id="tab1" border="1" width="800" align="center" >
         <tr>
            <td colspan="5"><input type="button" value="删除"></td>
         </tr>
         <tr style="background-color: #999999;">
            <th><input type="checkbox" οnclick="selectAll(this)"></th>
            <th>分类ID</th>
            <th>分类名称</th>
            <th>分类描述</th>
            <th>操作</th>
         </tr>
         <tr>
            <td><input type="checkbox" class="it"></td>
            <td>1</td>
            <td>手机数码</td>
            <td>手机数码类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
         </tr>
         <tr>
            <td><input type="checkbox" class="it"></td>
            <td>2</td>
            <td>电脑办公</td>
            <td>电脑办公类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
         </tr>
         <tr>
            <td><input type="checkbox" class="it"></td>
            <td>3</td>
            <td>鞋靴箱包</td>
            <td>鞋靴箱包类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
         </tr>
         <tr>
            <td><input type="checkbox" class="it"></td>
            <td>4</td>
            <td>家居饰品</td>
            <td>家居饰品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
         </tr>
      </table>
   </body>
</html>

2.表情选择案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>QQ表情选择</title>
    <script  src="../../js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
    *{margin: 0;padding: 0;list-style: none;}

    .emoji{margin:50px;}
    ul{overflow: hidden;}
    li{float: left;width: 48px;height: 48px;cursor: pointer;}
    .emoji img{ cursor: pointer; }
    </style>
   <script>
        //需求：点击qq表情，将其追加到发言框中
        //1.获取ul下所有的img并且添加单击事件
        $(function () {
            $("ul img").click(function () {
                //追加,this是js对象不能直接调用clone方法
                $(".word").append($(this).clone());
                //返回值:jQueryclone([Even[,deepEven]]),克隆匹配的DOM元素并且选中这些克隆         的副本

            });
        })
    </script>
   
</head>
<body>
    <div class="emoji">
        <ul>
            <li><img src="img/01.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/02.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/03.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/04.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/05.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/06.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/07.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/08.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/09.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/10.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/11.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/12.gif" height="22" width="22" alt="" /></li>
        </ul>
        <p class="word">
            <strong>请发言：</strong>
            <img src="img/12.gif" height="22" width="22" alt="" />
        </p>
    </div>
</body>
</html>
一支流浪狗
关注
使用jQuery实现表格的隔行变色
HackMasterX的博客
10-03 608
隔行变色是Web开发中常见的需求之一，通过给表格的奇偶行添加不同的背景色，可以增加表格的可读性和美观性。在本文中，我们将介绍如何使用jQuery来实现这个功能。接下来，我们需要给目标表格的奇偶行添加不同的背景色。我们可以使用jQuery的选择器和遍历方法来实现这个功能。首先，我们需要在页面中引入jQuery库。你可以将以上代码复制到你的HTML文件中，并根据需要修改选择器和颜色值来适应你的具体情况。在迭代的过程中，根据行的奇偶性使用。选择器选中了表格中的所有行，并使用。在上面的代码中，我们使用了。
Jquery综合案例小练习——巩固jquery基础知识
春和的博客
03-07 1294
学习玩jquery的基础知识 做一些小的案例练习巩固一下基础知识的运用 在学了jquery后对比发现jquery的功能十分的强大！ 一、隔行换色 1.1、原生js实现隔行换色 原生js实现隔行换色 首先要获取到表格 在获取到表格中的每一行 通过%2判断是奇数行还是偶数行 再通过控制样式实现背景色的变换 准备一个表格 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&g.
jQuery隔行换色
ahao4311的博客
02-20 296
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../js/jquery-2.1.0.min.js"></s...
JQuery表格的隔行换色
mqingo的博客
11-20 207
01JQuery表格的隔行换色.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;01表格的隔行换色&lt;/title&gt; &lt;script type="text/javascript" src=&q
jQuery--表格隔行变色
LHH201016的博客
07-24 574
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>变色表格</title> <script src="jquery-3.6.0.js"></script> </head> <body> <table b...
JQuery基础案例大全
01-02
JQuery是现在最流行的Ajax框架；本案例是本人亲手总结的教学案例。基本包括的Jquery的各个方面的基础应用。包括：选择器；Dom操作；事件；动画；Ajax操作；是一个非常容易上手的代码案例。送给初学者。--邵老师
jQuery基础案例分析（初学者入门精通最佳案例）
01-03
jQuery基础案例分析（初学者入门精通最佳案例），内容丰富，一切用代码说话。 通常，学习一个技术从基础一点点学识一个很慢的学习过程，即便学会了也编不出东西来。通过简单的案例来学习，分析代码为什么这么写，...
JQuery入门—编写一个简单的JQuery应用案例
10-27
标题“JQuery入门—编写一个简单的JQuery应用案例”指出了本篇文档将引导读者通过一个基础案例来了解如何开始使用JQuery。描述部分提到，首先需要引入JQuery文件库，这可以通过在HTML页面的标签内导入JQuery脚本文件...
前端工程师之jquery实战案例大集合
06-08
一、jQuery基础 1. 选择器：jQuery的核心之一是选择器，它允许开发者通过CSS语法或jQuery特有的选择器快速定位DOM元素。例如，`$("#id")`选择ID为id的元素，`$(".class")`选择所有class为class的元素。 2. DOM操作...
一天搞定jQuery(二)——使用jQuery表格的隔行换色
05-10
一天搞定jQuery(二)——使用jQuery表格的隔行换色
jquery 隔行换色
11-12
jquery 隔行换色特效 很简单 看下代码就会了 里面有2个例子
jquery 实现隔行换色
09-09
jquery 实现隔行换色 不错sd sf sdf sdf
jQuery表格隔行换色
weixin_30587927的博客
07-21 271
.stripe_tb th{background:#B5CBE6; color:#039; line-height:20px; height:30px} .stripe_tb td{padding:6px 11px; border-bottom:1px solid #95bce2; vertical-align:top; text-align:center} .stripe_tb td *...
用JQuery实现表格隔行换颜色
热门推荐
suntanyong88的专栏
09-20 2万+
最近在学习Jquery，其实很多论坛中都有一个特点就是每张贴都是隔行换颜色的，相信这点大家可能发现。那么怎样实现这种功能呢。方法有3种：     方法一：使用CSS样式，定义两个类的样式，分别使用到表格中。这种方法想法简单，相信很多人都想到。但是这样做很麻烦，如果表格很多工作量
jQuery实现隔行换色
东城庞太师
12-19 293
jQuery实现隔行换色 效果图如下： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-3.3.1.js" type="text/jav...
JQuery——实现隔行换色
Melonico的博客
07-01 3536
基础页面显示 页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行换色</title> <script src="jquery-3.5.1.js"></script> <style> table{ margin: auto;
使用jQuery完成隔行换色
03-09 209
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成表格隔行换色</title> <link rel="stylesheet" href="../css/style.css" ...
jQuery实现表格的隔行换色
lihui4291的博客
05-26 817
表格行间隔行用不同颜色表示,便于信息浏览,同时具有鼠标经过行高亮效果. 传统的做法：在tr里加 onMouseOver="this.className='two'" onMouseOut="this.className='one'" 那么使用jquery怎么做呢？ 引入jquery.js文件: JS代码如下： $(document).ready(function(){
jQuery手风琴案例教程
2. jquery基础：jquery是一个快速、小巧、功能丰富的JavaScript库，它使得JavaScript编程更加简单。在手风琴案例中，jquery主要用于监听用户事件，如鼠标点击事件，然后根据事件触发相应的函数，实现面板的展开和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一支流浪狗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值