JavaEE學習日誌持續更新----> 必看！JavaEE學習路線（文章總彙）
JavaEE學習日誌（六十一）
jQuery
jQuery的DOM操作
jQuery函數的特點：
- 支持鏈式編程
- 支持多種調用方式
jQuery的DOM操作一
text()：獲取文本html()：獲取標籤和文本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>標籤文本操作</title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript">
//頁面加載完成
$(function(){
//獲取張三
alert($("#myinput").val())
//獲取標題文本
alert($("#mydiv").text());
//獲取mydiv的後的所有內容
alert($("#mydiv").html());
});
</script>
</head>
<body>
<input id="myinput" type="text" name="username" value="張三" /><br />
<div id="mydiv"><p><a href="#">標題標籤</a></p></div>
</body>
</html>
jQuery的DOM操作二
- 設置屬性：
attr(屬性名,屬性值) - 獲取屬性：
attr(屬性名) - 刪除屬性：
removeAttr("屬性名") - 固有屬性獲取true和false，如checked=checked selected=selected。
prop(屬性名)，
<script type="text/javascript">
/*
* 屬性操作：
* DOM對象中setAttribute和getAttribute
* jQuery中attr(屬性名,屬性值) attr(屬性名)
*/
//獲取北京節點的name屬性值
alert($("#bj").attr("name"));
//設置北京節點的name屬性的值爲dabeijing
$("#bj").attr("name","dabeijing");
//新增北京節點的discription屬性 屬性值是didu
$("#bj").attr("discription","didu")
//刪除北京節點的name屬性並檢驗name屬性是否存在
$("#bj").removeAttr("name");
//獲得hobby的的選中狀態
alert($("#hobby").prop("checked"))
/*
* jQuery新增函數
* prop：適用於固有屬性，如：checked=checked selected=selected
* attr：適用於其他屬性
*/
</script>
jQuery的DOM操作三
- 添加class樣式：
addClass("class名") - 刪除class樣式：
removeClass("class名") - 切換class樣式：
toggleClass("新的class名") - 獲取樣式：
css("屬性名") - 設置樣式：
css("屬性名","屬性值")
<script type="text/javascript">
//<input type="button" value="採用屬性增加樣式(改變id=one的樣式)" id="b1"/>
$("#b1").click(function(){
$("#one").attr("class","second");
});
//<input type="button" value=" addClass" id="b2"/>
$("#b2").click(function(){
$("#one").addClass("second");
});
//<input type="button" value="removeClass" id="b3"/>
$("#b3").click(function(){
$("#one").removeClass("second");
});
//<input type="button" value=" 切換樣式" id="b4"/>
$("#b4").click(function(){
$("#one").toggleClass("second");
});
//<input type="button" value=" 通過css()獲得id爲one背景顏色" id="b5"/>
$("#b5").click(function(){
alert($("#one").css("background-color"));
});
// <input type="button" value=" 通過css()設置id爲one背景顏色爲綠色" id="b6"/>
$("#b6").click(function(){
alert($("#one").css("background-color","green"));
});
</script>
jQuery的DOM操作四
jQuery對象1.append(jQuery對象2)：將標籤2放在標籤1的後面jQuery對象1.prepend(jQuery對象2)：將標籤2放在標籤1的最前面
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重慶</li>
</ul>
<ul id="love">
<li id="fk" name="fankong">反恐</li>
<li id="xj" name="xingji">星際</li>
</ul>
....省略
<script type="text/javascript">
/**將反恐放置到city的後面*/
$("#city").append($("#fk"));
/**將反恐放置到city的最前面*/
$("#city").prepend($("#fk"));
</script>
jQuery的DOM操作五
remove()把自己刪除了empty()刪除所有子節點
注意：DOM中，刪除節點，需要父節點刪除子節點。 jQuery支持自己刪除自己
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重慶</li>
</ul>
<p class="hello">Hello</p> how are <p>you?</p>
</body>
<script type="text/javascript">
//刪除<li id="bj" name="beijing">北京</li>
/*
* DOM中，刪除節點，需要父節點刪除子節點
* jQuery支持自己刪除自己
*/
$("#bj").remove();
//刪除所有的子節點 清空元素中的所有後代節點(不包含屬性節點).
$("#city").empty();
//測試(id='city')並沒有被刪除
</script>
jQuery的動畫
演示一個：淡入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width:300px;
height: 300px;
background-color: cadetblue;
display: none;
}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript">
$(function(){
$("#div").fadeIn(3000)
});
</script>
</head>
<body>
<div id="div">
</div>
</body>
</html>
隔行變色
jQuery兩行代碼實現隔行變色
<script type="text/javascript">
$(function(){
/*
* 偶數行背景色: even
* 奇數行背景色: odd
*/
$("tr:gt(1):even").css("background-color","darkgrey");
$("tr:gt(1):odd").css("background-color","white");
});
</script>
全選全不選
所有的分選框的屬性checked=總選框的屬性
checked屬於固有屬性，使用prop來獲取
一行代碼實現全選全不選
<script type="text/javascript">
/*
* 點擊事件實現功能
* 全選全不選：所有的分選框的屬性checked=總選框的屬性
* checked=屬於固有屬性，使用prop來獲取
*/
function selectAll(){
//獲取分選框
$(".itemSelect").prop("checked",$("#zong").prop("checked"));
}
</script>
定時廣告
頁面打開後3秒，顯示廣告；動畫效果實現，觀看3秒後回去
<script type="text/javascript">
/*
* 頁面打開後3秒，顯示廣告
* 動畫效果實現，觀看3秒後回去
*/
$(function(){
setTimeout(function(){
$("#guanggao").slideDown(3000);
},3000);
setTimeout(function(){
$("#guanggao").slideUp(3000);
},9000);
})
</script>