零基础学java script_《零基础学JavaScript(全彩版)》学习笔记

例如：function

Hturn(){

image11.style.filter

= image11.style.filter =="flipH"?"":"flipH";//设置水平翻转

}

第12章

文档对象模型(DOM)

DOM概述

DOM对象节点属性

节点的操作：创建节点；插入节点；复制节点；删除节点；替换节点

获取文档中的指定元素；通过元素的name属性获取元素

与DHTML相对应的DOM:innerHTML和innerText属性；outerHTML和outerText属性

1、在文档对象模型中，每个对象都可称为一个节点(Node):根节点/父节点/子节点/兄弟节点/后代/叶子节点

元素节点、文本节点、属性节点

2、DOM对象节点属性：在对节点进行查询时，首先使用getElementById()方法来访问指定的id节点，然后应用nodeName属性、nodeType属性和nodeValue属性来获取该节点的名称、类型和值。另外，通过使用parentNode,firstChild,lastChild,previousSibling和nextSibling等属性，可以遍历文档树！

需要对文档现有信息进行检索的时候下面DOM方法最有用：

getElementById

getElementByTagName

getAttribute

firstChild.nodeValue     元素的第一个节点的内容

在需要把信息添加到文档中去时，以下DOM最有用：

createElement                 创建元素节点

createTextNode(需要的内容)  创建文本节点

appendChild                   添加到元素节点

insertBofore

insertAfter                   需要自己编写

setAttribute

元素在节点中的位置信息：

parentNode 当前节点的父节点

nextSibling   当前节点的后一个兄弟节点

previousSibling  当前节点的前一个兄弟节点

childNodes 子节点列表

firstChild 当前节点的第一个子节点

lastChild  当前节点的最后一个子节点

元素信息：

nodeName 节点的名称

nodeValue 节点的值，一般都是文件文本

nodeType 节点的类型

attributes 元素的属性列表

style     每个元素都有一个style属性

他们也都是一个对象

3、 节点的操作：创建添加节点

function completePoem(){  //定义completePoem()函数

var div = document.createElement('div');//创建div元素

div.className = 'poem';                 //为div元素添加CSS类名

var last = myform.last.value;           //从myform中的input(last)中获取古诗最后一句

txt=document.createTextNode(last);      //创建文本节点

div.appendChild(txt);                   //将文本节点添加到创建的div元素中

document.getElementById('poemDiv').appendChild(div);//将创建的div元素添加到id为poemDiv的div元素中

}

4、 节点操作：插入节点  insertBefore(new,ref)  将新的子节点添加到指定的子节点的前面(可以先写这一行语句，然后，围绕着这一行的参数再写别的语句，就比较容易理顺其逻辑关系了)

node.parentNode.insertBefore(newNode,node)   插入定位得巧妙！

5、 复制节点：obj.cloneNode(deep)

6、 删除节点：obj.removeChild(oldChild)

7、 替换节点：obj.replaceChild(new,old)

8、 获取文档中指定的元素

通过元素的id属性获取元素document.getElementById('userId');

通过元素的name属性获取元素：document.getElementName('likeRadio');返回的是一个数组

9、 通过DHTML对象模型直接获得网页对象，通过innerHTML,innerText,outerHTML,outerText可以很方便地读取、修改HTML元素内容。

innerHTML可以用于为指定的HTML文本替换元素的内容。比如：

document.geyElementById("clock").innerHTML="2017-12-24";

innerText即使指定的HTML文本也会原样输出。

innerHTML,innerText还可以获取元素的内容。

outerHTML,outerText替换的是整个目标节点，也就是这两个属性还对元素的本身进行修改。

第13章

Window窗口对象

窗口事件：通用窗口事件；扩展窗口事件

控制窗口：移动窗口；窗口滚动；改变窗口大小；访问窗口历史；设置超时

Window对象概述：属性、方法、使用

对话框：警告对话框；确认对话窗；提示对话框

打开与关闭窗口：打开窗口；关闭窗口

1、Window对象的属性

document/frames/location/name/status/defaultStatus/top/parent/opener/closed/self/screen/navigator

2、Window对象的方法

alert()/confirm()/prompt()/open()/close()/focus()/blur().scrollTo(x,y)/scrollBy(offsetx,offsety)/setTimeout(timer)/setInterval(interval)/moveTo(x,y)/moveBy(offsetx,offsety)/resizeTo(x,y)/resizeBy(offset,offsety)/print()/navigate(URL)

3、Window对象的使用

Window是不需要new运算符来创建对象的。self代表当前窗口，parent代表父级窗口

4、对话框：警告窗口alert();确认窗口confirm();提示窗口prompt(str1，str2)

