JavaScript

最新推荐文章于 2024-08-22 10:47:09 发布

Alvin_扣扣953821815

最新推荐文章于 2024-08-22 10:47:09 发布

阅读量1.5w

点赞数

分类专栏： javascript JavaScript知识点

javascript 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

JavaScript知识点

14 篇文章 0 订阅

订阅专栏

1、javaScript的概念:是一种表述语言，也是一种基于对象(Object)和事件驱动(EventDriven)的，安全性好的脚本语言，运行在客户端，从而减轻服务器端的负担，总结如下：

1.javaScript主要用来向HTML页面找那个添加交互行为。

2.javaScript是一种脚本语言，语法和java类似。

3.javaScript一般用来编写客户端脚本。

4.javaScript是一种解释性语言，边执行边解释。

2、javaScript由核心语法ECMAScript、浏览器对象模型(BOM) 主要用于管理窗口与窗口之间的通讯，因此其核心对象是window、文档对象模型(DOM)三部分组成.

3、网页中引入javaScript三种方式:

1.使用<Script></Script>标签内部样式

2.使用外部js文件

3.直接在HTML标签中的行内样式。

4.javaScript的作用

1.实现页面表单验证

2.实现页面交互特效

5.javaScript的特点

1.被设计用来向Html页面添加交互行为

2.是一种英特网上最流行的脚本语言

3.一般用于编写客户端脚本

4．是一种解释性语言

6.引入javaScript的方式

1.使用<Script>标签直接嵌入网页

2.使用外部js文件

Js中String对象常用的方法：

toString(包前不包后),2.toLowerCase();toUpperCase();
charAt(index);返回在指定位置的字符，indexOf(str,index);指定字符串中首次出现的位置;split(str);将字符串分割为字符串数组

在javaScript中条件语句Switch(){}可以接字符串；

alert(“提示信息”)；

var isOk=confirm(“确认框“);//如果确认返回true,否则返回false

prompt();prompt(“提示信息”，“输入框默认信息”);

prompt(“请输入姓名”)

close();

open();

setTimeout();在指定毫秒之后调用某个函数

setInterval();在指定周期毫秒来调用某个函数

window.open();

7.Js语法：

1.区分大小写

2.注意变量，函数等命名规范

3.每行代码以分号结束

Js中的函数：

1.系统函数

ParseInt();转换为整数 45.9a转换为45；a6转换返回为NaN(Not a Number)

isNaN(判断是不是数字)

typeof(var);判断是什么数据类型

eval(“5+2”);计算表达式值

2.自定义函数

Function 函数名(){javaScript代码}

Function 函数名(参数1，参数2){javaScript代码 return 返回值(可选)}

Js中函数的调用:

事件名=“函数名(传递的参数值)“;
函数名(传递的参数值);

匿名函数:

匿名函数的声明：

Var 变量名=function(参数){ 函数体 return 返回值；} ;

调用

变量名(参数)

8.程序调用

1.添加alert();方法 2.使用fireBug();方法

9.BOM概述：(Browser Object Model,浏览器对象模型)

1.window对象的属性

名称	说明
History	有关客户访问过的URL的信息
Location	有关当前URL的信息
Screen	有关客户端的屏幕和显示性能的信息

Weindow对象常用的方法：prompt()confirm();setTimeout();setInterval();

Window对象常用的事件：οnlοad=”” οnmοuseοver=””;onclick

window.parent.location

2.History对象

方法：back() ;forward();go();

3.Location对象提供当前页面的URL

属性：host hostname href

方法:reload() replace();

4.Document对象

属性:referrer属性判断是不是通过超链接访问的，不是返回null

10.javaScript中的对象，

Date对象:

创建date对象发方法var date=new Date(MM DD ,YYYY,hh:mm:ss);

var date=new Date(); date.getDay();

Math对象：

Ceil();对数进行向上取整，ceil(25.5)=26;

Floor();向下取整，floor(25.5)=25;

Math.round(25.5);在原数的加0.5后向下取整

11.Dom概述(文档对象模型)

由CoreDom,XMLDom,HTML Dom组成；

12.创建数组

Js中变量的声明:

Var 数组名称=new Array(size);

先声明再赋值 fruit[0]=””
声明同时赋值 var fruit=new Array(“apple”,”orange”);或 var fruit=new Array[“apple”,”orange”];

读取1.使用for循环读取 2.使用for---in读取

For(var x in fruit){document.write(fruit[x]+”<br/>”)}x为下标

Fruit.sort();//排序 string str=fruit.join(“-”);//添加字符串后连接成一个字符串

下拉列表Select对象：

13、 style 定位方面的样式

　　left top position z-index

　　鼠标滚动距离：scorllTop:纵向距离

　　　　　　　　　scorllLeft:横向距离

　　鼠标滚动事假：onscorll

Jquery对象与Dom对象的相互转换

jquery对象转换为DOMD对象，jquery提供两种方法将jquery对象转换为DOM对象，即[index]和get(index),

var $txtName=$(“#txtName”);//jquery对象

var txtName=$txtName[0];//Dom对象

alert(txtName.checked);//检测这个checkbox是否被选中

通过get(index)方法得到对应的Dom对象

Var $txtName=$(“#txtName”);//jquery对象

Var txtName=$txtName.get(0);//Dom对象

alert(txtName.checked);//检测这个checkbox是否被选中

Dom对象转换为jQuery对象

Var txtName=document.getElementById(“txtName”);//dom对象

Var $txtName=$(txtName);//

Dom中添加class属性使用obj.className=classname;

添加类容使用obj.innerHtml=<input />

Jquery中添加class属性使用obj.addClaa=classname;

添加类容使用：obj.html=<input/>;

Jqurey中的五大选择器：

基本选择器 (# . 标签)
层次选择器(后代 >子 +相邻 ~同辈)
属性选择器(P[class=name])
过滤选择器(“tr:even”)
可见性选择器(“p:hidden” “p:viside”)

Jquery中的事件：

Obj.bind(“clike”,function(){});

obj.bind({mousever:function(){},{mouserout:function(){}}});

obj.unbind();

obj.hover(function(){},function(){})方法集合onmouseOver和onmouseOut

obj.toggle();

$(“.tipsbox”).show();obj.hide();

$(“img”).fadeIn(1000);

$(“.txt”).slideUp(1000); obj.slideDown(1000);

Obj.toggleClass(“class”);//集成了addClass和romoveClass

$(this).val(“”);//清空文本内容

Var $newNode=$(<”<li>用jquery创建新元素节点</li>”>);

在正则表达式

JS中常用的一些小技巧：

1.使用!!操作符转换布尔值，对于变量可以使用！！varable做检测，只要变量的值为：0，null , "" , undefind或者NaN都将返回的是false反之的是true

function Account(cash)
{
this.cash = cash;
this.hasMoney = !! cash;
}

2.使用+将字符串转换为数字，只适用字符串数据，否则返回NaN

function toNumber(strNum) {
return +strNum;
}

适用于Date()返回时间戳数字：+new Date();

3.在循环很大时候数字的长度先给去出来，var legth = array.legth;

4.if('querySelector' in document) {

document.querySelector("#id");
} else {
document.getElementById("id");
}

5.获取数组中的最后一个元素

var array = [1,2,3,4,5];
array.slice(-1);

6.字符串元素的替换

var string = "john john";
string.replace(/hn/, "ana"); //"joana john"
string.replace(/hn/g, "ana"); //"joana joana"

以上为javascript的总结内容。

警告

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：

实例

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>My First Paragraph.</p>

<button οnclick="myFunction()">点击这里</button>

<script>
function myFunction()
{
document.write("糟糕！文档消失了。");
}
</script>

</body>
</html>

亲自试一试

#当你需要在某个页面同时执行两个变化处时使用{}

JavaScript 代码块

JavaScript 语句通过代码块的形式进行组合。

块由左花括号开始，由右花括号结束。

块的作用是使语句序列一起执行。

JavaScript 函数是将语句组合在块中的典型例子。

下面的例子将运行可操作两个 HTML 元素的函数：

实例

function myFunction()
{
document.getElementById("demo").innerHTML="Hello World";
document.getElementById("myDIV").innerHTML="How are you?";
}

亲自试一试

JavaScript 对大小写敏感。

JavaScript 对大小写是敏感的。

当编写 JavaScript 语句时，请留意是否关闭大小写切换键。

函数 getElementById 与 getElementbyID 是不同的。

同样，变量 myVariable 与 MyVariable 也是不同的。

空格

JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的：

var name="Hello";
var name = "Hello";

提示：JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

JavaScript 变量

与代数一样，JavaScript 变量可用于存放值（比如 x=2）和表达式（比如 z=x+y）。

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

提示：JavaScript 语句和 JavaScript 变量都对大小写敏感。

JavaScript 数据类型

JavaScript 变量还能保存其他数据类型，比如文本值 (name="Bill Gates")。

在 JavaScript 中，类似 "Bill Gates" 这样一条文本被称为字符串。

JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。

当您向变量分配文本值时，应该用双引号或单引号包围这个值。

当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。

我们使用 var 关键词来声明变量：

var carname;

提示：一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。

JavaScript 函数和事件

上面例子中的 JavaScript 语句，会在页面加载时执行。

通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。

如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

您将在稍后的章节学到更多有关 JavaScript 函数和事件的知识。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

提示：在面向对象的语言中，属性和方法常被称为对象的成员。

提示：在面向对象的语言中，使用 camel-case 标记法的函数是很常见的。您会经常看到 someMethod() 这样的函数名，而不是 some_method()。

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

调用带参数的函数

在调用函数时，您可以向其传递值，这些值被称为参数。

这些参数可以在函数中使用。

您可以发送任意多的参数，由逗号 (,) 分隔：

myFunction(argument1,argument2)

当您声明函数时，请把参数作为变量来声明：

function myFunction(var1,var2)
{
这里是要执行的代码
}

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

实例

<button οnclick="myFunction('Bill Gates','CEO')">点击这里</button>

<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>

亲自试一试

上面的函数会当按钮被点击时提示 "Welcome Bill Gates, the CEO"。

函数很灵活，您可以使用不同的参数来调用该函数，这样就会给出不同的消息：

实例

<button οnclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<button οnclick="myFunction('Bob','Builder')">点击这里</button>

亲自试一试

?????根据您点击的不同的按钮，上面的例子会提示 "Welcome Harry Potter, the Wizard" 或 "Welcome Bob, the Builder"。

在您仅仅希望退出函数时，也可使用 return 语句。返回值是可选的：

function myFunction(a,b)
{
if (a>b)
  {
  return;
  }
x=a+b
}

如果 a 大于 b，则上面的代码将退出函数，并不会计算 a 和 b 的总和。

局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕，本地变量就会被删除。

全局 JavaScript 变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

向未声明的 JavaScript 变量来分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

这条语句：

carname="Volvo";

将声明一个全局变量 carname，即使它在函数内执行。

JavaScript 运算符

条件运算符

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

语法

variablename=(condition)?value1:value2

例子

greeting=(visitor=="PRES")?"Dear President ":"Dear ";

如果变量 visitor 中的值是 "PRES"，则向变量 greeting 赋值 "Dear President "，否则赋值 "Dear"。

条件语句用于基于不同的条件来执行不同的动作。

条件语句

通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。

在 JavaScript 中，我们可使用以下条件语句：

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

switch 语句用于基于不同的条件来执行不同的动作。

JavaScript Switch 语句

请使用 switch 语句来选择要执行的多个代码块之一。

语法

switch(n)
{
case 1:
  执行代码块 1
  break;
case 2:
  执行代码块 2
  break;
default:
  n 与 case 1 和 case 2 不同时执行的代码
}

工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

[javascript]view plain copy 
   
 <html>  
 <head>  
 </head>  
 <body>  
 <button type="button" οnclick="myFunction()">点击这里</button>  
 <p id="demo"></p>  
 <script>  
 function myFunction()  
 {  
 var x;  
 var day=new Date().getDay();  
 switch (day)  
 {  
   case 0:  
   x= "Today it's Sunday";  
   break;  
   case 1:  
   x="Today it's Monday";  
   break;  
   case 2:  
   x="Today it's Tuesday";  
   break;  
   case 3:  
   x="Today it's Wednesday";  
   break;  
   case 4:  
   x="Today it's Thursday";  
   break;  
   case 5:  
   x="Today it's Friday";  
   break;  
   case 6:  
   x="Today it's Saturday";  
   break;  
 }  
   
 document.getElementById("demo").innerHTML=x;  
 }  
 </script>  
 </body>  
 </html>  

JavaScript For 循环

循环可以将代码块执行指定的次数。

JavaScript 循环

如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。

我们可以这样输出数组的值：

document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");

不过通常我们这样写：

for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}

亲自试一试

不同类型的循环

JavaScript 支持不同类型的循环：

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

JavaScript 错误 - Throw、Try 和 Catch

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

JavaScript 测试和捕捉

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

语法

try
  {
  //在这里运行代码
  }
catch(err)
  {
  //在这里处理错误
  }

实例

在下面的例子中，我们故意在 try 块的代码中写了一个错字。

catch 块会捕捉到 try 块中的错误，并执行代码来处理它。

<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";
  txt+="Error description: " + err.message + "\n\n";
  txt+="Click OK to continue.\n\n";
  alert(txt);
  }
}
</script>
</head>

<body>
<input type="button" value="View message" οnclick="message()">
</body>

</html>

Throw 语句

throw 语句允许我们创建自定义错误。

正确的技术术语是：创建或抛出异常（exception）。

如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。

语法

throw exception

异常可以是 JavaScript 字符串、数字、逻辑值或对象。

实例

本例检测输入变量的值。如果值是错误的，会抛出一个异常（错误）。catch 会捕捉到这个错误，并显示一段自定义的错误消息：

[javascript]view plain copy 
   
 <html>  
 <head>  
 </head>  
 <body>  
 <script>  
 function myFunction()  
 {  
 try  
   {  
    var x=document.getElementById("demo").value;  
    if(x=="") throw "empty";  
    if(isNaN(x)) throw "not a number";  
    if(x>10)    throw "too high";  
    if(x<5)     throw "too low";  
    }  
 catch(err)  
    {  
     var y=document.getElementById("mess");  
     y.innerHTML="Error: " + err + "." ;  
    }  
 }  
 </script>  
 <h1>My First JavaScript</h1>  
 <p>Please input a number between 5 and 10:</p>  
 <input id="demo" type="text">  
 <button type="button" οnclick="myFunction()">Test Input</button>  
 <p id="mess"></p>  
 </body>  
 </html>  

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

必填（或必选）项目

下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
  {alert(alerttxt);return false}
else {return true}
}
}

下面是连同 HTML 表单的代码：

<html>
<head>
<script type="text/javascript">

function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {alert(alerttxt);return false}
  else {return true}
  }
}

function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(email,"Email must be filled out!")==false)
    {email.focus();return false}
  }
}
</script>
</head>

<body>
<form action="submitpage.htm" οnsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false}
else {return true}
}
}

下面是连同 HTML 表单的完整代码：

<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false}
else {return true}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
  {email.focus();return false}
}
}
</script>
</head>

<body>
<form action="submitpage.htm"οnsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

说明:本笔记所有内容几乎都摘自JavaScript高级程序设计(第三版),记笔记只是为了让自己记得更牢,如有侵权行为我会删除此文章。在此我极力向大家推荐这本书,确实写的很好。
另外下面大部分例子都是在chrome的控制台中调试的,关于控制台的使用方法,参考Chrome控制台使用详解。在此只补充一点:想要多行输入只需Shift+Enter即可。

1.在html中使用javascript

引入脚本

<script type="text/javascript" src="script_path"></script>
 
 1

直接嵌入代码

<script type="text/javascript">
    alert("hello world");
</script>
 
 1
2
3

需要注意的是当有src属性时,嵌入的代码会被忽略

其它常用属性

属性	作用
defer	延迟表示脚本延迟到文档完全被解析和显示之后再执行,只对外部脚本有效
async	异步表示立即下载脚本,但不能影响其它操作,比如下载其它资源或等待加载其它脚本,只对外部脚本有效
type	说明脚本类型
src	包含外部脚本

关于defer与async的详细说明:
defer的作用是让脚本延迟到整个页面都解析完毕后再运行,设置defer属性相当于告诉浏览器立即下载,但延迟到遇到</html>标签后再执行,html5规范要求脚本按照它们出现的先后顺序执行,并且先于DOMContentLoaded事件执行,但在现实中延迟脚本并不一定会按照顺序执行,也不一定会在DOMContentLoaded事件触发前执行
async的作用是不让页面等待脚本下载和执行,从而异步加载页面其他内容,因此,异步脚本最好不要在加载期间修改DOM,异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行,异步脚本不按照它们在页面出现的顺序执行

2.javascript类型一览

基本类型:undefined,null,boolean,number,string
引用类型:object
可以用typeof操作符查看类型,需要注意的是typeof并不是函数,
可以用typeof(myvarlue)的形式,也可以用typeof myvarlue

typeof返回值说明

返回值	出现情况
undefined	如果这个值未定义
boolean	如果这个值是布尔值
string	如果这个值是字符串
number	如果这个值是数值
object	如果这个值是对象或null
function	如果这个值是函数

来看一个例子

var str1 = 'hello world';
var str2
console.log(typeof str1); //string
console.log(typeof str2); //undefined
console.log(typeof str3); //undefined
console.log(typeof 66); //number
console.log(typeof null); //object
 
 1
2
3
4
5
6
7

需要注意的是对声明了未初始化和未声明的变量执行typeof都返回undefined
对于null返回object是因为null被认为是一个空的对象引用
另外,undefined是派生自null的,因此以下相等性测试返回true

console.log(null == undefined); //true
 
 1

3.javascript Object类型

var animal1 = new Object();
//or animal = Object(); new可以省略
animal1.name = 'dog';
animal1.color = 'white';
console.log(animal1.name); //dog
console.log(animal1['color']); //white
//另一种方式创建对象
var animal2 = {}; //此方式其实并没有调用Object构造函数
animal2.name = 'cat';
//带初始化值
var animal3 = Object({name:'cat',age:10});
var animal4 = {name:'cat',age:10};
 
 1
2
3
4
5
6
7
8
9
10
11
12

4.javascript Function类型

3种创建函数的方式

//第一种
function hello(name)
{
    alert('hello ' + name);
}
//第二种
var hello = function(name)
{
    alert('hello ' + name);
};
//第三种
var hello = new Function('name','alert("hello " + name)');
 
 1
2
3
4
5
6
7
8
9
10
11
12

这三种方式不推荐使用第三种,因为第三种语法会导致解析两次代码从而影响性能,关于第一种和第二种的区别见下例

//调用在声明前面,但结果仍然正确
hello('world');
function hello(name)
{
    alert('hello ' + name);
}
 
 1
2
3
4
5
6

//调用在声明前面,会出错
hello('world');
var hello = function(name)
{
    alert('hello ' + name);
}
 
 1
2
3
4
5
6

这是因为用第一种方式时,解析器会率先读取函数声明,并使其在执行任何代码之前可用;而对于第二种方式,则必须等到解析器执行到它所在的代码行,才会真正被解释执行。

javascript的函数在对待参数方面是比较特殊的。它不介意传递进去多少个参数,也不在乎传递进来的参数是什么数据类型。也就是说,即便你定义的函数只接收两个参数,在调用这个函数时也未必一定要传递两个参数,可以传递一个,三个甚至不传递参数,而解析器永远不会有什么怨言。之所以会这样,是因为ECMAScript中的参数在内部是用一个数组来表示的。函数接收到的始终是这个数组,而不关心数组中包含哪些参数。如果这个数组中不包含任何元素,无所谓;如果包含多个元素,也没有问题。在函数内部可以通过arguments对象来访问这个参数数组。

一个例子

function hello(name)
{
    console.log('hello ' + name);
    console.log('hello ' + arguments[0]);
    console.log('hello ' + arguments[1]);
    console.log('hello ' + arguments[2]);
    console.log(arguments.length);
}
hello('world','you');
//结果为
//hello world
//hello world
//hello you
//hello undefined
//2
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

javascript的函数实际上是对象。函数也有属性和方法。每个函数都有两个属性:length和prototype。length表示函数希望接收的参数个数,prototype是保存实例方法的真正所在。每个函数都包含两个方法:apply()和call(),这两个函数的作用都是在特定的作用域中调用函数,apply()接收两个参数,一个是作用域,另一个是参数数组,第二个参数可以是Array,也可以是arguments对象,call()与apply()的不同之处在于参数的传递方式。

一个例子

