本文深入浅出地讲解了JavaScript的基本概念和技术细节，包括DOM、BOM、事件处理、AJAX、jQuery等内容，帮助读者全面掌握前端开发的核心技能。
dom
dom概念
document object model
当我们对文档中的一些内容进行操作就是一个事件,浏览器的网页就是文档,
------------------------------------------------
默认行为
网页中有许多的元素,js中一切皆对象,点击一个a链接会产生跳转,点击一下submit会提交表单,点一下鼠标的右键会弹出一个框,这些都是系统自带的,我们叫默认行为,js存在是为了不想让元素执行一些自己的默认行为,
事件对象Event
注意,上面是的属性调用的对象是事件对象,事件对象是在一个按键点击之后产生的,事件源,事件类型,事件程序,事件程序是一个方法,这个方法的参数写了就是有了事件对象, 事件对象并不是必须的。根据需求，如果需要，就写上。
事件对象，是系统自动封装好的。不同的事件类型有不同的事件对象。
注意只有节点对象才有事件
大牛的话:动态元素有3个至关重要的元素,位置,尺寸和可见性
三要素--->事件源,事件类型,事件处理程序
事件源就是事件发生的元素,事件类型就是点击,双击,右键,键盘等事件,处理程序就是,我们让触发一个事件的时候我们让程序执行我们想要的行为
-----------------------------------------
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
-----------------------------------------
事件对象有很多属性和方法,属性和方法都需要对象来调用,对象是不用new的直接 event.属性;就能调用
属性常用的有
clientX返回当事件被触发时鼠标指针向对于浏览器页面（当前窗口）的水平坐标。
clientY;返回当事件被触发时鼠标指针向对于浏览器页面（当前窗口）的垂直坐标。
clientX/Y获取到的是触发点相对浏览器可视区域左上角距离，
-------------------------------------------------
pageX获取鼠标距离文档的水平坐标
pageY获取鼠标距离文档的垂直坐标
pageX/Y获取到的是触发点相对文档区域左上角距离，会随着页面滚动而改变
-------------------------------------------------
一个div元素,或其他的元素,
window和document的关系
能看到的都是窗口,看不到的整个页面是文档,,文档是放在窗口中的
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
document是window的一个对象属性
document 对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。
window对象它是一个顶层对象,而不是另一个对象的属性，即浏览器的窗口
document 当前显示的文档(该属性本身也是一个对象)
绑定事件
绑定事件的方法3种
1.直接在一个标签(或叫节点)中写一个onclick属性,例如
<div id='did' onclick=alert('绑定事件的第一种方式');></div>
2.获取到一个节点对象,然后---->did.onclick=function(){事件处理程序}
3.添加监听事件,首先获取到一个节点对象,然后--->did.addEventListener();
注意参数一是事件的类型,参数2是一个匿名函数,我们要做到处理就写在匿名函数的大括号中,也可以写一个函数的变量名,函数写在外面,总之就是参数2就是我们要执行的处理程序
-----------------------------------------------------------
第一种方法写在标签中看着不好看.显得没有条理,第二种和第三种有一个很大的区别,第二种同一类型的监听事件不能重复添加,后面的会把前面的给覆盖掉,用addEventListener();可以重复添加同意类型的事件,是我们以后的标准,对于IE浏览器,考虑到兼容性的问题,第三种不能用,可以用did.attachEvent(事件类型,匿名函数);
注意,第三种方式事件的类型不用加on
-----------------------------------------------------------
事件的类型6种,其实不止六种,常用的就这些
文档事件, 鼠标事件, 键盘事件, 表单事件, 图片事件, 窗口事件
---------------------------------------------------
冒泡
阻断冒泡e.stopproagation();//注意,阻断写在哪个方法中,则除了调用这个方法的元素的事件不会被阻断,其他的嵌套在他下面的都会被阻断
文档事件
onload文档加载事件,加载HTML页面是从上向下加载的,我们的js代码如果先写了一个获取元素,加入就是获取一个div,ID号为one,但是这个div在整个页面的 最后,我们获取的时候就会找不到,这个时候浏览器就不会加载整个页面了,为了解决这种麻烦就用到onload方法,onload方法代码段中的代码会在整个界面加载完成之后才加载
window.onload=function(){文档加载完之后才加载的代码}
-----------------------------------------------
onunload和onbeforunlod事件是,文档卸载事件,当离开这个页面或者要关闭浏览器的时候会执行方法体中的代码,可以放一些提示用户的操作,或是一些清除数据,或者见不得光的操作,具体根据需求来做
window.onunload=function(){用户要离开界面的要做的操作}
window.addEventListener('beforeunload', function (e) {
var confirmationMessage = '确认关闭窗口？';
e.returnValue = confirmationMessage;
return confirmationMessage;
});
鼠标事件
单击事件onclick, 双击事件ondblclick, 移入事件onmouseover, 移出事件onmouseout, 鼠标移动事件onmousemove, 按下事件onmousedown, 抬起事件onmouseup, 右键oncontextmenu
注意事件名都是小写的,注意调用鼠标事件是一个方法,当我们执行了某些事件的时候会自动调用这些方法中的代码段,这时候调用的对象就是我们的事件源对象,可能是一个div,也可能是窗口window,总之他们都是承载这个时间的环境.
注意,鼠标的右键事件一般是给窗口window加的,但是也可以点击右键不是给窗口加的,做到的方法是写完我们要写的事件操作,加一个return false;来阻断系统要弹的框
键盘事件
当我们点击键盘上一个键的时候会有,一个按下的事件onkeydown,或者onkeypress,当按的键松开了就会有一个onkeyup事件,
window.onkeydown = function(e){当按下了一个键的时候要执行的代码}
当我们按了一个键的时候,会产生一个事件对象e,我们通过这个事件对象e的keyCode属性可以得到我们所按的键的Unicode码,我们拿到这个码可以用switch去匹配,加入我们是做的一个游戏,我们可以匹配到一个上键,在case上的代码体里写上让人物前进的操作
表单事件
当把光标放到一个元素上,自动执行获取焦点onfouce,
当把光标从一个元素上移开,自动执行方法,失去焦点事件onblur
当点击了submit提交键,自动执行表单提交事件onsubmit
当点击了reset键时,会自动执行 表单重置事件onreset
当点击下拉列表中的一个option标签会自动执行事件onchange
当用鼠标选中了文本会自动执行,文本选中事件onselect
当在输入框内输入文字的时候,自动执行框内输入事件oninput
-----------------------------------------------------------------------
当一个图片加载失败的时候会触发onerror事件,我们可以提示用户加载失败
当加载一个图片成功的时候会自动触发onload事件
当窗口的大小改变的时候会自动触发onresize事件,做窗口的自适应用到,注意这个时间的对象是窗口window,调用的时候也要用window.onresize
当窗口的滚动条滚动的时候会自动触发onscroll事件,这个事件也是给window加的,调用的时候用window.onscroll,瀑布流会用到这个,
注意
文本选中事件只针对input输入框和textarea框内的内容选中时才调用onselect方法
通过this.value或者input框对象.value可以获取到用户输入的框里的值,当把这个代码写到oninput的方法体中的时候,可以做到实时获取用户输入的信息,删除用户输入的信息,也会自动调用此方法
onsubmit事件可以用来判断用户提交的信息是否合规,不合规return false;
点击下拉框中的option才会才会调用onchange方法,如果option标签中没有写value属性的值,会默认value值是option标签之间的值
节点
节点概述
//总结HTML中有五种节点
// 文档节点9,元素节点1,属性节点2,文本节点3,注释节点8,节点的意思可以理解成是一节一节的如元素节点的nodeValue属性的值是一个null,不是没有,而是我们把他归类为了文档节点,所以打印结果是null,另外文档中的空白部分也是节点,是文档节点,要想知道一个节点的信息,要先获取到这个节点,
//注意最顶层的节点是文档节点,我们没有办法获取,这个是系统已经封装好的document对象我们拿到了对象,可以调属性和方法获取我们要的属性和方法的值 ,文档的下一级就是HTML元素节点,如何获取我们要找的节点呢,通过document.getElementById(元素的ID值),或者自己查手册,获取我们要的元素,文档对象调用一个方法获取到一个元素的对象,然后我们调用元素对象的方法或者属性得到我们想要的元素的值,元素节点的下一级还会有很多同级或者平级的元素,当我
// 下一级是子元素,
// 同级的其他标签元素节点,或者空白的文本节点,注释部分的注释节点
//这是树状结构,因此在找通过一个节点找另外一个节点的时候,就要先找到两个节点所处的同一个父节点,然后通过父节点再去找,
//节点的树状图如下
//文档节点
//<HTML>根元素节点,下面有两个子节点
//<head>和<body>两个子节点
//其下还有很多的(节点)标签,标签中还有属性,和属性值,以及双标签之间的文本节点(显示内容),注意以后找节点关系就靠的这个
节点的运用
document.getElementById('元素的ID值');//通过元素的ID获取到元素的值
document.getElementsByTagName('元素名字');通过元素的名字类型名字找到一组元素节点
document.getElementsByClassName('class属性的值);通过元素节点的class属性值找到一组元素节点
document.getElementsByName('name属性的值');通过元素节点的class属性值找到一组元素节点
总结获取到一个一个元素的方法就是上面的这些,我们为什么要获取,因为我们要用,获取元素之后再进行对元素节点的一些操作,一般增删改查,或者拿到里面的某些内容进行传值,或者塞值
节点的增删改查
添加
1创建一个元素节点document.createElement('节点的标签名例如div 或 img');
2.设置属性 子元素节点变量.setAttribute('属性名','属性值');
3.添加到他要去的父节点下 父元素节点变量.appendChild( 子元素节点变量);
第二种的添加的方式
1.var img=document.createElement('节点名');//创建一个元素节点
2.var attr= document.createAttribute('属性名');//创建属性节点
3.attr.value='./images/5.jpg';//给属性赋值
4.img.setAttributeNode(attr);//将属性添加到属性节点的位置
5.did.replaceChild(img,另一个节点对象老的);//将一个节点替换成另一个节点
添加文本节点
var text=document.createTextNode('文本的内容');
父节点.appendChild(text);
克隆一个原有的节点
var newSpan=span.cloneNode(true);//不给参数true的时候只会创造一个节点,不会有节点内的文档节点
父节点.appendChild(newSpan);
--------------------------------------------------------------------
父元素删除其下的子节点,
uid.removeChild(子节点对象);
--------------------------------------------------------------------
插入;这个是在一个节点之前插入元素
这个插入式添加相当于是一种有条件的添加(指定位置添加)
和添加一二两步相同,第三部变成
父节点变量.insertBefore(新节点,插在哪个节点之前);
form节点
form节点.submit();//调用提交的方法,不用点提交键就能提交
JavaScript
AJAX
概念
Ajax是Asynchronous JavaScript and XML的缩写，即“异步的JavaScript和XML技术”。
作用是实现无刷新更改页面,
----------------------------------------------------------------
实现异步加载的步骤四步
1.实例化一个ajax对象,
var a =new XMLHttpRequest();
//注意XMLHttpRequest是AJAX的基础。XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新
2.初始化
a.open("请求的方式","处理的文件","布尔值");
//注意,请求方式有get和post方式两种,两种方式的区别是,get传输的数据有限,传的参数显示出来,post方式传的值大小不限制,参数不显示, 处理文件是后台服务器的处理脚本,布尔值是true是异步,false表示的是同步.
3执行发送send();
//注意,将请求发送到服务器,string：仅用于POST请求,当send方法有参数的时候,当用post请求的时候要在send方法之前加上一句
xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);//向请求添加HTTP头
如果是get的方式的话不用加这句,括号里也不用写参数,参数是一个json字符串
4.处理结果
a.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
var str=xmlhttp.responseText;//获取到服务器返回的响应
}
}
//注意
onreadystatechange事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当readyState改变时，就会触发onreadystatechange事件。
readyState属性存有XMLHttpRequest的状态信息。
下面是XMLHttpRequest对象的三个重要的属性：
1.onreadystatechange 存储函数（或函数名），每当readyState属性改变时，就会调用该函数。
2.readyState 存有XMLHttpRequest的状态。从0到4发生变化
3.status -------->200：OK----------404：未找到页面
4.使用Callback
callback函数是一种以参数形式传递给另一个函数的函数。
----------------
1.AJAX使用open函数以GET或者POST方式，使用send函数来向PHP发送请求；
2.请求结果readyState的改变，触发事件onreadystatechange；
3.判断readyState==4并且status==200，代表请求成功，并有响应；
4.响应的值是PHP脚本输出的内容，这个内容在JS端使用responseText来接收，并进行相关处理.
ecma-script
基础语法
运算符
算数运算符+ - * / %
字符串运算符 +
赋值运算符 = 注意变量支持连续赋值 a=b=c=10;
比较运算符> , < , >=, <= ,!= ,==, ===, !==
注意不要比较浮点数,容易出错
逻辑运算符&&与, ||或, !非
注意,js中的逻辑运算符的返回结果是运算的值,不是布尔值,例子如下记忆
var a=1&&2&&3;结果是3 思考的方式是先将运算的值强转成一个布尔值,然后再去运算,与的优先级要比或的优先级高
位运算符 &与 |或 ^异或 <<左移 >>右移
三元运算符 ? :
函数运算符是()--->函数名();
注意delete(变量名);不能删除全局变量,因为全局变量一个是否可删除的属性,是false,delect()可以删除对象的属性,如果成功就返回true,删除不成功返回false
流程控制
if(){}else{}
for(var i=0;i<num;i++){循环体}
while(){}
do{}while()
switch(值){case 1:代码段;break;
default:代码段;break;}
杂项
document.write('要写入HTML页面中的内容');//该方法一般用在测试中
如果我们需要往一个标签内写入一些东西可以用(加入是一个div)
---->div对象.innerHTML="要写入div中的 值";
注意,一般往一个标签内写入的是一个值,但是也是有例外的,例如在一个下拉列表select中写入多个<option>标签以及标签的值的时候,可以将所有的option标签和值放到一个字符串中,然后再用innerHTML将这个字符串写入select标签之间,就有了下拉列表的效果
总结innerHTML不止可以写入我们要写的标签的值,还可以直接往里面写标签
--------------------------------------
json--->是一个语言通用的数据容器,所有的语言都有这种键值对用分号连接的写法,这种是为了数据的交互,例如我们调用一个别人写好的接口,气象局的接口,内部有我们需要的天气数据,获取,解析,塞到我们要用的地方,
----------------------------------------------------
当我们在写程序的时候,想改变什么就从新去设置那个东西,他可能是一个属性,可能是一个方法,也可能是一个配置文件,也可能是一个新的对象,需要什么功能就调什么样的方法,系统没有提供那个方法,就自己去创造一个方法,
要什么有什么,求什么得什么
开关的作用就是一个权限,该开启的时候开启,用完了记得关闭,权限可能就是可不可以使用一个功能,一般是true和false,当然也可以自定义一些标记
----------------------------------------------------------------------
alert()是警告框,只有一个确定,confirm()是提示框,有一个确定一个取消
----------------------------------------------------------------------
正常的获取元素css的行内样式是通过----->元素对象.style.属性名,但是如果css样式不是写在行内这种方法就获取不到值,大招-->getComputedStyle(元素的变量名);这个方法获取到元素的所有属性,获取到这个方法的返回值,再用返回值点上要获取到属性名,就能获取到该属性的值,但是不要用这个,效率太低,当我们拿到了一个元素的对象,也可以用 对象.属性来获取到属性的值.拿到了对象我们还可以赋值,不但可以调用还可以修改
全选,全不选,反选的实现
全选是将所有的checked=true,全不选是将所有的checked=false,反选是将input[i]checked=!input[i]checked;说白了就是将它的值取反再付给他
--------------------------------------------------
网页中所有的a链接可以用document.links来获取,得到的是一个集合返回的是一个数组,获取到当前页面具有href属性a链接,
document.anchors获取到当前页面具有name属性a链接,
document.forms获取到所有的是当前页面的所有表单
document.images获取当前页面的所有的img节点,返回的是一个集合
document.all获取当前页面中的所有节点,返回的是一个集合
document对象有很多属性,我们通过调用这些属性可以拿到我们想要的对象,或者说元素,每个载入浏览器的HTML文档都会是document的对象
下面是document的一些其他的属性
body-->提供对body的直接访问,可以获取到所有body体中的元素,返回值是一个集合
cookie--->返回当前文档相关的所有cookie
domain--->返回当前文档的域名
referrer--->返回前一个访问页面的URL地址
title---->返回文档的标题
url--->返回当前文档的url
函数
函数:函数在定义的时候是可以给默认值的,一个函数有多个参数,如果不给的话,可以选择用三元运算符或者var c=c||3;给默认值,这种判断给添加默认值,
如果调用函数传参个数与参数列表的个数不一致的情况下,多的话会自动忽略,少的话会报参数undefined
----------------------------------------------------------------------------
一个函数有return的时候,调用函数的时候会获取到return的结果,但是获取不是显示,可以用console来打印调用的函数,一个函数不写return的话控制台打印的时候会报undefined,return后面如果不写的话也会报undefined,
注意要想阻断js有两种方法,一种是return,另外一种是alert,return可以returnfalse,或者只写一个return
----------------------------------------------------------------------------
函数的声明有三种方式
第一种和PHP中的一样,function one(){},这种声明的方式可以在哪都能调用的到,不分先声明,还是先调用
第二种是用构造函数的方式声明一个函数,var two=new Function('函数体');这种声明方式注意函数体是写在小括号内且用引号引着的
第三种是用声明变量的方式来声明函数,var three=function(){}
----------------------------------------------------------------------------
js中数组是属于对象类型的,arguments是参数列表的意思,arguments.length;得到参数列表的长度,要想获取参数中的某一个可以用数组下标的方式来取值,arguments[下标],注意下标是从零开始的,不要超了,超了取到的是undefined
----------------------------------------------------------------------------作用域
一个变量先调用后声明,结果是undefined,不声明就调用报错,一个变量定义在函数内是局部变量,定义在函数外就是一个全局的变量,
----------------------------------------------------------------------------
注意js的函数中是可以再定义函的,内部的函数叫闭包函数或者局部函数,以后再插件中会经常有这种函数,PHP中是不可以的,PHP中有回调函数
--------------------------------------
常用的函数
eval(字符串);将一段字符串当做js的脚步执行,经常用,效率好像不高,不安全
escape(URL地址);将url的参数部分转为Unicode码
unescape(转码后url);将上面的还原成正常的
对象
对象的三种声明方法
第一种var one=new Object();
第二种var two={}
第三种 function Girl(n, a)
{
// 成员属性
this.name = n;
this.age = a;
// 成员方法
this.sing = function()
{
alert('sing');
}
this.dance = function()
{
alert('dance');
}
}
var obj = new Girl('张三', 18);//注意这里就用new将一个方法转成了一个对象,
---------------------------------------------------
对象中对属性的操作
添加属性,----->对象的变量名.属性名=属性值;
删除属性------->delect 对象的变量名.属性;
修改属性------>与添加属性的操作相同
查看属性------->对象的变量名.属性名;
调用方法------->对象的变量名.方法名();
注意访问属性可以用 点. 也可以用方括号,作用与点一样
对象访问属性---->对象变量['属性名'];注意这里的属性是有引号引着的,不引就代表添加属性.
------------------------------------------------------
快速读取对象的属性用for in
for( i in 对象的变量){
console.log(变量[i]);
}//注意 i 是可以随意写成其他变量名的,可以不用var来声明一个变量,直接写变量名,数组也属于对象型,也可以用这个,遍历对象用的,
------------------------------------------------------
with(对象名){
console.log(属性名);
}//是根据已经知道的对象的属性名获取值,不像for....in是自动的,他相当与是手动的,类似于数组中知道下标取值
------------------------------------------------------
dom
dom概念
document object model
当我们对文档中的一些内容进行操作就是一个事件,浏览器的网页就是文档,
------------------------------------------------
默认行为
网页中有许多的元素,js中一切皆对象,点击一个a链接会产生跳转,点击一下submit会提交表单,点一下鼠标的右键会弹出一个框,这些都是系统自带的,我们叫默认行为,js存在是为了不想让元素执行一些自己的默认行为,
事件对象Event
注意,上面是的属性调用的对象是事件对象,事件对象是在一个按键点击之后产生的,事件源,事件类型,事件程序,事件程序是一个方法,这个方法的参数写了就是有了事件对象, 事件对象并不是必须的。根据需求，如果需要，就写上。
事件对象，是系统自动封装好的。不同的事件类型有不同的事件对象。
注意只有节点对象才有事件
大牛的话:动态元素有3个至关重要的元素,位置,尺寸和可见性
三要素--->事件源,事件类型,事件处理程序
事件源就是事件发生的元素,事件类型就是点击,双击,右键,键盘等事件,处理程序就是,我们让触发一个事件的时候我们让程序执行我们想要的行为
-----------------------------------------
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
-----------------------------------------
事件对象有很多属性和方法,属性和方法都需要对象来调用,对象是不用new的直接 event.属性;就能调用
属性常用的有
clientX返回当事件被触发时鼠标指针向对于浏览器页面（当前窗口）的水平坐标。
clientY;返回当事件被触发时鼠标指针向对于浏览器页面（当前窗口）的垂直坐标。
clientX/Y获取到的是触发点相对浏览器可视区域左上角距离，
-------------------------------------------------
pageX获取鼠标距离文档的水平坐标
pageY获取鼠标距离文档的垂直坐标
pageX/Y获取到的是触发点相对文档区域左上角距离，会随着页面滚动而改变
-------------------------------------------------
一个div元素,或其他的元素,
window和document的关系
能看到的都是窗口,看不到的整个页面是文档,,文档是放在窗口中的
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
document是window的一个对象属性
document 对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。
window对象它是一个顶层对象,而不是另一个对象的属性，即浏览器的窗口
document 当前显示的文档(该属性本身也是一个对象)
绑定事件
绑定事件的方法3种
1.直接在一个标签(或叫节点)中写一个onclick属性,例如
<div id='did' onclick=alert('绑定事件的第一种方式');></div>
2.获取到一个节点对象,然后---->did.onclick=function(){事件处理程序}
3.添加监听事件,首先获取到一个节点对象,然后--->did.addEventListener();
注意参数一是事件的类型,参数2是一个匿名函数,我们要做到处理就写在匿名函数的大括号中,也可以写一个函数的变量名,函数写在外面,总之就是参数2就是我们要执行的处理程序
-----------------------------------------------------------
第一种方法写在标签中看着不好看.显得没有条理,第二种和第三种有一个很大的区别,第二种同一类型的监听事件不能重复添加,后面的会把前面的给覆盖掉,用addEventListener();可以重复添加同意类型的事件,是我们以后的标准,对于IE浏览器,考虑到兼容性的问题,第三种不能用,可以用did.attachEvent(事件类型,匿名函数);
注意,第三种方式事件的类型不用加on
-----------------------------------------------------------
事件的类型6种,其实不止六种,常用的就这些
文档事件, 鼠标事件, 键盘事件, 表单事件, 图片事件, 窗口事件
---------------------------------------------------
冒泡
阻断冒泡e.stopproagation();//注意,阻断写在哪个方法中,则除了调用这个方法的元素的事件不会被阻断,其他的嵌套在他下面的都会被阻断
文档事件
onload文档加载事件,加载HTML页面是从上向下加载的,我们的js代码如果先写了一个获取元素,加入就是获取一个div,ID号为one,但是这个div在整个页面的 最后,我们获取的时候就会找不到,这个时候浏览器就不会加载整个页面了,为了解决这种麻烦就用到onload方法,onload方法代码段中的代码会在整个界面加载完成之后才加载
window.onload=function(){文档加载完之后才加载的代码}
-----------------------------------------------
onunload和onbeforunlod事件是,文档卸载事件,当离开这个页面或者要关闭浏览器的时候会执行方法体中的代码,可以放一些提示用户的操作,或是一些清除数据,或者见不得光的操作,具体根据需求来做
window.onunload=function(){用户要离开界面的要做的操作}
window.addEventListener('beforeunload', function (e) {
var confirmationMessage = '确认关闭窗口？';
e.returnValue = confirmationMessage;
return confirmationMessage;
});
鼠标事件
单击事件onclick, 双击事件ondblclick, 移入事件onmouseover, 移出事件onmouseout, 鼠标移动事件onmousemove, 按下事件onmousedown, 抬起事件onmouseup, 右键oncontextmenu
注意事件名都是小写的,注意调用鼠标事件是一个方法,当我们执行了某些事件的时候会自动调用这些方法中的代码段,这时候调用的对象就是我们的事件源对象,可能是一个div,也可能是窗口window,总之他们都是承载这个时间的环境.
注意,鼠标的右键事件一般是给窗口window加的,但是也可以点击右键不是给窗口加的,做到的方法是写完我们要写的事件操作,加一个return false;来阻断系统要弹的框
键盘事件
当我们点击键盘上一个键的时候会有,一个按下的事件onkeydown,或者onkeypress,当按的键松开了就会有一个onkeyup事件,
window.onkeydown = function(e){当按下了一个键的时候要执行的代码}
当我们按了一个键的时候,会产生一个事件对象e,我们通过这个事件对象e的keyCode属性可以得到我们所按的键的Unicode码,我们拿到这个码可以用switch去匹配,加入我们是做的一个游戏,我们可以匹配到一个上键,在case上的代码体里写上让人物前进的操作
表单事件
当把光标放到一个元素上,自动执行获取焦点onfouce,
当把光标从一个元素上移开,自动执行方法,失去焦点事件onblur
当点击了submit提交键,自动执行表单提交事件onsubmit
当点击了reset键时,会自动执行 表单重置事件onreset
当点击下拉列表中的一个option标签会自动执行事件onchange
当用鼠标选中了文本会自动执行,文本选中事件onselect
当在输入框内输入文字的时候,自动执行框内输入事件oninput
-----------------------------------------------------------------------
当一个图片加载失败的时候会触发onerror事件,我们可以提示用户加载失败
当加载一个图片成功的时候会自动触发onload事件
当窗口的大小改变的时候会自动触发onresize事件,做窗口的自适应用到,注意这个时间的对象是窗口window,调用的时候也要用window.onresize
当窗口的滚动条滚动的时候会自动触发onscroll事件,这个事件也是给window加的,调用的时候用window.onscroll,瀑布流会用到这个,
注意
文本选中事件只针对input输入框和textarea框内的内容选中时才调用onselect方法
通过this.value或者input框对象.value可以获取到用户输入的框里的值,当把这个代码写到oninput的方法体中的时候,可以做到实时获取用户输入的信息,删除用户输入的信息,也会自动调用此方法
onsubmit事件可以用来判断用户提交的信息是否合规,不合规return false;
点击下拉框中的option才会才会调用onchange方法,如果option标签中没有写value属性的值,会默认value值是option标签之间的值
节点
节点概述
//总结HTML中有五种节点
// 文档节点9,元素节点1,属性节点2,文本节点3,注释节点8,节点的意思可以理解成是一节一节的如元素节点的nodeValue属性的值是一个null,不是没有,而是我们把他归类为了文档节点,所以打印结果是null,另外文档中的空白部分也是节点,是文档节点,要想知道一个节点的信息,要先获取到这个节点,
//注意最顶层的节点是文档节点,我们没有办法获取,这个是系统已经封装好的document对象我们拿到了对象,可以调属性和方法获取我们要的属性和方法的值 ,文档的下一级就是HTML元素节点,如何获取我们要找的节点呢,通过document.getElementById(元素的ID值),或者自己查手册,获取我们要的元素,文档对象调用一个方法获取到一个元素的对象,然后我们调用元素对象的方法或者属性得到我们想要的元素的值,元素节点的下一级还会有很多同级或者平级的元素,当我
// 下一级是子元素,
// 同级的其他标签元素节点,或者空白的文本节点,注释部分的注释节点
//这是树状结构,因此在找通过一个节点找另外一个节点的时候,就要先找到两个节点所处的同一个父节点,然后通过父节点再去找,
//节点的树状图如下
//文档节点
//<HTML>根元素节点,下面有两个子节点
//<head>和<body>两个子节点
//其下还有很多的(节点)标签,标签中还有属性,和属性值,以及双标签之间的文本节点(显示内容),注意以后找节点关系就靠的这个
节点的运用
document.getElementById('元素的ID值');//通过元素的ID获取到元素的值
document.getElementsByTagName('元素名字');通过元素的名字类型名字找到一组元素节点
document.getElementsByClassName('class属性的值);通过元素节点的class属性值找到一组元素节点
document.getElementsByName('name属性的值');通过元素节点的class属性值找到一组元素节点
总结获取到一个一个元素的方法就是上面的这些,我们为什么要获取,因为我们要用,获取元素之后再进行对元素节点的一些操作,一般增删改查,或者拿到里面的某些内容进行传值,或者塞值
节点的增删改查
添加
1创建一个元素节点document.createElement('节点的标签名例如div 或 img');
2.设置属性 子元素节点变量.setAttribute('属性名','属性值');
3.添加到他要去的父节点下 父元素节点变量.appendChild( 子元素节点变量);
第二种的添加的方式
1.var img=document.createElement('节点名');//创建一个元素节点
2.var attr= document.createAttribute('属性名');//创建属性节点
3.attr.value='./images/5.jpg';//给属性赋值
4.img.setAttributeNode(attr);//将属性添加到属性节点的位置
5.did.replaceChild(img,另一个节点对象老的);//将一个节点替换成另一个节点
添加文本节点
var text=document.createTextNode('文本的内容');
父节点.appendChild(text);
克隆一个原有的节点
var newSpan=span.cloneNode(true);//不给参数true的时候只会创造一个节点,不会有节点内的文档节点
父节点.appendChild(newSpan);
--------------------------------------------------------------------
父元素删除其下的子节点,
uid.removeChild(子节点对象);
--------------------------------------------------------------------
插入;这个是在一个节点之前插入元素
这个插入式添加相当于是一种有条件的添加(指定位置添加)
和添加一二两步相同,第三部变成
父节点变量.insertBefore(新节点,插在哪个节点之前);
form节点
form节点.submit();//调用提交的方法,不用点提交键就能提交
bom
bom对象是js关于浏览器对象的一个知识点
bom对象中的一些方法和属性,不需要用对象调用,直接写方法名就有返回值
bom对象有的对象,location对象,navigator对象,history对象,screen对象,
-----------------------------------------------------
location对象中存放着浏览器地址栏的所有的信息,里面封装了很多的属性,例如href属性--->location.href="http://www.baid.com";写了这行代码,运行会跳到百度首页
-----------------------------------------------------
navigator对象存放的是浏览器的相关的信息,例如浏览器的版本信息,做兼容的时候会用到这个
-----------------------------------------------------
history对象,是浏览器的历史对象,操作历史用这个对象里的属性和方法,例如前进方法,forword(),后退方法back();向前向后的go(num);方法,注意的是参数num可以是正数也可以是负数,是多少跳到第几步
-----------------------------------------------------
screen对象,是屏幕对象,
screen.availHeight表示浏览器可用的高度,要比屏幕的小,多出一个任务栏的高度,
screen.availWidth表示浏览器可用屏幕的宽度,最高与屏幕的宽度相同
screen.width获取到屏幕的宽度
screen.height获取到的是屏幕的高度
-----------------------------------------------------
window对象有很多全局的方法和属性,例如警告框,alert();提示框confirm();输入框prompt();
一些不常用的操作方法操作浏览器的窗口
moveTo(100,200);//y移动到固定的坐标
moveBy(20,20);//一次移动坐标的大小
resizeTo(200,200);//窗口变成坐标
resizeBy(10,30);//窗口一次改变坐标点大小,变大
杂项
js的作用是
1表单验证2加特效3书写Ajax:无刷新请求数据库
----------------------------------------------
js的特点
1是浏览器脚本语言2跨平台3安全,4缺点:兼容性不好
----------------------------------------------
js书写的位置四种地方
1.div内的onclick属性
2.script标签之间
3.script标签的src属性中外部引入
4.写在a链接的href属性,会阻断原来的效果
----------------------------------------------
js的变量
用var 加上变量名进行声明,字母数字下划线美元符号,严格区分大小写,不能以数字开头非关键字,汉字(不推荐),可以直接给变量赋值,也可以之声明不赋值,但是调用的不赋值的变量会报undefined,
----------------------------------------------
js报错不是在页面中,是在控制台可以看到,用console.log(变量名)用来打印
----------------------------------------------
js的注释
//单行注释,/**/多行注释
----------------------------------------------
js的结束符是分号,注意js代码一行写一句的时候可以不写分号进行结束,但是后期的js代码是用软件都写在一行所以为了规范必须加分号结束符
----------------------------------------------
js的数据类型
js的数据类型用typeof(变量名);来判断,有六种数据类型
boolean string number objecet function undefined
boolean类型的值只有true和false,注意只能小写,大写报错,js严格区分大小写
string类型声明必须加上单双引号,注意js中单双引号都能解析变量
number类型除了数字,还有NaN表示不是数的数,Infinity正无穷,--Infinity负无穷
--------------------------------------------
object类型是对象型,null也是对象,
----------------------------------------------
function是函数类型
----------------------------------------------
undefined是只声明而未赋值的变量都是undefined,或者直接给给一个变量赋值为undefined
函数-->return false;可以阻断函数,弹框也可以阻断函数
isNaN();判断一个变量是不是NaN类型的,返回值是一个布尔值
注意任何一个数与NaN运算的值都是NaN
-----------------------------------------------
函数的声明方式 3种
var one=function(){}
var two=new Function("函数体");注意参数位置写上函数体
function three(){}
-----------------------------------------------
函数的调用是--->函数名();
-----------------------------------------------
js数据类型的转换,强转,自动转
parseInt();强转为int型,字符串前面的数字部分转为数字,纯字符转为NaN,浮点数的小数部分会去掉,
parseFloat();强转为浮点型,
Number();强转为一个数字,注意空字符串转为0,其他的字符串转为NaN
1.如果是布尔值，true和false将分别转换为1和0
2.如果是数字值，只是简单的传入和返回
3.如果是null，返回0
4.如果undefined，返回NaN
String();强制将一个值转为字符串
1,数字都能转成字符串的数字,
2,对象会转"[object Object]"
3,布尔型会转成字符串的布尔值
4,undefined的会转成字符串的undefined
Boolean();强制转为一个布尔值
有七种会转为false其他的都是true
七种:false,0,0.0,undefined,null,空字符串,NaN
注意任何非空字符串都转为布尔值都是true,两个引号之间没有东西转为false
自动转
记住下面的题
var res=100+100+'100';//结果是200100
var res=100+'100'+100+100;//结果是100100100100
var res=100+'100'+(100+100);//结果是100100200
var res=100-'100'-100;//结果是-100
var res=100*'100';//结果是10000
正则
内置对象,是js中系统定义好的对象,每一个对象内都有定义好的属性和方法供调用,调用之前除了Math对象是用类名调用的,其他的对象都一样,在手册中,通用的一般是所有的对象都有的,而其他的属性和方法才是我们重点要记得,一个对象的方法和属性提供的越多,则这个对象的功能就越强大
布尔对象, 字符串对象 数组对象 日期对象 正则对象 数学对象
---------------------------------------------
注意当一个正则表达式要完成多个要求的时候,可以把多个要求分成多个正则表达式的字符串来进行匹配,以求降低难度
字符串对象
创建对象的方法与布尔相同,new和强转,还可以直接定义一个变量,变量的值用单双引号括起来,注意所有的内置对象强转用到数据类型的名称的首字母都是大写的.
---------------------------- ----------------------------
属性,length,基本上是通用的,所有的内置对象基本都有这个属性,作用是获取字符串的长度
---------------------------- ----------------------------
String对象还有很多的方法,这些方法手册上,自己查
数组对象 Array
创建数组对象的方法3种
1.--->var arr=new Array(num);注意num可以不写,写了表示定义的数组有num个单元,或者说长度是num
2.--->var arr=[1,2,3];注意方括号中的是值
3--->var arr=new Array(1,2,3);注意参数位置直接写的就是数组的值
------------------------------------
具体的对象属性和值看手册
面试题,数组双向通道如何建立,用的是四个函数
pop(无参数);删除并返回数组的最后一个单元
push(有参数);方法可向数组的末尾添加一个或多个元素，并返回新的长度。参数有几个就向数组末尾追加几个单元
unshift(有参数);向数组的开头添加一个或更多元素，并返回新的长度。
shift(无参数);删除并返回数组的第一个元素
---------------------------- ----------------------------
布尔对象
创建对象的方法两种,基本上都有两种,new Boolean(); 和 Boolean(一个值);
转换成false的数据类型有七种,
0, 0.0, null, undefined, 空字符串, NaN, false
其他的值都是转为true
数学对象Math
注意Math是静态对象,调用属性和方法的时候要用Math.来调用,不用new
获取随机说m,n之间的代码---->Math.ceil(Math.random() *(n-m+1)) + m-1;
ceil()将一个数字进一取整
random()获取0到1之间的随机数
正则对象RegExp
创建正则对象的方式两种,一种是new另一种是这届写一个正则表达式赋值给变量例如
var one=new RegExp();注意两个参数,参1是正则表达式,参2是可写的正则修正符
var two=/正则表达式/模式修正符;
---------------------------------------
模式修正符
i表示不区分大小写
g表示全局匹配,注意全局匹配要配合match(正则表达式)函数配合才行,注意match()函数是字符串函数,所以调用match的对象是要匹配的字符串
---------------------------------------
正则是一个强大的信息采集工具
正则对象的方法
exec(要匹配的字符串);匹配成功返回一个存放匹配到数据数组,匹配不成功返回null
test(要匹配的字符串);返回值是布尔值
---------------------------------------
[]-->表示查找方括号中的任意一个字符,例如
[0-9]表示匹配数字 [a-z]表示匹配小写字母 [A-Z]表示匹配大写字母
^表示除了或者以什么开头,用在[]外表示以方括号内的字符开头,[^a]表示除了a
()表示子组,小括号内的部分匹配一次,整体再匹配一次
-------------------------------------------------------------
原子符
.点表示的匹配除了换行回车之外的任意字符
\w表示查找字母数字下划线
\W表示查找除了字母数字下滑线
\d表示匹配数字
\D表示匹配除了数字
\s表示匹配空白字符
\S表示匹配非空白字符
\b表示匹配单词的边界,注意这里只能匹配到英文的单词,如果英文后有数字和中文,则表示会认为是边界
\B表示匹配非单词边界,一般是一个字符串中间的部分
------------------------------------------------------
量词
n+ 表示匹配到至少包含一个n的字符串
n*表示包含0个或多个n的字符串
n?匹配任何包含0个或一个n的字符串
n{m}匹配包含n的字符串长度为m
n{x,y}匹配包含n的长度为x或y的字符串
n{x,}匹配包含n的字符串长度至少为x个字符
n$表示以n结尾的字符串
?=n匹配任何其后紧接指定的字符串为n的字符串
?!n匹配任何其后没有紧接着是n的字符串
-------------------------------------------
如果既想忽略大小写,又想全局匹配则在在模式修正符的位置写上两个模式修正符就行了
日期对象 Date
创建对象的方法是用new,-->var time=new Date();注意一般不传参数也可以传,参数的顺序是年月日时分秒
date对象常用的函数
getFullYear()----->返回一个当前系统的年份,注意,在开发中,我们不能直接用js来获取本地的事件来显示在网页中,要获取服务器的时间然后再塞进网页中的对应位置,下面是PHP获取的系统时间
date_default_timezone_set("PRC");
echo date("Y-m-d l H:i:s A");
-------------------------------
getMonth();获取月份,注意月份是从0月开始的,用的时候要加1
-------------------------------
getUTCDay();---->获取当前时间是一周中的第几天,注意这里返回值是0-6,0代表的是周日,实际开发中可以将返回值与数组的下标结合,数组的值是周一,周二,.......
-------------------------------
getDate()返回值是1-31
-------------------------------
getHours()返回 Date 对象的小时 (0 ~ 23)。
-------------------------------
getMinutes()返回 Date 对象的分钟 (0 ~ 59)。
-------------------------------
getSeconds()返回 Date 对象的秒数 (0 ~ 59)。
-------------------------------
toLocaleTimeString();将得到的当前时间转为一个字符串,结果是下午5:14:31
-------------------------------
js中的时间是用无刷新技术实现的,要用到定时器
setInterval();参数有两个,第一个是匿名函数,用来写操作,参数2是一个数字单位是毫秒,功能是没隔参数2毫秒执行以下参数一的操作
清除定时器的方法window.clearInterval(设置定时器时赋给的变量名);
注意在网上查的信息大部分是直接写setInterval();没有调用的对象,有一个调用的对象是self.setInterval();说明调用的是当前的对象,
----------------------------------
定时炸弹
setTimeout();参数有两个,一个是匿名函数,另外一个是时间,和定时器参数是一样的,区别在于,定时器是多次执行,定时炸弹是只能执行一次, window.clearTimeout(设置定时炸弹的变量名);这个是清除定时炸弹用的,可以不清,因为他只执行一次,
jQuery
概述
jquery是一个框架,是一个库,他是将Javascript进行封装,以供开发者调用的时候更加的方便,jQuery解决了很多的不兼容的问题,用起来更加的方便.
我学的是1.8.3的版本,最新的是3.6的版本,结尾是min.js表示的是压缩版本,
开发的时候我们用什么功能根据手册就可以了
----------------------------------------------------
开发的第一步是将jquery引入到HTML文件中,引入是在head标签的script标签的src属性中写入所在的路径.引入是否成功用alert($);进行测试,$符代表的是jQuery对象,我们在引入的时候有两种引入的方式,第一种是本地引入,第二种是直接在src的值部分传一个网络路径,例如百度前端资源公共库,或者淘宝360都有这种资源公共库
----------------------------------------------------
我对整个jquery做的总结就是
找到你要操作的节点,然后要么增删改这个节点,要么给节点加上一个样式,或者点击的事件或者匹配或者传输交互,注意在jquery代码中也是可以写JavaScript代码的,
----------------------------------------------------
速记分类
----------------------------------------------------
选择器:
简单的说就是找到我们要操作的节,
基本的选择器有
ID选择器----->根据一个节点的ID值去找到这一个节点,语法是$(#id值);
元素选择器--->通过标签名找到所有的节点语法是$("标签名");
类选择器----->通过节点的class属性是值找到这个节点;$("class属性值");
匹配到所有节点的选择器---->$("*");
注意选择器的使用是可以一次用多个选择器的,例如$("myid,idv,myclass");注意多个选择器中间用逗号隔开表示的是多个选择器各选各的,不是要每一个选择器都要满足条件.
----------------------------------------------------
层级选择:就是根据节点的关系来找节点,例如
1,祖先元素 空格 后代元素--->匹配到祖先元素下的标签名和后代元素相同的元素;
2,父元素 > 子元素----->匹配到父元素下所有的与子元素相同的节点,孙子级别的是匹配不到的;
3,元素1 + 元素2--->匹配到元素1后面是元素2的所有的元素(注意这里是同级的),匹配的范围是整个文档中所有符合条件的元素;
4,元素1 ~ 元素2--->匹配到元素1之后同级的所有的名字是元素2的节点;
----------------------------------------------------
1,父级元素 : 条件单词或者条件方法()----->匹配到所有的符合条件的节点,有的是根据属性值作为条件,有的是根据奇数偶数,有的是根据索引值,等等吧
下面是没有冒号之前没有父级元素的
2,$(":input")匹配所有 input, textarea, select 和 button 元素
$(:text)匹配所有的单行文本框
----------------------------------------------------
$("元素名[属性名]");通过属性名找到具有此属性的节点,
$("元素名[属性名='属性值']");通过属性名=具体属性值,找到符合条件的的节点,
[属性名 ^= 属性值]匹配属性值以固定值开头的元素
$("input[id][name$='man']")多重选择器并用来进行匹配,符合有ID属性且name属性值以man结尾
文档处理
其中是对节点的 1插入节点,2删除节点3替换()修改节点4复制节点(克隆)
筛选
也是为了找到节点,不过这里面基本上都是方法,更倾向于从一个集合里做一个筛选,可以理解成过滤匹配,或者从一个集合里查找想要的节点
事件
事件就是找到节点之后,再给节点添加各种事件,当然这里还有一些简单的动画效果,重点记忆下面的方法
先让所有的HTML标签加载,再去执行jQuery操作的方法,功能同于js中的window.onload=function(){},
$(document).ready(function(){
// jquery中页面加载完成之后执行的方法
});
与上面方法作用相同
$(function(){
// jquery中页面加载完成之后执行的方法
});
on()方法,参数一是事件的类型,参数二是一个匿名函数,即事件处理函数
hover();参数1和参数2都是匿名函数,参数1是鼠标移入时调用的方法,参数2是鼠标移出时调用的方法
----------------------------------------------------
遍历:可用于例遍对象和数组。
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});
each方法有两个参数,参数一是要遍历的对象或者数组,参数二是一个匿名函数 i 表示的是下标索引,n表示的是下标对应的值,当我们拿到了下标和值的时候就可以做一些我们想做的操作,比如获取数据,或者添加事件
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});
----------------------------------------------------
$.trim(" hello, how are you? ");去掉字符串起始和结尾的空格。
动态的创建一个元素节点
$("<div></div>");--->创建一个div标签,然后可以把它放到他要放到位置;
创建一个 <input> 元素，同时设定 type 属性、属性值，以及一些事件。
$("<input>", {
type: "text",
val: "Test",
focusin: function() {
$(this).addClass("active");
},
focusout: function() {
$(this).removeClass("active");
}
}).appendTo("form");
-----------------------------------
$("节点").each(匿名函数) ;让匹配到的所有节点遍历去执行一个匿名函数,
$("节点").get(num);从获取到的节点集合中获取到第num减一个节点对象
-----------------------------------
属性
atrr();参数如果是一个的话,就是获取属性的值,如果说是两个的话就是设置属性;如果设置多个属性的值的话,属性名和值之间需要用冒号链接,每对属性之间用逗号隔开,多个属性用一个大括号包起来,格式和json的格式是一样的.
1,$("img").attr("src"); 2,$("img").attr("src","test.jpg");
3,$("img").attr({ src: "test.jpg", alt: "Test Image" });
--------------------------------------------------------------------
removeAttr("属性名");给匹配到的节点删除一个属性
$("img").removeAttr("src");
---------------------------------------------------------------------
prop()获取在匹配的元素集中的第一个元素的属性值。
参数是一个的属性的话获取的是属性的值
参数是两个的话是设置,属性的值
注意.removeProp("用prop设置的属性名");用来删除由.prop()方法设置的属性集
---------------------------------------------------------------------
addClass("类名");为每个匹配的元素添加指定的类名。
removeClass("类名");为匹配到的标签删除类名或指定的类名.
toggleClass("类名");如果存在（不存在）就删除（添加）一个类。
css();参数有一个的时候是获取属性的值,参数两个的时候是设置属性值.
---------------------------------------------------------------------
html();无参数的时候表示获取匹配到节点的值,有参数的时候表示设置匹配到的标签内的值,当参数是方法的时候,表示遍历添加获取到的标签内的值.注意text()方法和val()方法的功能与html()方法相同.
jQuery中ajax
get方式
$.get(url, [data], [callback], [type]);
--------------------------------------
url:待载入页面的URL地址,这是处理异步请求需要配合的PHP脚本文件,一般是请求数据库的操作,(注意这个参数是必须写的)
data:待发送 Key/value 参数。一般是需要处理的数据,这里要用json格式写,外面包着大括号
callback:载入成功时回调函数。当异步请求成功自动调用这个函数,
type:返回内容格式，xml, html, script, json, text, _default。第四个参数是确定返回值是什么格式,一般写是json格式
--------------------------------------
例子
$.get('./1.php', {"id":1, "name":"admin"}, function(data){
// console.log(data);
// 声明空字符串。
var str = '';
// 遍历
$.each(data, function(i, n){
// console.log(n);
str += i + ':' + n + '<br/>';
});
// 写入 did
$('#did').html(str);
}, 'json');
post方式
$.post(url, [data], [callback], [type]);
注意他的参数和get的参数是相同的
----------------------------------------------
url:待载入页面的URL地址,这是处理异步请求需要配合的PHP脚本文件,一般是请求数据库的操作,(注意这个参数是必须写的)
data:待发送 Key/value 参数。一般是需要处理的数据,这里要用json格式写,外面包着大括号
callback:载入成功时回调函数。当异步请求成功自动调用这个函数,
type:返回内容格式，xml, html, script, json, text, _default。第四个参数是确定返回值是什么格式,一般写是json格式
-----------------------------------------------------
例子
$.post('./1.php', {"id":1, "name":"admin"}, function(data){
// console.log(data);
// 声明空字符串。
var str = '';
// 遍历
$.each(data, function(i, n){
// console.log(n);
str += i + ':' + n + '<br/>';
});
// 写入 did
$('#did').html(str);
}, 'json');
ajax自定义
$.ajax(url,[settings]);
注意:使用的时候一般用这个,因为他可以写异步出现错误时的处理方法.
参数两个:url:一个用来包含发送请求的URL字符串。一般是一个PHP脚本,用来处理请求连接服务器的.
settings:AJAX 请求设置。所有选项都是可选的。一般会选的几项:
1.type-->请求方式GET或者POST
2.async-->用异步还是同步,false表示异步
3.data---->请求处理的数据
4.success--->异步请求成功调用的方法
5. beforeSend-->发送异步请求之前调用的方法
6.error--->请求失败执行的方法
7.dataType-->返回数据的格式,一般写json
8.起始还有很多设置的参数,具体的参数去手册查找,注意,所有的参数的格式都是json键值对的形式,
----------------------------------------------
例子
$.ajax('./1.php', {
type: "POST",
async: false,
data: {"id":1, "name":"admin"},
success: function(data)
{
$("#time").fadeOut(200);
// console.log(data);
// 声明空字符串。
var str = '';
// 遍历
$.each(data, function(i, n){
// console.log(n);
str += i + ':' + n + '<br/>';
});
// 写入 did
$('#did').html(str);
},
beforeSend: function(){
// $("#did").html('加载中....');
$("#time").show();
},
error: function()
{
console.log('数据异常。');
},
dataType: 'json',
timeout:2000
});
ecma-script
基础语法
运算符
算数运算符+ - * / %
字符串运算符 +
赋值运算符 = 注意变量支持连续赋值 a=b=c=10;
比较运算符> , < , >=, <= ,!= ,==, ===, !==
注意不要比较浮点数,容易出错
逻辑运算符&&与, ||或, !非
注意,js中的逻辑运算符的返回结果是运算的值,不是布尔值,例子如下记忆
var a=1&&2&&3;结果是3 思考的方式是先将运算的值强转成一个布尔值,然后再去运算,与的优先级要比或的优先级高
位运算符 &与 |或 ^异或 <<左移 >>右移
三元运算符 ? :
函数运算符是()--->函数名();
注意delete(变量名);不能删除全局变量,因为全局变量一个是否可删除的属性,是false,delect()可以删除对象的属性,如果成功就返回true,删除不成功返回false
流程控制
if(){}else{}
for(var i=0;i<num;i++){循环体}
while(){}
do{}while()
switch(值){case 1:代码段;break;
default:代码段;break;}
杂项
document.write('要写入HTML页面中的内容');//该方法一般用在测试中
如果我们需要往一个标签内写入一些东西可以用(加入是一个div)
---->div对象.innerHTML="要写入div中的 值";
注意,一般往一个标签内写入的是一个值,但是也是有例外的,例如在一个下拉列表select中写入多个<option>标签以及标签的值的时候,可以将所有的option标签和值放到一个字符串中,然后再用innerHTML将这个字符串写入select标签之间,就有了下拉列表的效果
总结innerHTML不止可以写入我们要写的标签的值,还可以直接往里面写标签
--------------------------------------
json--->是一个语言通用的数据容器,所有的语言都有这种键值对用分号连接的写法,这种是为了数据的交互,例如我们调用一个别人写好的接口,气象局的接口,内部有我们需要的天气数据,获取,解析,塞到我们要用的地方,
----------------------------------------------------
当我们在写程序的时候,想改变什么就从新去设置那个东西,他可能是一个属性,可能是一个方法,也可能是一个配置文件,也可能是一个新的对象,需要什么功能就调什么样的方法,系统没有提供那个方法,就自己去创造一个方法,
要什么有什么,求什么得什么
开关的作用就是一个权限,该开启的时候开启,用完了记得关闭,权限可能就是可不可以使用一个功能,一般是true和false,当然也可以自定义一些标记
----------------------------------------------------------------------
alert()是警告框,只有一个确定,confirm()是提示框,有一个确定一个取消
----------------------------------------------------------------------
正常的获取元素css的行内样式是通过----->元素对象.style.属性名,但是如果css样式不是写在行内这种方法就获取不到值,大招-->getComputedStyle(元素的变量名);这个方法获取到元素的所有属性,获取到这个方法的返回值,再用返回值点上要获取到属性名,就能获取到该属性的值,但是不要用这个,效率太低,当我们拿到了一个元素的对象,也可以用 对象.属性来获取到属性的值.拿到了对象我们还可以赋值,不但可以调用还可以修改
全选,全不选,反选的实现
全选是将所有的checked=true,全不选是将所有的checked=false,反选是将input[i]checked=!input[i]checked;说白了就是将它的值取反再付给他
--------------------------------------------------
网页中所有的a链接可以用document.links来获取,得到的是一个集合返回的是一个数组,获取到当前页面具有href属性a链接,
document.anchors获取到当前页面具有name属性a链接,
document.forms获取到所有的是当前页面的所有表单
document.images获取当前页面的所有的img节点,返回的是一个集合
document.all获取当前页面中的所有节点,返回的是一个集合
document对象有很多属性,我们通过调用这些属性可以拿到我们想要的对象,或者说元素,每个载入浏览器的HTML文档都会是document的对象
下面是document的一些其他的属性
body-->提供对body的直接访问,可以获取到所有body体中的元素,返回值是一个集合
cookie--->返回当前文档相关的所有cookie
domain--->返回当前文档的域名
referrer--->返回前一个访问页面的URL地址
title---->返回文档的标题
url--->返回当前文档的url
函数
函数:函数在定义的时候是可以给默认值的,一个函数有多个参数,如果不给的话,可以选择用三元运算符或者var c=c||3;给默认值,这种判断给添加默认值,
如果调用函数传参个数与参数列表的个数不一致的情况下,多的话会自动忽略,少的话会报参数undefined
----------------------------------------------------------------------------
一个函数有return的时候,调用函数的时候会获取到return的结果,但是获取不是显示,可以用console来打印调用的函数,一个函数不写return的话控制台打印的时候会报undefined,return后面如果不写的话也会报undefined,
注意要想阻断js有两种方法,一种是return,另外一种是alert,return可以returnfalse,或者只写一个return
----------------------------------------------------------------------------
函数的声明有三种方式
第一种和PHP中的一样,function one(){},这种声明的方式可以在哪都能调用的到,不分先声明,还是先调用
第二种是用构造函数的方式声明一个函数,var two=new Function('函数体');这种声明方式注意函数体是写在小括号内且用引号引着的
第三种是用声明变量的方式来声明函数,var three=function(){}
----------------------------------------------------------------------------
js中数组是属于对象类型的,arguments是参数列表的意思,arguments.length;得到参数列表的长度,要想获取参数中的某一个可以用数组下标的方式来取值,arguments[下标],注意下标是从零开始的,不要超了,超了取到的是undefined
----------------------------------------------------------------------------作用域
一个变量先调用后声明,结果是undefined,不声明就调用报错,一个变量定义在函数内是局部变量,定义在函数外就是一个全局的变量,
----------------------------------------------------------------------------
注意js的函数中是可以再定义函的,内部的函数叫闭包函数或者局部函数,以后再插件中会经常有这种函数,PHP中是不可以的,PHP中有回调函数
--------------------------------------
常用的函数
eval(字符串);将一段字符串当做js的脚步执行,经常用,效率好像不高,不安全
escape(URL地址);将url的参数部分转为Unicode码
unescape(转码后url);将上面的还原成正常的
对象
对象的三种声明方法
第一种var one=new Object();
第二种var two={}
第三种 function Girl(n, a)
{
// 成员属性
this.name = n;
this.age = a;
// 成员方法
this.sing = function()
{
alert('sing');
}
this.dance = function()
{
alert('dance');
}
}
var obj = new Girl('张三', 18);//注意这里就用new将一个方法转成了一个对象,
---------------------------------------------------
对象中对属性的操作
添加属性,----->对象的变量名.属性名=属性值;
删除属性------->delect 对象的变量名.属性;
修改属性------>与添加属性的操作相同
查看属性------->对象的变量名.属性名;
调用方法------->对象的变量名.方法名();
注意访问属性可以用 点. 也可以用方括号,作用与点一样
对象访问属性---->对象变量['属性名'];注意这里的属性是有引号引着的,不引就代表添加属性.
------------------------------------------------------
快速读取对象的属性用for in
for( i in 对象的变量){
console.log(变量[i]);
}//注意 i 是可以随意写成其他变量名的,可以不用var来声明一个变量,直接写变量名,数组也属于对象型,也可以用这个,遍历对象用的,
------------------------------------------------------
with(对象名){
console.log(属性名);
}//是根据已经知道的对象的属性名获取值,不像for....in是自动的,他相当与是手动的,类似于数组中知道下标取值
------------------------------------------------------
AJAX
概念
Ajax是Asynchronous JavaScript and XML的缩写，即“异步的JavaScript和XML技术”。
作用是实现无刷新更改页面,
----------------------------------------------------------------
实现异步加载的步骤四步
1.实例化一个ajax对象,
var a =new XMLHttpRequest();
//注意XMLHttpRequest是AJAX的基础。XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新
2.初始化
a.open("请求的方式","处理的文件","布尔值");
//注意,请求方式有get和post方式两种,两种方式的区别是,get传输的数据有限,传的参数显示出来,post方式传的值大小不限制,参数不显示, 处理文件是后台服务器的处理脚本,布尔值是true是异步,false表示的是同步.
3执行发送send();
//注意,将请求发送到服务器,string：仅用于POST请求,当send方法有参数的时候,当用post请求的时候要在send方法之前加上一句
xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);//向请求添加HTTP头
如果是get的方式的话不用加这句,括号里也不用写参数,参数是一个json字符串
4.处理结果
a.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
var str=xmlhttp.responseText;//获取到服务器返回的响应
}
}
//注意
onreadystatechange事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当readyState改变时，就会触发onreadystatechange事件。
readyState属性存有XMLHttpRequest的状态信息。
下面是XMLHttpRequest对象的三个重要的属性：
1.onreadystatechange 存储函数（或函数名），每当readyState属性改变时，就会调用该函数。
2.readyState 存有XMLHttpRequest的状态。从0到4发生变化
3.status -------->200：OK----------404：未找到页面
4.使用Callback
callback函数是一种以参数形式传递给另一个函数的函数。
----------------
1.AJAX使用open函数以GET或者POST方式，使用send函数来向PHP发送请求；
2.请求结果readyState的改变，触发事件onreadystatechange；
3.判断readyState==4并且status==200，代表请求成功，并有响应；
4.响应的值是PHP脚本输出的内容，这个内容在JS端使用responseText来接收，并进行相关处理.
bom
bom对象是js关于浏览器对象的一个知识点
bom对象中的一些方法和属性,不需要用对象调用,直接写方法名就有返回值
bom对象有的对象,location对象,navigator对象,history对象,screen对象,
-----------------------------------------------------
location对象中存放着浏览器地址栏的所有的信息,里面封装了很多的属性,例如href属性--->location.href="http://www.baid.com";写了这行代码,运行会跳到百度首页
-----------------------------------------------------
navigator对象存放的是浏览器的相关的信息,例如浏览器的版本信息,做兼容的时候会用到这个
-----------------------------------------------------
history对象,是浏览器的历史对象,操作历史用这个对象里的属性和方法,例如前进方法,forword(),后退方法back();向前向后的go(num);方法,注意的是参数num可以是正数也可以是负数,是多少跳到第几步
-----------------------------------------------------
screen对象,是屏幕对象,
screen.availHeight表示浏览器可用的高度,要比屏幕的小,多出一个任务栏的高度,
screen.availWidth表示浏览器可用屏幕的宽度,最高与屏幕的宽度相同
screen.width获取到屏幕的宽度
screen.height获取到的是屏幕的高度
-----------------------------------------------------
window对象有很多全局的方法和属性,例如警告框,alert();提示框confirm();输入框prompt();
一些不常用的操作方法操作浏览器的窗口
moveTo(100,200);//y移动到固定的坐标
moveBy(20,20);//一次移动坐标的大小
resizeTo(200,200);//窗口变成坐标
resizeBy(10,30);//窗口一次改变坐标点大小,变大
正则
内置对象,是js中系统定义好的对象,每一个对象内都有定义好的属性和方法供调用,调用之前除了Math对象是用类名调用的,其他的对象都一样,在手册中,通用的一般是所有的对象都有的,而其他的属性和方法才是我们重点要记得,一个对象的方法和属性提供的越多,则这个对象的功能就越强大
布尔对象, 字符串对象 数组对象 日期对象 正则对象 数学对象
---------------------------------------------
注意当一个正则表达式要完成多个要求的时候,可以把多个要求分成多个正则表达式的字符串来进行匹配,以求降低难度
字符串对象
创建对象的方法与布尔相同,new和强转,还可以直接定义一个变量,变量的值用单双引号括起来,注意所有的内置对象强转用到数据类型的名称的首字母都是大写的.
---------------------------- ----------------------------
属性,length,基本上是通用的,所有的内置对象基本都有这个属性,作用是获取字符串的长度
---------------------------- ----------------------------
String对象还有很多的方法,这些方法手册上,自己查
数组对象 Array
创建数组对象的方法3种
1.--->var arr=new Array(num);注意num可以不写,写了表示定义的数组有num个单元,或者说长度是num
2.--->var arr=[1,2,3];注意方括号中的是值
3--->var arr=new Array(1,2,3);注意参数位置直接写的就是数组的值
------------------------------------
具体的对象属性和值看手册
面试题,数组双向通道如何建立,用的是四个函数
pop(无参数);删除并返回数组的最后一个单元
push(有参数);方法可向数组的末尾添加一个或多个元素，并返回新的长度。参数有几个就向数组末尾追加几个单元
unshift(有参数);向数组的开头添加一个或更多元素，并返回新的长度。
shift(无参数);删除并返回数组的第一个元素
---------------------------- ----------------------------
布尔对象
创建对象的方法两种,基本上都有两种,new Boolean(); 和 Boolean(一个值);
转换成false的数据类型有七种,
0, 0.0, null, undefined, 空字符串, NaN, false
其他的值都是转为true
数学对象Math
注意Math是静态对象,调用属性和方法的时候要用Math.来调用,不用new
获取随机说m,n之间的代码---->Math.ceil(Math.random() *(n-m+1)) + m-1;
ceil()将一个数字进一取整
random()获取0到1之间的随机数
正则对象RegExp
创建正则对象的方式两种,一种是new另一种是这届写一个正则表达式赋值给变量例如
var one=new RegExp();注意两个参数,参1是正则表达式,参2是可写的正则修正符
var two=/正则表达式/模式修正符;
---------------------------------------
模式修正符
i表示不区分大小写
g表示全局匹配,注意全局匹配要配合match(正则表达式)函数配合才行,注意match()函数是字符串函数,所以调用match的对象是要匹配的字符串
---------------------------------------
正则是一个强大的信息采集工具
正则对象的方法
exec(要匹配的字符串);匹配成功返回一个存放匹配到数据数组,匹配不成功返回null
test(要匹配的字符串);返回值是布尔值
---------------------------------------
[]-->表示查找方括号中的任意一个字符,例如
[0-9]表示匹配数字 [a-z]表示匹配小写字母 [A-Z]表示匹配大写字母
^表示除了或者以什么开头,用在[]外表示以方括号内的字符开头,[^a]表示除了a
()表示子组,小括号内的部分匹配一次,整体再匹配一次
-------------------------------------------------------------
原子符
.点表示的匹配除了换行回车之外的任意字符
\w表示查找字母数字下划线
\W表示查找除了字母数字下滑线
\d表示匹配数字
\D表示匹配除了数字
\s表示匹配空白字符
\S表示匹配非空白字符
\b表示匹配单词的边界,注意这里只能匹配到英文的单词,如果英文后有数字和中文,则表示会认为是边界
\B表示匹配非单词边界,一般是一个字符串中间的部分
------------------------------------------------------
量词
n+ 表示匹配到至少包含一个n的字符串
n*表示包含0个或多个n的字符串
n?匹配任何包含0个或一个n的字符串
n{m}匹配包含n的字符串长度为m
n{x,y}匹配包含n的长度为x或y的字符串
n{x,}匹配包含n的字符串长度至少为x个字符
n$表示以n结尾的字符串
?=n匹配任何其后紧接指定的字符串为n的字符串
?!n匹配任何其后没有紧接着是n的字符串
-------------------------------------------
如果既想忽略大小写,又想全局匹配则在在模式修正符的位置写上两个模式修正符就行了
日期对象 Date
创建对象的方法是用new,-->var time=new Date();注意一般不传参数也可以传,参数的顺序是年月日时分秒
date对象常用的函数
getFullYear()----->返回一个当前系统的年份,注意,在开发中,我们不能直接用js来获取本地的事件来显示在网页中,要获取服务器的时间然后再塞进网页中的对应位置,下面是PHP获取的系统时间
date_default_timezone_set("PRC");
echo date("Y-m-d l H:i:s A");
-------------------------------
getMonth();获取月份,注意月份是从0月开始的,用的时候要加1
-------------------------------
getUTCDay();---->获取当前时间是一周中的第几天,注意这里返回值是0-6,0代表的是周日,实际开发中可以将返回值与数组的下标结合,数组的值是周一,周二,.......
-------------------------------
getDate()返回值是1-31
-------------------------------
getHours()返回 Date 对象的小时 (0 ~ 23)。
-------------------------------
getMinutes()返回 Date 对象的分钟 (0 ~ 59)。
-------------------------------
getSeconds()返回 Date 对象的秒数 (0 ~ 59)。
-------------------------------
toLocaleTimeString();将得到的当前时间转为一个字符串,结果是下午5:14:31
-------------------------------
js中的时间是用无刷新技术实现的,要用到定时器
setInterval();参数有两个,第一个是匿名函数,用来写操作,参数2是一个数字单位是毫秒,功能是没隔参数2毫秒执行以下参数一的操作
清除定时器的方法window.clearInterval(设置定时器时赋给的变量名);
注意在网上查的信息大部分是直接写setInterval();没有调用的对象,有一个调用的对象是self.setInterval();说明调用的是当前的对象,
----------------------------------
定时炸弹
setTimeout();参数有两个,一个是匿名函数,另外一个是时间,和定时器参数是一样的,区别在于,定时器是多次执行,定时炸弹是只能执行一次, window.clearTimeout(设置定时炸弹的变量名);这个是清除定时炸弹用的,可以不清,因为他只执行一次,
杂项
js的作用是
1表单验证2加特效3书写Ajax:无刷新请求数据库
----------------------------------------------
js的特点
1是浏览器脚本语言2跨平台3安全,4缺点:兼容性不好
----------------------------------------------
js书写的位置四种地方
1.div内的onclick属性
2.script标签之间
3.script标签的src属性中外部引入
4.写在a链接的href属性,会阻断原来的效果
----------------------------------------------
js的变量
用var 加上变量名进行声明,字母数字下划线美元符号,严格区分大小写,不能以数字开头非关键字,汉字(不推荐),可以直接给变量赋值,也可以之声明不赋值,但是调用的不赋值的变量会报undefined,
----------------------------------------------
js报错不是在页面中,是在控制台可以看到,用console.log(变量名)用来打印
----------------------------------------------
js的注释
//单行注释,/**/多行注释
----------------------------------------------
js的结束符是分号,注意js代码一行写一句的时候可以不写分号进行结束,但是后期的js代码是用软件都写在一行所以为了规范必须加分号结束符
----------------------------------------------
js的数据类型
js的数据类型用typeof(变量名);来判断,有六种数据类型
boolean string number objecet function undefined
boolean类型的值只有true和false,注意只能小写,大写报错,js严格区分大小写
string类型声明必须加上单双引号,注意js中单双引号都能解析变量
number类型除了数字,还有NaN表示不是数的数,Infinity正无穷,--Infinity负无穷
--------------------------------------------
object类型是对象型,null也是对象,
----------------------------------------------
function是函数类型
----------------------------------------------
undefined是只声明而未赋值的变量都是undefined,或者直接给给一个变量赋值为undefined
函数-->return false;可以阻断函数,弹框也可以阻断函数
isNaN();判断一个变量是不是NaN类型的,返回值是一个布尔值
注意任何一个数与NaN运算的值都是NaN
-----------------------------------------------
函数的声明方式 3种
var one=function(){}
var two=new Function("函数体");注意参数位置写上函数体
function three(){}
-----------------------------------------------
函数的调用是--->函数名();
-----------------------------------------------
js数据类型的转换,强转,自动转
parseInt();强转为int型,字符串前面的数字部分转为数字,纯字符转为NaN,浮点数的小数部分会去掉,
parseFloat();强转为浮点型,
Number();强转为一个数字,注意空字符串转为0,其他的字符串转为NaN
1.如果是布尔值，true和false将分别转换为1和0
2.如果是数字值，只是简单的传入和返回
3.如果是null，返回0
4.如果undefined，返回NaN
String();强制将一个值转为字符串
1,数字都能转成字符串的数字,
2,对象会转"[object Object]"
3,布尔型会转成字符串的布尔值
4,undefined的会转成字符串的undefined
Boolean();强制转为一个布尔值
有七种会转为false其他的都是true
七种:false,0,0.0,undefined,null,空字符串,NaN
注意任何非空字符串都转为布尔值都是true,两个引号之间没有东西转为false
自动转
记住下面的题
var res=100+100+'100';//结果是200100
var res=100+'100'+100+100;//结果是100100100100
var res=100+'100'+(100+100);//结果是100100200
var res=100-'100'-100;//结果是-100
dom概念
document object model
当我们对文档中的一些内容进行操作就是一个事件,浏览器的网页就是文档,
------------------------------------------------
默认行为
网页中有许多的元素,js中一切皆对象,点击一个a链接会产生跳转,点击一下submit会提交表单,点一下鼠标的右键会弹出一个框,这些都是系统自带的,我们叫默认行为,js存在是为了不想让元素执行一些自己的默认行为,
事件对象Event
注意,上面是的属性调用的对象是事件对象,事件对象是在一个按键点击之后产生的,事件源,事件类型,事件程序,事件程序是一个方法,这个方法的参数写了就是有了事件对象, 事件对象并不是必须的。根据需求，如果需要，就写上。
事件对象，是系统自动封装好的。不同的事件类型有不同的事件对象。
注意只有节点对象才有事件
大牛的话:动态元素有3个至关重要的元素,位置,尺寸和可见性
三要素--->事件源,事件类型,事件处理程序
事件源就是事件发生的元素,事件类型就是点击,双击,右键,键盘等事件,处理程序就是,我们让触发一个事件的时候我们让程序执行我们想要的行为
-----------------------------------------
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
-----------------------------------------
事件对象有很多属性和方法,属性和方法都需要对象来调用,对象是不用new的直接 event.属性;就能调用
属性常用的有
clientX返回当事件被触发时鼠标指针向对于浏览器页面（当前窗口）的水平坐标。
clientY;返回当事件被触发时鼠标指针向对于浏览器页面（当前窗口）的垂直坐标。
clientX/Y获取到的是触发点相对浏览器可视区域左上角距离，
-------------------------------------------------
pageX获取鼠标距离文档的水平坐标
pageY获取鼠标距离文档的垂直坐标
pageX/Y获取到的是触发点相对文档区域左上角距离，会随着页面滚动而改变
-------------------------------------------------
一个div元素,或其他的元素,
window和document的关系
能看到的都是窗口,看不到的整个页面是文档,,文档是放在窗口中的
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
document是window的一个对象属性
document 对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。
window对象它是一个顶层对象,而不是另一个对象的属性，即浏览器的窗口
document 当前显示的文档(该属性本身也是一个对象)
绑定事件
绑定事件的方法3种
1.直接在一个标签(或叫节点)中写一个onclick属性,例如
<div id='did' onclick=alert('绑定事件的第一种方式');></div>
2.获取到一个节点对象,然后---->did.onclick=function(){事件处理程序}
3.添加监听事件,首先获取到一个节点对象,然后--->did.addEventListener();
注意参数一是事件的类型,参数2是一个匿名函数,我们要做到处理就写在匿名函数的大括号中,也可以写一个函数的变量名,函数写在外面,总之就是参数2就是我们要执行的处理程序
-----------------------------------------------------------
第一种方法写在标签中看着不好看.显得没有条理,第二种和第三种有一个很大的区别,第二种同一类型的监听事件不能重复添加,后面的会把前面的给覆盖掉,用addEventListener();可以重复添加同意类型的事件,是我们以后的标准,对于IE浏览器,考虑到兼容性的问题,第三种不能用,可以用did.attachEvent(事件类型,匿名函数);
注意,第三种方式事件的类型不用加on
-----------------------------------------------------------
事件的类型6种,其实不止六种,常用的就这些
文档事件, 鼠标事件, 键盘事件, 表单事件, 图片事件, 窗口事件
---------------------------------------------------
冒泡
阻断冒泡e.stopproagation();//注意,阻断写在哪个方法中,则除了调用这个方法的元素的事件不会被阻断,其他的嵌套在他下面的都会被阻断
文档事件
onload文档加载事件,加载HTML页面是从上向下加载的,我们的js代码如果先写了一个获取元素,加入就是获取一个div,ID号为one,但是这个div在整个页面的 最后,我们获取的时候就会找不到,这个时候浏览器就不会加载整个页面了,为了解决这种麻烦就用到onload方法,onload方法代码段中的代码会在整个界面加载完成之后才加载
window.onload=function(){文档加载完之后才加载的代码}
-----------------------------------------------
onunload和onbeforunlod事件是,文档卸载事件,当离开这个页面或者要关闭浏览器的时候会执行方法体中的代码,可以放一些提示用户的操作,或是一些清除数据,或者见不得光的操作,具体根据需求来做
window.onunload=function(){用户要离开界面的要做的操作}
window.addEventListener('beforeunload', function (e) {
var confirmationMessage = '确认关闭窗口？';
e.returnValue = confirmationMessage;
return confirmationMessage;
});
鼠标事件
单击事件onclick, 双击事件ondblclick, 移入事件onmouseover, 移出事件onmouseout, 鼠标移动事件onmousemove, 按下事件onmousedown, 抬起事件onmouseup, 右键oncontextmenu
注意事件名都是小写的,注意调用鼠标事件是一个方法,当我们执行了某些事件的时候会自动调用这些方法中的代码段,这时候调用的对象就是我们的事件源对象,可能是一个div,也可能是窗口window,总之他们都是承载这个时间的环境.
注意,鼠标的右键事件一般是给窗口window加的,但是也可以点击右键不是给窗口加的,做到的方法是写完我们要写的事件操作,加一个return false;来阻断系统要弹的框
键盘事件
当我们点击键盘上一个键的时候会有,一个按下的事件onkeydown,或者onkeypress,当按的键松开了就会有一个onkeyup事件,
window.onkeydown = function(e){当按下了一个键的时候要执行的代码}
当我们按了一个键的时候,会产生一个事件对象e,我们通过这个事件对象e的keyCode属性可以得到我们所按的键的Unicode码,我们拿到这个码可以用switch去匹配,加入我们是做的一个游戏,我们可以匹配到一个上键,在case上的代码体里写上让人物前进的操作
表单事件
当把光标放到一个元素上,自动执行获取焦点onfouce,
当把光标从一个元素上移开,自动执行方法,失去焦点事件onblur
当点击了submit提交键,自动执行表单提交事件onsubmit
当点击了reset键时,会自动执行 表单重置事件onreset
当点击下拉列表中的一个option标签会自动执行事件onchange
当用鼠标选中了文本会自动执行,文本选中事件onselect
当在输入框内输入文字的时候,自动执行框内输入事件oninput
-----------------------------------------------------------------------
当一个图片加载失败的时候会触发onerror事件,我们可以提示用户加载失败
当加载一个图片成功的时候会自动触发onload事件
当窗口的大小改变的时候会自动触发onresize事件,做窗口的自适应用到,注意这个时间的对象是窗口window,调用的时候也要用window.onresize
当窗口的滚动条滚动的时候会自动触发onscroll事件,这个事件也是给window加的,调用的时候用window.onscroll,瀑布流会用到这个,
注意
文本选中事件只针对input输入框和textarea框内的内容选中时才调用onselect方法
通过this.value或者input框对象.value可以获取到用户输入的框里的值,当把这个代码写到oninput的方法体中的时候,可以做到实时获取用户输入的信息,删除用户输入的信息,也会自动调用此方法
onsubmit事件可以用来判断用户提交的信息是否合规,不合规return false;
点击下拉框中的option才会才会调用onchange方法,如果option标签中没有写value属性的值,会默认value值是option标签之间的值
节点
节点概述
//总结HTML中有五种节点
// 文档节点9,元素节点1,属性节点2,文本节点3,注释节点8,节点的意思可以理解成是一节一节的如元素节点的nodeValue属性的值是一个null,不是没有,而是我们把他归类为了文档节点,所以打印结果是null,另外文档中的空白部分也是节点,是文档节点,要想知道一个节点的信息,要先获取到这个节点,
//注意最顶层的节点是文档节点,我们没有办法获取,这个是系统已经封装好的document对象我们拿到了对象,可以调属性和方法获取我们要的属性和方法的值 ,文档的下一级就是HTML元素节点,如何获取我们要找的节点呢,通过document.getElementById(元素的ID值),或者自己查手册,获取我们要的元素,文档对象调用一个方法获取到一个元素的对象,然后我们调用元素对象的方法或者属性得到我们想要的元素的值,元素节点的下一级还会有很多同级或者平级的元素,当我
// 下一级是子元素,
// 同级的其他标签元素节点,或者空白的文本节点,注释部分的注释节点
//这是树状结构,因此在找通过一个节点找另外一个节点的时候,就要先找到两个节点所处的同一个父节点,然后通过父节点再去找,
//节点的树状图如下
//文档节点
//<HTML>根元素节点,下面有两个子节点
//<head>和<body>两个子节点
//其下还有很多的(节点)标签,标签中还有属性,和属性值,以及双标签之间的文本节点(显示内容),注意以后找节点关系就靠的这个
节点的运用
document.getElementById('元素的ID值');//通过元素的ID获取到元素的值
document.getElementsByTagName('元素名字');通过元素的名字类型名字找到一组元素节点
document.getElementsByClassName('class属性的值);通过元素节点的class属性值找到一组元素节点
document.getElementsByName('name属性的值');通过元素节点的class属性值找到一组元素节点
总结获取到一个一个元素的方法就是上面的这些,我们为什么要获取,因为我们要用,获取元素之后再进行对元素节点的一些操作,一般增删改查,或者拿到里面的某些内容进行传值,或者塞值
节点的增删改查
添加
1创建一个元素节点document.createElement('节点的标签名例如div 或 img');
2.设置属性 子元素节点变量.setAttribute('属性名','属性值');
3.添加到他要去的父节点下 父元素节点变量.appendChild( 子元素节点变量);
第二种的添加的方式
1.var img=document.createElement('节点名');//创建一个元素节点
2.var attr= document.createAttribute('属性名');//创建属性节点
3.attr.value='./images/5.jpg';//给属性赋值
4.img.setAttributeNode(attr);//将属性添加到属性节点的位置
5.did.replaceChild(img,另一个节点对象老的);//将一个节点替换成另一个节点
添加文本节点
var text=document.createTextNode('文本的内容');
父节点.appendChild(text);
克隆一个原有的节点
var newSpan=span.cloneNode(true);//不给参数true的时候只会创造一个节点,不会有节点内的文档节点
父节点.appendChild(newSpan);
--------------------------------------------------------------------
父元素删除其下的子节点,
uid.removeChild(子节点对象);
--------------------------------------------------------------------
插入;这个是在一个节点之前插入元素
这个插入式添加相当于是一种有条件的添加(指定位置添加)
和添加一二两步相同,第三部变成
父节点变量.insertBefore(新节点,插在哪个节点之前);
form节点
form节点.submit();//调用提交的方法,不用点提交键就能提交
JavaScript
AJAX
概念
Ajax是Asynchronous JavaScript and XML的缩写，即“异步的JavaScript和XML技术”。
作用是实现无刷新更改页面,
----------------------------------------------------------------
实现异步加载的步骤四步
1.实例化一个ajax对象,
var a =new XMLHttpRequest();
//注意XMLHttpRequest是AJAX的基础。XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新
2.初始化
a.open("请求的方式","处理的文件","布尔值");
//注意,请求方式有get和post方式两种,两种方式的区别是,get传输的数据有限,传的参数显示出来,post方式传的值大小不限制,参数不显示, 处理文件是后台服务器的处理脚本,布尔值是true是异步,false表示的是同步.
3执行发送send();
//注意,将请求发送到服务器,string：仅用于POST请求,当send方法有参数的时候,当用post请求的时候要在send方法之前加上一句
xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);//向请求添加HTTP头
如果是get的方式的话不用加这句,括号里也不用写参数,参数是一个json字符串
4.处理结果
a.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
var str=xmlhttp.responseText;//获取到服务器返回的响应
}
}
//注意
onreadystatechange事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当readyState改变时，就会触发onreadystatechange事件。
readyState属性存有XMLHttpRequest的状态信息。
下面是XMLHttpRequest对象的三个重要的属性：
1.onreadystatechange 存储函数（或函数名），每当readyState属性改变时，就会调用该函数。
2.readyState 存有XMLHttpRequest的状态。从0到4发生变化
3.status -------->200：OK----------404：未找到页面
4.使用Callback
callback函数是一种以参数形式传递给另一个函数的函数。
----------------
1.AJAX使用open函数以GET或者POST方式，使用send函数来向PHP发送请求；
2.请求结果readyState的改变，触发事件onreadystatechange；
3.判断readyState==4并且status==200，代表请求成功，并有响应；
4.响应的值是PHP脚本输出的内容，这个内容在JS端使用responseText来接收，并进行相关处理.
ecma-script
基础语法
运算符
算数运算符+ - * / %
字符串运算符 +
赋值运算符 = 注意变量支持连续赋值 a=b=c=10;
比较运算符> , < , >=, <= ,!= ,==, ===, !==
注意不要比较浮点数,容易出错
逻辑运算符&&与, ||或, !非
注意,js中的逻辑运算符的返回结果是运算的值,不是布尔值,例子如下记忆
var a=1&&2&&3;结果是3 思考的方式是先将运算的值强转成一个布尔值,然后再去运算,与的优先级要比或的优先级高
位运算符 &与 |或 ^异或 <<左移 >>右移
三元运算符 ? :
函数运算符是()--->函数名();
注意delete(变量名);不能删除全局变量,因为全局变量一个是否可删除的属性,是false,delect()可以删除对象的属性,如果成功就返回true,删除不成功返回false
流程控制
if(){}else{}
for(var i=0;i<num;i++){循环体}
while(){}
do{}while()
switch(值){case 1:代码段;break;
default:代码段;break;}
杂项
document.write('要写入HTML页面中的内容');//该方法一般用在测试中
如果我们需要往一个标签内写入一些东西可以用(加入是一个div)
---->div对象.innerHTML="要写入div中的 值";
注意,一般往一个标签内写入的是一个值,但是也是有例外的,例如在一个下拉列表select中写入多个<option>标签以及标签的值的时候,可以将所有的option标签和值放到一个字符串中,然后再用innerHTML将这个字符串写入select标签之间,就有了下拉列表的效果
总结innerHTML不止可以写入我们要写的标签的值,还可以直接往里面写标签
--------------------------------------
json--->是一个语言通用的数据容器,所有的语言都有这种键值对用分号连接的写法,这种是为了数据的交互,例如我们调用一个别人写好的接口,气象局的接口,内部有我们需要的天气数据,获取,解析,塞到我们要用的地方,
----------------------------------------------------
当我们在写程序的时候,想改变什么就从新去设置那个东西,他可能是一个属性,可能是一个方法,也可能是一个配置文件,也可能是一个新的对象,需要什么功能就调什么样的方法,系统没有提供那个方法,就自己去创造一个方法,
要什么有什么,求什么得什么
开关的作用就是一个权限,该开启的时候开启,用完了记得关闭,权限可能就是可不可以使用一个功能,一般是true和false,当然也可以自定义一些标记
----------------------------------------------------------------------
alert()是警告框,只有一个确定,confirm()是提示框,有一个确定一个取消
----------------------------------------------------------------------
正常的获取元素css的行内样式是通过----->元素对象.style.属性名,但是如果css样式不是写在行内这种方法就获取不到值,大招-->getComputedStyle(元素的变量名);这个方法获取到元素的所有属性,获取到这个方法的返回值,再用返回值点上要获取到属性名,就能获取到该属性的值,但是不要用这个,效率太低,当我们拿到了一个元素的对象,也可以用 对象.属性来获取到属性的值.拿到了对象我们还可以赋值,不但可以调用还可以修改
全选,全不选,反选的实现
全选是将所有的checked=true,全不选是将所有的checked=false,反选是将input[i]checked=!input[i]checked;说白了就是将它的值取反再付给他
--------------------------------------------------
网页中所有的a链接可以用document.links来获取,得到的是一个集合返回的是一个数组,获取到当前页面具有href属性a链接,
document.anchors获取到当前页面具有name属性a链接,
document.forms获取到所有的是当前页面的所有表单
document.images获取当前页面的所有的img节点,返回的是一个集合
document.all获取当前页面中的所有节点,返回的是一个集合
document对象有很多属性,我们通过调用这些属性可以拿到我们想要的对象,或者说元素,每个载入浏览器的HTML文档都会是document的对象
下面是document的一些其他的属性
body-->提供对body的直接访问,可以获取到所有body体中的元素,返回值是一个集合
cookie--->返回当前文档相关的所有cookie
domain--->返回当前文档的域名
referrer--->返回前一个访问页面的URL地址
title---->返回文档的标题
url--->返回当前文档的url
函数
函数:函数在定义的时候是可以给默认值的,一个函数有多个参数,如果不给的话,可以选择用三元运算符或者var c=c||3;给默认值,这种判断给添加默认值,
如果调用函数传参个数与参数列表的个数不一致的情况下,多的话会自动忽略,少的话会报参数undefined
----------------------------------------------------------------------------
一个函数有return的时候,调用函数的时候会获取到return的结果,但是获取不是显示,可以用console来打印调用的函数,一个函数不写return的话控制台打印的时候会报undefined,return后面如果不写的话也会报undefined,
注意要想阻断js有两种方法,一种是return,另外一种是alert,return可以returnfalse,或者只写一个return
----------------------------------------------------------------------------
函数的声明有三种方式
第一种和PHP中的一样,function one(){},这种声明的方式可以在哪都能调用的到,不分先声明,还是先调用
第二种是用构造函数的方式声明一个函数,var two=new Function('函数体');这种声明方式注意函数体是写在小括号内且用引号引着的
第三种是用声明变量的方式来声明函数,var three=function(){}
----------------------------------------------------------------------------
js中数组是属于对象类型的,arguments是参数列表的意思,arguments.length;得到参数列表的长度,要想获取参数中的某一个可以用数组下标的方式来取值,arguments[下标],注意下标是从零开始的,不要超了,超了取到的是undefined
----------------------------------------------------------------------------作用域
一个变量先调用后声明,结果是undefined,不声明就调用报错,一个变量定义在函数内是局部变量,定义在函数外就是一个全局的变量,
----------------------------------------------------------------------------
注意js的函数中是可以再定义函的,内部的函数叫闭包函数或者局部函数,以后再插件中会经常有这种函数,PHP中是不可以的,PHP中有回调函数
--------------------------------------
常用的函数
eval(字符串);将一段字符串当做js的脚步执行,经常用,效率好像不高,不安全
escape(URL地址);将url的参数部分转为Unicode码
unescape(转码后url);将上面的还原成正常的
对象
对象的三种声明方法
第一种var one=new Object();
第二种var two={}
第三种 function Girl(n, a)
{
// 成员属性
this.name = n;
this.age = a;
// 成员方法
this.sing = function()
{
alert('sing');
}
this.dance = function()
{
alert('dance');
}
}
var obj = new Girl('张三', 18);//注意这里就用new将一个方法转成了一个对象,
---------------------------------------------------
对象中对属性的操作
添加属性,----->对象的变量名.属性名=属性值;
删除属性------->delect 对象的变量名.属性;
修改属性------>与添加属性的操作相同
查看属性------->对象的变量名.属性名;
调用方法------->对象的变量名.方法名();
注意访问属性可以用 点. 也可以用方括号,作用与点一样
对象访问属性---->对象变量['属性名'];注意这里的属性是有引号引着的,不引就代表添加属性.
------------------------------------------------------
快速读取对象的属性用for in
for( i in 对象的变量){
console.log(变量[i]);
}//注意 i 是可以随意写成其他变量名的,可以不用var来声明一个变量,直接写变量名,数组也属于对象型,也可以用这个,遍历对象用的,
------------------------------------------------------
with(对象名){
console.log(属性名);
}//是根据已经知道的对象的属性名获取值,不像for....in是自动的,他相当与是手动的,类似于数组中知道下标取值
------------------------------------------------------
dom
dom概念
document object model
当我们对文档中的一些内容进行操作就是一个事件,浏览器的网页就是文档,
------------------------------------------------
默认行为
网页中有许多的元素,js中一切皆对象,点击一个a链接会产生跳转,点击一下submit会提交表单,点一下鼠标的右键会弹出一个框,这些都是系统自带的,我们叫默认行为,js存在是为了不想让元素执行一些自己的默认行为,
事件对象Event
注意,上面是的属性调用的对象是事件对象,事件对象是在一个按键点击之后产生的,事件源,事件类型,事件程序,事件程序是一个方法,这个方法的参数写了就是有了事件对象, 事件对象并不是必须的。根据需求，如果需要，就写上。
事件对象，是系统自动封装好的。不同的事件类型有不同的事件对象。
注意只有节点对象才有事件
大牛的话:动态元素有3个至关重要的元素,位置,尺寸和可见性
三要素--->事件源,事件类型,事件处理程序
事件源就是事件发生的元素,事件类型就是点击,双击,右键,键盘等事件,处理程序就是,我们让触发一个事件的时候我们让程序执行我们想要的行为
-----------------------------------------
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
-----------------------------------------
事件对象有很多属性和方法,属性和方法都需要对象来调用,对象是不用new的直接 event.属性;就能调用
属性常用的有
clientX返回当事件被触发时鼠标指针向对于浏览器页面（当前窗口）的水平坐标。
clientY;返回当事件被触发时鼠标指针向对于浏览器页面（当前窗口）的垂直坐标。
clientX/Y获取到的是触发点相对浏览器可视区域左上角距离，
-------------------------------------------------
pageX获取鼠标距离文档的水平坐标
pageY获取鼠标距离文档的垂直坐标
pageX/Y获取到的是触发点相对文档区域左上角距离，会随着页面滚动而改变
-------------------------------------------------
一个div元素,或其他的元素,
window和document的关系
能看到的都是窗口,看不到的整个页面是文档,,文档是放在窗口中的
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
document是window的一个对象属性
document 对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。
window对象它是一个顶层对象,而不是另一个对象的属性，即浏览器的窗口
document 当前显示的文档(该属性本身也是一个对象)
绑定事件
绑定事件的方法3种
1.直接在一个标签(或叫节点)中写一个onclick属性,例如
<div id='did' onclick=alert('绑定事件的第一种方式');></div>
2.获取到一个节点对象,然后---->did.onclick=function(){事件处理程序}
3.添加监听事件,首先获取到一个节点对象,然后--->did.addEventListener();
注意参数一是事件的类型,参数2是一个匿名函数,我们要做到处理就写在匿名函数的大括号中,也可以写一个函数的变量名,函数写在外面,总之就是参数2就是我们要执行的处理程序
-----------------------------------------------------------
第一种方法写在标签中看着不好看.显得没有条理,第二种和第三种有一个很大的区别,第二种同一类型的监听事件不能重复添加,后面的会把前面的给覆盖掉,用addEventListener();可以重复添加同意类型的事件,是我们以后的标准,对于IE浏览器,考虑到兼容性的问题,第三种不能用,可以用did.attachEvent(事件类型,匿名函数);
注意,第三种方式事件的类型不用加on
-----------------------------------------------------------
事件的类型6种,其实不止六种,常用的就这些
文档事件, 鼠标事件, 键盘事件, 表单事件, 图片事件, 窗口事件
---------------------------------------------------
冒泡
阻断冒泡e.stopproagation();//注意,阻断写在哪个方法中,则除了调用这个方法的元素的事件不会被阻断,其他的嵌套在他下面的都会被阻断
文档事件
onload文档加载事件,加载HTML页面是从上向下加载的,我们的js代码如果先写了一个获取元素,加入就是获取一个div,ID号为one,但是这个div在整个页面的 最后,我们获取的时候就会找不到,这个时候浏览器就不会加载整个页面了,为了解决这种麻烦就用到onload方法,onload方法代码段中的代码会在整个界面加载完成之后才加载
window.onload=function(){文档加载完之后才加载的代码}
-----------------------------------------------
onunload和onbeforunlod事件是,文档卸载事件,当离开这个页面或者要关闭浏览器的时候会执行方法体中的代码,可以放一些提示用户的操作,或是一些清除数据,或者见不得光的操作,具体根据需求来做
window.onunload=function(){用户要离开界面的要做的操作}
window.addEventListener('beforeunload', function (e) {
var confirmationMessage = '确认关闭窗口？';
e.returnValue = confirmationMessage;
return confirmationMessage;
});
鼠标事件
单击事件onclick, 双击事件ondblclick, 移入事件onmouseover, 移出事件onmouseout, 鼠标移动事件onmousemove, 按下事件onmousedown, 抬起事件onmouseup, 右键oncontextmenu
注意事件名都是小写的,注意调用鼠标事件是一个方法,当我们执行了某些事件的时候会自动调用这些方法中的代码段,这时候调用的对象就是我们的事件源对象,可能是一个div,也可能是窗口window,总之他们都是承载这个时间的环境.
注意,鼠标的右键事件一般是给窗口window加的,但是也可以点击右键不是给窗口加的,做到的方法是写完我们要写的事件操作,加一个return false;来阻断系统要弹的框
键盘事件
当我们点击键盘上一个键的时候会有,一个按下的事件onkeydown,或者onkeypress,当按的键松开了就会有一个onkeyup事件,
window.onkeydown = function(e){当按下了一个键的时候要执行的代码}
当我们按了一个键的时候,会产生一个事件对象e,我们通过这个事件对象e的keyCode属性可以得到我们所按的键的Unicode码,我们拿到这个码可以用switch去匹配,加入我们是做的一个游戏,我们可以匹配到一个上键,在case上的代码体里写上让人物前进的操作
表单事件
当把光标放到一个元素上,自动执行获取焦点onfouce,
当把光标从一个元素上移开,自动执行方法,失去焦点事件onblur
当点击了submit提交键,自动执行表单提交事件onsubmit
当点击了reset键时,会自动执行 表单重置事件onreset
当点击下拉列表中的一个option标签会自动执行事件onchange
当用鼠标选中了文本会自动执行,文本选中事件onselect
当在输入框内输入文字的时候,自动执行框内输入事件oninput
-----------------------------------------------------------------------
当一个图片加载失败的时候会触发onerror事件,我们可以提示用户加载失败
当加载一个图片成功的时候会自动触发onload事件
当窗口的大小改变的时候会自动触发onresize事件,做窗口的自适应用到,注意这个时间的对象是窗口window,调用的时候也要用window.onresize
当窗口的滚动条滚动的时候会自动触发onscroll事件,这个事件也是给window加的,调用的时候用window.onscroll,瀑布流会用到这个,
注意
文本选中事件只针对input输入框和textarea框内的内容选中时才调用onselect方法
通过this.value或者input框对象.value可以获取到用户输入的框里的值,当把这个代码写到oninput的方法体中的时候,可以做到实时获取用户输入的信息,删除用户输入的信息,也会自动调用此方法
onsubmit事件可以用来判断用户提交的信息是否合规,不合规return false;
点击下拉框中的option才会才会调用onchange方法,如果option标签中没有写value属性的值,会默认value值是option标签之间的值
节点
节点概述
//总结HTML中有五种节点
// 文档节点9,元素节点1,属性节点2,文本节点3,注释节点8,节点的意思可以理解成是一节一节的如元素节点的nodeValue属性的值是一个null,不是没有,而是我们把他归类为了文档节点,所以打印结果是null,另外文档中的空白部分也是节点,是文档节点,要想知道一个节点的信息,要先获取到这个节点,
//注意最顶层的节点是文档节点,我们没有办法获取,这个是系统已经封装好的document对象我们拿到了对象,可以调属性和方法获取我们要的属性和方法的值 ,文档的下一级就是HTML元素节点,如何获取我们要找的节点呢,通过document.getElementById(元素的ID值),或者自己查手册,获取我们要的元素,文档对象调用一个方法获取到一个元素的对象,然后我们调用元素对象的方法或者属性得到我们想要的元素的值,元素节点的下一级还会有很多同级或者平级的元素,当我
// 下一级是子元素,
// 同级的其他标签元素节点,或者空白的文本节点,注释部分的注释节点
//这是树状结构,因此在找通过一个节点找另外一个节点的时候,就要先找到两个节点所处的同一个父节点,然后通过父节点再去找,
//节点的树状图如下
//文档节点
//<HTML>根元素节点,下面有两个子节点
//<head>和<body>两个子节点
//其下还有很多的(节点)标签,标签中还有属性,和属性值,以及双标签之间的文本节点(显示内容),注意以后找节点关系就靠的这个
节点的运用
document.getElementById('元素的ID值');//通过元素的ID获取到元素的值
document.getElementsByTagName('元素名字');通过元素的名字类型名字找到一组元素节点
document.getElementsByClassName('class属性的值);通过元素节点的class属性值找到一组元素节点
document.getElementsByName('name属性的值');通过元素节点的class属性值找到一组元素节点
总结获取到一个一个元素的方法就是上面的这些,我们为什么要获取,因为我们要用,获取元素之后再进行对元素节点的一些操作,一般增删改查,或者拿到里面的某些内容进行传值,或者塞值
节点的增删改查
添加
1创建一个元素节点document.createElement('节点的标签名例如div 或 img');
2.设置属性 子元素节点变量.setAttribute('属性名','属性值');
3.添加到他要去的父节点下 父元素节点变量.appendChild( 子元素节点变量);
第二种的添加的方式
1.var img=document.createElement('节点名');//创建一个元素节点
2.var attr= document.createAttribute('属性名');//创建属性节点
3.attr.value='./images/5.jpg';//给属性赋值
4.img.setAttributeNode(attr);//将属性添加到属性节点的位置
5.did.replaceChild(img,另一个节点对象老的);//将一个节点替换成另一个节点
添加文本节点
var text=document.createTextNode('文本的内容');
父节点.appendChild(text);
克隆一个原有的节点
var newSpan=span.cloneNode(true);//不给参数true的时候只会创造一个节点,不会有节点内的文档节点
父节点.appendChild(newSpan);
--------------------------------------------------------------------
父元素删除其下的子节点,
uid.removeChild(子节点对象);
--------------------------------------------------------------------
插入;这个是在一个节点之前插入元素
这个插入式添加相当于是一种有条件的添加(指定位置添加)
和添加一二两步相同,第三部变成
父节点变量.insertBefore(新节点,插在哪个节点之前);
form节点
form节点.submit();//调用提交的方法,不用点提交键就能提交
bom
bom对象是js关于浏览器对象的一个知识点
bom对象中的一些方法和属性,不需要用对象调用,直接写方法名就有返回值
bom对象有的对象,location对象,navigator对象,history对象,screen对象,
-----------------------------------------------------
location对象中存放着浏览器地址栏的所有的信息,里面封装了很多的属性,例如href属性--->location.href="http://www.baid.com";写了这行代码,运行会跳到百度首页
-----------------------------------------------------
navigator对象存放的是浏览器的相关的信息,例如浏览器的版本信息,做兼容的时候会用到这个
-----------------------------------------------------
history对象,是浏览器的历史对象,操作历史用这个对象里的属性和方法,例如前进方法,forword(),后退方法back();向前向后的go(num);方法,注意的是参数num可以是正数也可以是负数,是多少跳到第几步
-----------------------------------------------------
screen对象,是屏幕对象,
screen.availHeight表示浏览器可用的高度,要比屏幕的小,多出一个任务栏的高度,
screen.availWidth表示浏览器可用屏幕的宽度,最高与屏幕的宽度相同
screen.width获取到屏幕的宽度
screen.height获取到的是屏幕的高度
-----------------------------------------------------
window对象有很多全局的方法和属性,例如警告框,alert();提示框confirm();输入框prompt();
一些不常用的操作方法操作浏览器的窗口
moveTo(100,200);//y移动到固定的坐标
moveBy(20,20);//一次移动坐标的大小
resizeTo(200,200);//窗口变成坐标
resizeBy(10,30);//窗口一次改变坐标点大小,变大
杂项
js的作用是
1表单验证2加特效3书写Ajax:无刷新请求数据库
----------------------------------------------
js的特点
1是浏览器脚本语言2跨平台3安全,4缺点:兼容性不好
----------------------------------------------
js书写的位置四种地方
1.div内的onclick属性
2.script标签之间
3.script标签的src属性中外部引入
4.写在a链接的href属性,会阻断原来的效果
----------------------------------------------
js的变量
用var 加上变量名进行声明,字母数字下划线美元符号,严格区分大小写,不能以数字开头非关键字,汉字(不推荐),可以直接给变量赋值,也可以之声明不赋值,但是调用的不赋值的变量会报undefined,
----------------------------------------------
js报错不是在页面中,是在控制台可以看到,用console.log(变量名)用来打印
----------------------------------------------
js的注释
//单行注释,/**/多行注释
----------------------------------------------
js的结束符是分号,注意js代码一行写一句的时候可以不写分号进行结束,但是后期的js代码是用软件都写在一行所以为了规范必须加分号结束符
----------------------------------------------
js的数据类型
js的数据类型用typeof(变量名);来判断,有六种数据类型
boolean string number objecet function undefined
boolean类型的值只有true和false,注意只能小写,大写报错,js严格区分大小写
string类型声明必须加上单双引号,注意js中单双引号都能解析变量
number类型除了数字,还有NaN表示不是数的数,Infinity正无穷,--Infinity负无穷
--------------------------------------------
object类型是对象型,null也是对象,
----------------------------------------------
function是函数类型
----------------------------------------------
undefined是只声明而未赋值的变量都是undefined,或者直接给给一个变量赋值为undefined
函数-->return false;可以阻断函数,弹框也可以阻断函数
isNaN();判断一个变量是不是NaN类型的,返回值是一个布尔值
注意任何一个数与NaN运算的值都是NaN
-----------------------------------------------
函数的声明方式 3种
var one=function(){}
var two=new Function("函数体");注意参数位置写上函数体
function three(){}
-----------------------------------------------
函数的调用是--->函数名();
-----------------------------------------------
js数据类型的转换,强转,自动转
parseInt();强转为int型,字符串前面的数字部分转为数字,纯字符转为NaN,浮点数的小数部分会去掉,
parseFloat();强转为浮点型,
Number();强转为一个数字,注意空字符串转为0,其他的字符串转为NaN
1.如果是布尔值，true和false将分别转换为1和0
2.如果是数字值，只是简单的传入和返回
3.如果是null，返回0
4.如果undefined，返回NaN
String();强制将一个值转为字符串
1,数字都能转成字符串的数字,
2,对象会转"[object Object]"
3,布尔型会转成字符串的布尔值
4,undefined的会转成字符串的undefined
Boolean();强制转为一个布尔值
有七种会转为false其他的都是true
七种:false,0,0.0,undefined,null,空字符串,NaN
注意任何非空字符串都转为布尔值都是true,两个引号之间没有东西转为false
自动转
记住下面的题
var res=100+100+'100';//结果是200100
var res=100+'100'+100+100;//结果是100100100100
var res=100+'100'+(100+100);//结果是100100200
var res=100-'100'-100;//结果是-100
var res=100*'100';//结果是10000
正则
内置对象,是js中系统定义好的对象,每一个对象内都有定义好的属性和方法供调用,调用之前除了Math对象是用类名调用的,其他的对象都一样,在手册中,通用的一般是所有的对象都有的,而其他的属性和方法才是我们重点要记得,一个对象的方法和属性提供的越多,则这个对象的功能就越强大
布尔对象, 字符串对象 数组对象 日期对象 正则对象 数学对象
---------------------------------------------
注意当一个正则表达式要完成多个要求的时候,可以把多个要求分成多个正则表达式的字符串来进行匹配,以求降低难度
字符串对象
创建对象的方法与布尔相同,new和强转,还可以直接定义一个变量,变量的值用单双引号括起来,注意所有的内置对象强转用到数据类型的名称的首字母都是大写的.
---------------------------- ----------------------------
属性,length,基本上是通用的,所有的内置对象基本都有这个属性,作用是获取字符串的长度
---------------------------- ----------------------------
String对象还有很多的方法,这些方法手册上,自己查
数组对象 Array
创建数组对象的方法3种
1.--->var arr=new Array(num);注意num可以不写,写了表示定义的数组有num个单元,或者说长度是num
2.--->var arr=[1,2,3];注意方括号中的是值
3--->var arr=new Array(1,2,3);注意参数位置直接写的就是数组的值
------------------------------------
具体的对象属性和值看手册
面试题,数组双向通道如何建立,用的是四个函数
pop(无参数);删除并返回数组的最后一个单元
push(有参数);方法可向数组的末尾添加一个或多个元素，并返回新的长度。参数有几个就向数组末尾追加几个单元
unshift(有参数);向数组的开头添加一个或更多元素，并返回新的长度。
shift(无参数);删除并返回数组的第一个元素
---------------------------- ----------------------------
布尔对象
创建对象的方法两种,基本上都有两种,new Boolean(); 和 Boolean(一个值);
转换成false的数据类型有七种,
0, 0.0, null, undefined, 空字符串, NaN, false
其他的值都是转为true
数学对象Math
注意Math是静态对象,调用属性和方法的时候要用Math.来调用,不用new
获取随机说m,n之间的代码---->Math.ceil(Math.random() *(n-m+1)) + m-1;
ceil()将一个数字进一取整
random()获取0到1之间的随机数
正则对象RegExp
创建正则对象的方式两种,一种是new另一种是这届写一个正则表达式赋值给变量例如
var one=new RegExp();注意两个参数,参1是正则表达式,参2是可写的正则修正符
var two=/正则表达式/模式修正符;
---------------------------------------
模式修正符
i表示不区分大小写
g表示全局匹配,注意全局匹配要配合match(正则表达式)函数配合才行,注意match()函数是字符串函数,所以调用match的对象是要匹配的字符串
---------------------------------------
正则是一个强大的信息采集工具
正则对象的方法
exec(要匹配的字符串);匹配成功返回一个存放匹配到数据数组,匹配不成功返回null
test(要匹配的字符串);返回值是布尔值
---------------------------------------
[]-->表示查找方括号中的任意一个字符,例如
[0-9]表示匹配数字 [a-z]表示匹配小写字母 [A-Z]表示匹配大写字母
^表示除了或者以什么开头,用在[]外表示以方括号内的字符开头,[^a]表示除了a
()表示子组,小括号内的部分匹配一次,整体再匹配一次
-------------------------------------------------------------
原子符
.点表示的匹配除了换行回车之外的任意字符
\w表示查找字母数字下划线
\W表示查找除了字母数字下滑线
\d表示匹配数字
\D表示匹配除了数字
\s表示匹配空白字符
\S表示匹配非空白字符
\b表示匹配单词的边界,注意这里只能匹配到英文的单词,如果英文后有数字和中文,则表示会认为是边界
\B表示匹配非单词边界,一般是一个字符串中间的部分
------------------------------------------------------
量词
n+ 表示匹配到至少包含一个n的字符串
n*表示包含0个或多个n的字符串
n?匹配任何包含0个或一个n的字符串
n{m}匹配包含n的字符串长度为m
n{x,y}匹配包含n的长度为x或y的字符串
n{x,}匹配包含n的字符串长度至少为x个字符
n$表示以n结尾的字符串
?=n匹配任何其后紧接指定的字符串为n的字符串
?!n匹配任何其后没有紧接着是n的字符串
-------------------------------------------
如果既想忽略大小写,又想全局匹配则在在模式修正符的位置写上两个模式修正符就行了
日期对象 Date
创建对象的方法是用new,-->var time=new Date();注意一般不传参数也可以传,参数的顺序是年月日时分秒
date对象常用的函数
getFullYear()----->返回一个当前系统的年份,注意,在开发中,我们不能直接用js来获取本地的事件来显示在网页中,要获取服务器的时间然后再塞进网页中的对应位置,下面是PHP获取的系统时间
date_default_timezone_set("PRC");
echo date("Y-m-d l H:i:s A");
-------------------------------
getMonth();获取月份,注意月份是从0月开始的,用的时候要加1
-------------------------------
getUTCDay();---->获取当前时间是一周中的第几天,注意这里返回值是0-6,0代表的是周日,实际开发中可以将返回值与数组的下标结合,数组的值是周一,周二,.......
-------------------------------
getDate()返回值是1-31
-------------------------------
getHours()返回 Date 对象的小时 (0 ~ 23)。
-------------------------------
getMinutes()返回 Date 对象的分钟 (0 ~ 59)。
-------------------------------
getSeconds()返回 Date 对象的秒数 (0 ~ 59)。
-------------------------------
toLocaleTimeString();将得到的当前时间转为一个字符串,结果是下午5:14:31
-------------------------------
js中的时间是用无刷新技术实现的,要用到定时器
setInterval();参数有两个,第一个是匿名函数,用来写操作,参数2是一个数字单位是毫秒,功能是没隔参数2毫秒执行以下参数一的操作
清除定时器的方法window.clearInterval(设置定时器时赋给的变量名);
注意在网上查的信息大部分是直接写setInterval();没有调用的对象,有一个调用的对象是self.setInterval();说明调用的是当前的对象,
----------------------------------
定时炸弹
setTimeout();参数有两个,一个是匿名函数,另外一个是时间,和定时器参数是一样的,区别在于,定时器是多次执行,定时炸弹是只能执行一次, window.clearTimeout(设置定时炸弹的变量名);这个是清除定时炸弹用的,可以不清,因为他只执行一次,
jQuery
概述
jquery是一个框架,是一个库,他是将Javascript进行封装,以供开发者调用的时候更加的方便,jQuery解决了很多的不兼容的问题,用起来更加的方便.
我学的是1.8.3的版本,最新的是3.6的版本,结尾是min.js表示的是压缩版本,
开发的时候我们用什么功能根据手册就可以了
----------------------------------------------------
开发的第一步是将jquery引入到HTML文件中,引入是在head标签的script标签的src属性中写入所在的路径.引入是否成功用alert($);进行测试,$符代表的是jQuery对象,我们在引入的时候有两种引入的方式,第一种是本地引入,第二种是直接在src的值部分传一个网络路径,例如百度前端资源公共库,或者淘宝360都有这种资源公共库
----------------------------------------------------
我对整个jquery做的总结就是
找到你要操作的节点,然后要么增删改这个节点,要么给节点加上一个样式,或者点击的事件或者匹配或者传输交互,注意在jquery代码中也是可以写JavaScript代码的,
----------------------------------------------------
速记分类
----------------------------------------------------
选择器:
简单的说就是找到我们要操作的节,
基本的选择器有
ID选择器----->根据一个节点的ID值去找到这一个节点,语法是$(#id值);
元素选择器--->通过标签名找到所有的节点语法是$("标签名");
类选择器----->通过节点的class属性是值找到这个节点;$("class属性值");
匹配到所有节点的选择器---->$("*");
注意选择器的使用是可以一次用多个选择器的,例如$("myid,idv,myclass");注意多个选择器中间用逗号隔开表示的是多个选择器各选各的,不是要每一个选择器都要满足条件.
----------------------------------------------------
层级选择:就是根据节点的关系来找节点,例如
1,祖先元素 空格 后代元素--->匹配到祖先元素下的标签名和后代元素相同的元素;
2,父元素 > 子元素----->匹配到父元素下所有的与子元素相同的节点,孙子级别的是匹配不到的;
3,元素1 + 元素2--->匹配到元素1后面是元素2的所有的元素(注意这里是同级的),匹配的范围是整个文档中所有符合条件的元素;
4,元素1 ~ 元素2--->匹配到元素1之后同级的所有的名字是元素2的节点;
----------------------------------------------------
1,父级元素 : 条件单词或者条件方法()----->匹配到所有的符合条件的节点,有的是根据属性值作为条件,有的是根据奇数偶数,有的是根据索引值,等等吧
下面是没有冒号之前没有父级元素的
2,$(":input")匹配所有 input, textarea, select 和 button 元素
$(:text)匹配所有的单行文本框
----------------------------------------------------
$("元素名[属性名]");通过属性名找到具有此属性的节点,
$("元素名[属性名='属性值']");通过属性名=具体属性值,找到符合条件的的节点,
[属性名 ^= 属性值]匹配属性值以固定值开头的元素
$("input[id][name$='man']")多重选择器并用来进行匹配,符合有ID属性且name属性值以man结尾
文档处理
其中是对节点的 1插入节点,2删除节点3替换()修改节点4复制节点(克隆)
筛选
也是为了找到节点,不过这里面基本上都是方法,更倾向于从一个集合里做一个筛选,可以理解成过滤匹配,或者从一个集合里查找想要的节点
事件
事件就是找到节点之后,再给节点添加各种事件,当然这里还有一些简单的动画效果,重点记忆下面的方法
先让所有的HTML标签加载,再去执行jQuery操作的方法,功能同于js中的window.onload=function(){},
$(document).ready(function(){
// jquery中页面加载完成之后执行的方法
});
与上面方法作用相同
$(function(){
// jquery中页面加载完成之后执行的方法
});
on()方法,参数一是事件的类型,参数二是一个匿名函数,即事件处理函数
hover();参数1和参数2都是匿名函数,参数1是鼠标移入时调用的方法,参数2是鼠标移出时调用的方法
----------------------------------------------------
遍历:可用于例遍对象和数组。
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});
each方法有两个参数,参数一是要遍历的对象或者数组,参数二是一个匿名函数 i 表示的是下标索引,n表示的是下标对应的值,当我们拿到了下标和值的时候就可以做一些我们想做的操作,比如获取数据,或者添加事件
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});
----------------------------------------------------
$.trim(" hello, how are you? ");去掉字符串起始和结尾的空格。
动态的创建一个元素节点
$("<div></div>");--->创建一个div标签,然后可以把它放到他要放到位置;
创建一个 <input> 元素，同时设定 type 属性、属性值，以及一些事件。
$("<input>", {
type: "text",
val: "Test",
focusin: function() {
$(this).addClass("active");
},
focusout: function() {
$(this).removeClass("active");
}
}).appendTo("form");
-----------------------------------
$("节点").each(匿名函数) ;让匹配到的所有节点遍历去执行一个匿名函数,
$("节点").get(num);从获取到的节点集合中获取到第num减一个节点对象
-----------------------------------
属性
atrr();参数如果是一个的话,就是获取属性的值,如果说是两个的话就是设置属性;如果设置多个属性的值的话,属性名和值之间需要用冒号链接,每对属性之间用逗号隔开,多个属性用一个大括号包起来,格式和json的格式是一样的.
1,$("img").attr("src"); 2,$("img").attr("src","test.jpg");
3,$("img").attr({ src: "test.jpg", alt: "Test Image" });
--------------------------------------------------------------------
removeAttr("属性名");给匹配到的节点删除一个属性
$("img").removeAttr("src");
---------------------------------------------------------------------
prop()获取在匹配的元素集中的第一个元素的属性值。
参数是一个的属性的话获取的是属性的值
参数是两个的话是设置,属性的值
注意.removeProp("用prop设置的属性名");用来删除由.prop()方法设置的属性集
---------------------------------------------------------------------
addClass("类名");为每个匹配的元素添加指定的类名。
removeClass("类名");为匹配到的标签删除类名或指定的类名.
toggleClass("类名");如果存在（不存在）就删除（添加）一个类。
css();参数有一个的时候是获取属性的值,参数两个的时候是设置属性值.
---------------------------------------------------------------------
html();无参数的时候表示获取匹配到节点的值,有参数的时候表示设置匹配到的标签内的值,当参数是方法的时候,表示遍历添加获取到的标签内的值.注意text()方法和val()方法的功能与html()方法相同.
jQuery中ajax
get方式
$.get(url, [data], [callback], [type]);
--------------------------------------
url:待载入页面的URL地址,这是处理异步请求需要配合的PHP脚本文件,一般是请求数据库的操作,(注意这个参数是必须写的)
data:待发送 Key/value 参数。一般是需要处理的数据,这里要用json格式写,外面包着大括号
callback:载入成功时回调函数。当异步请求成功自动调用这个函数,
type:返回内容格式，xml, html, script, json, text, _default。第四个参数是确定返回值是什么格式,一般写是json格式
--------------------------------------
例子
$.get('./1.php', {"id":1, "name":"admin"}, function(data){
// console.log(data);
// 声明空字符串。
var str = '';
// 遍历
$.each(data, function(i, n){
// console.log(n);
str += i + ':' + n + '<br/>';
});
// 写入 did
$('#did').html(str);
}, 'json');
post方式
$.post(url, [data], [callback], [type]);
注意他的参数和get的参数是相同的
----------------------------------------------
url:待载入页面的URL地址,这是处理异步请求需要配合的PHP脚本文件,一般是请求数据库的操作,(注意这个参数是必须写的)
data:待发送 Key/value 参数。一般是需要处理的数据,这里要用json格式写,外面包着大括号
callback:载入成功时回调函数。当异步请求成功自动调用这个函数,
type:返回内容格式，xml, html, script, json, text, _default。第四个参数是确定返回值是什么格式,一般写是json格式
-----------------------------------------------------
例子
$.post('./1.php', {"id":1, "name":"admin"}, function(data){
// console.log(data);
// 声明空字符串。
var str = '';
// 遍历
$.each(data, function(i, n){
// console.log(n);
str += i + ':' + n + '<br/>';
});
// 写入 did
$('#did').html(str);
}, 'json');
ajax自定义
$.ajax(url,[settings]);
注意:使用的时候一般用这个,因为他可以写异步出现错误时的处理方法.
参数两个:url:一个用来包含发送请求的URL字符串。一般是一个PHP脚本,用来处理请求连接服务器的.
settings:AJAX 请求设置。所有选项都是可选的。一般会选的几项:
1.type-->请求方式GET或者POST
2.async-->用异步还是同步,false表示异步
3.data---->请求处理的数据
4.success--->异步请求成功调用的方法
5. beforeSend-->发送异步请求之前调用的方法
6.error--->请求失败执行的方法
7.dataType-->返回数据的格式,一般写json
8.起始还有很多设置的参数,具体的参数去手册查找,注意,所有的参数的格式都是json键值对的形式,
----------------------------------------------
例子
$.ajax('./1.php', {
type: "POST",
async: false,
data: {"id":1, "name":"admin"},
success: function(data)
{
$("#time").fadeOut(200);
// console.log(data);
// 声明空字符串。
var str = '';
// 遍历
$.each(data, function(i, n){
// console.log(n);
str += i + ':' + n + '<br/>';
});
// 写入 did
$('#did').html(str);
},
beforeSend: function(){
// $("#did").html('加载中....');
$("#time").show();
},
error: function()
{
console.log('数据异常。');
},
dataType: 'json',
timeout:2000
});
ecma-script
基础语法
运算符
算数运算符+ - * / %
字符串运算符 +
赋值运算符 = 注意变量支持连续赋值 a=b=c=10;
比较运算符> , < , >=, <= ,!= ,==, ===, !==
注意不要比较浮点数,容易出错
逻辑运算符&&与, ||或, !非
注意,js中的逻辑运算符的返回结果是运算的值,不是布尔值,例子如下记忆
var a=1&&2&&3;结果是3 思考的方式是先将运算的值强转成一个布尔值,然后再去运算,与的优先级要比或的优先级高
位运算符 &与 |或 ^异或 <<左移 >>右移
三元运算符 ? :
函数运算符是()--->函数名();
注意delete(变量名);不能删除全局变量,因为全局变量一个是否可删除的属性,是false,delect()可以删除对象的属性,如果成功就返回true,删除不成功返回false
流程控制
if(){}else{}
for(var i=0;i<num;i++){循环体}
while(){}
do{}while()
switch(值){case 1:代码段;break;
default:代码段;break;}
杂项
document.write('要写入HTML页面中的内容');//该方法一般用在测试中
如果我们需要往一个标签内写入一些东西可以用(加入是一个div)
---->div对象.innerHTML="要写入div中的 值";
注意,一般往一个标签内写入的是一个值,但是也是有例外的,例如在一个下拉列表select中写入多个<option>标签以及标签的值的时候,可以将所有的option标签和值放到一个字符串中,然后再用innerHTML将这个字符串写入select标签之间,就有了下拉列表的效果
总结innerHTML不止可以写入我们要写的标签的值,还可以直接往里面写标签
--------------------------------------
json--->是一个语言通用的数据容器,所有的语言都有这种键值对用分号连接的写法,这种是为了数据的交互,例如我们调用一个别人写好的接口,气象局的接口,内部有我们需要的天气数据,获取,解析,塞到我们要用的地方,
----------------------------------------------------
当我们在写程序的时候,想改变什么就从新去设置那个东西,他可能是一个属性,可能是一个方法,也可能是一个配置文件,也可能是一个新的对象,需要什么功能就调什么样的方法,系统没有提供那个方法,就自己去创造一个方法,
要什么有什么,求什么得什么
开关的作用就是一个权限,该开启的时候开启,用完了记得关闭,权限可能就是可不可以使用一个功能,一般是true和false,当然也可以自定义一些标记
----------------------------------------------------------------------
alert()是警告框,只有一个确定,confirm()是提示框,有一个确定一个取消
----------------------------------------------------------------------
正常的获取元素css的行内样式是通过----->元素对象.style.属性名,但是如果css样式不是写在行内这种方法就获取不到值,大招-->getComputedStyle(元素的变量名);这个方法获取到元素的所有属性,获取到这个方法的返回值,再用返回值点上要获取到属性名,就能获取到该属性的值,但是不要用这个,效率太低,当我们拿到了一个元素的对象,也可以用 对象.属性来获取到属性的值.拿到了对象我们还可以赋值,不但可以调用还可以修改
全选,全不选,反选的实现
全选是将所有的checked=true,全不选是将所有的checked=false,反选是将input[i]checked=!input[i]checked;说白了就是将它的值取反再付给他
--------------------------------------------------
网页中所有的a链接可以用document.links来获取,得到的是一个集合返回的是一个数组,获取到当前页面具有href属性a链接,
document.anchors获取到当前页面具有name属性a链接,
document.forms获取到所有的是当前页面的所有表单
document.images获取当前页面的所有的img节点,返回的是一个集合
document.all获取当前页面中的所有节点,返回的是一个集合
document对象有很多属性,我们通过调用这些属性可以拿到我们想要的对象,或者说元素,每个载入浏览器的HTML文档都会是document的对象
下面是document的一些其他的属性
body-->提供对body的直接访问,可以获取到所有body体中的元素,返回值是一个集合
cookie--->返回当前文档相关的所有cookie
domain--->返回当前文档的域名
referrer--->返回前一个访问页面的URL地址
title---->返回文档的标题
url--->返回当前文档的url
函数
函数:函数在定义的时候是可以给默认值的,一个函数有多个参数,如果不给的话,可以选择用三元运算符或者var c=c||3;给默认值,这种判断给添加默认值,
如果调用函数传参个数与参数列表的个数不一致的情况下,多的话会自动忽略,少的话会报参数undefined
----------------------------------------------------------------------------
一个函数有return的时候,调用函数的时候会获取到return的结果,但是获取不是显示,可以用console来打印调用的函数,一个函数不写return的话控制台打印的时候会报undefined,return后面如果不写的话也会报undefined,
注意要想阻断js有两种方法,一种是return,另外一种是alert,return可以returnfalse,或者只写一个return
----------------------------------------------------------------------------
函数的声明有三种方式
第一种和PHP中的一样,function one(){},这种声明的方式可以在哪都能调用的到,不分先声明,还是先调用
第二种是用构造函数的方式声明一个函数,var two=new Function('函数体');这种声明方式注意函数体是写在小括号内且用引号引着的
第三种是用声明变量的方式来声明函数,var three=function(){}
----------------------------------------------------------------------------
js中数组是属于对象类型的,arguments是参数列表的意思,arguments.length;得到参数列表的长度,要想获取参数中的某一个可以用数组下标的方式来取值,arguments[下标],注意下标是从零开始的,不要超了,超了取到的是undefined
----------------------------------------------------------------------------作用域
一个变量先调用后声明,结果是undefined,不声明就调用报错,一个变量定义在函数内是局部变量,定义在函数外就是一个全局的变量,
----------------------------------------------------------------------------
注意js的函数中是可以再定义函的,内部的函数叫闭包函数或者局部函数,以后再插件中会经常有这种函数,PHP中是不可以的,PHP中有回调函数
--------------------------------------
常用的函数
eval(字符串);将一段字符串当做js的脚步执行,经常用,效率好像不高,不安全
escape(URL地址);将url的参数部分转为Unicode码
unescape(转码后url);将上面的还原成正常的
对象
对象的三种声明方法
第一种var one=new Object();
第二种var two={}
第三种 function Girl(n, a)
{
// 成员属性
this.name = n;
this.age = a;
// 成员方法
this.sing = function()
{
alert('sing');
}
this.dance = function()
{
alert('dance');
}
}
var obj = new Girl('张三', 18);//注意这里就用new将一个方法转成了一个对象,
---------------------------------------------------
对象中对属性的操作
添加属性,----->对象的变量名.属性名=属性值;
删除属性------->delect 对象的变量名.属性;
修改属性------>与添加属性的操作相同
查看属性------->对象的变量名.属性名;
调用方法------->对象的变量名.方法名();
注意访问属性可以用 点. 也可以用方括号,作用与点一样
对象访问属性---->对象变量['属性名'];注意这里的属性是有引号引着的,不引就代表添加属性.
------------------------------------------------------
快速读取对象的属性用for in
for( i in 对象的变量){
console.log(变量[i]);
}//注意 i 是可以随意写成其他变量名的,可以不用var来声明一个变量,直接写变量名,数组也属于对象型,也可以用这个,遍历对象用的,
------------------------------------------------------
with(对象名){
console.log(属性名);
}//是根据已经知道的对象的属性名获取值,不像for....in是自动的,他相当与是手动的,类似于数组中知道下标取值
------------------------------------------------------
AJAX
概念
Ajax是Asynchronous JavaScript and XML的缩写，即“异步的JavaScript和XML技术”。
作用是实现无刷新更改页面,
----------------------------------------------------------------
实现异步加载的步骤四步
1.实例化一个ajax对象,
var a =new XMLHttpRequest();
//注意XMLHttpRequest是AJAX的基础。XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新
2.初始化
a.open("请求的方式","处理的文件","布尔值");
//注意,请求方式有get和post方式两种,两种方式的区别是,get传输的数据有限,传的参数显示出来,post方式传的值大小不限制,参数不显示, 处理文件是后台服务器的处理脚本,布尔值是true是异步,false表示的是同步.
3执行发送send();
//注意,将请求发送到服务器,string：仅用于POST请求,当send方法有参数的时候,当用post请求的时候要在send方法之前加上一句
xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);//向请求添加HTTP头
如果是get的方式的话不用加这句,括号里也不用写参数,参数是一个json字符串
4.处理结果
a.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
var str=xmlhttp.responseText;//获取到服务器返回的响应
}
}
//注意
onreadystatechange事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当readyState改变时，就会触发onreadystatechange事件。
readyState属性存有XMLHttpRequest的状态信息。
下面是XMLHttpRequest对象的三个重要的属性：
1.onreadystatechange 存储函数（或函数名），每当readyState属性改变时，就会调用该函数。
2.readyState 存有XMLHttpRequest的状态。从0到4发生变化
3.status -------->200：OK----------404：未找到页面
4.使用Callback
callback函数是一种以参数形式传递给另一个函数的函数。
----------------
1.AJAX使用open函数以GET或者POST方式，使用send函数来向PHP发送请求；
2.请求结果readyState的改变，触发事件onreadystatechange；
3.判断readyState==4并且status==200，代表请求成功，并有响应；
4.响应的值是PHP脚本输出的内容，这个内容在JS端使用responseText来接收，并进行相关处理.
bom
bom对象是js关于浏览器对象的一个知识点
bom对象中的一些方法和属性,不需要用对象调用,直接写方法名就有返回值
bom对象有的对象,location对象,navigator对象,history对象,screen对象,
-----------------------------------------------------
location对象中存放着浏览器地址栏的所有的信息,里面封装了很多的属性,例如href属性--->location.href="http://www.baid.com";写了这行代码,运行会跳到百度首页
-----------------------------------------------------
navigator对象存放的是浏览器的相关的信息,例如浏览器的版本信息,做兼容的时候会用到这个
-----------------------------------------------------
history对象,是浏览器的历史对象,操作历史用这个对象里的属性和方法,例如前进方法,forword(),后退方法back();向前向后的go(num);方法,注意的是参数num可以是正数也可以是负数,是多少跳到第几步
-----------------------------------------------------
screen对象,是屏幕对象,
screen.availHeight表示浏览器可用的高度,要比屏幕的小,多出一个任务栏的高度,
screen.availWidth表示浏览器可用屏幕的宽度,最高与屏幕的宽度相同
screen.width获取到屏幕的宽度
screen.height获取到的是屏幕的高度
-----------------------------------------------------
window对象有很多全局的方法和属性,例如警告框,alert();提示框confirm();输入框prompt();
一些不常用的操作方法操作浏览器的窗口
moveTo(100,200);//y移动到固定的坐标
moveBy(20,20);//一次移动坐标的大小
resizeTo(200,200);//窗口变成坐标
resizeBy(10,30);//窗口一次改变坐标点大小,变大
正则
内置对象,是js中系统定义好的对象,每一个对象内都有定义好的属性和方法供调用,调用之前除了Math对象是用类名调用的,其他的对象都一样,在手册中,通用的一般是所有的对象都有的,而其他的属性和方法才是我们重点要记得,一个对象的方法和属性提供的越多,则这个对象的功能就越强大
布尔对象, 字符串对象 数组对象 日期对象 正则对象 数学对象
---------------------------------------------
注意当一个正则表达式要完成多个要求的时候,可以把多个要求分成多个正则表达式的字符串来进行匹配,以求降低难度
字符串对象
创建对象的方法与布尔相同,new和强转,还可以直接定义一个变量,变量的值用单双引号括起来,注意所有的内置对象强转用到数据类型的名称的首字母都是大写的.
---------------------------- ----------------------------
属性,length,基本上是通用的,所有的内置对象基本都有这个属性,作用是获取字符串的长度
---------------------------- ----------------------------
String对象还有很多的方法,这些方法手册上,自己查
数组对象 Array
创建数组对象的方法3种
1.--->var arr=new Array(num);注意num可以不写,写了表示定义的数组有num个单元,或者说长度是num
2.--->var arr=[1,2,3];注意方括号中的是值
3--->var arr=new Array(1,2,3);注意参数位置直接写的就是数组的值
------------------------------------
具体的对象属性和值看手册
面试题,数组双向通道如何建立,用的是四个函数
pop(无参数);删除并返回数组的最后一个单元
push(有参数);方法可向数组的末尾添加一个或多个元素，并返回新的长度。参数有几个就向数组末尾追加几个单元
unshift(有参数);向数组的开头添加一个或更多元素，并返回新的长度。
shift(无参数);删除并返回数组的第一个元素
---------------------------- ----------------------------
布尔对象
创建对象的方法两种,基本上都有两种,new Boolean(); 和 Boolean(一个值);
转换成false的数据类型有七种,
0, 0.0, null, undefined, 空字符串, NaN, false
其他的值都是转为true
数学对象Math
注意Math是静态对象,调用属性和方法的时候要用Math.来调用,不用new
获取随机说m,n之间的代码---->Math.ceil(Math.random() *(n-m+1)) + m-1;
ceil()将一个数字进一取整
random()获取0到1之间的随机数
正则对象RegExp
创建正则对象的方式两种,一种是new另一种是这届写一个正则表达式赋值给变量例如
var one=new RegExp();注意两个参数,参1是正则表达式,参2是可写的正则修正符
var two=/正则表达式/模式修正符;
---------------------------------------
模式修正符
i表示不区分大小写
g表示全局匹配,注意全局匹配要配合match(正则表达式)函数配合才行,注意match()函数是字符串函数,所以调用match的对象是要匹配的字符串
---------------------------------------
正则是一个强大的信息采集工具
正则对象的方法
exec(要匹配的字符串);匹配成功返回一个存放匹配到数据数组,匹配不成功返回null
test(要匹配的字符串);返回值是布尔值
---------------------------------------
[]-->表示查找方括号中的任意一个字符,例如
[0-9]表示匹配数字 [a-z]表示匹配小写字母 [A-Z]表示匹配大写字母
^表示除了或者以什么开头,用在[]外表示以方括号内的字符开头,[^a]表示除了a
()表示子组,小括号内的部分匹配一次,整体再匹配一次
-------------------------------------------------------------
原子符
.点表示的匹配除了换行回车之外的任意字符
\w表示查找字母数字下划线
\W表示查找除了字母数字下滑线
\d表示匹配数字
\D表示匹配除了数字
\s表示匹配空白字符
\S表示匹配非空白字符
\b表示匹配单词的边界,注意这里只能匹配到英文的单词,如果英文后有数字和中文,则表示会认为是边界
\B表示匹配非单词边界,一般是一个字符串中间的部分
------------------------------------------------------
量词
n+ 表示匹配到至少包含一个n的字符串
n*表示包含0个或多个n的字符串
n?匹配任何包含0个或一个n的字符串
n{m}匹配包含n的字符串长度为m
n{x,y}匹配包含n的长度为x或y的字符串
n{x,}匹配包含n的字符串长度至少为x个字符
n$表示以n结尾的字符串
?=n匹配任何其后紧接指定的字符串为n的字符串
?!n匹配任何其后没有紧接着是n的字符串
-------------------------------------------
如果既想忽略大小写,又想全局匹配则在在模式修正符的位置写上两个模式修正符就行了
日期对象 Date
创建对象的方法是用new,-->var time=new Date();注意一般不传参数也可以传,参数的顺序是年月日时分秒
date对象常用的函数
getFullYear()----->返回一个当前系统的年份,注意,在开发中,我们不能直接用js来获取本地的事件来显示在网页中,要获取服务器的时间然后再塞进网页中的对应位置,下面是PHP获取的系统时间
date_default_timezone_set("PRC");
echo date("Y-m-d l H:i:s A");
-------------------------------
getMonth();获取月份,注意月份是从0月开始的,用的时候要加1
-------------------------------
getUTCDay();---->获取当前时间是一周中的第几天,注意这里返回值是0-6,0代表的是周日,实际开发中可以将返回值与数组的下标结合,数组的值是周一,周二,.......
-------------------------------
getDate()返回值是1-31
-------------------------------
getHours()返回 Date 对象的小时 (0 ~ 23)。
-------------------------------
getMinutes()返回 Date 对象的分钟 (0 ~ 59)。
-------------------------------
getSeconds()返回 Date 对象的秒数 (0 ~ 59)。
-------------------------------
toLocaleTimeString();将得到的当前时间转为一个字符串,结果是下午5:14:31
-------------------------------
js中的时间是用无刷新技术实现的,要用到定时器
setInterval();参数有两个,第一个是匿名函数,用来写操作,参数2是一个数字单位是毫秒,功能是没隔参数2毫秒执行以下参数一的操作
清除定时器的方法window.clearInterval(设置定时器时赋给的变量名);
注意在网上查的信息大部分是直接写setInterval();没有调用的对象,有一个调用的对象是self.setInterval();说明调用的是当前的对象,
----------------------------------
定时炸弹
setTimeout();参数有两个,一个是匿名函数,另外一个是时间,和定时器参数是一样的,区别在于,定时器是多次执行,定时炸弹是只能执行一次, window.clearTimeout(设置定时炸弹的变量名);这个是清除定时炸弹用的,可以不清,因为他只执行一次,
杂项
js的作用是
1表单验证2加特效3书写Ajax:无刷新请求数据库
----------------------------------------------
js的特点
1是浏览器脚本语言2跨平台3安全,4缺点:兼容性不好
----------------------------------------------
js书写的位置四种地方
1.div内的onclick属性
2.script标签之间
3.script标签的src属性中外部引入
4.写在a链接的href属性,会阻断原来的效果
----------------------------------------------
js的变量
用var 加上变量名进行声明,字母数字下划线美元符号,严格区分大小写,不能以数字开头非关键字,汉字(不推荐),可以直接给变量赋值,也可以之声明不赋值,但是调用的不赋值的变量会报undefined,
----------------------------------------------
js报错不是在页面中,是在控制台可以看到,用console.log(变量名)用来打印
----------------------------------------------
js的注释
//单行注释,/**/多行注释
----------------------------------------------
js的结束符是分号,注意js代码一行写一句的时候可以不写分号进行结束,但是后期的js代码是用软件都写在一行所以为了规范必须加分号结束符
----------------------------------------------
js的数据类型
js的数据类型用typeof(变量名);来判断,有六种数据类型
boolean string number objecet function undefined
boolean类型的值只有true和false,注意只能小写,大写报错,js严格区分大小写
string类型声明必须加上单双引号,注意js中单双引号都能解析变量
number类型除了数字,还有NaN表示不是数的数,Infinity正无穷,--Infinity负无穷
--------------------------------------------
object类型是对象型,null也是对象,
----------------------------------------------
function是函数类型
----------------------------------------------
undefined是只声明而未赋值的变量都是undefined,或者直接给给一个变量赋值为undefined
函数-->return false;可以阻断函数,弹框也可以阻断函数
isNaN();判断一个变量是不是NaN类型的,返回值是一个布尔值
注意任何一个数与NaN运算的值都是NaN
-----------------------------------------------
函数的声明方式 3种
var one=function(){}
var two=new Function("函数体");注意参数位置写上函数体
function three(){}
-----------------------------------------------
函数的调用是--->函数名();
-----------------------------------------------
js数据类型的转换,强转,自动转
parseInt();强转为int型,字符串前面的数字部分转为数字,纯字符转为NaN,浮点数的小数部分会去掉,
parseFloat();强转为浮点型,
Number();强转为一个数字,注意空字符串转为0,其他的字符串转为NaN
1.如果是布尔值，true和false将分别转换为1和0
2.如果是数字值，只是简单的传入和返回
3.如果是null，返回0
4.如果undefined，返回NaN
String();强制将一个值转为字符串
1,数字都能转成字符串的数字,
2,对象会转"[object Object]"
3,布尔型会转成字符串的布尔值
4,undefined的会转成字符串的undefined
Boolean();强制转为一个布尔值
有七种会转为false其他的都是true
七种:false,0,0.0,undefined,null,空字符串,NaN
注意任何非空字符串都转为布尔值都是true,两个引号之间没有东西转为false
自动转
记住下面的题
var res=100+100+'100';//结果是200100
var res=100+'100'+100+100;//结果是100100100100
var res=100+'100'+(100+100);//结果是100100200
var res=100-'100'-100;//结果是-100
var res=100*'100';//结果是10000
注意当用加号加字符串类型的时候,可以用Number();强转,也可以直接用字符串乘以1或者除以1这样也能转为数字;
扫一扫
3348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
