本文共 10922 字，大约阅读时间需要 36 分钟。

原生JavaScript

1、定位

• position属性
• static（默认）
• Relative：相关的 /设置 距离是指咋原来文档流的位置处做偏移/
• Fixed：固定的（脱离文档流）
• Absolute：绝对的（脱离文档流）
• 与top、left、bottom和right连用
• 绝对定位默认是以浏览器作为参考，但是如果绝对定位在relative定位的元素中（绝对定位中也行），那么就以这个元素左作为参考
• 绝对定位中位置的层次
• z-index ：设置层叠顺序

2、 display显示与隐藏以及设置显示样式

  none、block(块)、inline(行级)

  div、span

3、 JavaScript

（1）基础语法

（2）DOM(文档对象模型) （3）BOM（浏览器对象模型） （4）jQuery(DOM、BOM) （5）js高级

4、 JavaScript基础

基本历史和现状	-> 1994-1995,点击一个网页，需要40s左右才可以打开		注册的问题	-> 就是为了检验页面中的数据		网景：livescript，1995年sun的java火了，更名为javascript		微软ie绑定到操作体统中(JScript语言)		// CGI->asp(vbscript)->jsp		1996-2000		谷歌v8引擎(可以将脚本编译成机器语言执行)	-> js		ecma-v3		ecma-v5	严格模式 strict		历史分歧，是的javascript的多面化		执行在浏览器上的一个脚本语言		flex：actionscript(js是变种)		node.js(v8引擎作为js的解释引擎，将js带到了服务器后端)		NginX		CommonJS	-> 库		jQuery		prototype		YUI		Extjs		dojo

5、 JavaScript基础

  写在哪里？hello world

    -> 1.新建一个html文件     -> 2.在head标签中添加一个     -> 3.在里面添加代码     -> 词法与句法(参照C#学习)

6、 javascript的数据类型(记下来)

（1）基本类型：数字类型number、布尔类型boolean、字符串类型string

（2）引用类型：对象类型、函数类型 （3）空类型：null和undefined （4）运算符：typeof （5）语法：string typeof (变量);

7、 JavaScript是一个弱类型的语言

-> 弱类型不代表没有类型，不严格的检查类型-> C#		int num = 10;	// 需要检查类型赋值如果不符合要求就报错，编译不通过			int num = "123"; // 报错-> js	使用var声明变量	var num = 123;	// 不会检查类型，任何赋值都可以成功

8、 运算符

（1）数学运算符：+、-、*、/

（2）逻辑运算符：>、<、>=、<=、 == 、 ！= 、&&、|| === 和 !== 完全等于 （3）与对象相关   new   delete   instanceof

9、 逻辑控制与流程控制

-> if    	if(bool表达式) {
       		语句    	} else if(bool表达式) {
       		语句    	} else {
       		语句    	}    	解释性的语言，规范结尾用分号，但是如果不用分号，也不会错，js引擎会根据换行自动加分号    -> switch-case    	switch(val) {
       		case 值1: 语句; break;    		case 值2: 语句; break;    		case 值3: 语句; break;    		... ...    		case 值N: 语句; break;    		default: 语句; break;    	}    -> while    	while(逻辑表达式) {
       		循环体    	}    -> do-while    	do {
       	    	} while(条件);    -> for    	for (var i = 0; i < max; i++ ) {
       		循环体    	}    -> for-in结构(有点像foreach，但是不同)    	for(var item in 集合或对象) {
       		遍历这个集合对象，item为每一个项的键    		循环体    	}

  类型转换：js中只有浮点数类型，可以用parseInt() 函数进行转换

10、使用函数(函数、方法)

-> 函数的语法		声明式语法：		function 函数名(参数列表) {
   			// 函数体			// 如果有返回值直接return即可		}		Lambda函数(匿名函数)		var func = function(参数) {
   			方法体		};	-> 在C#中委托如何使用的？		-> 声明委托类型		-> 定义委托变量		-> 授权方法(匿名)			func = delegate(参数) {
    方法体 };			func = (参数) => {
    方法体 };		-> 使用委托变量调用方法	-> arguments参数		函数内部都有一个arguments参数，表示函数的参数		像数组的对象	-> 使用函数，计算兔子数列(Fibonacci数列)		1	1	2	3	5	8	13	...	-> Function对象(动态函数)		语法		var func = new Function(...);		// Function参数中最后一个参数是方法体，前面的参数都是该方法的参数		// 参数类型都是字符串		var getMax = function(n1, n2) {
   			return n1 > n2 ? n1 : n2;		};		// 		var func = new Function("n1", "n2", "return n1 > n2 ? n1 : n2;");		// 将字符串变成函数

11、使用浏览器调试js代码

（1）js的代码量非常大，封装技巧非常强

