Jquery真的不难~第三回 如何改变HTML标签的样式
2013-01-16 13:54
423 查看
回到目录
对于如何修饰HTML标签,这对于JS来说,可以通过setAttribute来设置标签的属性,通过getAttribute来得到标签的属性,而在JQ中当然也可以实现类似的功能,方法上肯定比JS要简化多了。
JQ设置和获取标签的属性
值得注意的是JS的window.onload方法块的内容是在JQ的$(function(){})方法块执行完成后,再执行的。
下面是一个例子,当在dd标签上单击时,将当前dd块进行高亮显示
下面是为表格的隔行变色效果
单击行后,让当前行高亮显示
添加鼠标移入与移出事件
恩,好了对于标签的样式控制这块内容就讲到这里吧,感谢您的阅读!
回到目录
对于如何修饰HTML标签,这对于JS来说,可以通过setAttribute来设置标签的属性,通过getAttribute来得到标签的属性,而在JQ中当然也可以实现类似的功能,方法上肯定比JS要简化多了。
一 通过修改标签属性来改变它的样式
JS设置和获取标签的属性<script type="text/javascript"> window.onload = function () { var attr = document.getElementById("attr"); attr.setAttribute("style", "font-weight:bold;") alert(attr.getAttribute("style")); } </script>
JQ设置和获取标签的属性
<script src="http://img1.c2cedu.com/Scripts/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#attr").attr("style", "color:#ff0000");//单个属性的设置 $("#Avatar").attr({ "class": "banner", "alt": "头像", "src": "http://pic.cnblogs.com/avatar/a118538.jpg?id=11133319" });//多个属性的设置 alert($("#Avatar").attr("src")); //得到指定标签的属性 }); </script>
值得注意的是JS的window.onload方法块的内容是在JQ的$(function(){})方法块执行完成后,再执行的。
二 通过修改标签的CSS样式来改变它的样式
看看基本的语法:$("#attr").addClass("banner");//添加样式 $("#attr").removeClass("banner");//移除样式 //JQ支持连带写法,因为removeClass的返回结果也是一个Jq对象,所以Jq对象的所有方法和事件它都可以使用 $("#attr").removeClass("banner").addClass("bannerOver");
下面是一个例子,当在dd标签上单击时,将当前dd块进行高亮显示
<style> .banner { background: #0094ff; } .bannerOver { background: #808080; } .cur { background: #ff6a00; } </style> <script> $(function () { $('#menu_title').find('dd').click(function () { $('#menu_title').find('dd').removeClass('cur'); $(this).addClass('cur'); }) }) </script> <dl id="menu_title"> <dt>人</dt> <dd>一种高级动物</dd> <dt>狗</dt> <dd>人类的朋友</dd> <dt>猫</dt> <dd>猫科动物的祖先</dd> </dl>
下面是为表格的隔行变色效果
.odd { background: #808080; } .even { background: #ffd800; } .selected { background: #0094ff; color: #fff; } .hover { background: #808080; }
var $trs = $("#menu_title>dd"); //选择所有行 $trs.filter(":odd").addClass("odd"); //给奇数行添加odd样式 $trs.filter(":even").addClass("even"); //给偶数行添加odd样式
单击行后,让当前行高亮显示
//点击行,添加变色样式 $trs.click(function(e) { $(this).addClass("selected") .siblings() .removeClass("selected"); })
添加鼠标移入与移出事件
// 鼠标移入 与移出 $("#menu_title>dd").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } );
恩,好了对于标签的样式控制这块内容就讲到这里吧,感谢您的阅读!
回到目录
相关文章推荐
- Jquery真的不难~第三回 如何改变HTML标签的样式
- jquery如何改变html标签的样式(两种实现方法)
- jquery如何改变html标签的样式(两种实现方法)
- jquery如何改变html标签的样式(两种实现方法)
- html angular+jquery:判断密码并改变标签样式+新增提示内容
- js改变/获取html标签样式
- jquery动态添加带有样式的HTML标签元素方法
- 如何在html中直接给某个按钮置灰(样式、去除绑定事件), querySelector与jquery selector的不同之处
- js如何改变css,html样式
- 改变 HTML标签样式 和 attribute 改变 HTML 属性
- jquery 改变标签样式
- 如何去除苹果浏览器的自带HTML标签样式
- jQuery基础 - 如何处理HTML标签属性
- jquery动态添加带有样式的HTML标签元素
- DIV+CSS如何控制html标签li的样式,比如删除前面的点
- 如何让HTML标签的同时加载多个样式类(HTML)
- js如何通过tagname取到标签并改变所有该类标签的样式
- select标签添加multiple属性后,页面呈现的样式发生改变,如何修改
- jQuery如何改变css伪元素样式