Javascript知识【jQuery样式操作&案例:jQuery隔行换色】

这篇具有很好参考价值的文章主要介绍了Javascript知识【jQuery样式操作&案例:jQuery隔行换色】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  • 💂 个人主页: 爱吃豆的土豆
  • 🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主
  • 💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦
  • 🏆人必有所执,方能有所成!

  • 🐋希望大家多多支持😘一起进步呀!

目录

1,jQuery样式操作

2,案例:jQuery隔行换色

2.1:案例1

2.2:​​​​​​​鼠标移入粉色,移出原色


1,jQuery样式操作

目标:通过jQuery熟练切换CSS样式

addClass()给指定标签的class属性追加样式

removeClass()将标签指定的class属性移除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .blueDiv{
            background-color: #87CEFA;
            width:300px;
            height:300px;
        }
        .redFont{
            font-size:50px;
            color:red;
        }
        .redDiv{
            background-color: red;
            width:300px;
            height:300px;
        }
    </style>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            //1、设置d1这个div标签样式为blueDiv和redFont
            //写法一:各自追加
            /*$("#d1").addClass("blueDiv");
            $("#d1").addClass("redFont");*/
            //写法二:追加一次 addClass("值1 值2");
            $("#d1").addClass("blueDiv redFont");
            //2、移除d2这个div标签的redDiv样式
            $("#d2").removeClass("redDiv");
        });
    </script>
</head>
<body>
    <div id="d1">11111</div>
    <div id="d2" class="redDiv">22222</div>
</body>
</html>

jquery隔行变色,Javascript和前端框架,jquery,javascript,前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .blueDiv{
            background-color: #87CEFA;
            width:300px;
            height:300px;
        }
    </style>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            var d2 = $("#d2");
            //1、获取d2这个div,字体大小
            alert(d2.css("font-size"));
            //2、设置d2这个div,字体大小为30px
            d2.css("font-size","30px");
        });
    </script>
</head>
<body>
    <div id="d1">11111</div>
    <div id="d2" class="blueDiv">22222</div>
</body>
</html>

2,案例:jQuery隔行换色

2.1:​​​​​​​案例1

jquery隔行变色,Javascript和前端框架,jquery,javascript,前端

jquery隔行变色,Javascript和前端框架,jquery,javascript,前端

  1. 分析:

关键点:

1、样式切换:addClass()

2、除了第一个tr外,所有的tr,进行奇偶数筛选

tr:gt(0)      :even偶数   :odd奇数

步骤:

1、页面加载完成时

2、获取除了第一个tr外,指定奇偶数的tr

3、为指定这些tr添加蓝色样式

 代码实现

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
   //1、页面加载完成时
   $(function () {
      //2、获取除了第一个tr外,指定奇偶数的tr
      //    对tr:gt(0)的集合进行筛选。 第一条数据1,索引0是偶数
      var arr = $("tr:gt(0):odd");
      /*arr.each(function () {
         alert(this.innerHTML);
      });*/
      //3、为指定这些tr添加蓝色样式
      arr.addClass("blue");
      //优化为:$("tr:gt(0):odd").addClass("blue");
   });

</script>

注意:

:even时,对前方集合进行重新索引排序。

​​​​​​​2.2:​​​​​​​鼠标移入粉色,移出原色

jquery隔行变色,Javascript和前端框架,jquery,javascript,前端

jquery隔行变色,Javascript和前端框架,jquery,javascript,前端

  1. 分析:

关键点:

  1. jQuery事件如何进行绑定 鼠标移入,鼠标移出:

jq对象.事件名1(function(){

//this  当前对象 js对象

}).事件名2(function(){

//this  当前对象 js对象

});

Js:onmouseover

JQ: mouseover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            width:100px;
            height:100px;
            background-color: skyblue;
        }
    </style>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            $("#d1").mouseover(function () {
                $(this).css("background-color","pink");
            }).mouseout(function () {
                $(this).css("background-color","skyblue");
            });
        });
    </script>
</head>
<body>
    <!--  鼠标移入粉色,鼠标移出原色  -->
    <div id="d1"></div>
</body>
</html>

  1. 颜色要进行设置与保存

①思路:变色:this["key"] = 原来的颜色;

    this.style="background-color:新颜色";

还原: this.style="background-color:"+this["key"];

变色:this["key"] = $(this).css("background-color");

                        $(this).css("background-color","新颜色");

还原: $(this).css("background-color",this["key"]);

②思路:(问题:删除其他不该删除的行内样式)

