JavaScript学习
原生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基础 blog.csdn.net/personJiangKun
写在哪里?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]+'<br />';
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的字符串')
例子:$('<a href="http://baidu.com">百度</a>')
(2)追加与插入元素
父.append(子)
父.perpend(子)
子.appendTo(父)
子.prependTo(父)
A.insertBefore(B)
A.insertAfter(B)
(3)删除
元素.remove() 真正的移除了这个元素
元素.empty() 清空里面的内容了
(4)克隆
元素.clone() 克隆一个一模一样的节点