5、打开与关闭窗口：windowVar=window.open(url,windowname[,location])

关闭窗口：window.close();或close();或this.close();

6、 控制窗口：移动窗口：window.moveTo(x,y)将窗口移动到指定位置。window.resizeTo(x,y)将窗口改成指定大小。screen屏幕对象，反应了当前屏幕设置：属性：width/height/colorDeph……

窗口滚动：scroll(x,y)指定窗口的当前位置。scrollTo(x,y)与scroll(x,y)相同，都是绝对位置。scrollBy(x,y)相对位置滚动。resizeBy(x,y)当前窗口改成指定大小(x,y)。

7、访问窗口历史：[window.]history.property|method([parameters])

属性：length历史列表的长度，用于判断列表中的入口数目；current当前文档的URL

next

历史列表的下一个URL；previous 历史列表的前一个URL

方法：back()退回前一页；forward()重新进入下一页；go()进入指定的网页

8、设置超时：timerID=setTimout(要执行的代码，毫秒为单位的时间); 中止：clearTimeout(timerId)

9、窗口事件：window.通用事件名=要执行的JS代码

onfocus/onblur/onload/onunload/onresize/onerror

扩展窗口事件：onafterprint窗口被打印后；onbeforeprint敞口被打印或预览前；

onbeforeunload窗口未被载入前；ondragdrop文档被拖到窗口使；onhelp当帮助键F1按下时；

onresizeend调整大小结束时；onresizestart调整大小开始时；onscroll滚动条滚动时。

2/10/2019 10:20:00 PM  (22:20:10)

二〇一九年二月十一日星期一0时6分

第3篇

高级应用

第14章 Ajax技术

Ajax概述：Ajax应用案例；开发模式；优点

Ajax的技术组成：XMLHttpRequest对象；XML语言；JavaScript脚本语言；DOM；CSS

XMLHttpRequest对象：对象的初始化；常用属性；常用方法

1、 Ajax是Asynchronous JavaScript And XML缩写，异步JavaScript和XML技术，客户端异步请求，不需要刷新页面的情况下与服务器进行通信。增强的JavaScript，更新部分页面内容而不重载整个页面。

2、 Ajax开发模式：用户的行为将变成对Ajax引擎的一次JavaScript调用。而不是每次操作都触发一次HTTP请求。

3、 Ajax的优点：通过引入中间媒介(Ajax引擎)：①把一部分服务器负担的工作转移到了客户端。②不需要重载整个页面的情况下通过DOM及时将更新的内容显示在页面上。③可调用XML等外部数据，是页面显示和数据分离。④不需要下载插件和小程序。⑤没有平台限制。

缺点就是：⑥大量的JavaScript代码，不易维护。⑦可视化设计上比较困难。⑧打破“页”的概念。⑨给搜索引擎带来困难。

4、 Ajax的技术组成：Ajax是XMLHttpRequest对象和JavaScript、XML语言、DOM、CSS等多种技术的组合。但，只有XMLHttpRequest对象是新技术。XMLHttpRequest对象是一个具有应用程序接口的JavaScript对象，能够使用超文本传输协议(HTTP)连接服务器。微软、1999年、IE5.0

5、 XML语言，Extensible Markup Language,可扩展的标记语言。描述结构化数据格式。

6、 JavaScript脚本语言，Ajax就是利用它将DOM,XHTML(HTML),XML,CSS等技术综合了起来，并控制它们的行为。JS不是Java语言的精简版，只能在某个解释器或“宿主”上运行，如ASP,PHP,JSP,浏览器或windows脚本宿主。

7、 DOM文档对象模型的缩写，它为XML文档的解析定义了一组接口。解析器读入整个文档，然后构建一个驻留内存的树结构。最后通过DOM可以遍历树以获取来自不同位置的数据！

8、 CSS层叠样式表的缩写。

9、 XMLHttpRequest是Ajax中最核心的技术。Ajax可以像桌面应用程序一样只同服务器进行数据层面的交换，不用每次都刷新页面，也不用每次都将数据处理工作交给服务器来做。

XMLHttpRequest对象的初始化：

IE浏览器会把XMLHttpRequest实例化为一个ActiveX对象：

var http_request =new

ActiveXObject("Msxml2.XMLHTTP");

或： var

http_request =new ActiveXObject("Microsoft.XMLHTTP");

非IE浏览器会实例化为一个本地JavaScript对象(如：Firefox,Opera,Mozilla,Safari)

var http_request = new XMLHttpRequest();

10、XMLHttpRequest属性：