（2）代码分析

12、节点的操作

（1）创建节点

  元素节点： var node=document.createElement(“标签名”);   文本节点：var textNode=document.createTextNode(“文本”);   <节点>.innerHTML=“文本”; //这里可以使用html   <节点>.innerText=“文本”; //非标准

（2）追加节点：

  追加到尾部：     父节点.appendChild(子节点);   插入到中间（插入到某一个元素的前面）：     父节点.insertBefore(新元素，旧元素);

（3） 修改节点

  所谓的修改节点就是修改节点的属性与包含的文本。   修改属性的标准方法（DOM-Core）     .setAttribute(“属性名”, “值”);     文本 .getAttribute(“属性名”);   -> DOM-html     .属性名 = 值;     var v = .属性名;

（4）删除

  父节点.removeChild(子节点);

（5）隐藏

  P.style.display=“none”;

13、数组排序：

Var arr=[2,1,3];Arr.sort();Alert(arr);     //默认为升序       降序：arr.sort(function(a,b)  { return b-a;});

14、得到json格式的数组

Var str='[{
   name:"赵小虎",age:18},{
   name:"赵小虎",age:18},{
   name:"赵小虎",age:18}];Var jsons=new function(){
    "return "+ str};

15、全局和局部

Var fuc=function(){
   }    //局部，不会覆盖Function func(){
   }    //全局，覆盖

BOM，浏览器对象

• Window
• 》window.onload
• Document=>window.document
• Document.write();

