Jquery实现的一种常用高亮效果示例代码
如下所示：
<html>
<head>
<title>jquery</title>
<style>
body
{
font-size: 12px;
}
li
{
list-style: none;
height: 34px;
padding-top: 5px;
}
</style>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var oInputs = $("ul.demo input");
oInputs.each(function(i){
oInputs.eq(i).focus(function(){
oInputs.eq(i).parent().css("background-color","ccf");
}).blur(function(){
oInputs.parent().css("background-color","");
})
});
oInputs.focus(function(){
$(this).css("background-color","ff9").blur(function(){
$(this).css("background-color","");
});
})
})
</script>
</head>
<body>
<ul class="demo">
<li>
<h5>
注册选项</h5>
</li>
<li>用户名:<input type="text" value="" id="name" style="width: 200px" /></li>
<li>密 码:<input type="password" value="" id="pass" style="width: 200px" /></li>
<li>爱 好:<input type="checkbox" value="" />篮球 <input type="checkbox" value="" />足球 <input
type="checkbox" value="" />音乐</li>
</ul>
</script>
</body>
</html>
相关文章
Jquery $.getJSON 在IE下的缓存问题解决方法
$.getJSON 的url都是相同的 问题来了 我修改 或者 新增树节点 然后刷新tree IE竟然毫无变化 在其他浏览器上面都OK，于是搜到一个可行的解决方法2014-10-10
这篇文章主要为大家详细介绍了jQuery实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
在本篇文章中我们整理了关于学习jQuery中的noConflict()用法的相关知识点内容，有需要的朋友们可以学习下。2018-09-09
这篇文章主要介绍了用jQuery的AJax实现异步访问、异步加载，jQuery的ajax异步实现数据交互的相关技巧,并提供了完整示例demo供读者参考,需要的朋友可以参考下2016-11-11
有些WEB开发者，会引用一个JQuery类库，然后在网页上写一写$("#")，$(".")，写了几年就对别人说非常熟悉JQuery。其实你只是了解一点皮毛，并不知道其中的道理，下面通过本篇文章给大家介绍jquery定义插件的相关知识，感兴趣的朋友一起学习吧2015-12-12
这篇文章主要介绍了jQuery中$.grep() 过滤函数 数组过滤的相关资料,需非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2016-11-11
这篇文章主要介绍了JQuery样式与属性设置方法,结合实例形式分析了jQuery属性的获取与设置、以及样式的添加与删除相关操作技巧,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了jquery中为什么能用$操作，jquery直接用$来获取dom节点的方式也非常便捷方便，那么他是怎么实现的呢？,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了jQuery 选择方法及$(this)用法,结合实例形式分析了jQuery 选择方法及$(this)相关使用技巧与注意事项,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了jQuery实现可兼容IE6的遮罩功能,详细分析了jQuery遮罩层的布局、样式及功能实现技巧,需要的朋友可以参考下2017-09-09
最新评论