JavaScript&jquery 交互式web前端开发 全书读书笔记

如果同时对两个字符串进行算数运算,则会得到NaN

var score="seven"
var score2="nice"
var total=score*scpce2   //NaN

从函数中获取多个值

使用数组,函数可以返回多个值

function getSize(a,b,c){
    var area=a*b
    var volume=a*b*c   
    var size=[area,volume]
    return size
}
var areaOne=getSize(3,2,3)[0]

立即调用函数(IIFE)

两种写法

(function(){}())
(function(){})()

IIFE通常被用作一组代码的封装器,他能有效的保护变量,防止其他脚本可能出现的变量

作用域

全局变量需要使用更多的内存,局部变量只需在函数执行期间被保存

对象属性自己的this是绑定在该对象上

如果要删除对象的属性 delete obj["XX"]

若只是希望清楚属性值,只需将其设置为一个空的字符串

obj.XX=""

window对象代表了当前浏览器中的窗口和标签,位于浏览器对象的最顶端

window.innerHight 窗口高度(不包括浏览器边栏和工具栏)

window.innerWidth 窗口宽度(不包括浏览器边栏和工具栏)

window.pageXOffset 文档滚动的水平距离

window.pageYOffset 文档滚动的垂直距离

window.history 历史记录

window.screenX 鼠标点的X坐标相对于屏幕左上角

window.screenY 鼠标点的Y坐标相对于屏幕左上角

window.screen.width 获取屏幕的宽度

document.createElement()

document.createTextNode()

数字对象的常用方法

isNaN() 检测值是否为数字

toFixed() 将特定数字四舍五入至指定小数位数(返回一个字符串)

Math对象常用的方法

Math.PI 返回PI

Math.round() 将数字四舍五入到离他最近的整数

Math.ceil() 向上取整

Math.floor() 向下取整

Math.random() [0,1)

获取一个[0,10]的随机整数
var randomNum=Math.floor(Math.random()*10+1)

使用Date和Time对象

若要用指定日期和时间可以使用如下格式

YYYY,MM,DD,HH,MM,SS

1996,04,16,15,45,55

var today=new Date()
var year=today.getFullYear()
var est=new Date("Apr 16,1996 15 15:45:55")
var difference=today.getTime()-est.getTime()
difference=(difference/31556900000)
​
var msg=document.getElementById("message")
msg.textContent=Math.floor(difference)+"years of online travel advice"
​

switch 语句是是不会进行类型转换的,传过来的是什么值,就是什么值

var msg
var level=2
switch(level){
    case:1
    msg="good luck"
    breaks;
    case:2
    msg="second test"
    breaks;
    default:
    msg="3Q"
}

javaScript 被称为弱类型语言,因为值得数据类型是可以改变的,其他一些语言则要求指定每个变量的数据类型,这种语言被称为强类型语言

因为存在强制类型转换,js当中的每一个值都可以作为布尔类型

假值:0,空字符串,NaN,没有被赋值的值

NaN虽然被视为假值,但是它不等于任何值,他甚至不等于他自己

break

这个关键字会导致循环结束,然后通知解析器继续执行循环体之外的数据

任何能够在循环之外赋值,并且在循环过程中不会被更改的量,都应该在循环外面进行重复计算,造成资源的不必要浪费

hasAttribute()

getAttribute() setAttribute()

removeAttribute()

动态和静态nodeList

nodeList看起来像一个数组,用起来也像一个数组,但他实际上不是数组,他是一种被称为集合的对象

在动态NodeList中,当脚本更新页面之后,NodeList也会同样进行跟新,以getElementBy开头的方法会返回NodeList,他们通常也比获取静态list更快

在静态NodeList中,当脚本更新页面之后,NodeList不会被更新,不会反映脚本所作出的更改

parentNode 父元素节点

previousSibling/nextSibling 前一个和后一个节点

textContent 该属性获取元素,及其子元素包含的文本

<li id="one"><em>fresh</em>figs</li>
document.getElementById("one").textContent
他返回的是fesh figs
​

从DOM树中移除元素

父.removeChild(子)

经典写法是使用:子.parentNode

var removeel=document.getElementByTagName("li")[3]
var parent=removeel.parentNode
parent.removeChild(removeel)

hasAttribute()

hasAttribute()方法可以检查任何一个元素的节点的某个属性是否存在

var firstItem=document.getelementByid("one")
if(firstItem.hasAttribute("class")){
    var attr=firstItem.getAttribute("class")
    var el=document.getElementByid("scriptResults")
    el.innerHTML=<P>the first item has a class name </p>
}

事件监听允许一个事件触发多个方法

为什么事件的函数调用没有小括号

因为小括号表示函数会在页面加载到这里时运行,而不是事件发生时运行

事件参数e

e.target

e.type

e.preventDefault()

e.stopPropagation()

return false

这种方式既阻止了元素的默认行为,也阻止了事件继续向上冒泡,不过需要注意的是当解释器遇到return false 他会停止处理这个函数中的剩余代码,继续执行其他代码

click 当用户点击鼠标的主键时会触发,另外当一个元素拥有焦点时也会触发这个事件

onmosuedown 当用户按下任何一个鼠标按键时触发

onmosueup 松开时触发

事件发生在哪里

事件对象会告诉你当事件发生时,鼠标指针所处的位置

屏幕

screenX和screenY 属性表示鼠标指针在整个显示器上所处的位置,从屏幕而不是页面左上角计算

页面

pageX和pageY属性表示鼠标指针在整个页面中的位置,页面的顶部可能在可见区域之外,所以即使鼠标指针在在同一位置,页面和客户端的坐标也可能不同

客户端

clientX和clientY属性表示鼠标指针在浏览器可视区域的位置,即使用户将页面向下滚动,也不会影响客户端的坐标

键盘事件:

1.keydown :用户按下了一个键

2.keypress用户键入了这个键或者按住了这个键,导致页面上增加了一个字符

3.keyup用户松开了这个键

change事件:当某些表单的元素状态发生变化时触发

如:

在下拉列表框中选择一个选项时

选中一个单选按钮

选中或取消一个复选框时

当你的页面引用jq时可以尝试使用cdn加载,如果没有就引用一个保存在你自己服务器上的版本

备用cdn
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script>
window.jquery||document.write("<script src="js/jquery-1.10.2.js>")
</script>

处理Ajax请求以及响应

浏览器会使用XMLHttpRequest对象来创建Ajax请求,服务器响应浏览器的请求之后,同一个XMLHttpRequest对象会继续处理返回结果

var xhr=new XMLHttpRequest()
xhr.open("GET","data.php")
xhr.send()

当服务器响应了任何请求,他会返回一条状态信息来指示是否完成了请求

200 服务器响应了请求,一切正常

304 没有变化

404 页面未找到

500 服务器内部错误

var xhr=new XMLHttpRequest()
xhr.οnlοad=function(){
    if(xhr.status==200){
        document.getElementById("content").inmerHTML=xhr.responseText
    }
}

responseText 使用Ajax加载HTML xhr.responseText

responseXML 使用Ajax加载XML数据

JSON.parse(xhr.responseText)使用Ajax加载JSON数据

执行上下文

JavaScript解释器使用执行上下文的概念,有一个全局执行上下文,另外每一个函数都会创建一个新的执行上下文,执行上下文对应变量作用域

执行上下文的提升

脚本每次进入一个新的执行上下文时,都会经历两个阶段

准备

• 1.创建新的作用域

• 2.创建变量,函数,和参数

• 3.确定this关键字的值

2.执行

• 现在可一个变量赋值了

• 引用函数来执行代码

• 执行语句