java排序演算法
1.什麼是javaScript
JavaScript是一門世界上最流行的指令碼語言
2.快速入門
2.1 引入javascript
-
內部標籤
<!-- js程式碼--> <script> alert('hello'); </script> -
外部引入
<!-- 外部引入--> <script src="js/01.js"></script>
2.2 基本語法入門
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 嚴格區分大小寫--> <script> //1.定義變數 var num = 1; var name = "qiudajiang"; //2.條件控制 if (0>1){ alert("true"); } </script> </head> <body> </body> </html>
2.3 資料型別
數值、文字、圖形、音訊、視訊。。。
js不區分小數和整數
1.number
123 //整數
123.123 //浮點數
1.123e3 //科學計數法
-11 //負數
NaN //not a nubmer
Infinity //表示無限大
2.字串
'abc' "abc"
3.布林值
true false
4.邏輯運算
&& 兩個都為真 結果為真
|| 其中一個為真 結果為真
！ 真即假 假即真
5.比較運算子
= 賦值 == 等於（型別不一樣 值一樣 也會判斷為true） 1 "1" === 絕對等於 必須型別一樣 值一樣
須知：
- NaN===NaN, 這個與所有的數值都不相等，包括自己
- 只能通過isNaN(NaN)來判斷這個數是否是NaN
6.浮點數問題
console.log((1/3) === (1-2/3));
儘量避免使用浮點數進行運算，存在精度問題！
console.log(Math.abs(1/3-(1-2/3))<0.00000000001);
7.null 和 undefined
- null 空
- undefined 未定義
8.陣列
Java的陣列必須是一系列型別相同的物件 js不需要
var arr = [1,2,3,4,5,'a',"hello",null,true];
取陣列下標 如果越界了 就會報 undefined
9.物件
物件是大括號，陣列是中括號
每個屬性之間使用逗號隔開，最後一個不用
var person = {
name: "qiudajiang",
age: 3,
tags: ['a','b','abc','...']
}
取物件的值
person.name
person.age
2.4 嚴格檢查格式
<!--
'user strict'
需要IDEA設定支援ES6語法
預防js的隨意性產生的一些問題
必須寫在第一行
區域性變數都建議使用let去定義
-->
<script>
'user strict'
let i = 1;
//ES6
</script>
3.資料型別
3.1字串
-
正常字串使用單引號 或者雙引號包裹
-
注意轉義字元 \
\' \n \t \u4e2d \uxxxx Unicode字元 \x41 Ascll字元 -
多行字串編寫
//tab上面的符號
var msg = `helo
nihao
qiudajiang`
-
模板字串
<script> 'user strict'; //tab上面的符號 let name = 'qiudajiang'; let age = 12; let msg = `nihao${name}`; </script> -
字串長度
str.length -
字串的可變性，不可變
-
大小寫轉換
console.log(student.toLowerCase()) console.log(student.toUpperCase()) -
console.log(student.indexOf('q')) 獲取指定字元的位置
-
substring
console.log(student.substring(0,5)) 擷取區間的字元 console.log(student.substring(0)) 表示當前位置到結尾的字元
3.2 陣列
Array可以包含任意的資料型別
var arr = [1,2,3,4] //通過下標取值和賦值
arr[0] 取值
arr[0] = 1 賦值
- 長度
arr.length
注意：加入給arr.length賦值 陣列大小會發生變化 如果賦值過小 元素就會丟失
-
indexOf() 通過元素獲取下標索引
-
slice() 擷取陣列的一部分，返回一個新的陣列,類似於String中的substring
-
push() pop() 尾部
push:壓入到尾部 pop:彈出尾部的一個元素 -
unshift() shift() 頭部
unshift: 壓入到頭部 shift: 彈出頭部的一個元素 -
排序 sort()
-
元素反轉 reverse()
-
拼接 concat() 並沒有修改陣列，只是返回一個新的陣列
-
連線符 join() 使用特定的字串連線
-
多維陣列
arr = [[1,2],[5,6]];
3.3 物件
<script>
'user strict';
//定義了一個person物件 他有兩個屬性
var person = {
name : 'qiudjiang',
age : 12
}
</script>
js中的物件，用{.......}表示一個物件，鍵值對描述屬性 xxxx : xxxx， 多個屬性之間使用逗號隔開最後一個不用逗號
js中的所有的鍵都是字串，值是任意物件
- 物件賦值
person.name = 'q'
"q"
person.name
"q"
- 使用一個不存在的物件屬性，不會報錯！
person.hhh
undefined
- 動態刪減屬性
delete person.name
true
person
{age: 12}age: 12__proto__: Object
- 動態新增屬性 直接給新的屬性新增值即可
person
{age: 12}
age: 12
hhh: "aaa"
__proto__: Object
person.hhh = 'aaa'
"aaa"
person
{age: 12, hhh: "aaa"}
age: 12
hhh: "aaa"
__proto__: Object
- 判斷屬性值是否在這個物件中！ xxx in xxx
'age' in person
true
//繼承
'toString' in person
true
- 判斷一個屬性是否是自身擁有的
person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true
3.4 流程控制
if判斷
'user strict';
var age = 3;
if (age>3){
alert("a");
} else if (a>1){
alert("b");
}
while迴圈
'user strict';
var sum = 1;
while (sum<100){
sum += 1;
console.log(sum);
}
for迴圈
'user strict';
for (let i = 0; i < 100; i++) {
i++;
console.log(i);
}
forEach迴圈
var age = [1,2,3,4,5];
age.forEach(function (value) {
console.log(value)
})
3.5 Map和Set
ES6新特性
Map:
<script>
'user strict';
//ES6 Map
//學生的成績，學生的名字
var map = new Map([['tom',100],['jack',90],['mark',80]]);
let tom = map.get('tom'); //通過鍵獲取值
console.log(tom);
map.set('hh',10);
map.delete('tom'); //刪除
</script>
Set:無序不重複的集合
let set = new Set([1,1,1,2,3]); //可以去重
set.add(4); //新增
set.delete(2); //刪除
console.log(set.has(3)); //判斷某個元素是否存在
3.6 iterator
ES6新特性
通過for of 實現 for in 得到的是下標
遍歷陣列
var arr = [1,2,3];
for (var x of arr){
console.log(x);
}
遍歷Map
let map = new Map([['tom',100],['jakc',90]]);
for (let x of map){
console.log(x);
}
遍歷Set
let set = new Set([3,4,5]);
for (let x of set){
console.log(x);
}
4.函式
4.1 定義函式
定義方式一
絕對值函式
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
一旦執行到return代表函式結束，返回結果
如果沒有執行return，函式執行完也會返回結果，結果就是undefined。
定義方式二
let abs = function (x) {
if(x>=0){
return x;
}else{
return -x;
}
}
呼叫函式
abs(10) //10
abs(-10) //10
引數問題：js可以傳任意個引數，也可以不傳遞引數
引數進來是否存在？ 不存在如何規避
let abs = function (x) {
//手動丟擲異常
if (typeof x!=='number'){
throw 'not a number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
arguments
arguments是一個JS免費贈送的關鍵字
傳遞進來的所有引數可以獲取
for (let i = 0;i<arguments.length;i++){
console.log(arguments[i]);
}
rest ES6新特性 獲取除了已經定義的引數意外的所有引數
問題：arguments包含所有的引數，如果想要使用多餘的引數來進行附加操作。需要排除已有的引數
rest引數只能寫在最後面，必須用...標識
function fun(a,b,...rest){
console.log('a='+a);
console.log('b='+b);
console.log(rest);
}
4.2 變數的作用域
在js中，var定義的變數實際有作用域的
在函式體中宣告，則在函式體外不可以使用
function fun(){
var x = 1;
x =x + 1;
}
x = x + 2; //Uncaught ReferenceError: x is not defined
內部函式可以訪問外部函式成員 反之則不行
內部函式變數和外部函式變數重名，函式查詢變數從自身函式開始，由內向外查詢
假設外部存在的這個同名函式變數，則內部函式變數會遮蔽外部函式變數
function fun1(){
var x = 1;
function fun2() {
var x = 'a';
console.log('inner'+x);
}
console.log('outer'+x);
fun2();
}
fun1();
提升變數的作用域
function fun(){
var x = 'x'+y;
console.log(x);
var y = 'y';
}
結果：xundefined
說明：js執行引擎，自動提升了y的宣告，但不會提升變數y的賦值；
全域性變數
var x = 1;
function f1() {
console.log(x);
}
f1();
console.log(x);
全域性物件windows
var x = 'xxx';
alert(x);
alert(window.x); //預設所有的全域性變數都會自動繫結在windows物件下
alert()本身也是一個windows變數
規範
由於我們所有的全域性變數都會繫結到我們的windows上。如果不同的js檔案，使用了相同的全域性變數，會產生衝突
//唯一全域性變數
var qiudajiang = {};
//定義全域性變數
qiudajiang.name = 'q';
qiudajiang.age = 12;
qiudajiang.add = function (a,b) {
return a+b;
}
let關鍵字 定義區域性變數
function f() {
for (let i = 0; i <100 ; i++) {
console.log(i);
}
console.log(i+1);//Uncaught ReferenceError: i is not defined
}
常量 const
const PI = 3.14;
console.log(PI);
PI = 2; //Uncaught TypeError: Assignment to constant variable.
4.3方法
定義方法
方法就是把函式放在物件的裡面，物件只有兩個東西：屬性和方法
var qiudajiang = {
name:'qiudajiang',
birth:1999,
age:function () {
let fullYear = new Date().getFullYear();
return fullYear-this.birth;
}
};
//屬性
qiudajiang.name;
//方法
qiudajiang.age();
5.內部物件
標準物件
5.1 Date
基本使用
<script>
var now = new Date();
let fullYear = now.getFullYear();//年
now.getMonth(); //月 0-11 代表月
now.getDate(); //日
now.getDay(); //星期幾
now.getHours(); //時
now.getMinutes(); //分
now.getSeconds(); //秒
now.getTime(); //時間戳
console.log(new Date(1599038081042)); //時間戳轉為時間
</script>
轉換
now = new Date(1599038081042);
Wed Sep 02 2020 17:14:41 GMT+0800 (中國標準時間)
now.toLocaleString()
"2020/9/2 下午5:14:41"
5.2 JSON
在js中，一切皆為物件，任何js支援的型別都可以用JSON來表示
格式
- 物件都用大括號{}
- 陣列都用中括號[]
- 所有的鍵值對都使用 key:value
JSON字串和JS物件的轉化
<script>
//物件
var user = {
name:'qiu',
age : 3,
sex : '男'
}
//物件轉化為json字串
let jsonUser = JSON.stringify(user); //引數為物件
console.log(jsonUser); //{"name":"qiu","age":3,"sex":"男"}
//json字串轉為物件 引數為json字串
let parse = JSON.parse('{"name":"qiu","age":3,"sex":"男"}');
console.log(parse);
</script>
6.面向物件程式設計
class繼承
class關鍵字在ES6引入
- 定義一個類、屬性、方法
//ES6之後
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello');
}
}
var xiaoming = new Student('xiaoming');
- 繼承
//ES6之後
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello');
}
}
var xiaoming = new Student('xiaoming');
class XiaoStudent extends Student{
constructor(name,age) {
super(name); //父類的
this.age = age; //自己的
}
myAge(){
alert('123');
}
}
var xiaohong = new XiaoStudent('xiaohong',123);
7.操作BOM物件（重點）
BOM：瀏覽器物件模型
window
window代表瀏覽器視窗
Navigator
Navigator封裝了瀏覽器的資訊
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36"
screen
代表螢幕尺寸
screen.width
1536
screen.height
864
location （重要）
代表當前的頁面的URL資訊
host: "www.baidu.com" //主機
href: "https://www.baidu.com/ //
protocol: "https: //協議
reload: ƒ reload() //重新整理網頁
//設定新的地址
location.assign('https://www.cnblogs.com/qiudajiang/')
document
代表當前的頁面
document.title
"百度一下，你就知道"
document.title = 'dashuai'
"dashuai"
獲取具體的文件樹節點
<dl id="app">
<dt>java</dt>
<dd>javase</dd>
<dd>javaee</dd>
</dl>
<script>
let dl = document.getElementById('app');
</script>
獲取cookie
document.cookie
劫持cookie原理
www.taobao.com
<script src = "aa.js"></script>
<!--惡意人員，獲取你的cookie上傳到他的伺服器-->
伺服器端可以設定cookie：httpOnly
8.獲得Dom節點
DOM:文件物件模型
核心
瀏覽器網頁就是一個Dom樹形結構
- 更新：更新Dom節點
- 遍歷Dom節點：等到Dom節點
- 刪除：刪除一個Dom節點
- 新增：新增一個新的Dom節點
要操作一個Dom節點，就必須先獲得這個Dom節點
獲得節點
<div id="father">
<h1>標題1</h1>
<p id="p1">p1</p>
<p class="p2"></p>
</div>
<script>
let h1 = document.getElementsByTagName('h1');
let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
let father = document.getElementById('father');
let children = father.children[index]; //獲取父節點下的所有子節點
let firstChild = father.firstChild;
let lastChild = father.lastChild;
</script>
更新節點
<div id="1">
</div>
<script>
var id1 = document.getElementById('1');
id1.innerText = '123'
</script>
操作文字
id1.innerText = '123' 修改文字的值
id1.innerHTML = '<strong>123</strong>'可以解析HTML文字標籤
操作CSS
id1.style.color = 'red'
id1.style.color = 'yellow'
id1.style.fontSize = '90px'
id1.style.padding = '40px'
刪除節點
刪除節點步驟：先獲取父節點，再通過父節點刪除自己
<div id="father">
<h1>標題1</h1>
<p id="p1">p1</p>
</div>
<script>
var self = document.getElementById('p1');
var father = self.parentElement;
father.removeChild(self);
//刪除是一個動態的過程
father.removeChile(father.children[0])
father.removeChile(father.children[1])
father.removeChile(father.children[2])
</script>
注意：刪除多個節點的時候，children是時刻在變化的，刪除節點的時候需要注意
插入節點
獲得了某個Dom節點，假設這個Dom節點是空的，我們通過innerHTML就可以增加一個元素了，但是這個Dom節點已經存在元素了 ，我們就不能這麼做，因為會覆蓋掉。
- 追加操作：append()
<p id="java">java</p>
<div id="list">
<p id="js">js</p>
<p id="jse">jse</p>
<p id="jee">jee</p>
<p id="jme">jme</p>
</div>
<script>
var java = document.getElementById('java');
var list = document.getElementById('list');
list.appendChild(java) //追加到後面
</script>
-
建立一個新的標籤實現插入：
<body> <p id="java">java</p> <div id="list"> <p id="js">js</p> <p id="jse">jse</p> <p id="jee">jee</p> <p id="jme">jme</p> </div> <script> var java = document.getElementById('java'); var list = document.getElementById('list'); //通過js建立一個新的節點 var newP = document.createElement('p');//建立一個p標籤 newP.id = 'new'; newP.innerText = '123'; list.append(newP); //建立一個標籤節點 var myscript = document.createElement('script'); myscript.setAttribute('type','text/css'); //可以建立一個style標籤 var myStyle = document.createElement('style');//建立了一個style標籤 myStyle.setAttribute('type','text/css'); myStyle.innerHTML = 'body{background-color:chartreuse;}';//設定標籤內容 document.getElementsByTagName('head')[0].appendChild(myStyle); //把標籤加到head標籤裡面 </script> </body>insert
<p id="java">java</p> <div id="list"> <p id="js">js</p> <p id="jse">jse</p> <p id="jee">jee</p> <p id="jme">jme</p> </div> <script> var jse = document.getElementById('jse'); var list = document.getElementById('list'); var java = document.getElementById('java'); list.insertBefore(java,jse); //list:要包含的節點 java：新節點 jse：目標節點 插入一個新節點到目標節點的前面 </script>
9.操作表單(驗證)
表單是什麼 Dom樹的節點
- 文字框 text
- 下拉框 select
- 單選、多選框 radio checkbox
- 隱藏域 hidden
- 密碼框 password
- 。。。。。。
獲得要提交的資訊
<body>
<form action="post">
<span>使用者名稱:</span><input type="text" id="username">
<p>
<span>性別</span>
<input type="radio" name="sex" id="1" value="man">男
<input type="radio" name="sex" id="2" value="women">女
<!-- 多選框的值就是定義好的value值-->
</p>
</form>
<script>
var inputtext = document.getElementById('username');
//得到輸入框的值
inputtext.value;
//修改輸入框的值
inputtext.value = '123';
//
var value = document.getElementsByTagName('input')[1].value; //這樣只能獲得當前的值固定的
var man = document.getElementById("man");
var women = document.getElementById("women");
man.checked; //檢視返回結果是否為true 為true則被選中
women.checked = true;//賦值
</script>
</body>
提交表單 md5加密密碼,表單優化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--表單提交繫結提交事件
onsubmit-->
<form action="https://www.bilibili.com/" method="get" onsubmit="return fun1()">
<p>
<span>使用者名稱:</span><input type="text" id="username" name="username">
</p>
<p>
<span>密碼:</span><input type="password" id="input-password">
</p>
<p>
<input type="hidden" id="md5-pwd" name="password">
</p>
<button type="submit">提交</button>
</form>
<script>
function fun1(){
var name = document.getElementById('username');
var pw = document.getElementById('input-password');
var md5pw = document.getElementById('md5-pwd');
//MD5演算法
md5pw.value = md5(pw.value);
//可以校驗判斷表單內容，true通過，false阻止提交
return false;
}
</script>
</body>
</html>
10.jQuery
jQuery庫，裡面存在大量的js的函式
選擇器
<script>
//標籤
$('p').click();
//id
$('#id').click();
//類
$('.class').click();
</script>
事件
滑鼠事件，鍵盤事件，其他事件
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
#div1{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--獲取滑鼠當前座標-->
mouse:<span id="site"></span>
<div id="div1">
移動滑鼠試試
</div>
<script>
$(function () {
$('#div1').mousemove(function (e) {
$('#site').text('x:'+e.pageX+'y:'+e.pageY);
});
});
</script>
</body>
</html>
操作Dom
節點文字操作
$('#test-ul li[name=java]').text();//獲取值
$('#test-ul li[name=java]').text('123');//設定值
$('#test-ul').html();//獲得值
$('#test-ul').html('<strong>123</strong>');//設定值
CSS操作
$('#test-ul li[name=java]').css({'color':'red','fontSize':'45px'});
元素的顯示和隱藏
$('#test-ul li[name=java]').hide();//隱藏
$('#test-ul li[name=java]').show();//顯示
jQuery之Dom操作
jQuery實現Dom物件的【新建】、增【新增】、刪【刪除】、改【修改】、查【查詢】
查詢
查詢節點非常容易，使用選擇器就能輕鬆完成各種查詢工作。例：查詢元素節點p返回p內的文字內容$("p").text();例：查詢元素節點p的屬性返回屬性名稱對應的屬性值$("p").attr("title"),返回p的屬性title的值。
新建
- 建立元素節點
`$li1=$(``"<li></li>"``)`
程式碼返回$li1就是一個由DOM物件包裝成的JQuery物件。把新建節點新增到DOM樹中JQuery程式碼如下：
`$(``"ul"``).append($li1);`
- 建立文字節點
使用JQuery的工廠函式$()同樣能夠建立文字節點，建立文字節點的JQuery程式碼如下：
`$li2=$(``"<li>蘋果</li>"``);`
程式碼返回$li2就是一個由DOM物件包裝成JQuery物件，把新建的文字節點新增到DOM樹中JQuery程式碼如下：
`$(``"ul"``).append($li2);`
3、建立屬性節點
建立屬性節點同元素節點、文字節點一樣使用JQuery的工廠函式完成。建立屬性節點的JQuery代如下：
`$li3=$(``"<li title='榴蓮'>榴蓮</li>"``); `
程式碼返回$li3也是一個由DOM物件包裝成JQuery物件，把新建的屬性節點新增到DOM樹中JQuery程式碼如下：
`$(``"ul"``).append($li3);`
新增
新增到元素內部
1、append()方法
append()方法向匹配的元素內部追加內容， 方法如下：
`$(``"target"``).append(element);`
例：
`$(``"ul"``).append(``"<li title='香蕉'>香蕉</li>"``);`
該方法查詢ul元素，然後向ul中新增新建的li元素。
2、appendTo()方法
appendTo()方法將所有匹配的元素追加到指定的元素中，該方法是append()方法的顛倒[操作主題的顛倒並非操作結果]操作。方法如下：$(element).appendTo(target);例：
`$(``"<li title='荔枝'>荔枝<li>"``).appendTo(``"ul"``);`
該方法新建元素li，然後把li新增到查詢到的ul元素中。
3、prepend()方法
prepend()方法將每匹配的元素內部前置要新增的元素，方法如下：
`$(target).prepend(element);`
例：
`$(``"ul"``).prepend(``"<li title='芒果'>芒果</li>"``)`
該方法將查詢元素ul然後將新建的li元素作為ul子節點，且作為ul的第一個子節點插入到ul中。
4、prependTo()方法
prependTo()方法將元素新增到每一個匹配的元素內部前置，方法如下：
`$(element).prependTo();`
例：
`$(``"<li title='西瓜'>西瓜</li>"``).prependTo(``"ul"``);`
該方法將新建的元素li插入到查詢到的ul元素中作為ul的第一個子節元素。
新增到元素外部
5、after()方法
after()方法向匹配的元素後面新增元素，新新增的元素做為目標元素後的緊鄰的兄弟元素。方法如下：
`$(target).after(element);`
例:
$("p").after("新加段新加段新加段新加段新加段");
方法將查詢節點p，然後把新建的元素新增到span節點後面做為p的兄弟節點。
6、insertAfter()方法
insertAfter()方法將新建的元素插入到查詢到的目標元素後，做為目標元素的兄弟節點。方法如下：
`$(element).insertAfter(target);`
例:
`$(``"<p>insertAfter操作</p>"``).insertAfter(``"span"``);`
方法將新建的p元素新增到查詢到目標元素span後面，做為目標元素後面的第一個兄弟節點。
7、before()方法
before()方法在每一個匹配的元素之前插入，做為匹配元素的前一個兄弟節點。方法如下:
`$(target).before(element);`
例：
$("p").before("下面是個段落");
before方法查詢每個元素p，將新建的span元素插入到元素p之前做為p的前一個兄弟節點。
8、insertBefore()方法
insertBefore()方法將新建元素新增到目標元素前，做為目標元素的前一個兄弟節點，方法如下:
`$(element).insertBefore(target);`
例:
`$(``"<a href='#'>錨</a>"``).insertBefore(``"ul"``);`
insertBefore()新建a元素，將新建的a元素新增到元素ul前，做為ul的前一個兄弟節點。
刪除
1、remove()方法
remove()方法刪除所有匹配的元素，傳入的引數用於篩選元素，該方法能刪除元素中的所有子節點，當匹配的節點及後代被刪除後，該方法返回值是指向被刪除節點的引用，因此可以使用該引用，再使用這些被刪除的元素。
方法如下：
`$(element).remove();`
例:
`$span=$(``"span"``).remove();` ` $span.insertAfter(``"ul"``);`
該示例中先刪除所有的span元素，把刪除後的元素使用$span接收，把刪除後的元素新增到ul後面做為ul的兄弟節點。該操作相當於將所有的span元素以及後代元素移到ul後面。
2、empty()方法。
empty()方法嚴格來講並不是刪除元素，該方法只是清空節點，它能清空元素中的所有子節點。方法如下:
`$(element).empty();`
例：
`$(``"ul li:eq(0)"``).empty();`
該示例使用empty方法清空ul中第一個li的文字值。只能下li標籤預設符號”·“。
修改
1、複製節點$(element).clone()
複製節點方法能夠複製節點元素，並且能夠根據引數決定是否複製節點元素的行為。方法如下:
`$(element).clone(``true``);`
例：
`$(``"ul li:eq(0)"``).clone(``true``);`
該方法複製ul的第一個li元素，true引數決定複製元素時也複製元素行為，當不復制行為時沒有引數。
2、替換節點$(element).repalcewith()、$(element).repalceAll()
替換節點方法能夠替換某個節點，有兩種形式形式實現：replaceWith()和replaceAll().使用replaceWith方法使用後面的元素替換前面的元素，replaceAll方法使用前面的元素替換後面的元素，
方法如下：
`$(oldelement).replaceWith(newelement);$(newelement).repalceAll(oldelement);`
例：
`$(``"p"``).replaceWith(``"<strong>我要留下</strong>"``);`
該方法使用strong元素替換p元素。
`$(``"<h3>替換strong</h3>"``).repalceAll(``"strong"``);`
該例使用h3元素替換所有的strong元素。
3、包裹節點$(element).wrap()、$(element).wrapAll()、$(element).wrapInner()
包裹節點方法使用其他標記包裹目標元素從而改變元素的顯示形式等，並且該操作不會破壞原始文件的詞義。包裹節點有三種實現形式：wrap();wrapAll();wrapInner();
wrap()方法如下：
`$(dstelement).wrap(tag);`
例：
`$(``"p"``).wrap(``"<b></b>"``);`
該示例方法使用b標籤包裹所有的p元素每個元素都使用b標籤包裹。
wrapAll()方法如下：
`$(dstelement).wrapAll(tag);`
例：
`$(``"p"``).wrapAll(``"<b></b>"``);`
訪示例方法使用b標籤包裹所有的p元素，所有的p元素標籤用一個b標籤包裹。
wrapInner()方法如下：
`$(dstelement).wrapInner(tag);`
例：
`$(``"strong"``).wrapInner(``"<b></b>"``);`
該示例使用b標籤包裹每個一strong元素的子元素。
其他操作
屬性操作、樣式操作、設定和獲取HTML,文字和值、遍歷節點操作、Css-Dom操作
1、屬性操作attr()和removeAttr()
attr()方法能夠獲取元素屬性，也能能夠設定元素屬性。方法如下，當attr(para1)方法有個引數時候用於獲得當前元素的para1的屬性值，當attr(para1,attrValue)有兩個引數時候設定當前元素的屬性名為para1的屬性值為attrValue;例：
`$(``"p"``).attr(``"title"``);`
該示例用於獲得p元素的title屬性值。
`$(``"p"``).attr(``"title"``,``"你最喜歡的水果"``);`
該示例設定p元素的title屬性值為"你最喜歡的水果";
如果一次設定多個屬性值可以使用“名/值”對形式，例：
`$(``"p"``).attr({``"title"``:``"你最喜歡的水果"``,``"name"``:``"水果"``})`
該示例一次設定兩個屬性值。
removeAttr()方法用於刪除特定的屬性，方法是在引數中指定屬性名。例：
`$(``"p"``).removeAttr(``"name"``);`
該方法就是移除p元素的name屬性。
2、樣式操作addClass()、removeClass()、toggleClass()和hasClass()
新增樣式addClass()方法，使用該方法對目標元素新增相應的樣式，方法如下：
`$(element).addClass();`
例：
`$(``"p"``).addClass(``"ul"``);`
該示例設定元素p的樣式為ul。
移除樣式removeClass()方法，使用該方法移除目標元素的指定樣式，方法如下：
`$(element).removeClass();`
例：
`$(``"p"``).removeClass(``"ul"``);`
該救命去除掉p元素的ul類樣式。
切換樣式toggleClass()方法，使用該方法切換目標元素的樣式，方法如下：
`$(element).toggleClass();`
例：
`$(``"p"``).toggleClass(``"ul"``);`
該方法來回切換【新增刪除實現切換】元素p的樣式ul.
判斷元素是否使用了樣式$(element).hasClass(),方法如下：
`$(element).hasClass(class);`
例：
`alert($(``"p"``).hasClass(``"ul"``));`
打印出p元素是否有ul樣式。
PS:addClass()和attr()方法設定樣式的不同，attr方法把元素的屬性名對應的屬性值設為方法中的引數值，addClass()則把屬性值
新增到屬性名對應的屬性值中。例：已有元素
元素樣式
,使用attr()和addClass()分別新增新樣式。`$(``"p"``).attr(``"class"``,``"another"``).`
結果是
元素樣式</>
`$(``"p"``).addClass(``"class"``,``"another"``)`
結果是
元素樣式
3、設定和獲取HTML【html()】,文字【text()】和值【val()】
html()方法獲得或設定某個元素的html元素。方法如下:
`$(selector).html();`
例:
$("p").html();該示例獲得元素p的html內容。
$("p").html("新增html內容");該示例設定p的html內容為”新增html內容“;
PS：該方法可以用於XHTML文件，不能用於XML文件。
text()方法獲得或設定某個元素的文字值。方法如下:$(selecotr).text();例：
$("p").text();該示例獲得元素p的text文字內容。
$("p").text("重新設定的文字內容");該示例設定元素p的text文字為"重新設定的文字內容";
PS:該方法對html和XML文件都適用。
val()方法獲得或設定某個元素的值，如果元素值是多選則以陣列形式返回，方法如下：$(selector).val();例:文字元素
`<input type=``"text"` `id=``"userName"` `value=``"請輸入使用者名稱"` `/>`
$("#userName").val();獲得input元素的值。
$("#userName").val('響馬');設定input元素的值為'響馬'。
val()方法的不僅能操作input，最重要的一個用途用於select【下拉列表框】、checkbox【多選框】、radio【單選框】。
例：在下拉框下的多選賦值應用
`<select id=``"fruits"` `multiple=``"multiple"``><option>蘋果</option><option>香蕉</option><option>西瓜</option></select>`
$("#fruits").val(['蘋果','香蕉']);該示例使select中蘋果和香蕉兩項被選中。
4、遍歷節點操作children()、next()、prev()、siblings()和closest()
children()方法用於取得匹配元素的子元素集合，只匹配子元素不考慮任何後代元素。方法如下：
`$(selector).children();`
例：
`$(``"$("``body").children().length;`
該示例獲得body元素的子元素個數；
next()方法用於匹配元素的下一個兄弟節點，方法如下:
`$(selector).next();`
例：
`$(``"p"``).next().html();`
該示例獲得p元素的下一個兄弟節點的html內容。
prev()方法用於匹配元素的上一個兄弟節點，方法如下：
`$(selector).prev();`
例：
`$(``"ul"``).prev().text();`
該示例獲得ul元素的上一個兄弟節點的文字內容。
siblings方法()用於匹配目標元素的所有兄弟元素，方法如下：
`$(selector).siblings();`
例：
$("p").slibings();示例獲得p元素的所有兄弟節點元素。
closest()方法()用來取得最近的匹配元素，首先檢查當前元素是否匹配如果匹配則直接返回，否則繼續向上查詢父元素中符合條件的元素返回，如果沒有匹配的元素則返回空JQuery物件。
5、CSS-Dom操作css()、offset()、position()、scrollTop()和scrollLeft()
css()方法用於獲取、設定元素的一個或多個屬性。方法如下：
`$(selector).css();`
例：
`$(``"p"``).css(``"color"``,``"red"``);`
該示例用於設定元素的顏色屬性為紅色;
$("p").css("color")該示例用於獲得元素的color樣式值;
`$(``"p"``).css({``"font-size"``:``"30px"``,``"backgroundColor"``,``"#888888"``});`
該示例用於設定元素的多個樣式。
offset()方法用於獲取元素相對當前窗體的偏移量，其返回物件包括兩個屬性：top和left。
方法如下：
`$(selector).offset()`
該示例用於獲得元素p的偏移量。
PS:offset()只對可見元素有效。
position()方法用於獲取元素於最近的個position樣式屬性設定為relative或者absolute的祖交節點的相對偏移量。方法如下：
`$(selector).position();`
例：
`var` `postion = $(``"p"``).positon();``var` `left=positon.left;``var` `top=positon.top;`
該示例用於獲得元素p的位置。
scrollTop()和scrollLeft()方法用於獲取元素的滾動條距頂端的距離和距左側的距離。方法如下:
`$(selector).scrollTop();$(selector).scrollLeft();`
例：
`var` `scrollTop=$(``"p"``).scrollTop();``var` `scrollLeft=$(``"p"``).scrollLeft();`
該示例用於獲得元素的滾動條的位置。
也可以新增引數將元素滾動到指定的位置。例：
`$(``"textarea"``).scrollTop(300);$(``"textarea"``).scrollLeft(300);`