function hello1(name)
{
    alert('hello' + name);
}
function hello2()
{
    alert('hello')
}
hello1.length; //1
hello2.length; //0
function sum(num1,num2)
{
    return num1 + num2;
}
function callSum1(num1,num2)
{
    return sum.apply(this,arguments);
}
function callSum2(num1,num2)
{
    return sum.apply(this,[num1,num2]);
}
function callSum3(num1,num2)
{
    return sum.call(this,num1,num2);
}
callSum1(10,10); //20
callSum2(10,10); //20
callSum3(10,10); //20
//通过call扩充函数的作用域
var color = 'red';
var o = {color:'blue'};
function sayColor()
{
    console.log(this.color);
}
sayColor(); //red
sayColor.call(this); //red
sayColor.call(window); //red
sayColor.call(o); //blue
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

5.javascript String类型

主要是与string相关的函数的使用,直接看例子吧

var str1 = 'hello';
//输出指定位置字符
str1.charAt(0); //h
//输出指定位置字符的编码
str1.charCodeAt(0); //104
//通过索引访问
str1[0]; //h
//连接字符串
str1.concat(' world'); //hello world
//slice
str1.slice(1); //ello
str1.slice(1,3); //el
//substring
str1.substring(1); //ello
str1.substring(1,3); //el
//substr,注意与slice与substring的区别
str1.substr(1); //ello
str1.substr(1,3); //ell
//indexof lastIndexOf
str1.indexOf('l'); //2
str1.indexOf('l',3); //3
str1.lastIndexOf('l'); //3
str1.lastIndexOf('l',2); //2
//trim 删除前后空格
var str2 = ' hello ';
str2.trim(); //hello
//大小写转换
var str3 = 'Hello';
str3.toLowerCase(); //hello
str3.toUpperCase(); //HELLO
//模式匹配
vat str4 = 'hello world';
var pattern = /hello/;
//match
var matches = str4.match(pattern);
matches.index; //0
matches[0]; //hello
//search 返回第一个匹配项的索引,没有匹配项则返回-1
str4.search(pattern); //0
//replace
str4.replace('l','x'); //hexlo world
str4.replace(/l/g,'x'); //hexxo worxd
//split
var colors = 'red,blue,green,yellow';
colors.split(','); //['red','blue','green','yellow']
colors.split(',',2); //['red','blue']
colors.split(/[^\,]+/); //['',',',',',',','']
//字符串比较　localeCompare
var str5 = 'hello';
str5.localeCompare('world'); //-1
str5.localeCompare('black'); //1
str5.localeCompare('hello'); //0
//fromCharCode 将字符编码转换成相应字符
String.fromCharCode(104,101,108,108,111); //hello

 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

以上所有方法都不会改变原字符串,另外上面对replace方法介绍比较简略,下面详细说明一下
直接看例子

var str = 'left hello world right';
//$n 引用分组
str.replace(/(hello) (world)/,'$2 $1'); //left world hello right
//$$ 表示$
str.replace(/(hello) (world)/,'$$'); //left $ right
//$& 表示匹配的项
str.replace(/(hello) (world)/,'$&'); //left hello world right
//$' 表示匹配项之后的字符串
str.replace(/(hello) (world)/,"$'"); //left right right
//$` 表示匹配项之前的字符串
str.replace(/(hello) (world)/,'$`'); //left left right
 
 1
2
3
4
5
6
7
8
9
10
11

另外,replace的第二个参数也可以是函数。在只有一个匹配项时,会向这个函数传递3个参数:模式的匹配项,模式匹配项在字符串中的位置和原始字符串。在正则表达式中定义了多个捕获组的情况下,传递给函数的参数依次是模式的匹配项,第一个捕获组的匹配项,第二个捕获组的匹配项……,但最后两个参数仍然分别是模式的匹配项在字符串中的位置和原始字符串,这个函数应该返回一个字符串作为替换文本。

来看一个摘自Javascript高级程序设计(第三版)的例子

function htmlEscape(text)
{
    return text.replace(/[<>"&]/g,function(match,pos,originalText){
        switch(match){
            case "<":
                return "&lt;";
            case ">":
                return "&gt;";
            case "&":
                return "&amp;";
            case "\"":
                return "&quot;";
        }
    });
}
htmlEscape("<p class=\"greeting\">hello world!</p>");
//&lt;p class=&quot;greeting&quot;&gt;hello world!&lt;/p&gt;
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

6.javascript Date类型

var mytime = new Date();
mytime.getFullYear(); //四位的年份
mytime.getMonth(); //月份
mytime.getDate(); //天数
mytime.getDay(); //星期
mytime.getHours(); //小时
mytime.getMinutes(); //分钟
mytime.getSeconds(); //秒数
mytime.getMilliseconds(); //毫秒数
mytime.toLocaleString(); //与特定时区相关的时间格式
Date.now(); //总毫秒数
//设置时间,表示 2015年9月20号17时20分30秒
//月份是用0-11表示的,所以8表示9月
var mytime1 = new Date(2015,8,20,17,20,30);

 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

7.javascript RegExp类型

创建正则表达式的方法
var mypattern = /pattern/flags 或
var mypattern = new RegExp(‘pattern’,’flags’)
由于用构造函数创建时可能需要双重转义,所以用第一种方式有时更简洁

flags的取值

值	作用
g	表示全局模式,即模式被应用于所有的字符串,而非发现第一个匹配项时立即停止
i	忽略大小写
m	多行模式,即在到达一行文本末尾时还会继续查找下一行中是否存在模式匹配的项

一个例子

var mypattern1 = /hello/i;
var mypattern2 = /hello/;
//test方法用来测试给定字符串中是否存在匹配模式
mypattern1.test('Hello world'); //true
mypattern2.test('Hello world'); //false
//RegExp实例属性
//是否设置了g标志
mypattern1.global; //false
//是否设置了i标志
mypattern1.ignoreCase; //true
//开始搜索下一个匹配项的字符位置,从0算起
mypattern1.lastIndex; //0
//是否设置了m标志
mypattern1.multiline; //false
//正则表达式的字符串表示,按照字面量形式返回
mypattern1.source; //hello

//exec
var mypattern3 = /(he)l(lo)/i;
var matches = mypattern3.exec('Hello world');
//匹配项在字符串中的位置
matches.index; //0
//输入的字符串
matches.input; //Hello world
//匹配到的字符串
matches[0]; //Hello
//匹配到的第一个分组
matches[1]; //He
//匹配到的第二个分组
matches[2]; //lo
//匹配到的第三个分组,在此没有第三个分组,为undefined
matches[3]; //undefined
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

对exec的补充说明:对于exec而言,即使在模式中设置了全局标志(g),它每次也只返回一个匹配项。在不设置全局标志的情况下,在同一个字符串上多次调用exec将始终返回第一个匹配项的信息。而在设置全局标志的情况下,每次调用exec则都会在字符串中继续查找新匹配项。

8.javascript Array类型

var animal1 = new Array();
//or var animal = Array()
//指定数组长度
var animal2 = Array(10);
//带初始化值
var animal3 = Array('dog','cat','fox');
//另一种方式
var animal4 = []; //并没有调用Array构造函数
var animal5 = ['mouse','cat'];
//访问元素
console.log(animal5[0]); //mouse
console.log(animal5.length); //2
//检测数组
Array.isArray(animal5); //true
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14

一些方法,假定数组名为myarr

名称	作用
myarr.toString()	返回数组的字符串表示,以逗号分隔,为了取得每一项的值调用每一项的toString()方法
myarr.valueOf()	还是返回这个数组
myarr.toLocaleString()	返回数组的字符串表示,为了取得每一项的值调用每一项的toLocaleString()方法
myarr.join()	返回数组的字符串表示,默认以逗号分隔，可以自己指定分隔符
myarr.push()	在末尾添加元素,参数个数不限,返回修改后的数组长度
myarr.pop()	移除末尾项,返回移除的元素
myarr.shift()	移除第一项,返回移除的元素
myarr.unshift()	在头部添加元素,参数个数不限,返回修改后的数组长度
myarr.sort()	正向排序,此方法默认是按字符串比较的方式排序的(即使是数字),可以给它传递一个比较函数来自定义比较行为,比较函数接收两个参数,如果第一个参数位于第二个参数之前则返回一个负数,相等返回0,之后返回正数,此方法返回经过排过序的数组
myarr.reverse()	反向排序,其它同sort
myarr.concat()	基于数组的项以及参数的项创建一个新数组并返回
myarr.slice()	基于数组中的一个或多个项创建一个新数组并返回,可以接受一或两个参数来指明返回项的起始和结束位置(包含起始位置项,不包含结束位置项),若不传递参数返回所有项,传递一个参数时结束位置默认为末尾
myarr.splice()	参数个数不限,第一参数指定要删除元素的第一项位置,第二个参数指定要删除的项数,后续参数指定插入的元素,返回由删除的元素组成的数组
myarr.indexOf()	正向查找,接收两个参数,第一个为要查找的项,第二个为表示查找起点位置的索引(可选,默认从开头查找),如果没找到返回-1,找到的话返回索引
myarr.lastIndexOf()	反向查找,其它同indexOf

一个例子

//sort reverse
var myarr1 = [1,2,15,10,9];
myarr1.sort(); //[1,10,15,2,9]
function mycompare(value1,value2)
{
    return value1 - value2;
}
myarr1.sort(mycompare); //[1,2,9,10,15]
myarr1.reverse(mycompare); //[15,10,9,2,1]
//concat
var myarr2 = [1,2];
myarr2.concat(); //[1,2]
myarr2.concat(3); //[1,2,3]
myarr2.concat(3,['white','black']); //[1,2,3,'white','black']
//slice
var myarr3 = [1,2,3,4,5];
myarr3.slice(); //[1,2,3,4,5]
myarr3.slice(1); //[2,3,4,5]
myarr3.slice(1,3); //[2,3]
myarr3.slice(1,1); //[]
//splice
var myarr4 = [1,2,3,4];
myarr4.splice(0,1); //返回[1]
console.log(myarr4); //[2,3,4]
myarr4.splice(0,0,'white','black'); //返回[]
console.log(myarr4); //['white','black',2,3,4]
//indexOf lastIndexOf
var myarr5 = ['white','black','pink','white'];
myarr5.indexOf('white'); //0
myarr5.lastIndexOf('white'); //3
myarr5.indexOf('white',1); //3
myarr5.lastIndexOf('white',2); //0
myarr5.indexOf('yellow'); //-1
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

以下方法为迭代方法,每个方法都接收两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域对象,这些方法都不改变原数组。传入这些方法中的函数会接收三个参数:数组项的值,该项在数组中的位置和数组对象本身。在此假定数组名为myarr

方法名	作用
myarr.every()	对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true
myarr.filter()	对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组
myarr.forEach()	对数组中的每一项运行给定函数,无返回值
myarr.map()	对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组
myarr.some()	对数组的每一项运行给定函数,只要存在某一项让函数返回true,就返回true

一个例子

function myfunc1(item,index,array)
{
    return item > 2;
}
function myfunc2(item,index,array)
{
    return item % 2 == 0;
}
function myfunc3(item,index,array)
{
    return item * 2;
}
function myfunc4(item,index,array)
{
    console.log(item);
}
var myarr = [1,2,3,4,5];
//every
myarr.every(myfunc1); //false
//some
myarr.some(myfunc1); //true
//filter
myarr.filter(myfunc2); //[2,4]
//map
myarr.map(myfunc3); //[2,4,6,8,10]
//forEach
myarr.forEach(myfunc4); //1 2 3 4 5
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

最后再介绍两个方法reduce()和reduceRigth()。这两个方法都会迭代数组的所有项,然后构建一个最终返回的值。区别是reduce从前往后,reduceRight从后往前。这两个方法都接收两个参数:一个在每一项上调用的函数和(可选的)初始值。传递给它俩的函数接收4个参数:前一个值,当前值,项的索引和数组对象。

一个例子

function mysum(prev,cur,index,array)
{
    return prev + cur;
}
myarr = [1,2,3];
myarr.reduce(mysum); //6
myarr.reduce(mysum,5); //11
 
 1
2
3
4
5
6
7

9.javascript Global对象

在javascript中,不属于任何其他对象的属性和方法,最终都是Global对象的属性和方法。事实上,没有全局变量或全局函数,所有全局作用域中定义的属性和函数,都属于Global对象。ECMAScript虽然没有指出如何直接访问Global对象,但web浏览器都是将这个全局对象作为window对象的一部分加以实现的。因此,在全局作用域中声明的所有变量和函数就都成了window对象的属性。
除了用window对象,我们可以用下列方式获得Global对象

var global = function(){
    return this;
}();
 
 1
2
3

在此介绍一些Global对象比较有用的方法
首先是URI编码方法,看例子

//encodeURI
var uri = 'http://www.test.com/illegal value.html?user=username';
encodeURI(uri);
//http://www.test.com/illegal%20value.html?user=username
//encodeURIComponent
encodeURIComponent(uri);
//http%3A%2F%2Fwww.test.com%2Fillegal%20value.html%3Fuser%3Dusername
//另外可以用decodeURI和decodeURIComponent对编码的结果解码

 
 1
2
3
4
5
6
7
8
9

它们的区别是encodeURI不会对本身属于URI的特殊字符进行编码,例如冒号,正斜杠,问号等;而encodeURIComponent()则会对它发现的任何非标准字符进行编码。

另一比较有用的方法是eval
eval接收一个参数,它会把传入的参数当代码执行,看下面的例子

eval('2 + 3 * 4'); //14
eval("alert('hello world')"); //hello world
 
 1
2

10.BOM

取得窗口位置

var leftPos = (typeof window.screenLeft == 'number') ?
                window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == 'number') ?
                window.screenTop : window.screenY;
//这样写主要是保持兼容性,有的浏览器只支持screenLeft,有的只
//支持screenX,有的都支持
 
 1
2
3
4
5
6

移动窗口与调整窗口大小

//moveTo 两个参数:新位置的x和y坐标
//moveBy 两个参数:水平和垂直方向上移动的像素数
//resizeTo 两个参数:新宽度与新高度
//resizeBy 两个参数:新窗口与原窗口的宽度和高度之差
//这四个方法可能会被浏览器禁用
window.moveTo(50,100);
window.moveBy(20,20);
window.resizeTo(300,300);
window.resizeBy(20,-10);
 
 1
2
3
4
5
6
7
8
9

取得页面视图的大小

var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if(typeof pageWidth != 'number')
{
    if(document.compatMode == 'CSS1Compat')
    {
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
    }else{
        pageWidth = document.body.clientWidth;
        pageHeight = documetn.body.clientHeight;
    }
}
 
 1
2
3
4
5
6
7
8
9
10
11
12
13

间歇调用与超时调用

//1秒后执行函数
var timeoutId = setTimeout(function(){alert('hello world');},1000);
//取消调用
clearTimeout(timeoutId);
//每隔1秒执行一次函数
var intervalId = setInterval(function(){alert('hello world');},1000);
//取消调用
clearInterval(intervalId);
 
 1
2
3
4
5
6
7
8

系统对话框

//prompt 第一个参数是显示给用户的文本提示
//       第二个参数是文本框中的默认值
var expre = prompt("输入表达式","expression");
alert(eval(expre));
if(confirm('你认为结果对吗'))
{
    alert('Very good');
}else{
    alert('Sorry');
}
 
 1
2
3
4
5
6
7
8
9
10

location对象

属性名	作用
hash	返回URL中#后的字符(包含#号)
host	返回服务器名和端口号
hostname	返回不带端口号的服务器名称
href	返回完整的URL
pathname	返回URL中的目录和文件名
port	返回端口号
protocol	返回协议,http:或https:
search	返回查询字符串,例如:’?name=username’

//打开指定网址
location.assign('http://www.test.com'); //或
window.location = 'http://www.test.com'; //或
location.href = 'http://www.test.com'; //或
location.replace('http://www.test.com');
//replace与上面三种方法的区别是它不会在历史记录中生成新记录
//因此不能通过后退按钮回到前一个页面

//重新加载
location.reload(); //有可能从缓存加载
location.reload(true); //强制从服务器加载

 
 1
2
3
4
5
6
7
8
9
10
11
12

navigator对象
此对象属性很多,在此只列举常用的

//检测插件(非ie)
for(var i=0;i<navigator.plugins.length;i++)
{
    console.log(navigator.plugins[i].name);
}
//浏览器名称
navigator.appName;
//cookie是否启用
navigator.cookieEnabled;
//浏览器所在的系统平台
navigator.platform;
//浏览器的用户代理字符串
navigator.userAgent;

 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14

history对象

history.go(-1); //后退一页
history.go(2); //前进两页
history.go('test.com'); //跳转到历史记录中包含'test.com'的第一个位置
//可能后退,也可能前进,具体看哪个位置最近
history.forward(); //前进一页
history.back(); //后退一页
history.length; //历史记录的数量

 
 1
2
3
4
5
6
7
8

11.DOM

节点类型

英文表示	对应的数字
ELEMENT_NODE	1
ATTRIBUTE_NODE	2
TEXT_NODE	3
CDATA_SECTION_NODE	4
ENTITY_REFERENCE_NODE	5
ENTITY_NODE	6
PROCESSING_INSTRUCTION_NODE	7
COMMENT_NODE	8
DOCUMENT_NODE	9
DOCUMENT_TYPE_NODE	10
DOCUMENT_FRAGMENT_NODE	11
NOTATION_NODE	12

//确定节点类型
//在ie中无效
if(someNode.nodeType == Node.ELEMENT_NODE)
{
    alert("Node is an element");
}
//适用于所有浏览器
if(someNode.nodeType == 1)
{
    alert("Node is an element");
}
 
 1
2
3
4
5
6
7
8
9
10
11

节点的属性及方法

//读取节点属性的方法
someNode.nodeName; //标签名
someNode.nodeValue; //值
someNode.parentNode; //父节点
someNode.firstChild;
someNode.lastChild;
someNode.previousSibling; //同一列表中someNode的前一节点
someNode.nextSibling; //同一列表中someNode的后一节点
someNode.hasChildNodes(); //有子节点时返回true
var firstChild = someNode.childNodes[0];
var secondChild = someNode.chileNodes.item(1);
var count = someNode.childNodes.length;

//改变节点
someNode.appendChild(newNode);
someNode.insertBefore(newNode,someNode.firstChild);
someNode.replaceChild(newNode,someNode.firstChild);
someNode.removeChild(someNode.firstChild);
var newNode = oldNode.cloneNode(true); //深复制,若参数是false则为浅复制

 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

document对象

document.documentElement; //取得对<html>的引用
document.title; //取得文档标题
document.body; //取得对<body>的引用
document.URL; //取得完整的URL
document.domain; //取得域名
document.referrer; //取得来源页面的URL

//取得元素
document.getElementById("id");
document.getElementsByTagName("img");
document.getElementsByName("color");
document.anchors; //包含文档中所有带name特性的<a>元素
document.forms; //包含文档中的所有<form>元素
document.images; //包含文档中的所有<img>元素
document.links; //包含文档中所有带href特性的<a>元素

//特性
someNode.getAttribute("attributeName");
someNode.setAttribute("attributeName","value");
someNode.removeAttribute("attributeName");

//创建元素
var div = document.createElement("div");
div.id = "mydiv";
div.className = "box";

//创建文本节点
var textNode = document.createTextNode("hello");
textNode.appendData(text); //将text添加到节点的末尾
textNode.deleteData(offset,count); //从offset指定的位置开始删除count个字符
textNode.insertData(offset,text); //在offset指定的位置插入text
textNode.replaceData(offset,count,text); 
//用text替换从offset指定的位置开始到offset+count位置处的文本
textNode.splitText(offset); 
//从offset指定的位置将当前文本分成两个文本节点
textNode.substringData(offset,count); 
//提取从offset指定位置开始到offset+count为止处的字符串

 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

dom扩展

//querySelector
document.querySelector("body"); //取得body元素
document.querySelector("#mydiv"); //取得id为mydiv的元素
document.querySelector(".classname"); //取得类为classname的第一个元素
document.body.querySelector("img.button"); //取得类为button的第一个图象元素

//querySelectorAll
document.querySelectorAll(".classname"); //取得类为classname的所有元素
document.querySelectorAll("p strong"); //取得所有<p>元素中的所有<strong>元素

//dom元素新属性
myNode.childElementCount; //返回子元素(不包含文本节点和注释)的个数
myNode.firstElementChild; //第一个元素
myNode.lastElementChild; //最后一个元素
myNode.previousElementSibling; //前一个同辈元素
myNode.nextElementSilling; //后一个同辈元素
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

html5新规范

//取得指定类名的元素,类名的先后顺序无所谓
document.getElementsByClassName("username current");

//<div class="bd user disabled"></div>
div.classList.remove("user"); //删除user
div.classList.toggle("user"); //有user删除,没有添加
div.classList.add("user"); //无user添加,有不添加
div.classList.contains("user"); //存在user返回true,否则返回false

