- prop()方法--設置或返回被選的第一個元素的屬性值。
它的功能和attr()一樣，但是兩者間也有不同點。第一點，在設置元素的屬性時，prop()方法只設置被選的第一個元素的屬性值，而attr()方法則設置被選中的所有元素的屬性值；第二點，由于內置對象的改變，某些屬性的訪問和設置必須使用prop方法，比如：元素的checked, selected, 或 disabled狀態屬性等。
創建元素節點
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>創建節點元素</title>
<script src="js/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="css/01.css">
</head>
<body>
<h1>學生信息錄入</h1>
<table>
<tr>
<th>姓名</th><th>性別</th><th>年齡</th><th>崗位</th>
</tr>
<tr>
<td>張三</td><td>男</td><td>18</td><td>五好青年</td>
</tr>
</table>
<ul>
<li>姓名：<input type="text" name="username"></li>
<li>性別：<input type="text" name="sex"></li>
<li>年齡：<input type="text" name="age"></li>
<li>崗位：<input type="text" name="job"></li>
<li><button>添加</button></li>
</ul>
</body>
</html>
<script>
$("button").click(function(){
/**
val()方法：用來設置和獲取元素的值。
無論是元素的文本、下拉列表還是單選框都可以獲取元素的值。
(即將在本章后面進行學習)
*/
var username = $("[name='username']").val(); //獲取姓名
var sex = $("[name='sex']").val(); //獲取性別
var age = $("[name='age']").val(); //獲取年齡
var job = $("[name='job']").val(); //獲取崗位
//創建html元素的字符串
var htmlStr = "<tr><td>"+username+"</td><td>"+sex+"</td><td>"+age+"</td><td>"+job+"</td></tr>";
/**
生成一個DOM元素節點 -> 對應<tr>元素
并且此DOM元素節點又包含四個子元素節點 -> 分別是四個<td>子元素
*/
var obj = $(htmlStr);
/**
append()方法：向每個元素內部追加內容。(即將在本章后面進行學習)
*/
$("table").append(obj);
});
</script>
插入節點 菜單
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插入節點元素</title>
<script src="js/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="css/02.css">
</head>
<body>
<h1>菜單欄的批量移動</h1>
<select id="sid" multiple>
<option>滔滔</option>
<option>明霞</option>
<option>寶龍</option>
<option>萬濤</option>
</select>
<div id="did">
<button onclick="fun('sid','mid')">></button><br>
<button onclick="fun('mid','sid')"><</button>
</div>
<select id="mid" multiple>
</select>
</body>
</html>
<script>
/**
獲取obj節點元素，然后添加到對應的目標des元素中，并去除選中屬性
prop()：與attr()方法功能和語法一樣(即將在本章后面講解)。
*/
function fun(obj,des){
$("#"+obj+" option:selected").appendTo("#"+des).prop("selected",false);
}
</script>
插入節點
- 注意，此處函數的參數都是
select里面對應id的名字
插入節點 瀑布流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插入節點元素</title>
<script src="js/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="css/03.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>圖片的瀑布流</h1>
<div id="contains">
</div>
</body>
</html>
<script>
//創建五組不同的數據信息，模擬ajax數據請求
var images = [
{url:"images/01.jpeg",height:"180px",info:"把握當下，就是用心"},
{url:"images/02.jpg",height:"190px",info:"有志者事竟成"},
{url:"images/03.jpg",height:"200px",info:"變態嚴管，破繭成蝶"},
{url:"images/04.jpg",height:"210px",info:"讓學習成為一種習慣"},
{url:"images/05.jpeg",height:"220px",info:"兄弟連教育幫你成就一切"}
];
//用來記錄四列種，每列最后一個<dl>元素的垂直偏移量(Top的值)
var topArr = [10,10,10,10];
/**
函數：用來生成一個<dl>節點元素，添加到對應的DOM樹上
*/
function doaction(){
/**
1. 首先獲取整個文檔DOM的高度--DOMHeight
獲取瀏覽器的可用高度--WinHeight
獲取文檔的滾動條的位置--distanceTop
*/
var distanceTop = $(document).scrollTop();
var WinHeight = screen.availHeight;
var DOMHeight = $(document).height();
// 2. 當滾動條滑動到文檔的最底端某位置的時候,開始執行添加html元素操作
if(DOMHeight - WinHeight - distanceTop < 0){
//3. 在images容器中隨機取出一組數據--randomOne，
var randomOne = images[Math.floor(Math.random()*5)];
//4. 然后使用此數據生成一個Html節點元素--randomHtml
var randomHtml = $("<dl></dl>").append("<dt>![]("+randomOne.url+")</dt>").append("<dd>"+randomOne.info+"</dd>");
/*
5. 得到一個位置--getNodePosition：第getNodePosition列，
其position的Top偏移量為topArr[getNodePosition];
*/
var getNodePosition = getMinIndex(topArr);
//6. 然后把HTMl元素插入到DOM樹上，并且設置html元素的positon屬性值
randomHtml.appendTo("#contains").css("left",250*getNodePosition+"px").css("top",topArr[getNodePosition]+"px");
//8. 修改topArr[getNodePosition]為最新值。
topArr[getNodePosition] += randomHtml.height();
//9. 執行遞歸，判斷是否還能繼續加載多個HTML元素。
doaction();
}
}
//獲取一個數值類型的數組中最小元素的下表
function getMinIndex(arr){
var obj = 0;
for(var i = 1; i < arr.length; i++){
if(arr[obj] > arr[i]) obj = i;
}
return obj;
}
//頁面首先加載時候，執行一次
doaction();
//為頁面的滾動條綁定滾動事件
$(document).scroll(doaction);
</script>
包裹節點
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>包裹節點元素</title>
<script src="js/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="css/05.css">
</head>
<body>
<h1>無限蓋樓</h1>
<div id="contains">
<h2>主貼:同學，請問你認為兄弟連IT教育怎么樣？</h2>
</div>
</body>
</html>
<script>
//創建一個容器，用來隨機生成用戶和對應的評論
var NameContains = ["張三","李四","王五","趙六","田七"];
var commentContains = [
'我認為此地是煉獄，也是天堂，青春的錘煉少不了這樣的熔爐',
'感覺讓人活的更加的真實，每天有著明確的目標而奮斗著',
'所謂的破繭成蝶，前提也得感謝老師給予我們了一層層經驗、責任和鞭策的厚繭',
'在這里，我被自信感染了，被團結感染了，被責任感染了，此刻的我已百毒不侵'
];
//生成10條評論
for(var i = 0; i < 10; i++){
if(i == 0){ //首先判斷是否加載第一條評論
$("#contains").append("<dl></dl>"); //添加一個空dl元素，作為參考點
}
/**
實現步驟：按照第一條評論道最后一條評論的順序
從里到外，一條一條的加載每條評論。
*/
$("#contains > dl").wrap("<dl></dl>"); //首先包裹一個<dl>元素
$("#contains > dl") //切換到上一步生成的<dl>元素
.append("<dt class='name'>"+NameContains[Math.floor(Math.random()*5)]+"</dt>") //添加本條評論的用戶
.append("<dt class='floor'>第"+(i+1)+"樓</dt>")//添加本條評論的樓層
.append("<dd>"+commentContains[Math.floor(Math.random()*4)]+"</dd>"); //添加本條評論的內容
}
/**
remove()方法:從DOM中刪除所有匹配的元素。(下面即將學習)
*/
$("dl:empty").remove(); //刪除第30行生成的空<dl>元素
</script>
實現效果
圖片.png
