变量类型:
JavaScript 中变量有值类型和引用类型, 值类型就是直接给变量赋值, 引用类型是把一个地址指针赋值给变量
引用类型包括 ------》数组, 对象和函数, 其它为值类型
用 typeof 可以区分哪些类型?
- typeof undefined //undefined
- typeof 123 //number
- typeof 'abc' //string
- typeof true //boolean
- typeof [] //object
- typeof {} //object
- typeof console.log //function
- typeof null //object
可以从结果看到, typeof 不能区分数组类型, 对象类型和 null, 都是输出 object 类型
== 和 === 的区别
== 是不严格的等于,=== 要求你的数据类型以及值都要相等, 所以能用三个等号的就用
- false == 0 //true
- false === 0 //false
- 1 == '1' //true
- 1 === '1' //false
使用两个等号的时候 JavaScript 会进行强制类型转换, 试图让两个比较对象相等
什么时候使用两个等号合适呢: 比如 if(obj.a == null) 这时候相当于 obj.a === null 或 obj.a === undefined(jQuery 源码中是这么写的, 我没读过)
使用 instanceof
使用 instanceof 就可以区分是否是 array 类型的了
- var arr = []
- arr instanceof Array //true
JavaScript 的内置函数
我个人的理解就是需要 new 出来的就是内置函数, 因为如果自己定义一个构造函数的话, 你也要 new 出一个实例对象才能使用
- Array
- String
- Object
- Boolean
- Function
- Error
- Regexp
- Number
- Date
JavaScript 的内置对象
常用的有 Math, JSON
dom
dom 的本质
浏览器把那道 html 代码, 结构化一个浏览器能识别并且 JS 可操作的一个模型
dom 操作中 property 和 attribute 的区别
prototye 和 attribute 都是操作属性, 不同的是 prototype 操作的是 dom 对象上的属性, attribute 操作的是 HTML 上的属性
一个 div 的 prototype 属性如下, 我自定义的 oppo 属性在 attributes 里, 而 attributes 又包含在 prototype 里
常用的 Attribute, 例如 id,class,title 等, 已经被作为 Property 附加到 DOM 对象上, 可以和 Property 一样取值和赋值. 但是自定义的 Attribute, 就不会有这样的特殊优待, 只要是 DOM 标签中出现的属性 (HTML 代码), 都是 Attribute. 然后有些常用特性 (id,class,title 等), 会被转化为 Property. 可以很形象的说, 这些特性 / 属性, 是 "脚踏两只船" 的
处理 dom 固有属性时用 prop, 处理自己定义的属性时用 attr, 这样比较合适
Bom
在 w3c 中, Browser 对象就是 bom
- navigator.userAgent // 返回浏览器用于 HTTP 请求的用户代理头的值
- location.hash // 返回 #后面的值
- location.protocal // 返回 http 或 https
- location.search // 返回从? 开始的 url 部分
- location.port // 返回端口号, 比如 8080
- location.href // 返回完整的 url 路径
原生 Ajax
- // 1. 创建一个 XMLHttpRequest 类型的对象 -- 相当于打开了一个浏览器
- var xhr = new XMLHttpRequest()
- // 2. 打开与一个网址之间的连接 -- 相当于在地址栏输入访问地址
- xhr.open('GET', './time.php')
- // 3. 通过连接发送一次请求 -- 相当于回车或者点击访问发送请求
- xhr.send(null)
- // 4. 指定 xhr 状态变化事件处理函数 -- 相当于处理网页呈现后的操作
- xhr.onreadystatechange = function () {
- // 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
- if (this.readyState === 4) {
- // 通过 xhr 的 responseText 获取到响应的响应体
- console.log(this)
- }
- }
get 请求
- var xhr = new XMLHttpRequest()
- // GET 请求传递参数通常使用的是问号传参
- // 这里可以在请求地址后面加上参数, 从而传递数据到服务端
- xhr.open('GET', './delete.php?id=1')
- // 一般在 GET 请求时无需设置响应体, 可以传 null 或者干脆不传
- xhr.send(null)
- xhr.onreadystatechange = function () {
- if (this.readyState === 4) {
- console.log(this.responseText)
- }
- }
- // 一般情况下 URL 传递的都是参数性质的数据, 而 POST 一般都是业务数据
post 请求
- var xhr = new XMLHttpRequest()
- // open 方法的第一个参数的作用就是设置请求的 method
- xhr.open('POST', './add.php')
- // 设置请求头中的 Content-Type 为 application/x-www-form-urlencoded
- // 标识此次请求的请求体格式为 urlencoded 以便于服务端接收数据
- xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
- // 需要提交到服务端的数据可以通过 send 方法的参数传递
- // 格式: key1=value1&key2=value2
- xhr.send('key1=value1&key2=value2')
- xhr.onreadystatechange = function () {
- if (this.readyState === 4) {
- console.log(this.responseText)
- }
- }
事件
JavaScript 中绑定事件可以用 addEventListener
比如绑定 click, 可以用 onclick, 也可以用 addEventListener('click',function(){})
onclick 绑定的点击事件会覆盖, addEventListener 绑定的 click 不会覆盖 (就是可以绑定多个 click 事件)
事件冒泡
点击 div 里的 p 后, p 的点击事件被触发, 事件冒泡到 div,divde 点击事件也被动触发
想阻止冒泡事件可以解开第 9 行的注释
- <body>
- <div class="wrapper">
- <p class="one">one</p>
- <p class="two">two</p>
- <p class="three">three</p>
- </div>
- <script>
- var one = document.querySelector(".one").addEventListener('click',function(e){
- // e.stopPropagation() // 阻止事件冒泡
- alert('this is one')
- })
- var wrapper = document.querySelector(".wrapper").addEventListener('click',function(){
- alert('this is wrapper')
- })
- </script>
- </body>
但是, 假设一个场景, 如果上述 div 是一个无限下拉的页面, 点击每个 p 都要打印出 p 的内容, 那应该怎么办?
给每个 p 都绑定事件时不可能的, 一是你不知道有多少个 p, 二是这样太麻烦了
这时候我们可以写一个函数
- function bindEvent(elem, type, selector, fn){
- if(fn == null){
- fn = selector // 如果没有传入 selector, 给 fn 赋值, 把 selector 设置为 null
- selector = null
- }
- elem.addEventListener(type, function(e){
- var target
- if(selector){
- // 获取触发此事件的元素
- target = e.target
- console.log(target)
- // 检测是否是代理元素触发的
- if(target.matches(selector)){
- fn.call(target, e)
- }
- } else {
- fn(e)
- }
- })
- }
- var wrapper = document.querySelector('.wrapper')
- var one = document.querySelector('.one')
- // 不使用代理
- // bindEvent(wrapper,"click",function(){
- // console.log(one.innerHTML)
- // })
- // 使用代理
- bindEvent(wrapper,"click",'p',function(e){
- console.log(this.innerHTML)
- })
给最外层的 div 绑定一个点击事件, 通过事件冒泡, 当点击里面的 p 元素时, 冒泡触发外层的 div. 这样无论你有多少个 p, 只要绑定一个事件就行.
第 14 行的 call() 方法调用一个函数, 其具有一个指定的 this 值和分别地提供的参数, 所以第 30 行的 this 就是 call 里的第一个参数 target
常用数组 API
forEach 遍历所有数组, 对空数组不会执行回调函数
every 判断所有元素是否都符合条件
some 判断至少有一个元素符合条件
sort 默认升序排序, 会改变原数组
map 根据条件对数组重新组装, 生成新数组, 不改变原数组
filter 过滤符合条件的元素, 生成新数组, 不改变原数组
来源: https://www.cnblogs.com/zhaozhaoli/p/10061205.html