//焦点管理
var button = document.getElementById("myButton");
button.focus();
document.activeElement === button; //true
button.hasFocus(); //true

//其它
document.readyState;
//若为loading,表示正在加载文档,若为complete,表示已经加载完文档
document.compatMode;
//若为CSS1Compat,表示标准模式,若为BackCompat,表示混杂模式
document.head; //引用<head>元素
document.charset = "utf-8"; //字符编码

//<div id="content"><p>la</p></div>
var div = document.getElementById("content");
div.innerHTML; //<p>la</p>
div.outerHTML; //<div id="content"><p>la</p></div>
//insertAdjacentHTML
//两个参数:插入位置和要插入的HTML文本
//作为前一个同辈元素插入
element.insertAdfacentHTML("beforebegin","<p>la</p>");
//作为第一个子元素插入
element.insertAdjacentHTML("afterbegin","<p>la</p>");
//作为最后一个子元素插入
element.insertAdjacentHTML("beforeend","<p>la</p>");
//作为最后一个同辈元素插入
element.insertAdjacentHTML("afterend","<p>la</p>");

//scrollIntoView
//传入true或不传参数那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐
//传入false调用元素会尽可能全部出现在视口中
document.forms[0].scrollIntoView();

 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

添加与移除事件

var btn = document.getElementById("myBtn");
var handler = function(){alert(this.id);};
btn.addEventListener("click",handler,false);
//false表示在冒泡阶段调用事件处理程序,若为true则表示在捕获阶段调用处理程序
btn.removeEventListener("click",handler,false); //移除事件

//一个通用的事件添加与移除程序
var EventUtil = {
    addHandler:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        else if(element.attachEvent){
            element.attachEvent("on"+type,handler);
        else{
            element["on"+type] = handler;
        }
    }
    removeHandler:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent("on"+type,handler);
        else{
            element["on"+type] = null;
        }
    }
};
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

ui事件

事件名	说明
load	当页面完全加载后在window上面触发,当所有框架都加载完毕时在框架集上面触发,当图象加载完毕时在<img>元素上面触发,或者当嵌入的内容加载完毕时在≶object>元素上面触发
unload	当页面完全卸载后再window上面触发,当所有框架都卸载后再框架集上面触发,或者当嵌入的内容卸载完毕后再<object>元素上面触发
abort	在用户停止下载过程时,如果嵌入的内容没有加载完,则在<object>上面触发
error	当发生javascript错误时在window上面触发,当无法加载图像时在<img>元素上面触发,当无法加载嵌入内容时在<object>元素上面触发,或者当有一或多个框架无法加载时在框架集上面触发
select	当用户选择文本框中的一或多个字符时触发
resize	当窗口或框架的大小变化时在window或框架上面触发
scroll	当用户滚动带滚动条的元素中的内容时,在该元素上面触发

焦点事件

事件名	说明
blur	在元素失去焦点时触发,这个事件不会冒泡
focus	在元素获得焦点时触发,这个事件不会冒泡
focusin	在元素获得焦点时触发,会冒泡
focusout	在元素失去焦点时触发,会冒泡

鼠标与滚轮事件

事件名	说明
click	单击鼠标按钮或按下回车时触发
dblclick	双击鼠标按钮时触发
mousedown	按下任意鼠标按钮时触发
mouseenter	在鼠标光标从元素外部首次移到元素范围之内时触发,不冒泡
mouseleave	在位于元素上方的鼠标光标移到元素范围之外时触发,不冒泡
mousemove	当鼠标指针在元素内部移动时重复的触发
mouseout	当鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发
mouseover	在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内时触发
mouseup	在用户释放鼠标按钮时触发

键盘与文本事件

事件名	说明
keydown	当用户按下键盘的任意键时触发,如果按住不放会重复触发该事件
keypress	当用户按下键盘的字符键时触发,如果按住不放会重复触发该事件
keyup	当用户释放键盘上的键时触发
textInput	在文本插入文本框之前会触发textInput事件

表单相关

var form = document.getElementById("myform");
form.submit(); //提交表单
form.reset(); //重置表单
var field1 = form.elements[0]; //取得表单第一个字段
var field2 = form.elements["textbox1"]; //取得名为textbox1的字段
var fieldCount = form.elements.length;

//取得选择的文本
textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
 
 1
2
3
4
5
6
7
8
9

html5验证

/*
<input type="text" name="username" required>
<input type="email" name="email">
<input type="url" name="homepage">
<input type="number" min="0" max="100" step="5" name="count">
<input type="text" pattern="\d+" name="count">
*/
//必填字段没有值是无效的,字段中的值与pattern不匹配也是无效的
if(document.forms[0].elements[0].checkValidity()){
    //有效时执行的代码
}else{
    //无效时执行的代码
}
 
 1
2
3
4
5
6
7
8
9
10
11
12
13

12.JSON

用JSON.stringify()序列化Javascript对象
用JSON.parse()将json格式的数据转成Javascript对象

var book = {
    title:"JavaScript",
    authors:"John",
    edition:3
};
var jsonText = JSON.stringify(book);
jsonText; 
//{"title":"JavaScript","authors":"John","edition":3}
JSON.parse(jsonText); 
//Object {title: "JavaScript", authors: "John", edition: 3}
 
 1
2
3
4
5
6
7
8
9
10

JSON.stringify()还可以接收另外两个参数
第一个是过滤器,可以是数组也可以是函数
第二个是一个选项,表示是否在JSON字符串中保留缩进

var book = {
    title:"JavaScript",
    authors:["John","Mike"],
    edition:3
};
var jsonText = JSON.stringify(book,['title','authors']);
jsonText;
//{"title":"JavaScript","authors":["John","Mike"]}
var myfun = function(key,value){
    switch(key){
        case "authors":
            return value.join(",");
        case "edition":
            return undefined;
        default:
            return value;
    }
}
jsonText = JSON.stringify(book,myfun);
//{"title":"JavaScript","authors":"John,Mike"}
//如果返回undefined,相应属性会被忽略
//每个级别缩进4个空格
JSON.stringify(book,myfun,4);
//{
//    "title": "JavaScript",
//    "authors": "John,Mike"
//}
//设置缩进字符
JSON.stringify(book,myfun,"--");
//{
//--"title": "JavaScript",
//--"authors": "John,Mike"
//}
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

JSON.parse()可以接收第二个参数,该参数是函数,其用法与JSON.stringify的第二个参数类似。另外对象还有toJSON方法,假如把一个对象传入JSON.stringify(),序列化该对象的顺序如下:
1.如果存在toJSON()方法而且能通过它取得有效的值,则调用该方法,否则按默认顺序执行序列化。
2.如果提供了第二个参数,应使用这个函数过滤器,传入函数过滤器的值是第1步返回的值。
3.对第2步返回的每个值进行相应的序列化。
4.如果提供了第三个参数,执行相应的格式化。

13.Ajax

get请求

var xhr = new XMLHttpRequest();
xhr.open("get","test.php",false); //false表示同步请求
xhr.send(null);
if( (xhr.status>=200 && xhr.status<300) || xhr.status==304 ){
    alert(xhr.responseText);
}else{
    alert("Request was unsucessful:" + xhr.status);
}
 
 1
2
3
4
5
6
7
8

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if ((xhr.status>=200 && xhr.status < 300) || xhr.status == 304){
            alert(xhr.responseText);
        }else{
            alert("Request was unsuccessful:" + xhr.status);
        }
    }
};
xhr.open("get","test.php",true); //异步发送请求
xhr.send(null);
 
 1
2
3
4
5
6
7
8
9
10
11
12

http头部信息

名称	说明
Accept	浏览器能够处理的内容类型
Accept-Charset	浏览器能够显示的字符集
Accept-Encoding	浏览器能够处理的压缩编码
Accept-Language	浏览器当前设置的语言
Connection	浏览器与服务器之间连接的类型
Cookie	当前页面设置的任何Cookie
Host	发出请求的页面所在的域
Referer	发出请求的页面的URI
User-Agent	浏览器的用户代理字符串

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if ((xhr.status>=200 && xhr.status < 300) || xhr.status == 304){
            alert(xhr.responseText);
        }else{
            alert("Request was unsuccessful:" + xhr.status);
        }
    }
};
xhr.open("get","test.php",true); //异步发送请求
//设置要发送的头部信息
//最好不要使用浏览器正常发送的字段名称
//并且有的浏览器允许开发人员重写默认的头部信息
//但有的浏览器不允许这样做
xhr.setRequestHeader("myHeader","myValue");
//取得指定头部的信息
xhr.getResponseHeader("Use-Agent");
//取得所有头部信息
xhr.getAllResponseHeaders();
xhr.send(null);
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

post请求

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if ((xhr.status>=200 && xhr.status < 300) || xhr.status == 304){
            alert(xhr.responseText);
        }else{
            alert("Request was unsuccessful:" + xhr.status);
        }
    }
};
xhr.open("post","test.php",true); //异步发送请求
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var data = "username=John&hobby=running";
//还可以用FormData
//var form = document.getElementById("user-info");
//var data = new FormData(form);
xhr.send(data);
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

可以用overrideMimeType方法确保以某种方式处理返回的内容

//确保把响应当作xml而非纯文本来处理
//此方法必须在send方法之前调用
xhr.overrideMimeType("text/xml");

此篇blog主要记载近期接触的JavaScript的内容

JavaScript是一门弱类型的脚本语言,主要用于HTML中

1.JavaScript的编写规范

1.定义变量

由于JavaScript是一门弱类型语言,所以不区分变量类型,所有变量都用var定义

JavaScript的变量类型有: number型 String型 bool型 object型

[html]view plain copy 
   
 <!DOCTYPE html>  
 <html>  
     <head>  
         <meta charset="UTF-8">  
         <title>JavaScript变量</title>  
         <script type="text/javascript">  
             //定义一个number类型变量  
             var num = 10;  
             //定义一个String型变量  
             var str = "Nice_try";  
             //定义一个bool型变量  
             var boo = true;  
             //定义一个object型变量  
             var obj = null;  
             //控制台输出num的数据类型和值  
             console.log(typeof(num)+" "+num);  
             //网页绘制出str的数据类型和值  
             document.write(typeof(str) +" "+ str);  
             //控制台输出boo的数据类型和值  
             console.log(typeof(boo)+" "+boo);  
             //控制台输出obj的数据类型和值  
             console.log(typeof(obj)+" "+obj);  
             //number类型转换为string型  
             num = num + " ";  
             console.log(typeof(num)+" "+num);  
             //string类型转换为number型  
             num = parseInt(num);  
             console.log(typeof(num)+" "+num);  
             //注意,将string型转换为number型时,遇到字母,就会停止转换  
             var str2 = "12a3";  
             var num2 = parseInt(str2);  
             console.log(typeof(num2)+ " " + num2);  
         </script>  
     </head>  
     <body>  
     </body>  
 </html>  

2.定义函数

定义函数的关键词是function

[html]view plain copy 
   
 <!DOCTYPE html>  
 <html>  
     <head>  
         <meta charset="UTF-8">  
         <title>JavaScript变量</title>  
         <script type="text/javascript">  
             //声明一个无返回值的函数  
             function fun1(a,b){  
                 //控制台输出a+b的值  
                 console.log(a+b);  
             }  
             //声明一个含有返回值的函数  
             function fun2(a,b){  
                 return a+b;  
             }  
               
             //调用函数1  
             fun1(5,4);  
             //调用函数2  
             var sum;  
             sum = fun2(5,4);  
             console.log(sum);  
         </script>  
     </head>  
     <body>  
     </body>  
 </html>  

3.定义数组

定义数组的关键词也是var 格式: 数组类型数组名 = [值1,值2,...,值n]

对数组的操作主要有取值,修改,添加,遍历

整个数组属于object类型,数组里的元素属于元素自己的类型

[html]view plain copy 
   
 <!DOCTYPE html>  
 <html>  
     <head>  
         <meta charset="UTF-8">  
         <title>JavaScript数组</title>  
         <script type="text/javascript">  
             //定义一个数组  array  
             var arr = [0,1,2,3];  
             //控制台输出数组类型,这里可以看到,整个数组,属于object类型  
             console.log(typeof(arr));  
             //取出数组的第0个元素,并输出在控制台,同时输出其类型  
             console.log("取出数组里的值");  
             console.log(typeof(arr[0]) + " " + arr[0]);  
             //修改数组的第2号元素  
             console.log("修改数组里的元素");  
             arr[2] = 5;  
             console.log("修改后,arr[2]="+arr[2]);  
             /**向数组里面插入一个元素  
              * 虽然不按下标插入也可以,但是一般按下标顺序插入,  
              * */  
             console.log("向数组里插入值");  
             arr[4] = 4;  
             console.log("arr[4]=" + arr[4]);  
             // 不按下标插入是可以的,这里是测试函数  
             // arr[10] = 10;console.log("arr[10]=" + arr[10]);  
             //遍历数组,遍历数组采用的是循环遍历法  
             console.log("循环遍历数组");  
             for(var i = 0; i< arr.length; ++i){  
                   
                 console.log("arr[" + i + "]=" +arr[i]);  
             }  
         </script>  
     </head>  
     <body>  
     </body>  
 </html>  

4.定义分支

分支结构是程序结构中的重要一环

常用分支方式有

1.if(表达式){函数} 当表达式返回true时,执行函数,否者下一步

2.if(表达式){函数1} else{函数2} 当表达式返回true时,执行函数1,否者执行函数2

3.if(表达式1){函数1} elseif(表达式2){函数2}... 当表达式1满足时,执行函数1,否者判断表达式2,当表达式2返回true时,执行函数2,以此类推...

[html]view plain copy 
   
 <!DOCTYPE html>  
 <html>  
     <head>  
         <meta charset="UTF-8">  
         <title>JavaScript分支结构</title>  
         <script type="text/javascript">  
             var a = 10;  
             var b = 3;  
             var c = 5;  
             // if(){}分支结构  
             if( a > 5){  
                 //当a大于1时,输出a的值,同时输出a>5  
                 console.log("a =" + a + " a>5" );  
             }  
             //if(){}else{}分支结构  
             if( b > 5){  
                 //当b>5时(满足表达式),输出b的值,同时输出b>5  
                 console.log("b = " + b + " b>5");  
             }  
             else{  
                 //当表达式不满足时,控制台输出b的值,同时输出b<5  
                 console.log("b = " + b + " b<5");  
             }  
             //if(){} else(){}分支结构  
             if(c > 5){  
                 //满足条件c>5输出c的值,并输出c>5  
                 console.log("c = "+ c +" c>5");  
             }  
             else if(c < 5){  
                 //满足条件c<5输出c的值,并输出c<5  
                 console.log("c = " + c + " c<5");  
             }  
             else{  
                 //两个条件都不满足,输出C=5  
                 console.log("c = " + c + " c=5");  
             }  
         </script>  
     </head>  
     <body>  
     </body>  
 </html>  

5.定义循环

循环结构也是程序流程结构中的重要一环

常用循环结构有

1.for ( 表达式1;表达式2;表达式3){循环体;}

2.do{循环体}while(表达式);

3.while(表达式){循环体};

这三种循环中,最常用的是for循环和while循环

for循环和while循环的区别:

当知道循环体的执行次数时,一般使用for循环.

当不知道循环体执行次数时,一般使用while循环.

两者并没什么区别

do-while循环和while循环的区别

do-while循环是先执行循环体,然后判断表达式是否满足,do-while循环至少执行一次

while循环是先判断表达式,然后执行循环体.

相同条件下,do-while循环比while循环多执行一次

for循环的执行顺序:

第一次执行时表达式1 - - 表达式2 - - 循环体 - - 表达式3

之后执行时表达式2 - - - 循环体 ---- - 表达式3

[html]view plain copy 
   
 <!DOCTYPE html>  
 <html>  
     <head>  
         <meta charset="UTF-8">  
         <title>JavaScript循环结构</title>  
         <script type="text/javascript">  
             var a = 10;  
             var i = 0;  
               
             //do-while循环  
             do{  
                 ++i;  
                 console.log("这是第" + i +"次执行do-while循环体");  
                 --a;   
             }  
             while(a > 1);  
             //重置a和i的值  
              a = 10;  
              i = 0;  
             //while循环  
             while( a > 1){  
                 ++i;  
                 console.log("这是第" + i +"次执行while循环体");  
                 --a;  
             }  
             //for循环  
             for( var j = 0; j < 10; ++j ){  
                 console.log("这是第" + (j+1) + "次执行for循环体");  
             }  
             //死循环  到自己电脑上面玩去,我反正是崩溃两次了  
 //          while(true){  
 //              document.write("卧槽,死循环了...  ");  
 //          }  
               
         </script>  
     </head>  
     <body>  
     </body>  
 </html>  

这些是JS的相知识，包括它的基础与语法、函数讲解、运算符、对象方法、各种事件、DOM与XML复杂处理、页面系列方法、正则操作、浏览器与操作系统有关、表单相关操作、JQry框架相关、主流函数等相关知识。

基础与语法：
1：区分大小写（与Java、C、Perl类似）。
2：变量是弱类型，可以将它初始化为任意值，用var申明时并不一定在初始化。eg: var test="hi", test2=25, test3。首字母只:字母|_|$。
3：结尾分号可有可无(没有碰到过)。
4：注释为//和/**/，与Java、C和PHP相同。
5：括号表明代码块（()和{}）。
6：关键字：break,else,new,var,case,finally,return,void,catch,for,switch,while,contin。
function,this,with,default,if,throw,delete,in,try,do,instanceof,typeof。
7：保留字：abstract,enum,int,short,boolean,export,interface,static,byte,extends,long,super,char,final,native,synchronized。
class,float,package,transient,debugger,implements,protected,volatile,do le,import,p lic。
8：原始类型(primitive type)：Underfined,NUll,Boolean,Number,String。
9：isFinit(值)：判断值是否为无穷大|小。
10：isNaN(值)：Not a Number，一个奇怪的特殊值，常在转换失败时产生。eg: isNaN("bl")将返回tr;
转换：
toString()：转换成字符串：
var bFound = false; alert(bFound.toString()); //outputs "false"。
Number默认模式:var iNum1=10,fNum2=10.0;alert(iNum1.tostring()); //outputs "10" alert(iNuM2.toString())；//outputs "10"。
Number基模式:var iNum=10; alert(iNum1.toString(2));//outputs "1010" alert(iNum1.toString(8));//outouts "12" toString(16)-A。
parseint()|parseFloat()：转换成数值型：
parseInt("值",进制)：转换成数字（只对String类型调用才能正确运行，其它返回NaN）：1234bl-1234,0xA-10,22.5-22,bl-NaN。
parseInt()：丢弃小数部分,保留整数部分、Math.ceil()：向上取整,有小数就整数部分加、Math.round()：四舍五入、Math.floor()：向下取整。
parseFloat()：转换成浮点数：第一个小数点有效、只认识十进制。1234blut=1234.0,0xA-NaN,22.5-22.5,2.35.6-2.35,0807-807,bl-NaN。
强制类型转换：
Boolean()：""-false,hi-tr,100-tr,null-false,0-false,new object()-tr。
Number()：false-0,tr-1,undefined-NaN,null-0,5.5-5.5,56-56,5.6.7-NaN,new Object()-NaN,100-100。
String()：null-"null"。
引用类型：Object类,Boolean类,Number类,String。
申明时只有一个参数时()可以省略，多个参数进不可以。eg: var 0=new Object|var 0=new Object(参数1,参数2,参数3)。

函数：
对象.toFixed(小数位数值)：定位小数位数方法（0-20位）。
对象.toExponential(位数)：定位浮点数位数。99.toExponential(1)-9e+1。
对象.Math.round(val*100)/100：保留两位小数。
对象.toPrecision()：返回数字的预定义形式或指数形式。99.toPrecision(1)-1e+2。前三种方法都会进行舍入操作。
charAt()|charCodeAt()：访问的是字符串中的单个字符（得到字符串的字符|得到字符串字符的字符代码）。
concat()：用于一个或多个字符中的连接（像+号）。
indexOf()|lastIndexOf()：寻找字符在字符串中出现的位置（从开始位置找|从最后位置找(0开始算)）。
对象.localeCompare(值)：排序比较。对值而言：对象排在前返回-1,与值相等返回0,排在后返回1（区分大小写）。
对象.slice(开始位置,结束位置)：从字符串中截取子串的方法（0算起不包括开始位置），长度省略时为默认字符串的本身长度。
对象.s string(开始位置,结束位置)：它的用法与slice()函数差不多，但当开始位置值为负数数它会解析成0，而slice()不会如此。
对象.toLowerCase|toLocaleLowerCase()：用作值的小写转换，后者用在不同区域国家语言，不知编码运行语言情况下后者更佳。
对象.toUpperCase|toLocaleUpperCase()：用作值的大写转换，后者用在不同区域国家语言，不知编码运行语言情况下后者更佳。

