JavaScript
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);`