变色:this.style="background-color:新颜色";

还原:this.style=undefined;

步骤:

  1. 获取所有指定的tr
  2. 绑定鼠标移入事件:事件中,进行变色逻辑
  3. 绑定鼠标移出事件:事件中,进行还原逻辑
  1. 代码实现:

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
   //1、页面加载完成时
   $(function () {
      $("tr:gt(0):odd").addClass("blue");
      //1、获取所有指定的tr
      var trs = $("tr:gt(0)");
      //2、绑定鼠标移入事件:事件中,进行变色逻辑
      trs.mouseover(function () {
         //保存原有色
         this["k1"] = $(this).css("background-color");
         //赋予新色
         $(this).css("background-color","pink");
      }).mouseout(function () {
         //3、绑定鼠标移出事件:事件中,进行还原逻辑
         $(this).css("background-color",this["k1"]);
      });
   });
</script>
文章来源地址https://www.toymoban.com/news/detail-833988.html

到了这里,关于Javascript知识【jQuery样式操作&案例:jQuery隔行换色】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Web jQuery—选择器、样式和效果

    代码下载 jQuery 介绍 JavaScript库:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。 简单理解: 就是一个JS 文件,里面对我们原生j

    2024年02月09日
    浏览(29)
  • Javascript jQuery简介

    ✨前言✨ 1.jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式

    2024年01月21日
    浏览(58)
  • JavaScript的库——jquery

    JavaScript的库——jquery 一、jQuery的hello 将代码写在一个闭包中 二、面试题: jQuery的ready函数和JavaScript的onload事件有什么区别? 是null,因为拿不到box,代码在后面,还没有执行。 所以需要将代码放在后面: 但是就想将代码放在前面: 匿名 或者: 命名 onload事件: ready: 三、箭

    2024年02月16日
    浏览(43)
  • JavaScript --jQuery库

    目录  简介 注意事项: 常用的方法  示例  要使用jQuery 库,可以按照以下步骤进行: 引入 jQuery 库:在 HTML 文件的  head  或  body  部分引入 jQuery 库。您可以从官方网站下载 jQuery,或通过使用 CDN(内容分发网络)引入。例如,在使用 CDN 的情况下,您可以在 HTML 文件中添

    2024年02月14日
    浏览(36)
  • BCSP-玄子前端开发之JavaScript+jQuery入门CH10_jQuery基础

    4.10.1 jQuery 简介 jQuery是流行的JavaScript程序库,是对JavaScript对象和函数的封装 设计思想是write less, do more [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gx0f3UFO-1682307309412)(./assets/image-20230423230915569.png)] 4.10.2 jQuery 能做什么 访问和操作DOM元素 控制页

    2023年04月24日
    浏览(52)
  • jQuery.js - 前端必备的Javascript库

    作者: WangMin 格言: 努力做好自己喜欢的每一件事 jQuery.js 是什么? jQuery是一个快速简洁、免费开源易用的JavaScript框架, 倡导写更少的代码,做更多的事情 。它封装JavaScript常用的功能代码,提供了一种简便的JavaScript设计模式,以及我们开发中常用到的操作DOM的API,优化HTML文

    2024年02月05日
    浏览(68)
  • 基于jQuery------购物车案例

    目录 基于jQuery------购物车案例 案例:购物车案例模块-增减商品数量分析 案例:购物车案例模块-修改商品小计分析  案例:购物车案例模块-计算总计和总额 案例:购物车案例模块-删除商品模块  案例:购物车案例模块-选中商品添加背景 html  js css  效果  ① 核心思路:首

    2024年02月02日
    浏览(37)
  • javaScript和jQuery获取、设置textarea标签的内容(常见问题)

    昨天晚上在写代码的时候前端遇到一个bug,在js取值textarea中,我使用了getElementById方法对textarea标签取值,但不论如何取值,始终无法成功取到页面上输入的值并进行Ajax请求,一开始以为是ajax与后端接口之间数据传输出问题了,后来经过排查,就是对于textarea标签取值失败的

    2024年02月05日
    浏览(41)
  • jQuery 基础知识

    要想使用 jQuery 的话,我们必须先要官网上下载(  http://jquery.com/  )3.7 到 4.0的开发版本就可以,下载到文件夹以后桌面都可以 ,然后拖动到代码编辑器根目录下即可    在需要使用 jQuery 的页面引入 jquery 的核心 js 文件 DOM 对象         通过 js 方式获取的元素对象( doc

    2024年02月07日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包