运算符：
一元运算符：
delete()：删除对前定义对象属性或方法的使用，将其设置为underfined，删除开发者未定义的属性和方法叶引发错误。eg: delete o.name。
void()：对任何值都返回undefined，作新窗口的打开不限空白页。eg: <a href="javascript:void(window.open('about:blank'))">Me</a>。
前++|--,后++|--：借用C和Java的运算符。
+|-：一元加法和一元减法，应用于字符值数时会被转换成真正的数字"25"转换成25，一元减法运算会把字符串"25"转换成-25。
位运算符：重温整数，伴运算NOT，位运算AND，位运算OR，位运算XOR，左移运算，有符号右移运算，无符号右移运算。
Boolean运处符：NOT-!,AND-&&,OR-||……。

对象值有关：
ECMAScript语言为JavaScript实现提供了完整的面向对象语言能力，ECMA-262中定义了本地对象、内置对象和宿主对象三种不同类型的对象。
关键字this总是指向调用该方法的对象。
对象＝null：面向对象中强制性废除对象收回内存方式。
document|表单名.对象名.val="值"：得到|赋页面对象值方式。
表单名.对象名.style.display="值"：得到|赋页面对象风格方式。
表单名.对象名.src="http://blog.163.com/wangxiaoxia1221@126/blog/值"：得到|赋页面图片值对象方式。
表单名.对象名.val.indexof("值")：得到对象指定下标位值方法。
对象.width=对象.width±值：设置对象宽方法。
对象.height=对象.height±值：设置对象高方法。
if(对象1.offsetWith-对象2.scrollLeft<=0) 对象2.scrollLeft=0：判断对象是否在最左。
对象.scrollLeft=对象.scrollLeft±10：向左|右滚动十个像素。
对象.innerHTML|TEXT：得到标签中的HTML内容|HTML标签中的值。
对象.οnmοuseοver=function{方法名()}：鼠标移在对象上时产生的方法。
对象.οnmοuseοut=function{方法名()}：鼠标移出对象时产自的方法。
document.all.对象.Execwb(6,1)：打印对象实现(6,6)直接打印|(8,1)页面设置|(1,1)打开页面|(2,1)关闭所有打开的IE窗口。
document.all.对象.Execwb(7,1)：打印预览对象实现(4,1)保存页面|(10,1)查看页面属性|(17,1)全选|(22,1)刷新|(45,1)关闭窗口无提示。
document.all.WebBrowser.Execwb(7,1)：IE内置控件打印预览(6,6)直接打印|(8,1)页面设置|(1,1)打开页面|(2,1)关闭所有打开的IE窗口。
document.all.WebBrowser.Execwb(4,1)：IE内置控件打印保存页面|(10,1)查看页面属性|(17,1)全选|(22,1)刷新|(45,1)关闭窗口无提示。
tab.offsetWidth、tab.offsetHeight：得到一个表格的宽和高。
window.document.body.scrollHeight、window.document.body.scrollWidth：得到一个页面的宽和高。

