jquery的简单实现高亮效果

最新推荐文章于 2022-11-26 10:13:46 发布
最新推荐文章于 2022-11-26 10:13:46 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： jquery 文章标签： jquery css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woniuguanjun/article/details/28131485
版权

实现高亮效果有两种方式，一个是利用css()改变背景颜色，一个是addClass()添加类

1.css()

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<script src="jquery.js"></script>
<style>
.div{
  height: 100px;
  width: 100px;
  background: #dddddd;
  float:left;
  margin-right: 10px;
  text-align: center;
 }
 .div ul{list-style: none;display: inline;font-size: 30px;}
 body{background: black;}
</style>
<script>
//实现高亮显示块
$('document').ready(function(){
$(".div").hover(function(){
$(this).css({"background":"#eeeeee",});  //鼠标放上去 的背景,css()没有重设的属性则继承原先的css属性
},function(){
$(this).css({"background":"#dddddd"}) //鼠标放l离开 的 背景
});
});
 
</script>
</head>
    <body>
     
       <div class="div">
        <ul>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        </ul>




       </div>
       <div class="div">
        <ul>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        </ul>




       </div>
       <div class="div">
        <ul>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        </ul>




       </div>
      
    </body>
</html>


2.addClass()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<script src="jquery.js"></script>
<style>
.div{
  height: 100px;
  width: 100px;
  background: #000000;
  float:left;
  margin-right: 10px;
  text-align: center;
  font-size: 30px;
 }
  
 .div ul{list-style: none;display: inline;}
 .highLight{background: #eeeeee;height: 150px;width: 150px;border:1px solid black;padding: 5px;}
  
</style>
<script>
 
$('document').ready(function(){
 $('body').on('mouseover','.div',function(){  //利用on()事件委托方式，可以监管多种事件动作
   
  $(this).addClass('highLight');//利用addClass()方法添加类,在新类中没有重新定义的属性仍然使用旧类的效果
 });
   
      
 
});
 
</script>
</head>
    <body>
         




       <div class="div">
        <ul> 
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
                    <div class="a"></div>
        </ul>


       </div>
       <div class="div">
        <ul> 
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        </ul>


       </div>
       <div class="div">
        <ul>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        </ul>


       </div>
      
    </body>
</html>

woniuguanjun
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
.NET+jQuery 实现局部刷新+分页+高亮显示搜索内容
12-19
.NET+jQuery 实现局部刷新+分页+高亮显示搜索内容 输入关键字、页数支持 “回车键” 查询。 查询关键字 “红色” 显示。 查询来源的关键字 “紫色” 显示。 可以自定义每页查询的条数。
jQuery语法高亮插件，代码着色，页面代码着色
dreamzml的专栏
03-25 6381
1) highlightjs Highlight.js能够对页面中的各种程序源代码语法着色加亮。支持的语言包括： Python Ruby Perl PHP XML HTML CSS Django Javascript VBScript Delphi Java C++ RenderMan (RSL and RIB) SQL SmallTalk Axap
jquery插件highlight高亮显示
Yang_Ever的专栏
12-15 181
1 . 页面头部插入代码: $(document).ready(function(){ $('#highlight-plugin').removeHighlight().highlight('[!--keyboard--]'); }) 2 . 加入css .highlight {background:#FF0;color:#E00} ...
基于jquery 实现导航条高亮显示的两种方法
忧郁的蛋的专栏
11-26 1262
既然url不一样,那就找导航-->分类-->新闻之间的关系了.他们的对应关系是一个导航下可能有多个分类,一个分类下可能有多篇新闻.那么逆向的来说,每一篇新闻或者分类都对应一个导航.那么在对应的的分类页面和新闻页面都定义一个变量就是导航标识.然后修改导航的标签的rel属性.该属性与该变量对比,如果一样就改当前的class.点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的.所以我的思路是这样的。
jQuery实现代码高亮编辑器
weixin_43069875的博客
11-14 702
我在写一个网页版navicat，其中的一个小插曲。只是一种思路，肯定会有不完善的地方，我最近正在完善。目前词法分析只针对Mysql。 用jquery是因为方便，后期会去掉。除了jquery以外没有任何第三方插件。有个codemirror插件，没有细细地研究过。因为后期想封装成vue组件，所以codemirror这种感觉有点老了。 原理：h5 div有contenteditable属性，为true时div可以编辑。如果只有一个div开启编辑模式，同时触发事件去处理输入内容，并回显到这个div上，光标会自动回到
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
12-12
本文实例讲述了jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果。分享给大家供大家参考。具体如下： 这是一款jquery菜单特效，点击后高亮背景，个性的菜单特效。网上见到比较多的菜单了，不过像这样这么简单的...
jquery实现带单选按钮的表格行选中时高亮显示
01-19
效果如下： CSS文件如下如下所示： 代码如下: .selected{ background:#FF6500; color:#fff; }： 这次的js文件的代码就变得更简单了，如下所示： 代码如下: /** * 设置含有单选按钮的表格的背景颜色 */ $(document)....
jQuery实现的简单带有关闭按钮的lightbox高亮图片展示效果.zip
11-18
jQuery实现的简单带有关闭按钮的lightbox高亮图片展示效果.zip
JQuery简单实现锚点链接的平滑滚动
10-24
在平时的项目中，我们经常需要一些特效链接，如果使效果进一步加强，我们可以使点击锚点链接平滑滚动到锚点，下面就来给大家讲解下如何使用jQuery来实现。
jquery 怎么调节图片亮度_使用jquery/javascript点击增加CSS亮度颜色？
weixin_39837139的博客
12-23 239
转换为HSV以改变brigthness此版本使用HSV.我将原始rgb值转换为hsv并更改v的值以获得更浅的颜色.我从Pointy回答了RgbToHsv,我刚刚为灰色添加了一点修复.我得到了HsvToRgb on this website当页面加载时,我将rgb转换为hsv更改v值,转换回rgb并使用新值更改元素的css.function AppendColor(light) {$(".dark"...
jQuery+CSS实现图片感应鼠标高亮显示当前图片
07-19
jQuery+CSS实现图片感应鼠标高亮显示当前图片
jquery实现高亮图片框(非常炫的效果)
05-01
jquery脚本实现的特殊效果！超级华丽的效果！
闪烁的div、高亮的div层
08-16
闪烁的div、高亮的div层
jquery动态高亮关键字(可同时高亮多个)
06-13
jquery高亮关键字,介于网上jquery高亮的资料比较少,所以自己动手写了个,只是写了高亮的部分,其他的就不去完善了,具体你们都懂得。
jQuery高亮关键词搜索
06-22
jQuery高亮关键词搜索
jQuery搜索高亮显示
滕青山博客
11-23 1647
$(function () { //1.获取要高亮显示的行 var rowNode = $('.tiBlock_3NhqL'); //2.获取搜索的内容 var searchContent = $(".searchInput_29REY").val(); //3.遍历整行内容，添加高亮颜色 rowNode.each(function () { var word = $(this).html(); word = word.repl
使用jQuery完成显示与隐藏、添加高亮效果
weixin_44554896的博客
01-30 735
开发工具与关键技术：Adobe Dreamweaver CC 2017 jQuery 作者：孙水兵 撰写时间：2019年1月30 达到的效果： 1：点击显示全部品牌，将隐藏的品牌显示，给小米、华为、一加增加高亮效果，将显示全部品牌改为显示精简品牌。 2：点击显示精简品牌，将隐显示的品牌隐藏，将小米、华为、一加的高亮效果取消，将显示精简品牌改为显示全部品牌。 HTML代码部分 用div包裹ul l...
通过jquery addClass()方法，给指定按钮添加高亮显示效果
l513655267的博客
04-10 694
js代码： $(document).ready(function() {     if("" == ""){         $('.a5').addClass('h3a');     }else{         $('.a').addClass('h3a');//通过获取网址中的id参数，找到当前页面的按钮     } }）; html模板中循环生成的按钮：       
jQuery实现动画效果
最新发布
06-07
jQuery 是一个流行的 JavaScript 库，可以方便地实现各种动画效果。以下是使用 jQuery 实现动画效果的一些常用方法： 1. animate()：animate() 方法可以用来实现元素的动画效果，可以设置动画的持续时间、动画方式...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值