指定状态改变时所触发的事件处理器属性：http_request.onreadystatechange=getResult();

获取请求状态属性：readyState 5个值：0未初始化，1正在加载，2已加载，3交互中，4完成

获取服务器字符串响应属性：var h=http_request.responseText;

获取服务器的XML响应的属性：var xmldoc = http_request.responseXML;

返回服务器的HTTP状态码的属性：http_request.status

100继续发送请求；200请求已成功；202请求已接受，但尚未成功；400错误的请求；404文件未找到；408请求超时；500内部服务器错误；501服务器不支持当前请求所需要的某个功能。

11、XMLHttpRequest对象的常用方法：

创建新请求的方法：open("method","URL"[,asyncFlag[,"userName"[,"password"]]])

向服务器发送请求的方法：send(content)

设置请求的HTTP头的方法：setRequestHeader("header","value")

停止或放弃当前异步请求的方法：abort()

返回HTTP头信息的方法：getResponseHeader("headerLabel")或getAllResponseHeaders()

2/11/2019 2:06:02 AM

二〇一九年二月十一日星期一上午10时35分

第15章

jQuery基础

jQuery概述

jQuery下载与配置

jQuery选择器：工厂函数；基本选择器；层级选择器；过滤选择器；属性选择器；表单选择器

1、 jQuery是一套简洁、快速、灵活的JavaScript脚本库。

2、 下载与配置：把下载下来的库放入项目指定的文件夹JS中，然后在所有脚本文件

3、 jQuery的工厂函数：$() 例如：$("div")  $("#username")

$(".btn_grey")

4、 基本选择器：ID选择器、元素选择器、类名选择器、多种匹配条件选择器和通配符选择器。

一、ID选择器：$("#id");

id在页面中是唯一的，如果有两个相同的，JS可能会报错！

例如：$(document).ready(function(){                 //在页面加载完成后执行代码。

$("input[type='button']").click(function(){      //为按钮绑定单击事件

var

inputValue = $("#testInput").val();    //获取文本框的值

alert(inputValue);    //输出文本框的值

});  });

text():获取或者改变指定元素的文本

html():获取或改变指定元素的html元素以及文本

val():获取或者改变指定元素的value值(一般是表单元素)

以上3个都是jquery类库中的语法,基本没啥区别，都是获得当前对象的value值(一般是表单元素)

只是，this.value是js的原生语法；$(this).val()是jquery的语法，需要引入jquery库文件

二、元素选择器：$("element"); 多数情况下，元素选择器匹配的是一组数据。

例如：$(document).ready(function(){       //在页面加载完成后执行代码。

$("input[type='button']").click(function(){     //为按钮绑定单击事件

$("div").eq(0).html("

src='images/strawberry1.jpg'/>这里长出了一片草莓");  //获取第一个div元素

$("div").get(1).innerHTML="

src='images/fish1.jpg'/>这里的鱼没有了";    //获取第二个div元素

});  });

索引器eq()返回的还是一个JQ对象，所以，必须要用JQ方法HTML()来载入新元素

索引器get()返回的是一个JS对象(DOM对象)，所以，必须要用DOM对象的方法innerHTML=""

三、类名选择器：$(".class"); 一个元素可以有多个CSS类，一个CSS类也可以匹配多个元素。

例如：$(document).ready(function()

{       //在页面加载完成后，由于没有绑定时间，立即执行代码。

var myClass = $(".myClass");                //选取DOM元素

myClass.css("background-color","#C50210");  //为选取的DOM元素设置背景颜色

myClass.css("color","#FFF");                //为选取的DOM元素设置文字颜色

});

四、复合选择器：$("selector1,selector2,selectN");

将多个选择器组合在一起，逗号分隔，"或"匹配。

返回一个jQuery包装集，利用索引器获取集合中的对象。

例如：$(document).ready(function() {

$("input[type=button]").click(function(){

//绑定按钮的单击事件

$("div,#span").addClass("change");    //添加CSS中定义的类：.change{}

});

});

JQ方法：addClass()向被选定的元素添加一个或多个类(空格分隔)，但不会移除已存在的类。

五、通配符选择器：$("*");

5、层级选择器

(1)ancestor

descendant祖孙选择器：$("ancestor descendant"); 比如$("ul li");

(2)parent>child父子选择器：$("parent>child");直接子元素，比如$("form>input");

(3)prev+next兄弟选择器：$("prev+next");紧跟prev后面的next元素，比如$("div+img");

(4)prev~siblings兄弟族选择器：$("prev~siblings");prev后所有siblings元素,如$("div~ul");

6、过滤选择器

(1)简单过滤器，以：号开头匹配找到的第一个元素。