对象方法有关：
表单名.对象名.select()|focus()：对象获得焦点方法。
οnclick="方法名(参数)"：点击对象所产生方法。
onmousewheel=方法名(参数)：鼠标滑动产生方法。
parent.对象名.focus()：获得对象焦点方法。
onBlur="方法名(参数)"：鼠标离开对象所产生的方法。
对象.lenght()：得到对象大小方法。
对象.join(连接方式)：连接字符串值方法。eg: var col=["red","bl"]; alert(col.join("-")); //outputs "red-bl";
toString|valOf()：数组转换成字符串方法。
split(分隔符)：字符串转换成数组方法。
concat(值)：在数组末尾附加值方法。
对象.slice(开始位置,位置)：从数组字符串中截取元素的方法（0算起不包括开始位置），位置省略时默认到数组最后位置。
对象.push|pop()：在数组中添加|删除最后一个数组项。
对象.shift|unshift(值)：在数组中的删除|添加第一个项方法。
对象.reverse()：颠倒数组项方法。
对象.sort()：对数组进行排序方法。
对象.splice(第一个位置,项数)：删除数组多项方法。
对象.splice(插入位置,0,值//可多个)：添加数组项而不删除方法。
对象.splice(插入位置,1//删除插入位置项,值//可多个)：添加数组项而删除方法。
创建日期方法：
var d = new Date(Date.parse("May 25, 2004"))。
var d = new Date(Date.UTC(2004, 1, 5))： //outputs "2004年2月5号";
var d = new Date(Date.UTC(2004, 1, 5, 13, 5))： //outputs "2004年2月5号下午1:05分";
toDataString()：以实现特定的格式显示Date的日期部分。
toTimeString()：以实现特定的格式显示Date的时间部分。
toLocaleString()：以地点的格式显示Date的日期和时间。
toLocaleDateString()：以地点特定的格式显示Date的日期部分。
toLocaleTimeString()：以地点特定的格式显示Date的时间部分。
toUTCString()：以实现特定的格式显示Date的UTC时间。
getTimezoneOffset()：说明某个时区与UTC时间的关系，判断时区使用的是否是夏令时。
encodeURI|decodeURI()：处理完整的URI（统一资料标识符），对特殊字符进行编码|解码。
ecnodeURIComponent|decodeURIComponent()：用于处理URI的一个片断，对所发现的所有非标准字符进行编码|解码，eg: #,%,&……。
eval(值)：执行值，它是ECMAScript语言中最强大的方法。
本地内置对象：Global|Math对象，Math对象处理数学问题的所有公式，eg: alert(Math.max|min|abs(3,2,25)); //outputs "25"|"2"|绝值。
ceil()|floor|round()数字向上四舍五入|数字投下四舍五入|标准四舍五入，eg: alert(Math.ceil|round|floor(5.5)); //outputs 6|6|5。
Math.randow()：返回0-1之间的随机小数。
prototype属性：创建新对象所依赖的原型，常用在函数构造方法中，可用还用来修改、添加新原型属性的方法。
_initialized：用来判断是否已给原型赋予其他语言中的类定义了。
append|join()：把参数附加到字符串数组中|连接一组字符串。
call()：对象冒充方法，eg: 方法.call(对象,参数1,……)。
apply()：与call()方法类似，eg: 方法.applay(对象,参数数组(参数……))。
子类.prototype.inheritFrom(父类)：类的另类继承方式之一。
子类.instanceOf(父类)：类的另类继承方式之二。
有关document对象：它是window对象的属性，它的通用属性有：
alinkColor激活链接颜色|bgColor页面背景|fgColor页面文本|lastModified最后修改时间|linkClor链接颜色
referrer浏览历史最后URL|title标签文本//top.document.title="值"访问设值方式。
vlinkColor访问过链接颜色|URL载入页面//document.URL="值"文章设值方式。
它的集合对象：anchors锚|applets|embeds嵌入式对象|link链接集合。
forms表单对象：document.form[数值]或document.forms[值]访问。
images图像集合：document.images[数值]或document.forms[值]访问。
它的对应方法：write|writeln()写入内容|open()打开已经载入的文档|close()关闭open()方法打开的文档
有关location对象：它是window对象和document对象的属性：
hash返回URL地址中#后的内容|host服务器名|hostname可能不包括www的服务器名|href|assign当前载入的页面完整URL
pathname:URL地址后的内容|port:URL中声明请求商品|portocal:URL中使用的协议，即//之前的内容|search:URL问号后面内容。
replace当前载入的页面完整URL不留下历史|reload(tr)重载入页面，tr时从服务器端载入|toString返回location.href的值。
另外的两个对象：navigator有关浏览器信息，大数浏览器很多方法并不支持|screen有关用户屏幕作息。
锚点的实现：定义<a name="top"></a>，链接实现<a href="http://blog.163.com/wangxiaoxia1221@126/blog/#top">点击我连接到TOP</a>、若要链接到同一文件夹内其它文档中的名为“top”的锚记，请键入 filename.html#top。
文字链接实现表单提交：<a style="cursor:pointer;" οnclick="return CheckUserDetails()" >确定</a>，CheckUserDetails(){... document.myform.s mit())。
判断是否有按Ctrl+Enter键：(event.ctrlKey && event.keyCode == 13) || (event.altKey && event.keyCode == 83)。
JS传递参数包含汉字处理：三种编解码方式 js对文字进行编码涉及3个函数：escape,encodeURI,encodeURIComponent，相应3个解码函数：unescape,decodeURI,decodeURIComponent。

事件有关：
DOM标准定义事件类型：鼠标事件、键盘事件、HTML事件、突变事件。
鼠标事件：click,dbclick(双击),mousedown,mouseout,mosover,mouseup,mouseove(某个元素上持续发生)。
键盘事件：keydown,keypress,keyup。
HTML事件：load,unload,abort,error,select,change,s mit,reset,resize,scroll,focus,blur。
变化事件：KOMS treeModified,DOMNodeInserted,DomNodeRemoved,DOMNodeRemoveFromDocument,DOMNodeInsertecIntoDocument。
对象.attachEvent|detachEvent(函数,函数名): 对象添加|分离函数方法，eg:
var f1|2=function(){alert(F1|2);}; var o=document.getElementById(ID名); o.οnclick=f1;o.attachEvent("onclick",f2);: 给对象添加方法的两种方式。
对象.addEventListener|removeEventListener(函数,函数名,tr|false//捕获|冒泡阶段): 对象添加|移除事件处理方法，eg:
var f1|2=function(){alert(F1|2);}; var d=document.getElementById(ID名);
o.οnclick=f1;o.addEventLister(onclick,f2,false);: 给对象添加事件方法的两种方式，删除事件方法前必须做一些删除事件处理函数方法。
oEvent.type|keyCode|shiftKey|altKey|ctrlKey: 得到事件类型|按键数值(回车:13,空格:32,回退:8)|Shitf是否被按|Alt是否被按|Ctrl是否被按方法。
oEvent.clientX|clientY|screenX|screenY: 在窗口区域内的位置离边界有多少像素|离桌面屏幕边界有多少像素。
oEvent.srcElement|target: IE|DOM中获取激发事件目标方法。
if (oEvent.isChar) String.fromCharCode(oEvent.charCode): DOM获取按键字符值方法。
oEvent.returnVal=false|oEvent.preventDefault(): 阻止某个事件的默认行为。
oEvent.calcelB lle=tr|oEvent.stopPropagation(): IE|mozilla中停止事件复制。
拖动项事件：dragstart,drap,dragend，使用事件时在前加on。
放置目标事件：dragenter,dragover,dragleave,drop，使用事件时在前加on。
拖动放置实现数据传输：oEvent.dataTransfer.setData(名,值); var s=oEvent.dataTransfer.getData(名);:名可以是text值或者url值。
dataTransfer判断放置目标动作特性：dropEffect(包括none,move,copy,link),effectAllwed(包括uninitialized,none,copy,link,move,copyLink,copyMove,all)
处理错误函数：onerror(错误信息,所在文件,行号)和try...catch结构。
删除方式：<a onClick="[javascript:return] confirm('你确定要删除此用户么?')" href="http://blog.163.com/wangxiaoxia1221@126/blog/user_del.php?action=delete&id=<?php echo $vs['user_id']?>">删除</a>

与DOM和XML有关：
与DOM有关：
getElementsByTabName():得到标签名方法，eg: var b=document.getElementsByTabName("img|input"); alert(b[0].tabName)。
getElementsByName():得到name特性指定的值，eg: var n=document.getElementsByName("radio"); alert(n[0].getAttribute("val"))。
getElementByID():得到ID特性指定的值，eg: var i=document.getElementById("div")。
createElement|createTextNode|appendChile()：创建元素|创建节点|把创建好的文本节点加入到元素中。eg:
<script>
  function createMessage() {
   var oP=document.createElement("p"); var oT=document.createTextNode("Hello World!");
   oP.appendChild(oT);
   document.body.appendChildf(oP);//这是一个添加<p>Hello World!</p>的实例，只能在页面载入之后才能进行。
  }
</script>
removeChild(节点对象)|replaceChild(新节点,替换节点)|insertBefore(新节点,之后节点)：删除节点|替换内容|新消息出现旧消息之前。
createDocumentFragment()：以文档碎片的方式加入节点，为之不变得十分缓慢。
DOM访问CSS样式：eg: 单个单词style.color，多个单词style.backgroundColor。
this.style.cssTest: DOM得到CSS内容方法。
DOM对象方法交互CSS样式：getPropertyVal(名)，getPropertyPriority(),item(index),removeProperty(名),setProperty(名,值//import,priority)。
document.styleSheet[0].cssRules||document.styleSheets[0].rules: 得到使用了引用的CSS样式的规则方法。
对象.style|currentStyle.backgroundColor: 方法是错误的|得到CSS样式对象值。
document.defaultView.getComputedStyle(对象,null).backgroundColor: DOM得到CSS最终样式对象方法，此方法不可运用赋值运算。
对象.innerText|innerHTML|outerText|outerHTML: 给对象添加文本|HTML控件|删除文本|删除HTML控件方法。
document.implementation.hasFeature("Range","2.0"): DOM判断是否有Range方法实例。
与XML有关(以下的对象都表示：XmlDom对象)：
对象.loadXML(xml代码)：载入XML代码方法，load(文件)：载入XML文件方法，对象会返回0,1,2,3,4五种可能值会触发onreadystatechange事件。
对象.documentElements.childNode[1]|对象.xml：得到XML节点方法。
对象.async=false：同步载入方式。
getAllResponseHeaders()：得到HTTP请求发送时的头部全部信息。
对象.setReqstHeader(类型,值)|getResponseHerser(类型): 设置|得到指定头部信息。
XMLHTTP对象.open(get,地址,tr|false//同异步): 进行GET请求。
XMLHTTP对象.open(post,地址,false);XMLHTTP对象.setReqstHeader("Content-Type","application/s-www-form-urlencoded");
XMLHTTP对象.send(对象): 进行POST请求。

页面方法有关：
window.showModalDialog('页面','','dialogWidth=600px status=no ...')：页面中显示新页面窗口方法。
window.open("页面","newframe","top=20,width=20,height=10,men ar=no,toolbar=no,location=no,scrollbars=no")：打开新页面方式。
window.showModalDialog(" 页面","","dialogWidth="+screen.width+"px;dialogHeight="+screen.height+"px; status=no;help=no;scrollbars=no")：全屏式打开新窗口。
window|窗口对象.close()：关闭页面方式。
alert("值")：弹出对话框方法一。
confirm("值")：弹出对话框方法二，返回boolean值。
prompt("值","值")：弹出对话框方法三，同时能接收值。
setInterval(方法名,时间间隔)：每间隔内自动执行方法。
clearInterval(对象)：清除对象的Interval()方法。
window.location.href="http://blog.163.com/wangxiaoxia1221@126/blog/页面"：实现页面跳转方法。
window.print()：调用IE自身打印功能实现打印。
<body onselectstart="return false" topmargin="0" leftmargin="0">：禁止网页被复制方法。
<noscript><iframe src="http://blog.163.com/wangxiaoxia1221@126/blog/*.html"></iframe></noscript>：禁止网页被另存为方法。
Javascript:window.open('页面','','width=767,height=698')：屏蔽IE主菜单方式。
function click() {event.returnVal=false;|if(event.button=2)alert("禁止使用右键！");}：禁止使用右键方式。
<body topmargin ="0" leftmargin = "0" οnkeydοwn="keydown()">13(回车键)|116(刷新键)|37(方向键)|78(新建IE窗口)|121(shitf+10合)
function keydown(){if(event.keyCode==8){event.keyCode=0;event.returnVal=false;alert("禁止退格")}}：屏蔽键盘相关按键事件。
moveBy(右移像数,上移像数)：负值时按相反方向移。
moveTo(像数,像数)：窗口位置
resizeBy(宽度增加像数大小,高度添加像数大小)：相当对当前窗口大小，调整子窗口多少像数，负数为减少。
resizeTo(宽度,高度)：窗口大小，不能使用负数。
IE提供：window.screenLeft|screenTop判断窗口位置，document.body.offsetWidth|offsetHeight：获取窗口大小。
Mozilla和Opera和Safari提供：window.screenX|screenY判断窗口位置，
window.innerWidth|innerHeight：获取窗口大小。
window.outWidth|outHeight：浏览器窗口大小。
window.defaultStatus="值"：设置用户离开当前页面前的显示信息。
window.status="值"：设置窗口状态栏信息。
setTimeout(对象|方法,间隔毫秒)：暂停时间后要执行的方法。
clearTimeout(对象)：清理对象方法。
setInterval(对象|方法,间隔毫秒)：时间间隔后循环执行的方法。
ClearInterval(对象)：清理对象。
window.history.go|back|forward(数值)：去前一页或后一页，window可以省略，history.length可得到试问历史页面数。
运用JS通过DOM实现页面元素的遍历实例：
<html><head><title>NodeIterator Example</title><script type="text/javascript">var iterator = null;
function makeList() {var oDiv = document.getElementById("div1");var oFilter = new Object;
oFilter.acceptNode = function (oNode) {return (oNode.tagName == "P") ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;};
iterator = document.createNodeIterator(oDiv, NodeFilter.SHOW_ELEMENT, oFilter|null//为空时遍历所有元素, false);
var oOutput = document.getElementById("text1");var oNode = iterator.nextNode();
while (oNode) {oOutput.val += oNode.tagName + "\n";oNode = iterator.nextNode();}}</script>
</head><body><p><strong>Note:</strong> The <code>NodeIterator</code> object has only been implemented in Opera
<code>TreeWalker</code> instead.</p><div id="div1"><p>Hello <b>World!</b></p><ul><li>List item 1</li><li>List item 2</li>
<li>List item 3</li></ul></div><textarea rows="10" cols="40" id="text1"></textarea><br />
<input type="button" val="Make List" οnclick="makeList()" /></body></html>
检查浏览器是否支持DOM方法：var bxmllevel=document.implementation.hasFeature("XML","1.0")，这种方式当浏览器只支持DOM的一部分功能时也会返回tr。
js关闭页面：javascript:window.close()、window.opener=null;window.close()关闭页面无任何提示;
js添加收藏：javascript:window.external.AddFavorite(document.URL,document.title);return false;
preg_match('#^([^\.]*)\.#',$host,$match);$host_user = $match[1];从地址得到要访问的数据库。
window.open('index.php','_parent','fullscreen=1');window.opener=null;window.open('','_self');window.close()：JS打开新窗口，关闭原窗口。
JS刷新窗口方法：
1    history.go(0)
2    location.reload()
3    location=location
4    location.assign(location)
5    document.execCommand('Refresh')
6    window.navigate(location)
7    location.replace(location)
8    document.URL=location.href。
<meta http-equiv="refresh" content="20">：页面自动刷新，其中20指每隔20秒刷新一次页面。
<meta http-equiv="refresh" content="20;url=http://www.google.com">：页面自动跳转，其中20指隔20秒后跳转到http://www.google.com页面。
function myrefresh(){window.location.reload();}setTimeout('myrefresh()',1000)：页面自动刷新js版。
parent.location.reload()：如何刷新包含该框架的页面用。
self.opener.location.reload()：窗口刷新父窗口。
parent.otherFrameID.location.reload()：如何刷新另一个框架的页面用。
window.opener.document.location.reload()：实现刷新。
<body οnlοad="opener.location.reload()">：开窗时刷新、<body onUnload="opener.location.reload()">：关闭时刷新。

与正则表达式有关：
JS中每个正则表达式都是一个对象，用 RegExp来表示，用RegExp.$1|$2……得到各个值。常用来测试：日期、信用卡号、URL、E-mail地址。
正则表达式所用到的元字符：（ [ { \ ` $ | ) ? + ,。
var s="a bat, a cat"; var rs=/cat/; var a=rs.test|exec(s)：判断某个值是否匹配指定模式方法，返回tr或false|一个条目。
var s="a bat, a cat"; var rs=/cat/gi; var a=rs.match|search(s)：某个值在某个对象中的出现状况，返回一个数数|值出现的位置，gi是处理指令。
var s="Is red"; var r=/red/; var sr=s.replace(r, function(sMatch) { return "bl";}); alert(sr); //outputs "Is bl"，替换值方法。
var s="red, bl"; var r=/\,/; var ar=s.split(r)；按指定模式分隔值方法。
边界模式：`|$|\b|\B：以开关|结尾|单词边界|非单词边界。eg: /(\w+)\.$/|/`(\w+)/|/`(.+?)\b/: .前的单词|第一个单词|单词边界之前可以出现任意字符。
/\b(\S+?)\b/g|/(\w+)/g: 返回空格分开的所有单词。
/(w+$)/g|m: 返回最后一个单词|有换行会返回多个。
验证日期：day: /0[1-9]|[12][0-9]|3[01]/,month: /0[0-9]|1[0-2]/,year: /19|20\d{2}/，组合模式：/?:day\/?:month\/?:year/,还要整理。
验证货币：/^[\d.]*$/。
验证护照：/(P\d{7})|(G\d{8})/。
验证信用卡：reMasterCard: /^(5[1-5]\d{2})[\s\-]?(\d{4})[\s\-]?(\d{4})[\s\-]?(\d{4})$/。
验证车牌号码：/^[\一-\龥]?[a-zA-Z]-\w{5}$/;车牌号标准：第一个符是汉字、第二个是字母，后面四个是数字。
验证身份证号：/\d{17}[\d|X]|\d{15}/。
验证是否为汉字：/[^\一-\龥]/。
验证电话号码：function isTelephone(str){ var reg=/^[0-9]{11}$|^[0-9]{3,4}(\-[0-9]{7,8})$|^[0-9]{10,12}$/; return reg.test(str)}。
验证数字数值：function isNumber(str) {var reg=/^[0-9]{0,9}$/; return reg.test(str);}。
验证do le数值：function isDo leTwo(str) {var reg=/^(([0-9]{0,9}(\.)?(\d*[0-9])?)|(0\.\d*[1-9]))$/;return reg.test(str);}。
验证do le数值指定位：function isDo leTwo(str) {var reg=/^(([0-9]{0,9}(\.)?(([0-9]){1,2})?)|(0\.\d*[1-9]))$/;return reg.test(str);}。
验证电子邮件：reEmail: /^(?:\w+\.?)*\w+@(?:\w+\.)+\w+$/。
function isEmail(str){ var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/; return reg.test(str);}

与浏览器|操作系统有关：
浏览器的两种检测方式：对象/特征检测:document.getElementById和user-aget:navigator:userAgent字符串检测。
Netscapte Navigator3.0与IE3.0: parseFloat(navigator.appVersion)|navigator.userAgent.indexOf(Win95|Windows 95)可以得到浏览器版本号|OS。
对象/特征检测：浏览器检测前两步：var s=navigator.userAgent;var f=parseFloat(navigator.appVersion);: 将user-agent字条串保存到本地并得到浏览器版本。
isMinIE5|isIE5|isIE6|isIE7……: 检验IE版本。
sUserAgent.indexOf("Opera")>-1;：检测Opera浏览器。
sUserAgent.indexOf("KHTML")>-1||sUserAgent.indexOf("Konqror")>-1||sUserAgent.indexOf("AppleWebKit")>-1;: 检测Konqror/Safari浏览器。
sUserAgent.indexOf("compatible")>-1||sUserAgent.indexOf("MSIE")>-1&&!isOpera;: 检测IE浏览器。
sUserAgent.indexOf("Geoko")>-1&&!isKHTML;: 检测Mozilla浏览器。
sUserAgent.indexOf("Mozilla")==0&&navigator.appName=="Netscapt"&&fAppVersion>=4.0&&fAppVersion<5.0&&!isIE&!isOpera&&!isMoz&&!isKHTML;: 检测NC
操作系统：
navigator.platform=="Win32"||navigator.platform=="Windows;: 检测Windows系统。
navigator.platform=="Mac68K"||navigator.platform=="MacPPC";: 检测Macintosh系统。
navigator.platform=="X11"&&!isWin&&!isMac;:检测Unix系统。

与页面元素有关：
下拉列表：<select id="val" name="valu" οnchange="SelectVal(this);"><option val="1">一</option><option val="2">二</option></select>
str.options[str.selectedIndex].val|text|selected：得到实际值|显示值|选择状态。
得到option选项的显示值：document.getElementById("id").options[document.getElementById("id").selectedIndex].text。
得到option选项的实际值：document.getElementById("id").options[document.getElementById("id").selectedIndex].val|document.getElementById("id").val。

相关框架：
JQry：
JQry相关功能(JQry能做对象DOM、处理相关对象事件、排序数据、产生各种页面效果等)：
JQry基础处理申明：$(document).ready(function() { …… });、简写：$(function() { …… });。
监听所有对象点击对应的事件，eg:$("对象名").click(function() {alert("哈哈，胡素苗在自学 JQry！"); })。
某一个对象添加样式，eg:$("#对象名").addClass("red");、某一个对象下级添加样式，eg:$("#orderedlist > li").addClass("bl");。
某一个对象相应事件发生时添加样式，eg:$("#orderedlist li:last").hover(function() {$(this).addClass("green");},function(){$(this).removeClass("green");});
某一个对象遍历并处理，eg:$("#orderedlist").find("li").each(function(i) {$(this).html( $(this).html() + " 胡素苗！ " + i );});。
某一个对象实现监听处理，eg:$("#reset").click(function() {$("#form").each(function() {this.reset();});});。
某一个对象判断是否有下级并处理，eg:$("li").not(":has(ul)").css("border", "1px solid black");。
页面内针对对象存在某一属性时处理，eg:$("a[name]").css("background-color", "green");、$("form[name]").css("background-color", "bl");。
某一个对象进行匹配验证处理，eg: $("a[href*=/content/gallery]").click(function() {  alert("hehe..."); });。
处理对象相关事件展开与隐藏并带效果，eg: $("#faq").find("dd").hide().end().find("dt").click(function() { var answer  = $(this).next();
  if(answer.is("':visible")) {answer.slideUp();}else { answer.slideDown(); }});。
某一个对象监听处理上级事件，eg:("a").hover(function() {$(this).parents("p").addClass("highlight");$(this).parents("p").css("background-color",yellow");},
  function() {$(this).parents("p").removeClass("highlight");$(this).parents("p").css("background-color", "#FFF"); });。
定义点击某一个对象时出现相应效果，eg:$(function() {$("a").toggle(function() {$(".st?").hide("slow");}, function() {$(".st?").show("fast");});});
  $(function () {$("a").toggle(function () {$(".st?").animate({ height: "hide",opacity: "hide"}, "slow");},
  function () {$(".st?").animate({ height: "show", opacity: "show"}, "slow");});});。

函数知识：
去除空格函数：
function trim(str){ //删除左右两端的空格
return str.replace(/(^\s*)|(\s*$)/g, "");
}
function ltrim(str){ //删除左边的空格
return str.replace(/(^\s*)/g,"");
}
function rtrim(str){ //删除右边的空格
return str.replace(/(\s*$)/g,"");
}

其它知识：
window.retureVal="值" ——页面返回值方式。
<script lang ge='javascript'>alert('无权限...');history.back(-1);</script>" ——返回上一页方法。
echo "<script lang ge='javascript'>alert('无权限...');history.back([-1]);</script>"： —

window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后（包括图片）才能执行	网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完
编写个数	不能同时编写多个，以下代码无法正确执行：window.onload =function({alert("test1");}window.onload = function(){alert("test2");}结果只会输出"test2"	能同时编写多个
简化写法	无	$(document).ready(function(){});可以简写成$(function(){});

一、选择网页元素

　　jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。
　　使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。

选择表达式可以是CSS选择器：

$(document)//选择整个文档对象
$('#myId')//选择ID为myId的网页元素
$('div.myClass')//选择class为myClass的div元素
$('input[name=first]')//选择name属性等于first的input元素

也可以是jQuery特有的表达式：

$('a:first')//选择网页中第一个a元素
$('tr:odd')//选择表格的奇数行
$('#myForm :input')//选择表单中的input元素
$('div:visible') //选择可见的div元素
$('div:gt(2)')//选择所有的div元素，除了前三个
$('div:animated')//选择当前处于动画状态的div元素
　　
二、改变结果集
　　如果选中多个元素，jQuery提供过滤器，可以缩小结果集：

* $('div').has('p'); //选择包含p元素的div元素
* $('div').not('.myClass'); //选择class不等于myClass的div元素
* $('div').filter('.myClass'); //选择class等于myClass的div元素
* $('div').first(); //选择第1个div元素
* $('div').eq(5); //选择第6个div元素
有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法：

$('div').next('p'); //选择div元素后面的第一个p元素
$('div').parent(); //选择div元素的父元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素

三、链式操作
　　选中网页元素以后，就可以对它进行某种操作。
　　jQuery允许将所有操作连接在一起，以链条的形式写出来，比如：

$('div').find('h3').eq(2).html('Hello');
　分解开来，就是下面这样：

1. $('div') //找到div元素

2. .find('h3') //选择其中的h3元素

3. .eq(2) //选择第3个h3元素

4. .html('Hello'); //将它的内容改为Hello
　　这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。
　jQuery还提供了.end()方法，使得结果集可以后退一步：

1. $('div')
2. .find('h3')
3. .eq(2)
4. .html('Hello')
5. .end()//退回到选中所有的h3元素的那一步
6. .eq(0)//选中第一个h3元素
7. .html('World'); //将它的内容改为World
.end()：回到最近的一个"破坏性"操作之前。如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。

示例
描述：选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素

 
        HTML 代码: 
       
        < 
        p 
        >< 
        span 
        >Hello</ 
        span 
        >,how are you?</ 
        p 
        > 
       
        jQuery 代码: 
       
        $("p").find("span").end() 
       
        结果: 
       
        < 
        p 
        >< 
        span 
        >Hello</ 
        span 
        > how are you?</ 
        p 
        >

-四、元素的操作：取值和赋值

　　操作网页元素，最常见的需求是取得它们的值，或者对它们进行赋值。
　　jQuery使用同一个函数，来完成取值（getter）和赋值（setter）。到底是取值还是赋值，由函数的参数决定。

$('h1').html(); //html()没有参数，表示取出h1的值
$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值
常见的取值和赋值函数如下：

1. .html() 返回或设置被选元素的内容 (inner HTML)
2. .text() 取出或设置text内容
3. .attr() 取出或设置某个属性的值
4. .width() 取出或设置某个元素的宽度
5. .height() 取出或设置某个元素的高度
6. .val() 取出或设置html内容取出某个表单元素的值
　　需要注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值（.text()例外，它取出所有元素的text内容）。

五、元素的操作：移动
.insertAfter()，把div元素移动p元素后面：

$('div').insertAfter('p');
.after()，把p元素加到div元素前面：
　

$('p').after('div');
使用这种模式的操作方法，一共有四对

1. .insertAfter()和.after()：在现存元素的外部，从后面插入元素
2. .insertBefore()和.before()：在现存元素的外部，从前面插入元素
3. .appendTo()和.append()：在现存元素的内部，从后面插入元素
4. .prependTo()和.prepend() ：在现存元素的内部，从前面插入元素

1.after():
描述:
在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)。

 
        HTML 代码: 
       
        < 
        b 
        >Hello</ 
        b 
        >< 
        p 
        >I would like to say: </ 
        p 
        > 
       
        jQuery 代码: 
       
        $("p").after( $("b") ); 
       
        结果: 
       
        < 
        p 
        >I would like to say: </ 
        p 
        >< 
        b 
        >Hello</ 
        b 
        >

2.insertAfter()：
描述:
把所有段落插入到一个元素之后。与 $("#foo").after("p")相同

 
        HTML 代码: 
       
        < 
        p 
        >I would like to say: </ 
        p 
        >< 
        div 
        id 
        = 
        "foo" 
        >Hello</ 
        div 
        > 
       
        jQuery 代码: 
       
        $("p").insertAfter("#foo"); 
       
        结果: 
       
        < 
        div 
        id 
        = 
        "foo" 
        >Hello</ 
        div 
        >< 
        p 
        >I would like to say: </ 
        p 
        >

3.before()：
描述:
在所有段落中前插入一个jQuery对象(类似于一个DOM元素数组)。

 
        HTML 代码: 
       
        < 
        p 
        >I would like to say: </ 
        p 
        >< 
        b 
        >Hello</ 
        b 
        > 
       
        jQuery 代码: 
       
        $("p").before( $("b") ); 
       
        结果: 
       
        < 
        b 
        >Hello</ 
        b 
        >< 
        p 
        >I would like to say: </ 
        p 
        >

4.append()：
描述：向所有段落中追加一些HTML标记。

 
        HTML 代码: 
       
        < 
        p 
        >I would like to say: </ 
        p 
        > 
       
        jQuery 代码: 
       
        $("p").append("< 
        b 
        >Hello</ 
        b 
        >"); 
       
        结果: 
       
        < 
        p 
        >I would like to say: < 
        b 
        >Hello</ 
        b 
        ></ 
        p 
        >

5.appendTo()
描述：新建段落追加div中并加上一个class

 
        HTML 代码: 
       
        < 
        div 
        ></ 
        div 
        >< 
        div 
        ></ 
        div 
        > 
       
        jQuery 代码: 
       
        $("< 
        p 
        />") 
       
        .appendTo("div") 
       
        .addClass("test") 
       
        .end() 
       
        .addClass("test2"); 
       
        结果: 
       
        < 
        div 
        >< 
        p 
        class 
        = 
        "test test2" 
        ></ 
        p 
        ></ 
        div 
        > 
       
        < 
        div 
        >< 
        p 
        class 
        = 
        "test" 
        ></ 
        p 
        ></ 
        div 
        >

6.prepend()
描述：向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。

 
        HTML 代码: 
       
        < 
        p 
        >I would like to say: </ 
        p 
        >< 
        b 
        >Hello</ 
        b 
        > 
       
        jQuery 代码: 
       
        $("p").prepend( $("b") ); 
       
        结果: 
       
        < 
        p 
        >< 
        b 
        >Hello</ 
        b 
        >I would like to say: </ 
        p 
        >

7.prependTo()
描述：把所有段落追加到ID值为foo的元素中。

 
         HTML 代码: 
        
         < 
         p 
         >I would like to say: </ 
         p 
         >< 
         div 
         id 
         = 
         "foo" 
         ></ 
         div 
         > 
        
         jQuery 代码: 
        
         $("p").prependTo("#foo"); 
        
         结果: 
        
         < 
         div 
         id 
         = 
         "foo" 
         >< 
         p 
         >I would like to say: </ 
         p 
         ></ 
         div 
         >

**六**、元素的操作：复制、删除和创建
　　复制元素使用.clone()
　　删除元素使用.remove()和.detach()。两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。
　　清空元素内容（但是不删除该元素）使用.empty()。
　　创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了：

1

2

3

 
        * $( 
        '<p>Hello</p>' 
        ); 
       
 
        * $( 
        '<li class="new">new list item</li>' 
        ); 
       
 
        * $( 
        'ul' 
        ).append( 
        '<li>list item</li>' 
        ); 
       

七、工具方法
　　除了对选中的元素进行操作以外，jQuery还提供一些工具方法（utility），不必选中元素，就可以直接使用。
常用的工具方法有以下几种：

$.trim() 去除字符串两端的空格。
$.each() 遍历一个数组或对象。
$.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。
$.grep() 返回数组中符合某种标准的元素。
$.extend() 将多个对象，合并到第一个对象。
$.makeArray() 将对象转化为数组。
$.type() 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。
$.isArray() 判断某个参数是否为数组。
$.isEmptyObject() 判断某个对象是否为空（不含有任何属性）。
$.isFunction() 判断某个参数是否为函数。
$.isPlainObject() 判断某个参数是否为用"{}"或"new Object"建立的对象。
$.support() 判断浏览器是否支持某个特性。

八、事件操作
　jQuery可以对网页元素绑定事件。根据不同的事件，运行相应的函数。

1

2

3

 
        $( 
        'p' 
        ).click( 
        function 
        (){ 
       
 
        alert( 
        'Hello' 
        ); 
       
 
        }); 
       

目前，jQuery主要支持以下事件：

.blur() 表单元素失去焦点。
.change() 表单元素的值发生变化
.click() 鼠标单击
.dblclick() 鼠标双击
.focus() 表单元素获得焦点
.focusin() 子元素获得焦点
.focusout() 子元素失去焦点
.hover() 同时为mouseenter和mouseleave事件指定处理函数
.keydown() 按下键盘（长时间按键，只返回一个事件）
.keypress() 按下键盘（长时间按键，将返回多个事件）
.keyup() 松开键盘
.load() 元素加载完毕
.mousedown() 按下鼠标
.mouseenter() 鼠标进入（进入子元素不触发）
.mouseleave() 鼠标离开（离开子元素不触发）
.mousemove() 鼠标在元素内部移动
.mouseout() 鼠标离开（离开子元素也触发）
.mouseover() 鼠标进入（进入子元素也触发）
.mouseup() 松开鼠标
.ready() DOM加载完成
.resize() 浏览器窗口的大小发生改变
.scroll() 滚动条的位置发生变化
.select() 用户选中文本框中的内容
.submit() 用户递交表单
.toggle() 根据鼠标点击的次数，依次运行多个函数
.unload()
用户离开页面
　　以上这些事件在jQuery内部，都是.bind()的便捷方式。使用.bind()可以更灵活地控制事件，比如为多个事件绑定同一个函数：

1

2

3

4

5

6

 
        $( 
        'input' 
        ).bind( 
       
        'click change' 
        ，  
        //同时绑定click和change事件 
       
        function 
        (){ 
       
        alert( 
        'Hello' 
        ); 
       
        } 
       
        );

有时，你只想让事件运行一次，这时可以使用.one()方法。

1

2

3

 
        $( 
        "p" 
        ).one( 
        "click" 
        ，  
        function 
        (){ 
       
 
        alert( 
        "Hello" 
        );  
        //只运行一次，以后的点击不会运行 
       
 
        }); 
       

unbind()用来解除事件绑定。

1	`$(` `'p'` `).unbind(` `'click'` `);`

所有的事件处理函数，都可以接受一个事件对象(event object)作为参数，比如下面例子中的e：

1

2

3

 
        $( 
        "p" 
        ).click( 
        function 
        (e){ 
       
        alert(e.type);  
        //"click" 
       
        });

　　这个事件对象有一些很有用的属性和方法：

event.pageX 事件发生时，鼠标距离网页左上角的水平距离　　
event.pageY 事件发生时，鼠标距离网页左上角的垂直距离
event.type 事件的类型（比如click）　　
event.which 按下了哪一个键　　
event.data在事件对象上绑定数据，然后传入事件处理函数　　
event.target 事件针对的网页元素
event.preventDefault() 阻止事件的默认行为（比如点击链接，会自动打开新页面）
event.stopPropagation() 停止事件向上层元素冒泡
　　在事件处理函数中，可以用this关键字，返回事件针对的DOM元素：

1

2

3

4

5

6

 
        $( 
        'a' 
        ).click( 
        function 
        (){ 
       
 
        if 
        ($( 
        this 
        ).attr( 
        'href' 
        ).match( 
        'evil' 
        )){ 
        //如果确认为有害链接 
       
 
        e.preventDefault();  
        //阻止打开 
       
 
        $( 
        this 
        ).addClass( 
        'evil' 
        );  
        //加上表示有害的class 
       
 
        } 
       
 
        }); 
       

　　有两种方法，可以自动触发一个事件。一种是直接使用事件函数，另一种是使用.trigger()或.triggerHandler()。

1 2	`$(` `'a'` `).click();` `$(` `'a'` `).trigger(` `'click'` `);`

九、特殊效果

　　jQuery允许对象呈现某些特殊效果。

$('h1').show(); //展现一个h1标题
常用的特殊效果如下：

.fadeIn() 淡入
.fadeOut() 淡出
.fadeTo() 调整透明度
.hide() 隐藏元素
.show() 显示元素
.slideDown() 向下展开
.slideUp() 向上卷起
.slideToggle() 依次展开或卷起某个元素
.toggle() 依次展示或隐藏某个元素
除了.show()和.hide()，所有其他特效的默认执行时间都是400ms(毫秒)，但是你可以改变这个设置。

* $('h1').fadeIn(300); // 300毫秒内淡入
* $('h1').fadeOut('slow'); //缓慢地淡出
　　在特效结束后，可以指定执行某个函数。

1	`$(` `'p'` `).fadeOut(300,` `function` `(){$(` `this` `).remove(); });`

　更复杂的特效，可以用.animate()自定义。

 
        $( 
        'div' 
        ).animate( 
       
        { 
       
        left :  
        "+=50" 
        ， 
        //不断右移 
       
        opacity : 0.25  
        //指定透明度 
       
        }, 
       
        300, 
        // 持续时间 
       
        function 
        (){ alert( 
        'done!' 
        ); } 
        //回调函数 
       
        );

　　.stop()和.delay()用来停止或延缓特效的执行。
　　$.fx.off如果设置为true，则关闭所有网页特效。

几个常见的筛选选择器：

filter()：筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式
描述：保留子元素中不含有ol的元素。

HTML 代码:

1	`<` `p` `><` `ol` `><` `li` `>Hello</` `li` `></` `ol` `></` `p` `><` `p` `>How are you?</` `p` `>`

jQuery 代码:

1

2

3

 
        $( 
        "p" 
        ).filter( 
        function 
        (index) { 
       
 
          
        return 
        $( 
        "ol" 
        ,  
        this 
        ).length == 0; 
       
 
        }); 
       

结果:

1	`<` `p` `>How are you?</` `p` `>`

silce()：选取一个匹配的子集

描述：选择第一个p元素

HTML 代码:

1	`<` `p` `>Hello</` `p` `><` `p` `>cruel</` `p` `><` `p` `>World</` `p` `>`

jQuery 代码:

1	`$(` `"p"` `).slice(0, 1).wrapInner(` `"<b></b>"` `);`

结果:

1	`<` `p` `><` `b` `>Hello</` `b` `></` `p` `>`

后续更新……

如何使用JQuery CDN？推荐使用官方的CDN节点，使用代码如下：

1 2	`<` `script` `src` `=` `"//code.jquery.com/jquery-1.11.0.min.js"` `> </` `script` `>` `<` `script` `src` `=` `"//code.jquery.com/jquery-migrate-1.2.1.min.js"` `> </` `script` `>`

首先，来了解一下jQuery学习的整体思路

jQuery系统学习篇

XMind源文件提供参考下载

第一节 jQuery初步认知

jQuery概述

JQuery概念
- javascript概念
  - 基于Js语言的API和语法组织逻辑，通过内置window和document对象，来操作内存中的DOM元素
- JQuery概念
  - 基于javascript的，同上，提高了代码的效率
jQuery是什么:
- 是一个javascript代码仓库，我们称之为javascript框架。
- 是一个快速的简洁的javascript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。
- 它可以帮我们做什么(有什么优势)
  - 轻量级、体积小，使用灵巧(只需引入一个js文件)
  - 强大的选择器
  - 出色的DOM操作的封装
  - 出色的浏览器兼容性
  - 可靠的事件处理机制
  - 完善的Ajax
  - 链式操作、隐式迭代
  - 方便的选择页面元素(模仿CSS选择器更精确、灵活)
  - 动态更改页面样式/页面内容(操作DOM，动态添加、移除样式)
  - 控制响应事件(动态添加响应事件)
  - 提供基本网页特效(提供已封装的网页特效方法)
  - 快速实现通信(ajax)
  - 易扩展、插件丰富

如何引入JQuery包
- 引入本地的JQuery
- 引入Google在线提供的库文件（稳定可靠高速）
- 使用Google提供的API导入 <script type=“text/javascript” src=“jquery.js”></script>
- 写第一个JQUery案例
  - 解释:在JQuery库中，$是JQuery的别名，$()等效于就jQuery()
1
2
3
4
5
6
<script type=“text/javascript” src=“”></script>
<script type=“text/javascript”>
$(function(){
alert(“jQuery 你好!”);
});
</script>

讲解$(function(){});
- $是jQuery别名。如$()也可jQuery()这样写,相当于页面初始化函数，当页面加载完毕，会执行jQuery()。
- 希望在做所有事情之前，JQuery操作DOM文档。必须确保在DOM载入完毕后开始执行，应该用ready事件做处理HTML文档的开始
- $(document).ready(function(){});
  - 类似于js的window.onload事件函数，但是ready事件要先于onload事件执行
  - window.onload = function(){};
- 为方便开发，jQuery简化这样的方法，直接用$()表示
- JQuery的ready事件不等于Js的load：
  - 执行时机不同：load需要等外部图片和视频等全部加载才执行。ready是DOM绘制完毕后执行，先与外部文件
  - 用法不同：load只可写一次，ready可以多次
window.onload与$(document).ready()对比

	window.onload	$(document).ready()
执行时机	必须等网页中所有内容加载完后(图片)才执行	网页中的`DOM`结构绘制完后就执行,可能`DOM`元素相关的东西并没有加载完
编写个数	不能同时执行多个	能同时执行多个
简化写法	无	`$(document).ready(function(){ //.. });` 推荐写法：`$(function(){ });`

jQuery有哪些功能(API)：
- 选择器
- 过滤器
- 事件
- 效果
- ajax
简单的JQuery选择器：
- JQuery基本选择器（ID选择器，标签选择器，类选择器，通配选择器和组选择器5种）
- ID选择器：document.getElementById(id)与$("#id")对比(改变文字大小)—id唯一，返回单个元素
- 标签选择器：document.getElementsByTagName(tagName)与$("tagname")对比—多个标签，返回数组
- 类选择器:$(".className")–多个classname（改变背景图片）
- 通配选择器：document.getElementsByTagName("*")与$("*")对比—指范围内的所有标签元素
- 组选择器：$("seletor1,seletor2,seletor3")—-无数量限制，用逗号分割

初步了解`JQuery`

JQuery是什么
- javascript用来干什么的：
  - 操作DOM对象
  - 动态操作样式css
  - 数据访问
  - 控制响应事件等
- jQuery作用一样，只是更加快速简洁

如何引用JQuery

<script type="text/javascript"></script>
写第一个JQUery案例
<script type=“text/javascript” src=“”></script>
<script type=“text/javascript”>
	$(function(){
		alert(“jQuery 你好!”);
	});
</script>

$()讲解
- $在JQuery库中，$是JQuery的别名，$()等效于就jQuery().
- $()是JQuery方法,赞可看作是JQuery的选择器，与css选择器相似（可做对比）
- var jQuery==$ =function(){} $()本质就是一个函数也就是 jQuery的核心函数
- 只要是jQuery的对象都这样变量加上一个符号$方便识别：var $div = $("#")

1
2
3

function　$(id){
		return document.getElementById(id);
	}

$()和document是相等的吗

<div id="a" class="aa"></div>
<div id="b" class="aa"></div>
<div id="c" class="aa"></div>
alert(document.getElementById("id") == $("#aa"));//返回结果为false
alert(document.getElementById("id") == $("#aa").get(0));//返回true

代理对象$()
- jQuery中返回的是代理对象本身
- jQuery的核心原理是通过选择器找到对应的代理对象
- jQuery全都是通过方法操作
- 样式选择器$(".className")
  - $(".aa").css("color","green");
- id选择器(“”)
  - $("#a").css("background-color","#ff0066");
- 标签选择器
  - $("p").css("color","#cc3366");
- 组选择器
  - $("#b ul li").size();
对象转换($(element))
- 原生dom对象和jquery代理对象的相互转换

$(传入的原生对象);
//原生对象转化成jQuery对象
var nav = document.getElementById("nav");
var $nav = $(nav);
alert($nav.get(0) == nav);//true

检索范围的限制（$('字符串',element)）
- 总结：三种写法对比：
  - 方式一：不推荐搜索速度最慢
    - $("#nav").css();
    - $("#nav li").css();
  - 方式二：搜索速度最快链式操作
    - $("#nav").css().children().css();
  - 方式三：也常用速度第二快
    - var $nav = $("#nav").css();
    - $("li",$nav).css(); $nav限制了搜索范围速度快
总结： $() jquery核心方法的作用和使用场景
- 如果是一个字符串参数并且没有标签对（选择器）$(ul.nav")
- 如果是一个字符串参数并且有标签对（创建html标签）$("<img>") –最终加到DOM树中$xx.append("<img>");
- 如果是传入一个element dom对象，直接包装为proxy对象返回 $(DOM对象)
- 如果第一个参数是字符串，第二个是element dom对象的话，那么就是在element这个dom对象里面寻找选择器对应的元素并且代理 $("li",$DOM对象)

代理模式以及代理内存结构

代理内存结构1

代理内存结构2

第二节选择器

来回顾一下CSS常用的选择器

选择器	语法	描述
标签选择器	`E{css规则}`	以文档元素作为选择符
`ID`选择器	`#ID{css规则}`	`ID`作为选择符
类选择器	`E.className{css规则}`	`class`作为选择符
群组选择器	`E1,E2,E3{css规则}`	多个选择符应用同样的样式
后代选择器	`E F{css规则}`	元素`E`的任意后代元素`F`

选择器引擎规则($('字符串'))
- css选择器的规则
  - 标签选择器
  - id选择器
  - 类选择器
  - 混合选择器
- css3的选择器规则
- 状态和伪类（:even :odd :first :last :eq(index)）
- 属性（[attr=value]）

层级选择器:通过DOM的嵌套关系匹配元素
- jQuery层级选择器—-包含选择器、子选择器、相邻选择器、兄弟选择器4种
- a.包含选择器：$("a b")在给定的祖先元素下匹配所有后代元素。(不受层级限制)
- b.子选择器：$("parent > child")在给定的父元素下匹配所有子元素。
- c.相邻选择器：$("prev + next") 匹配所有紧接在prev元素后的next元素。
- d.兄弟选择器：$("prev ~ siblings") 匹配prev元素之后的所有sibling元素。

过滤选择器

基本过滤选择

选择器	说明	返回
`:first`	匹配找到的第1个元素	单个元素
`:last`	匹配找到的最后一个元素	单个元素
`:eq`	匹配一个给定索引值的元素	单个元素
`:even`	匹配所有索引值为偶数的元素	集合元素
`: odd`	匹配所有索引值为奇数的元素	集合元素
`:gt(index)`	匹配所有大于给定索引值的元素	集合元素
`:lt(index)`	匹配所有小于给定索引值的元素	集合元素
`:not`	去除所有与给定选择器匹配的元素	集合元素
`:animated`	选取当前正在执行动画的所有元素	集合元素
`focus`	选取当前正在获取焦点的元素	集合元素

内容过滤选择器

选择器	描述	返回
`:contains(text)`	选取含有文本内容为text的元素	集合元素
`:empty`	选取不包含子元素获取文本的空元素	集合元素
`:has(selector)`	选择含有选择器所匹配的元素的元素	集合元素
`:parent`	选取含有子元素或者文本的元素	集合元素

可见过滤选择器

选择器	描述	返回
`:hidden`	选择所有不可见的元素	集合元素
`:visible`	选取所有可见的元素	集合元素

属性过滤选择器

选择器	说明	返回
`[attribute]`	选取拥有此属性的元素	集合元素
`[attribute=value]`	选取属性值为`value`值的元素	集合元素
`[attribue^=value]`	选取属性的值以`value`开始的元素	集合元素
`[attribue$=value]`	选取属性的值以`value`结束的元素	集合元素

子元素过滤选择器

选择器	说明	返回
`:nth-child(index/even/odd)`	选取每个父元素下的第index个子元素或者奇偶元素（`index`从`1`算起）	集合元素
`:first-child`	选取每个元素的第一个子元素	集合元素
`:last-child`	选取每个元素的最后一个子元素	集合元素

:nth-child()选择器是很常用的子元素过滤选择器，如下
- :nth-child(even)选择每个父元素下的索引值是偶数的元素
- :nth-child(odd)选择每个父元素下的索引值是奇数的元素
- :nth-child(2)选择每个父元素下的索引值是2的元素
- :nth-child(3n)选择每个父元素下的索引值是3的倍数的元素 (n从1开始)
表单对象属性过滤选择器

选择器	说明	返回
`:enabled`	选取所有可用元素	集合元素
`:disabled`	选取所有不可用元素	集合元素
`:checked`	选取所有被选中的元素（单选框、复选框）	集合元素
`:selected`	选取所有被选中的元素（下拉列表）	集合元素

表单选择器

选择器	说明
`:input`	选取所有`input` `textarea` `select` `button`元素
`:text`	选取所有单行文本框
`:password`	选取所有密码框
`:radio`	选取所有单选框
`:checkbox`	选取所有多选框
`:submit`	选取所有的提交按钮
`:image`	选取所有的图像按钮
`:reset`	选取所有的重置按钮
`:button`	选取所有的按钮
`:file`	选取所有的上传域
`:hidden`	选取所有的不可见元素

特定位置选择器
- :first
- :last
- :eq(index)
指定范围选择器
- :even
- :odd
- :gt(index)
- :lt(index)
排除选择器
- :not 非

第三节选择器优化

使用合适的选择器表达式可以提高性能、增强语义并简化逻辑。常用的选择器中，ID选择器速度最快，其次是类型选择器。
- a. 多用ID选择器
- b. 少直接使用class选择器
- c. 多用父子关系，少用嵌套关系
- d. 缓存jQuery对象
使用过滤器
- jQuery提供了2种选择文档元素的方式：选择器和过滤器
- a. 类过虑器：根据元素的类属性来进行过滤操作。
  - hasClass(className)：判断当前jQuery对象中的某个元素是否包含指定类名，包含返回true，不包含返回false
- b. 下标过滤器：精确选出指定下标元素
  - eq(index)：获取第N个元素。index是整数值，下标从0开始
- c. 表达式过滤器
  - filter(expr)/(fn)：筛选出与指定表达式/函数匹配的元素集合。
  - 功能最强大的表达式过滤器，可接收函数参数，也可以是简单的选择器表达式
- d. 映射 map(callback)：将一组元素转换成其他数组
- e. 清洗 not(expr)：删除与指定表达式匹配的元素
- f. 截取 slice(start,end)：选取一个匹配的子集
查找
- 向下查找后代元素
  - children():取得所有元素的所有子元素集合（子元素）
  - find():搜索所有与指定表达式匹配的元素(所有后代元素中查找)
- 查找兄弟元素 siblings()查找当前元素的兄弟

第四节代理对象属性和样式操作

代理对象属性和样式操作
- attr
- prop(一般属性值是boolean的值或者不用设置属性值，一般使用)
- css(最好不用，一般我用来做测试)
- addClass / removeClass
操作原生DOM的时候用的方式：一次只能操作一个
- 操作属性：setAttribute / getAttribute
- 操作样式：style.xx = value
- 操作类样式：className=''
- 获取DOM的子元素children属性
- DOM里面添加一个子元素appendChild()
操作jQuery代理对象的时候：批量操作DOM对象(全都是通过方法操作)
操作属性：attr()、prop()
- attr和prop区别：如果属性的值是布尔类型的值用prop操作反之attr
操作样式：css()
操作类样式：addClass() removeClass()
操作DOM子元素：children()
添加子元素：append()

第五节 jQuery中DOM操作

DOM是一种与浏览器、平台|语言无关的接口，使用该接口可以轻松的访问页面中的所有的标准组件
DOM操作的分类
- DOM Core
  - DOM core并不专属于JavaScript，任何支持DOM的程序都可以使用
  - JavaScript 中的getElementByID() getElementsByTagName() getAttribute() setAttribute()等方法都是DOM Core的组成部分
- HTML-DOM
  - HTML -DOM的出现比DOM-Core还要早，它提供一些更简明的标志来描述HTML元素的属性
  - 比如：使用HTML-DOM来获取某元素的src属性的方法
    - element.src
- CSS-DOM
  - 针对CSS的操作。在JavaScript中，主要用于获取和设置style对象的各种属性，通过改变style对象的属性，使网页呈现不同的效果
查找节点
- 查找属性节点 attr() 可以获取各属性的值
创建节点
- $(html)：根据传递的标记字符串，创建DOM对象
插入节点

方法	说明
`append()`	向每个匹配元素内部追加内容
`appendTo()`	颠倒`append()`的操作
`prepend()`	向每个匹配元素的内容内部前置内容
`prependTo()`	颠倒`prepend()`的操作
`after()`	向每个匹配元素之后插入内容
`insertAfter()`	颠倒`after()`的操作
`before()`	在每个匹配元素之前插入内容
`insertBefore()`	颠倒`before()`的操作

删除节点
- jQuery提供了三种删除节点的方法 remove() detach() empty()
- remove()方法
  - 当某个节点用此方法删除后，该节点所包含的所有后代节点将同时被删除，用remove()方法删除后，还是可以继续使用删除后的引用
- detach()
  - 和remove()方法一样，也是从DOM中去掉所有匹配的元素，与remove()不同的是，所有绑定的事件、附加的数据等，都会被保留下来
- empty()
  - empty()方法并不是删除节点，而是清空节点，它能清空元素中所有后代节点
复制节点
- 使用clone()方法来完成
- 在clone()方法中传递一个参数true，同时复制元素中所绑定的事件
替换节点
- jQuery提供相应的方法 replaceWidth()
样式操作
- 获取样式和设置样式 attr()
- 追加样式 addClass()
- 移除样式 removeClass()
- 切换样式
  - toggle()方法只要是控制行为上的重复切换（如果元素是显示的，则隐藏；如果元素原来是隐藏的，则显示）
  - toggleClass()方法控制样式上的重复切换（如何类名存在，则删除它，如果类名不存在，则添加它）
- 判断是否含有某个样式
  - hasClass()可以用来判断元素是否含有某个class,如有返回true 该方法等价于is()
设置和获取HTML、文本和值
- html()
  - 此方法类似JavaScript中innerHTML属性，可以用来读取和设置某个元素中的HTML内容
- text()方法
  - 此方法类型JavaScript中innerHTML，用来读取和设置某个元素中的文本内容
- val()方法
  - 此方法类似JavaScript中的value属性，用来设置获取元素的值。无论是文本框、下拉列表还是单选框，都可以返回元素的值，如果元素多选，返回一个包含所有选择的值的数组
遍历节点
- children()方法
  - 该方法用来取得匹配元素的子元素集合
  - childre()方法只考虑子元素而不考虑其他后代元素
- next()方法
  - 该方法用于取得匹配元素后面紧邻的同辈元素
- prev()方法
  - 用于匹配元素前面紧邻的同辈元素
- siblings()方法
  - 用于匹配元素前后所有的同辈元素
- parent()方法
  - 获得集合中每个元素的父级元素
- parents()方法
  - 获得集合中每个元素的祖先元素

CSS DOM操作

CSS DOM技术简单的来说就是读取和设置style对象的各种属性
用css()方法获取元素的样式属性，可以同时设置多个样式属性
CSS DOM中关于元素定位有几个常用的方法
- offset()方法
  - 它的作用是获取元素在当前视窗的相对偏移其中返回的对象包含两个属性，即top和left，他只对可见元素有效
- position()方法
  - 获取相对于最近的一个position()样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，他返回的对象也包括两个属性，即top和left
- scrollTop()方法和scrollLeft方法
  - 这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离
- 一张图总结以上的位置关系(项目中很常用-必须要弄清楚)

第六节 jQuery动画

回顾上节

操作DOM
- a.什么是DOM：Document Object Model缩写，文档对象模型
- b.理解页面的树形结构
- c.什么是节点：是DOM结构中最小单元，包括元素、属性、文本、文档等。

一、创建节点

1.创建元素
- 语法：document.createElement(name);

1 2	var div = document.createElement("div"); document.body.appendChild(div);

$(html)：根据传递的标记字符串，创建DOM对象
2.创建文本

var div = document.createElement("div");
var txt = document.createTextNode("DOM");
div.appendChild(txt);
document.body.appendChild(div);

var $div = = $("<div>DOM</div>");
$(body).append($div);
```		

- 3.设置属性
	- 语法：`e.setAttrbute(name,value)`

```javascript
var div = document.createElement("div");
var txt = document.createTextNode("DOM");
div.appendChild(txt);
document.body.appendChild(div);
div.setAttribute("title","盒子");

var $div = = $("<div title='盒子'>DOM</div>");
$(body).append($div);

二、插入内容

内部插入
- 向元素最后面插入节点：
  - append():向每个匹配的元素内部追加内容
  - appendTo():把所有匹配的元素追加到指定元素集合中，$("A").append("B")等效$("B").appendTo("A")
- 向元素最前面插入节点：
  - prepend（）：把每个匹配的元素内部前置内容
  - prependTo（）：把所有匹配的元素前置到另一个指定的元素集合中,$("A").prepend("B") 等效$("B").prependTo("A")
外部插入
- after():在每个匹配的元素之后插入内容
- before()：在每个匹配想元素之前插入内容
- insertAfter()：将所有匹配的元素插入到另一个指定的元素集合后面，$A.insert($B) 等效$B.insertAfter($A);
- insertBefore()：将所有匹配的元素插入到另一个指定的元素集合前面 $A.before($B) 等效$B.insertBefore($A);

三、删除内容

移除
- remove():从DOM中删除所有匹配元素
清空
- empty():删除匹配的元素集合中所有子节点内容

四、克隆内容：创建指定节点副本

clone()
- 注意：若clone（true）则是包括克隆元素的属性，事件等

五、替换内容

replaceWith():将所有匹配的元素替换成指定的元素
replaceAll():用匹配的元素替换掉指定元素

注意：两者效果一致，只是语法不同 $A.replaceAll($B)等效于 $B.replaceWhith($A);

本节新知识

JavaScript语言本身不支持动画设计，必须通过改变CSS来实现动画效果

显隐动画

show():显示 hide():隐藏
- 原理：hide()通过改变元素的高度宽度和不透明度，直到这三个属性值到0
- show()从上到下增加元素的高度，从左到右增加元素宽度，从0到1增加透明度，直至内容完全可见
- 参数：
  - show(speed,callback)
    - speed: 字符串或数字，表示动画将运行多久（slow=0.6/normal=0.4/fast=0.2）
    - callback: 动画完成时执行的方法
显示和隐藏式一对密不可分的动画形式
显隐切换
- toggle():切换元素的可见状态
  - 原理：匹配元素的宽度、高度以及不透明度，同时进行动画，隐藏动画后将display设置为none
  - 参数：
    - toggle(speed)
    - toggle(speed,callback)
    - toggle(boolean)
      - speed: 字符串或数字，表示动画将运行多久（slow=0.6/normal=0.4/fast=0.2）
      - easing：使用哪个缓冲函数来过渡的字符串(linear/swing)
      - callback：动画完成时执行的方法
      - boolean:true为显示 false为隐藏

滑动

显隐滑动效果
- slideDown():滑动隐藏
- slidUp():滑动显示
- 参数:
  - slideDown(speed,callback)
  - slidUp(speed,callback)
显隐切换滑动
- slideToggle():显隐滑动切换
- 参数:
  - slidUp(speed,callback)

渐变：通过改变不透明度

淡入淡出
- fadeIn()
- fadeOut()
- 参数：
  - fadeIn(speed,callback)
  - fadeOut(speed,callback)
设置淡出透明效果
- fadeTo()⁭：以渐进的方式调整到指定透明度
- 参数：
  - fadeTo(speed,opacity,callback)
渐变切换:结合fadeIn和fadeOut
- fadeToggle()
- 参数:
  - fadeOut(speed,callback)

自定义动画：animate()
- 注意：在使用animate方法之前，为了影响该元素的top left bottom right样式属性，必须先把元素的position样式设置为relative或者absolute
- 停止元素的动画
  - 很多时候需要停止匹配正在进行的动画，需要使用stop()
  - stop()语法结构：stop([clearQueue],[gotoEnd]);
    - 都是可选参数，为布尔值
    - 如果直接使用stop()方法，会立即停止当前正在进行的动画
- 判断元素是否处于动画状态
  - 如果不处于动画状态，则为元素添加新的动画，否则不添加
    if(!$(element).is(":animated")){ //判断元素是否处于动画状态}
  - 这个方法在animate动画中经常被用到，需要注意
- 延迟动画
  - 在动画执行过程中，如果你想对动画进行延迟操作，那么使用delay()
用animate模拟show():
- show: 表示由透明到不透明
- toggle: 切换
- hide:表示由显示到隐藏
动画方法总结

方法名	说明
`hide()`和`show()`	同时修改多个样式属性即高度和宽度和不透明度
`fadeIn()`和`fadeOut()`	只改变不透明度
`slideUp()`和`slideDown()`	只改变高度
`fadeTo()`	只改变不透明度
`toggle()`	用来代替`show()`和`hide()`方法，所以会同时修改多个属性即高度、宽度和不透明度
`slideToggle()`	用来代替`slideUp`和`slideDown()`方法，所以只能改变高度
`fadeToggle()`	用来代替`fadeIn()`和`fadeOut`方法，只能改变不透明度
`animate()`	属于自定义动画，以上各种动画方法都是调用了`animate`方法。此外，用`animate`方法还能自定义其他的样式属性，例如：`left`marginLeft ``scrollTop等

第七节 jQuery中的事件

事件对象的属性
- event.type：获取事件的类型
- event.target:获取到触发事件的元素
- event.preventDefault方法阻止默认事件行为
- event.stopPropagation()阻止事件的冒泡
- keyCode：只针对于keypress事件，获取键盘键数字按下回车，13
- event.pageX / event.pageY 获取到光标相对于页面的x坐标和y坐标
  - 如果没有jQuery，在IE浏览器中用event.x / event.y;在Firefox浏览器中用event.pageX /event.pageY。如果页面上有滚动条还要加上滚动条的宽度和高度
- event.clientX：光标对于浏览器窗口的水平坐标浏览器
- event.clientY：光标对于浏览器窗口的垂直坐标
- event.screenX：光标对于电脑屏幕的水平坐标电脑屏幕
- event.screenY：光标对于电脑屏幕的水平坐标
- event.which 该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键，在键盘事件中的按键 1代表左键 2代表中键 3代表右键
事件冒泡
- 什么是冒泡
  - 在页面上可以有多个事件，也可以多个元素影响同一个元素
  - 从里到外
  - 嵌套关系
  - 相同事件
  - 其中的某一父类没有相同事件时,继续向上查找
- 停止事件冒泡
  - 停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行
  - 在jQuery中提供了stopPropagation()方法
- 阻止默认行为
  - 网页中元素有自己的默认行为，例如：单击超链接后会跳转、单击提交后表单会提交，有时需要阻止元素的默认行为
  - 在jQuery中提供了preventDefault()方法来阻止元素的默认行为
- 事件捕获
  - 事件捕获和冒泡是相反的过程，事件捕获是从最顶端往下开始触发
  - 并非所有的浏览器都支持事件捕获，并且这个缺陷无法通过JavaScript来修复。jQuery不支持事件捕获，如需要用事件捕获，要用原生的JavaScript
bind();绑定
- 为匹配元素绑定处理方法
- 需要给一个元素添加多个事件，事件执行一样时候
- one()：只执行一次

绑定特定事件类型方法：

分类	方法名称	说明
页面载入	`ready(fn)`	当`DOM`载入就绪可以绑定一个要执行的函数
事件绑定	`blind(type,[data],fn)`	为每个匹配元素的特定事件绑定一个事件处理函数
事件绑定	`unblind()`	解除绑定
事件绑定	`on(events,[,selector[,]data],handler)`	在选择元素上绑定一个或者多个事件处理函数
事件绑定	`off()`	移除`on`绑定的事件
事件绑定	`delegate(selector,eventType,handler)`	为所有选择匹配元素附加一个或多个事件处理函数
事件绑定	`undelegate()`	移除绑定
事件动态	`live(type,fn)`	对动态生成的元素进行事件绑定
事件动态	`die(type,fn)`	移除`live()`绑定的事件
交互事件	`hover()`	鼠标移入移出
交互事件	`toggle(fn1,fn2,[fn3],[fn4])`	每单击后依次调用函数
交互事件	`blur(fn)`	触发每一个匹配元素的`blur`事件
交互事件	`change()`	触发每一个匹配元素的`change`事件
交互事件	`click()`	触发每一个匹配元素的`click`事件
交互事件	`focus()`	触发每一个匹配元素的`focus`事件
交互事件	`submit()`	触发每一个匹配元素的`submit`事件
键盘事件	`keydown()`	触发每一个匹配元素的`keydown`事件
键盘事件	`keypress()`	触发每一个匹配元素的`keypress`事件
键盘事件	`keyup()`	触发每一个匹配元素的keyup事件
鼠标事件	`mousedown(fn)`	绑定一个处理函数
鼠标事件	`mouseenter(fn)`	绑定一个处理函数
键盘事件	`mouseleave(fn)`	绑定一个处理函数
键盘事件	`mouseout(fn)`	绑定一个处理函数
键盘事件	`mouseover(fn)`	绑定一个处理函数
窗口操作	`resize(fn)`	绑定一个处理函数
窗口操作	`scroll(fn)`	绑定一个处理函数

第八节 jQuery与Ajax

Ajax简介 :
- Asynchronous Javascript And XML （异步的
  JavaScript和XML）
- 它并不是一种单一的技术，而是有机利用一系列交互式网页应用相关的技术所形成的结合体
Ajax优势与不足
- Ajax优势
  - 优秀的用户体验
    - 这是Ajax下最大的有点，能在不刷新整个页面前提下更新数据
  - 提高web程序的性能
    - 与传统模式相比，Ajax模式在性能上最大的区别在于传输数据的方式，在传统模式中，数据的提交时通过表单来实现的。Ajax模式只是通过XMLHttpRequest对象向服务器提交希望提交的数据，即按需发送
  - 减轻服务器和带宽的负担
    - Ajax的工作原理相当于在用户和服务器之间加了一个中间层，似用户操作与服务器响应异步化。它在客户端创建Ajax引擎，把传统方式下的一些服务器负担的工作转移到客户端，便于客户端资源来处理，减轻服务器和带宽的负担
- Ajax的不足
  - 浏览器对XMLHttpRequest对象的支持度不足
  - 破坏浏览器前进、后退按钮的正常功能
  - 对搜索引擎的支持的不足
  - 开发和调试工具的缺乏

创建一个Ajax请求

Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键，发送异步请求、接受响应以及执行回调都是通过它来完成
创建ajax对象 var xhr = new XMLHttpRequest();
准备发送请求
- get / post
  - get
    - 传递的数据放在URL后面
    - 中文编码 encodeURI( '' );
    - 缓存在数据后面加上随机数或者日期对象或者……
  - post
    - 传递的数据放在send()里面，并且一定要规定数据格式
    - 没有缓存问题
  - form表单中:
    - action:
      - method: (默认是get)
      - get: 会在url里面以 name=value , 两个数据之间用 & 连接
    - post:
  - enctype: "application/x-www-form-urlencoded"
- url
- 是否异步
  - 同步(false)：阻塞
  - 异步(true)：非阻塞
正式发送请求
ajax请求处理过程

xhr.onreadystatechange = function(){
	if (xhr.readyState == 4)
	{
		alert( xhr.responseText );
	}
};

onreadystatechange ：当处理过程发生变化的时候执行下面的函数
readyState ：ajax处理过程
- 0：请求未初始化（还没有调用 open()）。
- 1：请求已经建立，但是还没有发送（还没有调用 send()）。
- 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
- 3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
- 4：响应已完成；您可以获取并使用服务器的响应了。
responseText ：请求服务器返回的数据存在该属性里面
status : http状态码

HTTP状态码

案例：ajax封装案例

//ajax请求后台数据
var btn =  document.getElementsByTagName("input")[0];
btn.onclick = function(){
	
	ajax({//json格式
		type:"post",
		url:"post.php",
		data:"username=poetries&pwd=123456",
		asyn:true,
		success:function(data){
			document.write(data);
		}
	});
}
//封装ajax
function ajax(aJson){
	var ajx = null;
	var type = aJson.type || "get";
	var asyn = aJson.asyn || true;
	var url = aJson.url;		// url 接收 传输位置
	var success = aJson.success;// success 接收 传输完成后的回调函数
	var data = aJson.data || '';// data 接收需要附带传输的数据
	
	if(window.XMLHttpRequest){//兼容处理
		ajx = new XMLHttpRequest();//一般浏览器
	}else
	{
		ajx = new ActiveXObject("Microsoft.XMLHTTP");//IE6+
	}
	if (type == "get" && data)
	{
		url +="/?"+data+"&"+Math.random();
	}
	
	//初始化ajax请求
	ajx.open( type , url , asyn );
	//规定传输数据的格式
	ajx.setRequestHeader('content-type','application/x-www-form-urlencoded');
	//发送ajax请求（包括post数据的传输）
	type == "get" ?ajx.send():ajx.send(aJson.data);
	
	//处理请求
	ajx.onreadystatechange = function(aJson){
		
	if(ajx.readState == 4){
			
		if (ajx.status == 200 && ajx.status<300)//200是HTTP 请求成功的状态码
		{
			//请求成功处理数据
			success && success(ajx.responseText);
		}else{
			alert("请求出错"+ajx.status);
			
		}
	}
		
	};

jQuery中的Ajax [补充部分–来自锋利的jQuery]

jquery对Ajax操作进行了封装，在jquery中的$.ajax()方法属于最底层的方法，第2层是load()、$.get()、$.post();第3层是$.getScript()、$.getJSON()，第2层使用频率很高

`load()`方法

load()方法是jquery中最简单和常用的ajax方法，能载入远程HTML代码并插入DOM中结构为：load(url,[data],[callback])
- 使用url参数指定选择符可以加载页面内的某些元素 load方法中url语法：url selector 注意：url和选择器之间有一个空格
传递方式
- load()方法的传递方式根据参数data来自动指定，如果没有参数传递，则采用GET方式传递，反之，采用POST
回调参数
- 必须在加载完成后才执行的操作，该函数有三个参数分别代表请求返回的内容、请求状态、XMLHttpRequest对象
- 只要请求完成，回调函数就会被触发

$("#testTest").load("test.html",function(responseText,textStatus,XMLHttpRequest){
    //respnoseText 请求返回的内容
    //textStatus 请求状态 ：sucess、error、notmodified、timeout
    //XMLHttpRequest 
})

load方法参数

参数名称	类型	说明
`url`	`String`	请求`HTML`页面的`URL`地址
`data(可选)`	`Object`	发送至服务器的`key` / `value`数据
`callback(可选)`	`Function`	请求完成时的回调函数，无论是请求成功还是失败

$.get()和$.post()方法

load()方法通常用来从web服务器上获取静态的数据文件。在项目中需要传递一些参数给服务器中的页面，那么可以使用$.get()和$.post()或$.ajax()方法

注意：$.get()和$.post()方法是jquery中的全局函数
$.get()方法
- $.get()方法使用GET方式来进行异步请求
- 结构为：$.get(url,[data],callback,type)
  - 如果服务器返回的内容格式是xml文档，需要在服务器端设置Content-Type类型代码如下：header("Content-Type:text/xml:charset=utf-8") //php
$.get()方法参数解析

参数	类型	说明
`url`	`String`	请求`HTML`页的地址
`data(可选)`	`Object`	发送至服务器的`key`/ `value` 数据会作为`QueryString`附加到请求URL中
`callback(可选)`	`Function`	载入成功的回调函数（只有当`Response`的返回状态是success才调用该方法）
`type(可选)`	`String`	服务器返回内容的格式，包括`xml`、`html`、`script`、`json`、`text`和`_default`

$.post()方法
- 它与$.get()方法的结构和使用方式相同，有如下区别
  - GET请求会将参数跟张乃URL后进行传递，而POST请求则是作为Http消息的实体内容发送给web服务器，在ajax请求中，这种区别对用户不可见
    - GET方式对传输数据有大小限制（通常不能大于2KB），而使用POST方式传递的数据量要比GET方式大得多（理论不受限制）
    - GET方式请求的数据会被浏览器缓存起来，因此其他人可以从浏览器的历史纪录中读取这些数据，如：账号、密码。在某种情况下，GET方式会带来严重的安全问题，而POST相对来说可以避免这些问题
    - GET和POST方式传递的数据在服务端的获取也不相同。在PHP中，GET方式用$_GET[]获取；POST方式用$_POST[]获取;两种方式都可用$_REQUEST[]来获取
总结
- 使用load()、$.get()和$.post()方法完成了一些常规的Ajax程序，如果还需要复杂的Ajax程序，就需要用到$.ajax()方式

$.ajax()方法

$.ajax()方法是jquery最底层的Ajax实现，它的结构为$.ajax(options)
该方法只有一个参数，但在这个对象里包含了$.ajax()方式所需要的请求设置以及回调函等信息，参数以key /value存在，所有参数都是可选的
$.ajax()方式常用参数解析

参数	类型	说明
`url`	`String`	(默认为当前页地址)发送请求的地址
`type`	`String`	请求方式（`POST`或`GET`）默认为`GET`
`timeout`	`Number`	设置请求超时时间（毫秒）
`dataType`	`String`	预期服务器返回的类型。可用的类型如下 xml:返回`XML`文档，可用`jquery`处理 html:返回纯文本的`HTML`信息，包含的`script`标签也会在插入`DOM`时执行 script：返回纯文本的`javascript`代码。不会自动缓存结果，除非设置`cache`参数。注意：在远程请求时，所有的`POST`请求都将转为`GET`请求 json:返回`JSON`数据 jsonp:`JSONP`格式，使用`jsonp`形式调用函数时，例如：`myurl?call back=?,jquery`将自动替换后一个`？`为正确的函数名，以执行回调函数 text:返回纯文本字符串
`beforeSend`	`Function`	发送请求前可以修改`XMLHttpRequest`对象的函数，例如添加自定义`HTTP`头。在`beforeSend`中如果返回`false`可以取消本次`Ajax`请求。`XMLHttpRequest`对象是唯一的参数 function(XMLHttpRequest){ `this`;//调用本次`Ajax`请求时传递的`options`参数 }
`complete`	`Function`	请求完成后的回调函数（请求成功或失败时都调用）参数：`XMLHttpRequest`对象和一个描述成功请求类型的字符串 function(XMLHttpRequest,textStatus){ `this`;//调用本次Ajax请求时传递的`options`参数 }
`success`	`Function`	请求成功后调用的回调函数，有两个参数 (1)由服务器返回，并根据`dataTyppe`参数进行处理后的数据 (2)描述状态的字符串 `function`(data,textStatus){ //`data`可能是xmlDoc、``jsonObj、`html`、`text`等 `this`;//调用本次`Ajax`请求时传递的`options`参数 }
`error`	`Function`	请求失败时被调用的函数
`global`	`Boolean`	默认为`true`。表示是否触发全局`Ajax`事件，设置为`false`将不会触发。`AjaxStart`或`AjaxStop`可用于控制各种`Ajax`事件

第九节插件

什么是插件
- 插件(Plugin)也称为jQuery的扩展。以jQuery核心代码为基础编写的符合一定规范的应用程序。通过js文件的方式引用。
插件分为哪几类
- UI类、表单及验证类、输入类、特效类、Ajax类、滑动类、图形图像类、导航类、综合工具类、动画类等等

引入插件的步骤
- 引入jquery.js文件，而且在所以插件之前引入
- 引入插件
- 引入插件相关文件，比如皮肤、中文包

如何自定义插件：
- 插件形式分为3类：
  - 封装对象方法插件
  - 封装全局函数插件
  - 选择器插件(类似于.find())
自定义插件的规范（解决各种插件的冲突和错误，增加成功率）
- 命名：jquery.插件名.js
- 所有的新方法附加在jquery.fn对象上面，所有新功能附加在jquery上
- 所有的方法或插件必须用分号结尾，避免出问题
- 插件必须返回jQuery对象，便于链式连缀
- 避免插件内部使用$，如果要使用，请传递jQuery($并不是总等于jQuery，另外其他js框架也可能使用$)
- 插件中的this应该指向jQuery对象
- 使用this.each()迭代元素
自定义插件案例
- 为了方便用户创建插件，jQuery提供了 jQuery.extend() 和 jQuery.fn.extend()
- jQuery.extend()：创建工具函数或者是选择器
- jQuery.fn.extend()：创建jQuery对象命令（fn相当于prototype的别名）
jQuery官方提供的插件开发模板

;(function($){
	$.fn.plugin=function(options){
		var defaults = {
			//各种参数 各种属性
		}
		var options = $.extend(defaults,options);

		this.each(function(){
			//实现功能的代码
		});

		return this;
	}
})(jQuery);

自定义jQuery函数：

(function($){
	$.extend({
		test: function(){
			alert("hello plugin");
		}
	})
	})(jQuery);

自定义jQuery命令：

形式1：

(function($){
    $.fn.extend({
        say : function(){
         alert("hello plugin");
    }
    })
})(jQuery);

形式2：

(function($){
	$.fn.say = function(){
		alert("hello plugin");
	};
	
})(jQuery);

附录一 jQuery各个版本新增的一些常用的方法

jQuery1.3新增常用的方法

方法	说明
`.closest()`	从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素
`die()`	从元素中删除先前用`live()`方法绑定的所有的事件
`live()`	附加一个事件处理器到符合目前选择器的所有元素匹配

jQuery1.4新增常用的方法

方法	说明
`.first()`	获取集合中第一个元素
`last()`	获取集合中最后一个元素
`has(selector)`	保留包含特定后代的元素，去掉那些不含有指定后代的元素
`detach()`	从`DOM`中去掉所有匹配的元素。`detach()`和`remov()`一样，除了`detach()`保存了所有`jquery`数据和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入`DOM`时，这种方法很有用
`delegate()`	为所有选择器匹配的元素附加一个处理一个或多个事件
`undelegate()`	为所有选择器匹配的元素删除一个处理一个或多个事件

jQuery1.6新增常用的方法

方法	说明
`prop(proptyName)`	获取在匹配元素集合中的第一个元素的属性值
`removeProp(proptyName,value)`	为匹配的元素删除设置的属性
`:focus`	选择当前获取焦点的元素

附录二 jQuery性能优化

性能优化
- 使用最新版的jQuery类库
- 使用合适的选择器
  - $(#id)
    - 使用id来定位DOM元素是最佳的方式，为了提高性能，建议从最近的ID元素开始往下搜索
  - $("p") , $("div") , $("input")
    - 标签选择器性能也不错，它是性能优化的第二选择。因为jQuery将直接调用本地方法document.getElementsByTagName()来定位DOM元素
  - $(".class")
    - 建议有选择性的使用
  - $("[attribute=value]")
    - 对这个利用属性定位DOM元素，本地JavaScript并没有直接实现。这种方式性能并不是很理想。建议避免使用。
  - $(":hidden")
    - 和上面利用属性定位DOM方式类似，建议尽量不要使用
  - 注意的地方
    - 尽量使用ID选择器
    - 尽量给选择器指定上下文
- 缓存对象
  - 如果你需要在其他函数中使用jQuery对象，你可以把他们缓存在全局环境中
- 数组方式使用jQuery对象
  - 使用jQuery选择器获取的结果是一个jQuery对象。在性能方面，建议使用for或while循环来处理，而不是$.each()
- 事件代理
  - 每一个JavaScript事件（如：click、mouseover）都会冒泡到父级节点。当我们需要给多个元素调用同个函数时这点很有用。比如，我们要为一个表单绑定这样的行为：点击td后，把背景颜色设置为红色
    - $("#myTable td").click(function(){$(this).css("background","red");});
    - 假设有100个td元素，在使用以上的方式时，绑定了100个事件，将带来性能影响
    - 代替这种多元素的事件监听方法是，你只需向他们的父节点绑定一次事件，然后通过event.target获取到点击的当前元素
      - $("#myTable td").click(function({$(e.target).css("background","red")});
      - e.target捕捉到触发的目标
    - 在jQuery1.7中提供了一个新的方法on()，来帮助你将整个事件监听封装到一个便利的方法中
      - $("#myTable td").on("click",'td',function(){$(this).css("background","red");});
- 将你的代码转化成jQuery插件
  - 它能够使你的代码有更好的重用性，并且能够有效的帮助你组织代码
- 使用join()方法来拼接字符串
  - 也许你之前使用+来拼接字符串，现在可以改了。它确实有助于性能优化，尤其是长字符串处理的时候
- 合理使用HTML5和Data属性
  - HTML5的data属性可以帮助我们插入数据，特别是后端的数据交换。jQuery的Data()方法有效利用HTML5的属性
    - 例如：<div id="dl" data-role="page" data-list-value="43" data-options='{"name:""John"}'>
    - 为了读取数据，你需要使用如下代码
      - $("#dl').data("role';//page)
      - $("#dl').data("lastValue';//43)
      - $("#dl').data("options';//john)
- 尽量使用原生的JavaScript方法
- 压缩JavaScript代码
  - 一方面使用Gzip；另一方面去除JavaScript文件里面的注释、空白

附录三常用的jQuery代码片段

禁用页面的右键菜单

$(document).ready(functuion(){
    $(document).bind("contextmenu",function(e){
        return false;
  });  
});

新窗口打开页面

$(document).ready(function(){
    //例子1：href="http://"的链接将会在新窗口打开链接
    $('a[href=^="http://"]').attr("target","_blank");
    
  //例子2：rel="external"的超链接将会在新窗口打开链接
    $("a[rel$='external']").click(function(){
      this.target = "_blank";
    });
});
//use
<a href="http://baidu.com" rel="external">open</a>

判断浏览器类型


$(document).reday(function(){
    //Firefox2 and above
    if( $.browser.mozilla && $.browser.version>="1.8"){
      //do something
  }

  // Safari
  if($.browser.safari){
     //do something
  }

  // Chrome
  if($.browser.chrome){
     //do something
  }

  // Opera
  if($.browser.opera){
     //do something
  }

})

  // IE6 and blow
  if($.browser.msie && $.browser.version<=6){
     //do something
  }

  // anything above IE6
  if($.browser.msie && $.browser.version > 6){
     //do something
  }

输入框文字获取和失去焦点


$(document).ready(function(){
    $("input.text1").val("Enter you search text here");
    textFill($('input.text1'));
});

function textFill(input){//input focus text function
    var originvalue = input.val();
    input.focus(funtion(){
        if($.trim(input.val())== originvalue){
            input.val(' ');
        }
  }).blur(function(){
      if($.trim(input.val()) == ' '){
          input.val(originalvalue);
      }
  })
}

获取鼠标位置


$(document).ready(function(){
  $(document).mousemove(function(e){
      $("#XY").html("X:" + e.pageX+ "| Y" + e.pageY);
  });
});

判断元素是否存在

$(document).ready(function(){
    if($("#id").length){
      // do some thing  
  }
})

点击div也可以跳转

$("div").click(function(){
    window.location  = $(this).find("a").attr("href");
})

//use

<div><a href="index.html">home</a></div>

设置div在屏幕中央

$(document).ready(function(){
    jQuery.fn.center = function(){
        this.css("position","absolute");
        this.css("top",($(window).height() - this.lenght()) / 2 +$(window).scrollTop() + "px"); 
        this.css("left",($(window).height() - this.lenght()) / 2 +$(window).scrollLeft() + "px"); 
      return this;
  }
//use 

 $("#XY").center();
});

关闭所有动画效果

1
2
3

$(document).ready(function(){
    jQuery.fx.off = true;
});

检测鼠标的右键和左键

$(document).ready(function(){
    $("#xy").mousedown(function(e){
        alert(e.which);//1 = 鼠标左键  2= 鼠标中间 3 = 鼠标右键
  });
});

回车提交表单

$(document).ready(function(){
    $("input").keyup(function(e){
        if(e.which == "13"){
            alert("回车提交");
      }
  })
});

设置全局的Ajax参数

$("#load").ajaxStart(function(){
    showLoading();//显示loading
    disableButtons() //禁用按钮
})
 $("#load").ajaxComplete(function(){
    hideLoading();//隐藏loading
    enableButtons();//启用按钮
})

获取选中的下拉框

1 2	$("#someElement").find('option:selected'); $("#someElement option:selected");

切换复选框

var tog = false;
$("button").click(function(){
    $("input[type=checkbox]').attr("checked",!tog);
    tog = !tog;
});

个性化链接

$(document).ready(function(){
     $("a[href$='pdf']").addClass("pdf");
     $("a[href$='zip']").addClass("zip");
     $("a[href$='psd']").addClass("psd");
});

在一段时间后自动隐藏或关闭元素

setTimeOut(function(){
        $("div").fadeIn(400);
  },3000);

//而在1.4之后的版本可以用delay()来实现
$("div").slideUp(300).delay(3000).fadeIn(400);

使用事件代理绑定元素

 //为table里面的td元素绑定click事件，不管td是一直存在还是动态创建的
 //jQuery 1.4.2之前使用这种方式
 $("table").each(function(){
    $("td",this).live("click",function(){
       $(this).toggleClass("hover"); 
    });
});

//jquery 1.4.2使用的方式

$("table").delegate("td","click",function(){
    $(this).toggleClass("hover");
});

//jQuery1.7.1使用的方式
$("table").on("click","td",function(){
    $(this).toggleClass("hover");
 })

预加载图片

(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
jQuery.preLoadImages("image1.gif", "/path/to/image2.png");

让页面中的每个元素都适合在移动设备上展示

var scr = document.createElement('script');
scr.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js');
document.body.appendChild(scr);
scr.onload = function(){
	$('div').attr('class', '').attr('id', '').css({
		'margin' : 0,
		'padding' : 0,
		'width': '100%',
		'clear':'both'
	});
};

图像等比例缩放

$(window).bind("load", function() {
	// IMAGE RESIZE
	$('#product_cat_list img').each(function() {
		var maxWidth = 120;
		var maxHeight = 120;
		var ratio = 0;
		var width = $(this).width();
		var height = $(this).height();
		if(width > maxWidth){
			ratio = maxWidth / width;
			$(this).css("width", maxWidth);
			$(this).css("height", height * ratio);
			height = height * ratio;
		}
		var width = $(this).width();
		var height = $(this).height();
		if(height > maxHeight){
			ratio = maxHeight / height;
			$(this).css("height", maxHeight);
			$(this).css("width", width * ratio);
			width = width * ratio;
		}
	});
	//$("#contentpage img").show();
	// IMAGE RESIZE
});

返回页面顶部

// Back To Top
$(document).ready(function(){ 
  $('.top').click(function() {  
     $(document).scrollTo(0,500);  
  });
}); 
//Create a link defined with the class .top
<a href="#" class="top">Back To Top</a>

使用jQuery打造手风琴式的折叠效果

var accordion = {
     init: function(){
           var $container = $('#accordion');
           $container.find('li:not(:first) .details').hide();
           $container.find('li:first').addClass('active');
           $container.on('click','li a',function(e){
                  e.preventDefault();
                  var $this = $(this).parents('li');
                  if($this.hasClass('active')){
                         if($('.details').is(':visible')) {
                                $this.find('.details').slideUp();
                         } else {
                                $this.find('.details').slideDown();
                         }
                  } else {
                         $container.find('li.active .details').slideUp();
                         $container.find('li').removeClass('active');
                         $this.addClass('active');
                         $this.find('.details').slideDown();
                  }
           });
     }
};

使用jQuery和Ajax自动填充选择框

$(function(){
$("select#ctlJob").change(function(){
$.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '
' + j[i].optionDisplay + '
';
}
$("select#ctlPerson").html(options);
})
})
})

自动替换丢失的图片

// Safe Snippet
$("img").error(function () {
	$(this).unbind("error").attr("src", "missing_image.gif");
});
// Persistent Snipper
$("img").error(function () {
	$(this).attr("src", "missing_image.gif");
});

预防对表单进行多次提交

$(document).ready(function() {
  $('form').submit(function() {
    if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
      jQuery.data(this, "disabledOnSubmit", { submited: true });
      $('input[type=submit], input[type=button]', this).each(function() {
        $(this).attr("disabled", "disabled");
      });
      return true;
    }
    else
    {
      return false;
    }
  });
});

动态添加表单元素

//change event on password1 field to prompt new input
$('#password1').change(function() {
        //dynamically create new input and insert after password1
        $("#password1").append("");
});

在窗口滚动时自动加载内容

var loading = false;
$(window).scroll(function(){
	if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
		if(loading == false){
			loading = true;
			$('#loadingbar').css("display","block");
			$.get("load.php?start="+$('#loaded_max').val(), function(loaded){
				$('body').append(loaded);
				$('#loaded_max').val(parseInt($('#loaded_max').val())+50);
				$('#loadingbar').css("display","none");
				loading = false;
			});
		}
	}
});
$(document).ready(function() {
	$('#loaded_max').val(50);
});

导航菜单背景切换效果

<ul id='nav'> 
    <li>导航一</li> 
    <li>导航二</li> 
    <li>导航三</li>
</ul>

//注意：代码需要修饰完善

$('#nav').click(function(e) {
 // 要知道siblings的使用          

$(e.target).addClass('tclass').siblings('.tclass').removeClass('tclass');;

 });

解决jQuery, prototype共存，$全局变量冲突问题

<script src="prototype.js"></script>
<script src="http://blogbeta.blueidea.com/jquery.js"></script>
<script type="text/javascript"> jQuery.noConflict();</script> 

注意：一定要先引入prototype.js 再引入jquery.js，先后顺序不可错

jQuery 判断元素上是否绑定了事件

//jQuery event封装支持判断元素上是否绑定了事件，此方法只适用于jQuery绑定的事件
var $events = $("#foo").data("events");
if( $events && $events["click"] ){　　
    //your code
}

如何正确地使用toggleClass

//切换（toggle）类允许你根据某个类的//是否存在来添加或是删除该类。
//这种情况下有些开发者使用：
a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');
//toggleClass允许你使用下面的语句来很容易地做到这一点
a.toggleClass('blueButton');

如何设置IE特有的功能

1
2
3

if ($.browser.msie) {
    // Internet Explorer就是个虐待狂
}

如何验证某个元素是否为空

// 方法一
if (! $('#keks').html()) {
    //什么都没有找到;
}
// 方法二
if ($('#keks').is(":empty")) {
    //什么都没有找到;
}

访问IFrame里的元素

1
2
3

var iFrameDOM = $("iframe#someID").contents();
//然后，就可以通过find方法来遍历获取iFrame中的元素了
iFrameDOM.find(".message").slideUp();

管理搜索框的值
- 现在各大网站都有搜索框，而搜索框通常都有默认值，当输入框获取焦点时，默认值消失。而一旦输入框失去焦点，而输入框里又没有输入新的值，输入框里的值又会恢复成默认值，如果往输入框里输入了新值，则输入框的值为新输入的值。这种特效用JQuery
  很容易实现

$("#searchbox") .focus(function(){
      $(this).val('')
}) .blur(function(){
     var $this = $(this); 
    // '请搜索...'为搜索框默认值 
    ($this.val() === '')? $this.val('请搜索...') : null; 
});

部分页面加载更新
- 为了提高web性能，有更新时我们通常不会加载整个页面，而只是仅仅更新部分页面内容，如图片的延迟加载等。页面部分刷新的特效在JQuery中也很容易实现

setInterval(function() { 
//每隔5秒钟刷新页面内容 //获取的内容将增加到 id为content的元素后 

$("#content").load(url); }, 5000);

采配置JQuery与其它库的兼容性
- 如果在项目中使用JQuery，$ 是最常用的变量名，但JQuery并不是唯一一个使用$作为变量名的库，为了避免命名冲突，你可以按照下面方式来组织你的代码

//方法一： 为JQuery重新命名为
 $jvar $j = jQuery.noConflict();$j('#id').... //

方法二： 推荐使用的方式

(function($){ $(document).ready(function(){
     //这儿，你可以正常的使用JQuery语法 });
})(jQuery);

测试密码的强度
- 在某些网站注册时常常会要求设置密码，网站也会根据输入密码的字符特点给出相应的提示，如密码过短、强度差、强度中等、强度强等。这又是怎么实现的呢？看下面代码：

1	<input type="password" name="pass" id="pass" /> <span id="passstrength"></span>

//下面的正则表达式建议各位收藏哦，项目上有可能会用得着
$('#pass').keyup(function(e) { 

//密码为八位及以上并且字母数字特殊字符三项都包括 
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); 

//密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等 
 var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); 
var enoughRegex = new RegExp("(?=.{6,}).*", "g"); 

if (false == enoughRegex.test($(this).val())) { 

$('#passstrength').html('More Characters'); }
 else if (strongRegex.test($(this).val())) {
     $('#passstrength').className = 'ok'; 
     $('#passstrength').html('Strong!'); } 
else if (mediumRegex.test($(this).val())) {
    $('#passstrength').className = 'alert'; 
    $('#passstrength').html('Medium!'); }
 else { 
    $('#passstrength').className = 'error';      
    $('#passstrength').html('Weak!'); 
} 
return true;

});

附录四常见CND加速服务

附录五 jQuery的一些资源

速查手册
jQuery插件
- 基础常用
- 更多插件-动效库整理
  - 插件动效库
  - 常用组件

扩展阅读

jQuery源码分析系列

参考

锋利的jQuery

本文md源文件

1. AJAX（JavaScript Object Notation）

Asynchronous Javascript And XML (异步JavaScript和XML)
通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2. AJAX的步骤：

创建Ajax对象new XMLHttpRequest()
填写传输地址和传输内容 ajax.open("post"||"get",URL,是否异步)
发送请求 ajax.send();
等待服务器相应 ajax.onload = fn();
服务器响应后执行后续动作 ajax.responseText

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
<script>
    window.onload = function () {
// 1. 创建一个XMLHttpRequest对象 (需要考虑兼容性)
            var xhr = null;
            if (window.XMLHttpRequest){ //主流浏览器 (包括IE7、以后的版本)
                xhr = new XMLHttpRequest();
            }else { //IE6、 IE5
                xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }
            console.log("状态A"+xhr.readyState);
//  2.设置请求方式以及请求地址 、 是否为异步请求
            //1>使用 get 请求
           var url = './data.json';
           xhr.open('get',url,true); //true 异步请求方式  false 同步
           console.log("状态B"+xhr.readyState);
            //2>.使用 post 请求
            // var url = "02_Ajax.php";
            // xhr.open('post',url,true); //true 异步请求方式  false 同步
            //如果post请求方式,必须要添加请求头 (必须要写在连接建立的状态以后)
            // xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

            // console.log("状态B"+xhr.readyState);
//  3.发送请求
            xhr.send();
            console.log("状态C"+xhr.readyState);
            // var params = "username="+username+"&password="+password;
            // xhr.send(params); //发送请求
            // console.log("状态C"+xhr.readyState);
//  4.回调函数
            xhr.onreadystatechange = function () {
                console.log("状态D"+xhr.readyState);
                // 1.请求有响应    2.响应是正确的,返回的数据是来自请求的URL
                if (xhr.readyState == 4 && xhr.status == 200) {
                        console.log(xhr.responseText);
                        // var div = document.getElementById('div');
                        // div.innerHTML = xhr.responseText;
                }
            }
    }
</script>
</html>
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

3.get

通过url发送请求，会暴露用户信息
因为是用过url发送的，IE的url会将中文转码，所以在IE下中文需要使用encodeURI转码
使用get传输数据会产生缓存，解决方法是在数据后面加随机数或者时间戳
不同浏览器的url长度不同。

例子：

var ajax = new XMLHttpRequest();
ajax.open("get","../php/get.php?user=" +userName.value ,true );
ajax.send();
ajax.onload = function () {
span.innerHTML = ajax.responseText;
}
 
 1
2
3
4
5
6

4.post ,post与get的区别

通过send直接发送到服务器，理论上来说体积是无限大的（一般后端会做限制）
因为是直接发送给服务器，所以不会被浏览器缓存，也不会暴露用户的信息，相对get来说安全
因为不通过浏览器发送，所以不用转码

必须在send之前设置一个请求头(这个请求头的内容是固定的)

ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   
   1

字段的拼接要放进send中,open的第二个参数直接为请地址不用拼接字段了

例子：

var ajax = new  XMLHttpRequest();
ajax.open("post","../php/post.php",true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("user="+this.value);
ajax.onload = function () {
    span.innerHTML = ajax.responseText;
    console.log(ajax.response);
}
 
 1
2
3
4
5
6
7
8

5. eval

eval可以计算某个字符串，并执行javascript代码。
通过eval可以将一个长得像对象的字符串转成对象。但是会注入病毒，所以尽量少用或者不用。

var json1 = "{'name':'难'}";
console.log(eval('('+ json1+')'))

Alvin_扣扣953821815

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

JavaScript

警告

实例

#当你需要在某个页面同时执行两个变化处时使用{}

JavaScript 代码块

实例

JavaScript 对大小写敏感。

空格

JavaScript 变量

JavaScript 数据类型

JavaScript 函数和事件

调用带参数的函数

实例

实例

局部 JavaScript 变量

全局 JavaScript 变量

JavaScript 变量的生存期

向未声明的 JavaScript 变量来分配值

JavaScript 运算符

条件运算符

语法

例子

条件语句

JavaScript Switch 语句

语法

JavaScript For 循环

JavaScript 循环

不同类型的循环

JavaScript 错误 - Throw、Try 和 Catch

JavaScript 测试和捕捉

语法

实例

Throw 语句

语法

实例

必填（或必选）项目

E-mail 验证

1.在html中使用javascript

2.javascript类型一览

3.javascript Object类型

4.javascript Function类型

5.javascript String类型

6.javascript Date类型

7.javascript RegExp类型

8.javascript Array类型

9.javascript Global对象

10.BOM

11.DOM

12.JSON

13.Ajax

第一节 jQuery初步认知

jQuery概述

初步了解JQuery

第二节 选择器

过滤选择器

第三节 选择器优化

第四节 代理对象属性和样式操作

第五节 jQuery中DOM操作

CSS DOM操作

第六节 jQuery动画

回顾上节

一、创建节点

二、插入内容

三、删除内容

四、克隆内容：创建指定节点副本

五、替换内容

本节新知识

第七节 jQuery中的事件

第八节 jQuery与Ajax

创建一个Ajax请求

jQuery中的Ajax [补充部分–来自锋利的jQuery]

load()方法

$.get()和$.post()方法

$.ajax()方法

第九节 插件

附录一 jQuery各个版本新增的一些常用的方法

附录二 jQuery性能优化

附录三 常用的jQuery代码片段

附录四 常见CND加速服务

附录五 jQuery的一些资源

初步了解`JQuery`

第二节选择器

第三节选择器优化

第四节代理对象属性和样式操作

`load()`方法

第九节插件

附录三常用的jQuery代码片段

附录四常见CND加速服务