### 創建節點
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
/*
* 創建節點
$(<>)
比原生JS更強大的創建方式
* */
// document.createElement('div');
// $('<div>'); //這樣就創建了一個div標簽
/*
var oDiv = document.createElemenet('div');
oDiv.innerHTML = 'hello';
oDiv.id = 'div1';
*/
$(function(){
$('<div id="div1">測試...</div>');
})
</script>
</head>
<body>
</body>
</html>
~~~
***
### 添加節點（剪切操作）
方式1：
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>節點的操作</title>
<script src="js/jquery-1.11.1.js" type="text/javascript"></script>
<script>
// append()、prepend()、before()、after()
$(function(){
//append()：把元素添加到指定的節點的里面的最后
var $li = $('<li>hello</li>');
$('ul').append($li);
//prepend()：把元素添加到指定的節點的里面的最前面
$('ul').prepend($li);
//before()：把元素添加到指定的節點的前面
$('ul').before($li);
//after()：把元素添加到指定的節點的后面
$('ul').after($li);
})
</script>
</head>
<body>
<ul>
<li><div>aaa <span>span</span></div></li>
<li><div>aaa <span>span</span></div></li>
<li><div>aaa <span>span</span></div></li>
</ul>
</body>
</html>
~~~
方式2：
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>節點的操作</title>
<script src="js/jquery-1.11.1.js"></script>
<script>
$(function(){
var $li = $('<li>hello</li>')
// $('ul').append($li);
// $li.appendTo($('ul'));
$li.prependTo($('ul'));
})
</script>
</head>
<body>
<ul>
<li><div>aaa <span>span</span></div></li>
<li><div>aaa <span>span</span></div></li>
<li><div>aaa <span>span</span></div></li>
</ul>
</body>
</html>
~~~
#### 兩種寫法的區別
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function(){
var $li = $('<li>hello</li>');
// $('ul').append($li).css('background','red');//整個ul背景變紅
$li.appendTo($('ul')).css('background','red');
//記憶技巧：誰調用函數就影響的是誰
//僅指定li背景變紅
})
</script>
</head>
<body>
<ul>
<li><div>aaa <span>span</span></div></li>
<li><div>aaa <span>span</span></div></li>
<li><div>aaa <span>span</span></div></li>
</ul>
</body>
</html>
~~~
***
### 刪除節點
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function(){
//原生的刪除元素的方式
//document.body.removeChild(oDiv);
//jQuery的方法
$('div').remove();
})
</script>
</head>
<body>
<div>div</div>
</body>
</html>
~~~
***
### 克隆節點
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
/*
默認的剪切操作
? 如何克隆事件(clone函數添加參數true)
*/
$(function(){
// $('div').appendTo($('span')); //默認是剪切操作
$('div').click(function () {
alert(123);
});
var $div = $('div').clone(true);
$div.appendTo($('span'));
//克隆過來的div默認沒有原來div的click事件。
//clone()默認是克隆元素結構，而不克隆行為事件。
//clone(true)，參數true就是可以復制之前的操作行為
})
</script>
</head>
<body>
<div>div</div>
<span>span</span>
</body>
</html>
~~~
***
### 插入節點
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function(){
$('input[value=上移]').click(function(){
var $nowLi = $(this).closest('li');
var $preLi = $nowLi.prev();
if($preLi.length == 0){
alert("不能再上移了");
}else{
$nowLi.insertBefore($preLi);
}
});
$('input[value=下移]').click(function(){
var $nowLi = $(this).closest('li');
var $nextLi = $nowLi.next();
if($nextLi.length == 0){
alert("不能再下移了");
}else{
$nowLi.insertAfter($nextLi);
}
});
})
</script>
</head>
<body>
<ul>
<li>1.<input type="button" value="上移"><input type="button" value="下移"></li>
<li>2.<input type="button" value="上移"><input type="button" value="下移"></li>
<li>3.<input type="button" value="上移"><input type="button" value="下移"></li>
<li>4.<input type="button" value="上移"><input type="button" value="下移"></li>
<li>5.<input type="button" value="上移"><input type="button" value="下移"></li>
</ul>
</body>
</html>
~~~
