jquery 样式 css
2016-03-09 00:00
651 查看
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>dom节点练习和样式练习</title> <script type="text/javascript" src="/TestJquery/jq/jquery-1.3.2.js"></script> <script type="text/javascript" src="/TestJquery/js/dom.js"></script> <style> .high{ font-weight: bold;/*粗体字*/ color : red; /*红色字体*/ } .another{ font-style: italic;/*斜体*/ color:blue; /*蓝色字体*/ } </style> </head> <body> <input id="one" type="button" value="输出class类"/> <input id="two" type="button" value="设置class类"/> <input id="three" type="button" value="追加class类"/> <input id="four" type="button" value="删除全部class类"/> <input id="five" type="button" value="删除指定class类"/> <input id="sex" type="button" value="重置切换class类"/> <p title="选择你最喜欢的水果">选择你最喜欢的水果?</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </ul> </body> <script type="text/javascript"> $(document).ready(function(){ var $para = $('p');//获取<p>节点 var p_txt = $para.attr('title');//获得<p>元素节点属性title //alert(p_txt); $('p').attr("title","改变了title的值");//设置单个的属性值 $('p').attr({"title":"改变了title的值","name":"tName"});//一次性的为同个元素设置多个属性 $('p').removeAttr("title");//删除<p>元素的属性title //追加样式 $('#two').click(function(){ //给<p>设置个class属性 class="high" $('p').attr("class","high"); }); $('#three').click(function(){ //给<p>追加个class样式 class="high another" (在原有的样式上追加新样式,原来的不变。) $('p').addClass('another'); }); /*在CSS中以下两条规定 * 1:如果给一个元素添加了多个class值,那么就相当于合并了它们的样式。 * 2:如果有不同的class设定了同一个样式属性,则后者覆盖前者。 * 本例中 字体的颜色就是这种情况哦 * */ //移除样式 $('#five').click(function(){ $('p').removeClass("another");//移除制定样式 }); //如果移除多个样式 $('p').removeClass("another").removeClass("high"); 这种写法等同于 $('p').removeClass("another high"); $('#four').click(function(){//移除所有样式 $('p').removeClass(); }); //切换样式 $('#sex').click(function(){ //如果存在改样式那么就删除它,如果不存在那么就追加上,从而实现样式的切换。 $('p').toggleClass("another"); }); //判断是否含有某个样式 $('p').hasClass("another");//如果有返回true 如果没有返回false /* * 味蕾增强代码的可读性jquery提供了一个等价的方法 * $('p').is('.another'); * */ }); </script> </html>
本文出自 “小浩” 博客,请务必保留此出处http://zhangchi.blog.51cto.com/5214280/1215853
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Web布局连载——两栏固定布局(五)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- JavaScript 各种遍历方式详解
- 数组方法汇总
- Apple官网研究之使用Justify布局导航
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS