jQuery(3-8)样式操作

jQuery(3-8)样式操作

jQuery(3-8)样式操作

jQuery(3-8)样式操作

jQuery(3-8)样式操作

jQuery(3-8)样式操作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>样式操作.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<script type="text/javascript" src="../jquery-1.7.1.js"></script>
</head>
<style>
.wid{
width: 150px ;
color: purple ;
font-weight: bold;; <!-- 粗体字 -->
}
.hei{
height: 150px;
}
.another{
font-style: italic;<!-- 斜体 -->

}
</style>

<body>
<h3><br></h3><h3>水果</h3>
<strong title="mouse">老鼠掉进大米缸</strong>
<strong title="cat">正好大米缸里面有只猫··哎····</strong>

<p class="wid" title="选择你喜欢的水果"> 你喜欢的水果是?</p>
<ul style="background-color: purple">
<li title ="苹果 ">苹果</li>
<li title ="橘子 ">橘子</li>
<li title ="菠萝 ">菠萝</li>
<li title ="香蕉 ">香蕉</li>
<li title ="梨子 ">梨子</li>
</ul>

</body>
<script type="text/javascript">
/*

//获取样式和设置样式

$(function(){
$('p').attr('class');//获取样式

$('p').attr('class','hei'); //(设置样式) 向 <p>元素中的 class属性中替换原来的样式
});
*/

//追加样式
/*
$(function(){
$('p').addClass('another'); //追加一个 样式新老样式都会存在 不会将老的替换掉

});
*/
/*//移除样式
$(function(){
$('p').removeClass('wid');
//移除样式 可以 链式 移除
// 注 可以更间的删除多个样式以空格 来删除 $('p').removeClass('wid 样式2 样式3,');

//$('p').removeClass();//删除全部样式
});
*/

/*//切换样式
$('p').click(function(){

$('P').toggle("another");//toggle()切换样式 类名 (重要 )

$('P').toggleClass("another"); //重复切换 类名 (重要 )
});

*/

/*//判断是否含有某个样式

$('p').click(function(){

$('P').is("another");//is()是否含有another样式


});

*/


</script>

</html>