但是我還是覺得把它都記錄及撰寫過，對本身來說會印象比較深刻
JQuery API 練習addClass；
addClass此函式用法:可以透用$('標籤選取')在選擇的標籤上添加class元素
語法為:$('標籤名稱').addClass('添加的元素名稱');
以下例子來說明:
(一)替標籤添加新元素
1.)首先，先建立HTML三個標籤
<p>1.測試說明(一)</p>
<p>2.測試說明(二)</p>
<p>3.測試說明(三)</p>
2.)建立想要的樣式，在這筆者先用改變字型顏色以及大小來做測試
<style type="text/css">
.selected{
color: #0000FF;
font-size: 18px;
}
</style>
3.)再來就是編寫JQuery囉
<script type="text/javascript">
$(document).ready(function(){
$('p').addClass('selected');
});
</script>
4.)附上整個程式碼以及成功圖片
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.4.3.min.js"></script>
<!--
3.)再來就是編寫JQuery囉
-->
<script type="text/javascript">
$(document).ready(function(){
$('p').addClass('selected');
});
</script>
<!--
2.建立想要的樣式，在這筆者先用改變字型顏色以及大小來做測試
-->
<style type="text/css">
.selected{
color: #0000FF;
font-size: 18px;
}
</style>
</head>
<body>
<!--
1.首先，先建立三個<p>
-->
<p>1.測試說明(一)</p>
<p>2.測試說明(二)</p>
<p>3.測試說明(三)</p>
</body>
</html>
(二)加入滑鼠移入移出效果
上面成功加入了新元素進去標籤，那小弟我又想到說，加個滑鼠移入後加入新元素滑鼠移出後
移除新元素，所以就調用了hover函式當
移入後加入元素selected移出後移除selected
1.)JQuery 片段如下
<script type="text/javascript">
$(document).ready(function(){
$('P').hover(function(){
$('p').addClass('selected');
},function(){
$('p').removeClass('selected');
});
});
</script>
的時候才會變換可是
之間有個空白，所以整個使用來起來有點不順暢，所以又更正
以下是更正的地方
2-1.)HTML修改，
用div包起來
<div id="center">
<p>1.測試說明(一)</p>
<p>2.測試說明(二)</p>
<p>3.測試說明(三)</p>
</div>
2-2.)CSS修改，增加新元素 #center
<style type="text/css">
.selected{
color: #0000FF;
font-size: 18px;
}
#center{
border: solid 1px #330066;
width: 150px;
height: 150px;
}
</style>
2-3.)JQuery修改，原本的移入
更改為移入div
<script type="text/javascript">
$(document).ready(function(){
$('#center').hover(function(){
$('p').addClass('selected');
},function(){
$('p').removeClass('selected');
});
});
</script>
(三)針對個別
標籤加入元素
這個效果是當滑鼠移入時，針對當下的位於哪個p標籤中添加新元素，JQuery修改如下
<script type="text/javascript">
$(document).ready(function(){
$('p').hover(function(){
//把原本針對所有的語法$('P') 改成$(this)
$(this).addClass('selected');
},function(){
$(this).removeClass('selected');
});
});
</script>
沒有留言:
張貼留言