//输入window中的对象Var i=0;For(var k in window){
   	Document.write(i+ '  '+k+ '  '+typeof window[k]+'
';	i++;}

1、事件

onload：页面加载完毕时触发

onunload：页面卸载后触发 onbeforeunload：页面卸载前触发

• window就是一个全局的对象，是一个全局的容器，所有的东西都是他的成员。
• confirm方法 返回布尔类型
• Window.location.href ：获得或设置当页面的地址（url）
• reload（）方法 刷新
• history对象：
  History.forward(); 前一页面
  History.back(); 后退页面
  History.go(-1); 也可以后退

2、事件对象：

（1）鼠标点击事件 button

（2）鼠标移动事件：onmousemove （3）属性：screenX、screenY clientX、 clientY layerX、layerY

//将json格式的字符串变成数组Var o =new Function("return "+jsonParam)();

（4）事件对象，就是与事件相关的一个参数

  如何编程，事件是一个待执行的方法，不是我们去调用，而是浏览器因某个时间的触发而自动的调用。   语法：事件 = function (){};   这个函数是由浏览器自己调用，那么事件的参数也与浏览器有关

onload = function () {
       var dv = document.getElementById("dv");    dv.onmousedown = function (e) {
           e= e || window.event;        //如果e不存在，就用event，这个不是标准做法        //如果e存在 就使用e本身        alert(e.button);    };};

3、关于坐标问题：

  clineX、layerX、 pageX offsetLeft

4、功能键

  Alert(e.altKey);

  Alert(e.shiftKey);   Alert(e.controlKey);

5、计时器-电子 时钟

  开启计时器：Number window.setinterval( callback, millsecond);

  关闭计时器：Window.clearInterval (计时器id)

//计时跳转页面onload = function () {
        var p = this.document.getElementById("se");     var interval = setInterval(         function () {
                p.innerHTML = Number(p.innerHTML) - 1;             if (Number(p.innerHTML) <= 0) {
                    clearInterval(interval);                 this.window.location.href = "http://baidu.com";             }         }         , 1000); };

6、延迟操作：

setTimeout(function(){},1000)

7、剪切板：

Window.clipboardData.setData("text",value)

（1）获取剪切板的内容：window.clipboardData.getData(“text”);

（2）向剪切板放回内容 : clipboardData.setData(“text”,txt);

Return false;     //取消其默认事件

8、定义数组 var arr=[]

Arr.push("fdsa");   //向数组里放内容Arr.join("/r/n");   //向数组里每一项内容后添加 内容？？？

9、获取时间：

获取时间	方法
New Date()	getFullYear();
	getHours();
	getSecondes();
	getMinutes();

10、事件冒泡：

   div套了一个p，p有一个点击事件，div也有一个点击事件。点击p也就相当于点击了div，会向触发p的点击事件然后触发div的点击事件。

获取事件源： e.srcElement  			     e.currentTarget	//取消事件冒泡	// IE8   :    e.cancelBubble=true;	e.stopPropagation();

11、表单事件：

（1）获取元素

  Document.forms 获取文档中所有的表单、 （2）每一个事件都会有相对应的一个方法来提供调用，比如onclick（）事件 会有一个click（）方法来调用。 （3）表单有一个提交的事件

Form.onsubmit = function(){
   	//Return false;   永不提交	Return confirm("您确定要提交么？");}//获表单里元素Onload=function(){
   	Var form = document.forms[0];	Var input = form.elements[1];	Input.value="测试";	};

12、函数的四种调用形式：

  js中函数和方法不一样，体现在this上。this具有全局性

（1）函数形态 （2）方法形态   将函数赋值给某一个对象的成员，那么就成为方法 （3）构造器形态   就是构造函数，了解构造函数的执行过程。构造函数改变了函数的返回值，如果函数的返回值是一个对象，那么就按返回值来返回，如果返回值不是一个对象就忽略返回值，直接返回this （4）上下文形态   想用什么模式就用什么模式   语法：函数.apply（对象，[参数列表]) 例如： f.apply(null,[12,34]);

---

JavaScript的面向对象

1、基本概念

（1）对象，即键值对

（2）方法，即值为函数的属性 （3）原型 ，即对象继承实体。有一个对象存在，构造函数设置原型为这个对象，创建出来的对象就继承于这个对象（从对象那里继承）。 原型就是函数的prototype属性，它的值是键值对的形式。 （4）原型链，一直往原型上找。

2、关于对象里的方法：

Var Persion= functino(name){
   			This.name=name;			This.say= function(){
   				Alert("你好，我是"+this.name);			};		};				Var p =new Persion("牛亮亮");		P.say();        //打印   你好，我是牛亮亮  ，通过对象调用方法		P.say.call();   //打印   你好，我是        ，这种方式，直接调用对象里的方法		P.say.call(p);	//打印   你好，我是牛亮亮   ,通过传入对象，再调方法。						     //这种调用方法是获得函数的通用调用形式，将对象传入，表示在这个对象上调用该方法。				Delete p.name;  //删除对象的属性

3、原型继承

// 模拟c#中的人类			var o = {				say:function() {					if(this.name && this.age && this.sex)					alert("你好，我是" + 						this.name + "，我今年" + 						this.age + "岁了，我是" +						this.sex + "生");				},				get_Name : function() {					if(this.name) return this.name;				},				set_Name : function(value) {					if(this.name) this.name = value;				}			};						var Person = function(name,age,sex) {				this.name = name;				//this.age = age;				this.sex = sex;			};						Person.prototype = o;						var p1 = new Person("赵晓虎", 19, "男");						p1.say();

  如果需要原型，那么就是一定要有函数，函数的prototype属性就是原型。每一个对象又一个属性叫__proto__ 这个属性就是这个对象的原型。

（1）继承：

  需要有一个对象，Inherite.apply(对象，参数);一次性调用多个方法，完成派生。

（2）原型链：

• 对象有原型，那么原型也是对象，原型也有原型。

• 所有的函数是对象，继承自Function.prototype。

• Function.prototype是对象，继承自Object.prototype

• Object.prototype是对象，继承自null

  obj是对象，继承自Object.prototype 	function是对象，继承自Function.prototype 	function是函数，继承自Function.prototype

（3）js成员的访问规则

  O.方法() 。首先在o当前这个类型中寻找该成员的定义，如果存在该成员的定义，那么久直接使用该成员。如果该成员不在当前类型中，就访问其原型，一次类推，直到null位置

（4）原型的读写操作：

  读取操作：会在当前对象中寻找，向上找，找到为止   修改的操作：会在当前对象中找，找到了就使用； 如果没有找到就创建一个

（5）给元素添加事件

  元素[“onclick”]=function(){};

---

JQuery部分

1、当页面加载完毕时执行

jQuery("document").ready(function (){
   	Alert("加载完毕");});//简写形式：$(function(){
   	Alert("加载完毕");});

2、了解jq的基本书写方式

（1）熟练使用选择器

  选择器（css）     基本选择器：#id 、 类 、 标签

（2）dom操作

• 事件的添加办法：

  $(…).事件名(function(){});

• 属性与样式：

  $(…).css(“border”,“1px solid red”) 设置
  $(…).css({…})
  $(…).css(“border”) 获取，没值就是获取，有值就是设置

  $(…).attr(属性名,值)

  $(…).html() innerHtml

  $(…).text() innerText

  $(…).val() value

  $(…).addClass()

（3）两个循环

  ①map循环     语法：$.map(数组或对象, 回调函数);

