简单示例教会你 jquery样式设置
2013-03-27 20:29
183 查看
<html>
<head>
<meta charset="utf-8"/>
<style>
.high{
font-style:italic;
font-weight:bold;
}
.hide{
display:none;
}
</style>
<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
<script>
/*样式的操作*/
$(function(){
/*1,attr()设置样式
$("p").click(function(){
$(this).attr("class","high");
});
*/
/*2,addClass()
$("p").click(function(){
$(this).addClass("high");
});
*/
//3,removeClass()
$("p").removeClass("high");
//4,toggleClass() 如果你有这个class属性我就删除，如果没有就增加
$("p").toggleClass("hign");
})
</script>
</head>
<body>
<p class="high" title="选择你最喜欢的水果">你最喜欢的水果</p>
<ul>
<li title="橙子">橙子</li>
<li title="苹果">苹果</li>
<li title="香蕉">香蕉</li>
</ul>
</body>
</html>
<head>
<meta charset="utf-8"/>
<style>
.high{
font-style:italic;
font-weight:bold;
}
.hide{
display:none;
}
</style>
<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
<script>
/*样式的操作*/
$(function(){
/*1,attr()设置样式
$("p").click(function(){
$(this).attr("class","high");
});
*/
/*2,addClass()
$("p").click(function(){
$(this).addClass("high");
});
*/
//3,removeClass()
$("p").removeClass("high");
//4,toggleClass() 如果你有这个class属性我就删除，如果没有就增加
$("p").toggleClass("hign");
})
</script>
</head>
<body>
<p class="high" title="选择你最喜欢的水果">你最喜欢的水果</p>
<ul>
<li title="橙子">橙子</li>
<li title="苹果">苹果</li>
<li title="香蕉">香蕉</li>
</ul>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery设置和获取span的内容（简单示例说明）
- AngularJS表格样式简单设置方法示例
- JQuery获取并解析php返回的json格式数据的简单示例
- Ajax / jQuery.getJSON简单示例
- 好用的JQuery插件Easy Slider(图片滚动，多样式设置)
- JQuery操作一个表格简单示例
- jQuery简单的Ajax调用示例
- 简单设置blog的样式CSS
- jQuery+pjax简单示例汇总
- jquery.treeview插件简单示例（二）
- javascript设置金额样式转换保留两位小数示例代码
- jquery设置input disabled属性的示例
- js、jquery获取、设置元素属性与样式
- jQuery简单实现页面元素置顶时悬浮效果示例
- jquery简单的拖动效果实现原理及示例
- js设置文本框中焦点位置在最后的示例代码(简单实用)
- jQuery设置文字样式
- jquery的ajax简单结构示例代码
- jQuery的属性与样式之.css()与.addClass()设置样式的区别
- JQuery中.css()与.addClass()设置样式的区别