Jquery实现的一种常用高亮效果示例代码
程序员文章站
2023-03-10 11:11:35
如下所示：
. 代码如下:
jquery</t...</div>
<div class="content">
<p><strong>如下所示：</strong></p>
<p class="codetitle"><span onclick="docopy('code23019')" style="cursor: pointer"><u>.</u></span> 代码如下:</p>
<p class="codebody" id="code23019"><br>
<html><br>
<head><br>
<title>jquery</title><br>
<style><br>
body<br>
{<br>
font-size: 12px;<br>
}<br>
li<br>
{<br>
list-style: none;<br>
height: 34px;<br>
padding-top: 5px;<br>
}<br>
</style>
</p>
<p> </p>
<p> <script type="text/javascript" src="jquery-1.2.6.pack.js"></script></p>
<p> <script type="text/javascript"><br>
$(document).ready(function(){ <br>
var oinputs = $("ul.demo input");</p>
<p> oinputs.each(function(i){<br>
oinputs.eq(i).focus(function(){<br>
oinputs.eq(i).parent().css("background-color","ccf");<br>
}).blur(function(){<br>
oinputs.parent().css("background-color","");<br>
})<br>
});<br><br>
<br>
oinputs.focus(function(){<br>
$(this).css("background-color","ff9").blur(function(){<br>
$(this).css("background-color","");<br>
});<br>
})<br>
})<br>
</script></p>
<p></head><br>
<body><br>
<ul class="demo"><br>
<li><br>
<h5><br>
注册选项</h5><br>
</li><br>
<li>用户名:<input type="text" value="" id="name" style="width: 200px" /></li><br>
<li>密 码:<input type="password" value="" id="pass" style="width: 200px" /></li><br>
<li>爱 好:<input type="checkbox" value="" />篮球 <input type="checkbox" value="" />足球 <input<br>
type="checkbox" value="" />音乐</li><br>
</ul><br>
</script><br>
</body><br>
</html></p>
<br> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/1998265.html">
心绞痛饮食有什么禁忌吗 </a>
</p>
<p>
下一篇： <a href="/article/1998267.html">
脾胃虚寒要注意什么 这9种胃不好别乱吃 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2091502.html" target="_blank" title="jQuery实现的淡入淡出图片轮播效果示例">
<h2>
jQuery实现的淡入淡出图片轮播效果示例 </h2>
</a>
</li>
<li>
<a href="/article/2091431.html" target="_blank" title="jQuery实现的简单手风琴效果示例">
<h2>
jQuery实现的简单手风琴效果示例 </h2>
</a>
</li>
<li>
<a href="/article/2083189.html" target="_blank" title="jquery单行文字向上滚动效果的实现代码">
<h2>
jquery单行文字向上滚动效果的实现代码 </h2>
</a>
</li>
<li>
<a href="/article/2076933.html" target="_blank" title="Jquery的Tabs内容轮换效果实现代码">
<h2>
Jquery的Tabs内容轮换效果实现代码 </h2>
</a>
</li>
<li>
<a href="/article/2073389.html" target="_blank" title="jQuery+CSS实现的标签页效果示例【测试可用】">
<h2>
jQuery+CSS实现的标签页效果示例【测试可用】 </h2>
</a>
</li>
<li>
<a href="/article/2070887.html" target="_blank" title="canvas实现扭蛋机动画效果的示例代码">
<h2>
canvas实现扭蛋机动画效果的示例代码 </h2>
</a>
</li>
<li>
<a href="/article/2066121.html" target="_blank" title="微信小程序实现卡片左右滑动效果的示例代码">
<h2>
微信小程序实现卡片左右滑动效果的示例代码 </h2>
</a>
</li>
<li>
<a href="/article/2046302.html" target="_blank" title="jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】">
<h2>
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】 </h2>
</a>
</li>
<li>
<a href="/article/2046198.html" target="_blank" title="jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】">
<h2>
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】 </h2>
</a>
</li>
<li>
<a href="/article/2046190.html" target="_blank" title="jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】">
<h2>
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>