Var arr = ["a","b","c","d"];		Var newArr = $.map(arr, function (v , i){
   			Console.log(I + "," + v);     //i是索引，v是值			Return v + ","+I;    //使用return 可以返回自定义的新内容		};

  ps：注意回调函数是有参数的，表示循环的数组对象的索引与值。

  意义何在：目的就是将过程操作，变成函数式操作   功能：用回调函数处理每一个数组或对象中的元素，然后返回一个新数组

  ②each循环

    语法：$each(对象或数组，回调函数)；

Var o = {
   name:"张三",age: 19 , set: "男"};		$.each(o, function (k , v) {
   			Console.log(k + "----" + v);		});

  如果需要停止遍历，return false。

  注意回调函数的参数是每一个成员的键与值.   功能：就是遍历对象或数组，注意不返回内容

  map循环与each循环的基本思想就是面向步骤过程的操作，变成一个函数式的操作，方便进行链式编程（函数式编程）

函数式编程是一个流水线生产模型   F1().f2().f3()   F3(f2(f1())) 函数式编程近年来在并发要求较高的领域使用较多。

（4）tirm方法：

  本质就是正则表达式，用“”替换掉左边的空格，替换掉右边的空格。

3、JQuery对象和DOM对象

（1）转换：

dom对象变jq对象：$(dom对象)

（2）方法

方法名	功能
Next()	返回被选元素的后一个同级元素
nextAll()	获得匹配元素集合中每个元素的所有跟随的同胞元素
Prev()	获取前一个元素
prevAll()	获取前面所有的元素
Siblings()	返回被选元素的所有同级元素
Children()	返回被选元素的所有直接子元素
find()	返回被选元素的后代元素

（3）保持链和破坏链

  带all的方法会破坏链，可以使用end()方法来保持链。

（4）与样式有关的方法：

  addClass（类名）     功能：为标签添加class属性     注释：class属性是可以追加的   removeClass（类名）     功能：移除标签的class属性   hasClass（类名）     功能：如果有该样式返回True 否则返回False   toggleClass（类名）     切换样式的应用与删除

（5）过滤选择器

  语法：$("#ul li:过滤器名")

（6）基本过滤器：

  :first、 ：last、eq（索引）、：even、：odd、qt（索引）大于、lt（索引）小于 ：not

（7）直接获得元素： ：header、：animated、：focus

  方法：first() 、 last（）

  过滤器使用后还可以继续过滤，每次都用上一次过滤的结果。过滤选择器是在已有的结果中进行再次筛选，并且可以连续使用过滤选择器，每次使用过滤选择器，都会使用签一次过滤的结果作为数据源进行过滤。

过滤器	作用
$("#ul li:first")	//第一个
$("#ul li:last")	最后一个
$("#ul li:eq(1)")	下标为1的，就是第二个
$("#ul li:odd")	奇数的
$("#ul li:even")	偶数的
$("#ul li:not(:even)")	不是偶数的
$("#ul li:even:eq(2)")	偶数中的第三个

（8）属性过滤器：

用法	功能
[属性名]	过滤出含有该属性的元素
[属性名=值]	过滤出含有该属性，并且具有指定值的元素
[属性名！=值]
[属性名^=值]	必须以该值开头
[属性名$=值]	必须以该值结尾
[属性名*=值]	表示包含该值的，字符串匹配，只要有就选择上
[属性名l=值]	表示属性必须以该值开头，同时后面紧跟连字符 “-”
[属性名~=值]	表示筛选包含该值的元素

（9）表单对象选择器

：radio，：checkbox，：text，submit，：button ：enabled 可用 ：disabled 不可用 直接获得元素 $(“form :disabled”)

（10）dom结构的特点

  每一个节点只有1个父节点。在js中，由于其动态特征，只要设置节点的父节点，就会从原来的节点上移除。

（11）内容过滤器

  ：contains（内容） 过滤出包含给定文本的元素innerText   ：empty 过滤出没有子节点的元素   ：has（选择器） 过滤出子元素中使用了selector的这个元素   ：parent 过滤出可以做父元素的元素（即包含子节点的元素）

（12）子元素过滤器：

  First-child 保留层次结构，每个层中的第一个   First 取得是线性结构的第一个   Only-child   Nth-child(条件） 可以使索引、even或odd和3n   .children（）

（13）JQuery的DOM操作

JQuery	DOM
html（）	innerHTML
text（）	innerText
attr（）	getAttribute、setAttribute
removeAttr（）	attr（属性，“”）空置就相当于移除了

4、动态创建DOM节点

  我们创建的是jq对象，如果需要使用dom操作一定要使用get得到dom对象，jq对象也提供了dom方法，因此可以实现dom操作

（1）创建节点

语法：$('html的字符串')例子：$('百度')

（2）追加与插入元素

  父.append（子）   父.perpend（子）

  子.appendTo（父）

  子.prependTo（父）

  A.insertBefore(B)

  A.insertAfter(B)

（3）删除

  元素.remove() 真正的移除了这个元素   元素.empty() 清空里面的内容了

（4）克隆

  元素.clone() 克隆一个一模一样的节点

转载地址：http://xnqmi.baihongyu.com/