JavaScript基础(2)---dom，bom，变量类型，事件，ajax

最新推荐文章于 2022-03-24 15:35:53 发布

weixin_33755649

最新推荐文章于 2022-03-24 15:35:53 发布

阅读量186

点赞数

文章标签： javascript json python ViewUI

原文链接：https://my.oschina.net/u/3386278/blog/2967103

版权

2019独角兽企业重金招聘Python工程师标准>>>

变量类型：

JavaScript中变量有值类型和引用类型，值类型就是直接给变量赋值，引用类型是把一个地址指针赋值给变量

引用类型包括------》数组，对象和函数，其它为值类型

　　用typeof可以区分哪些类型？

复制代码
1 typeof undefined //undefined
2 typeof 123 //number
3 typeof 'abc' //string
4 typeof true //boolean
5 typeof [] //object
6 typeof {} //object
7 typeof console.log //function
8 typeof null //object
复制代码

可以从结果看到，typeof不能区分数组类型，对象类型和null，都是输出object类型

　　==和===的区别

　　==是不严格的等于，===要求你的数据类型以及值都要相等，所以能用三个等号的就用

1 false == 0 //true
2 false === 0 //false
3 1 == '1' //true
4 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出一个实例对象才能使用　　

复制代码
1 Array
2 String
3 Object
4 Boolean
5 Function
6 Error
7 Regexp
8 Number
9 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

复制代码
1 navigator.userAgent //返回浏览器用于 HTTP 请求的用户代理头的值
2 location.hash //返回#后面的值
3 location.protocal //返回http或https
4 location.search //返回从？开始的url部分
5 location.port //返回端口号，比如8080
6 location.href //返回完整的url路径
复制代码

原生ajax

复制代码
1 // 1. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器
2 var xhr = new XMLHttpRequest()
3 // 2. 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址
4 xhr.open('GET', './time.php')
5 // 3. 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求
6 xhr.send(null)
7 // 4. 指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作
8 xhr.onreadystatechange = function () {
9 // 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
10 if (this.readyState === 4) {
11 // 通过 xhr 的 responseText 获取到响应的响应体
12 console.log(this)
13 }
14 }
复制代码

　　get请求

复制代码
1 var xhr = new XMLHttpRequest()
2 // GET 请求传递参数通常使用的是问号传参
3 // 这里可以在请求地址后面加上参数，从而传递数据到服务端
4 xhr.open('GET', './delete.php?id=1')
5 // 一般在 GET 请求时无需设置响应体，可以传 null 或者干脆不传
6 xhr.send(null)
7 xhr.onreadystatechange = function () {
8 if (this.readyState === 4) {
9 console.log(this.responseText)
10 }
11 }
12 // 一般情况下 URL 传递的都是参数性质的数据，而 POST 一般都是业务数据
复制代码

　　post请求

复制代码
1 var xhr = new XMLHttpRequest()
2 // open 方法的第一个参数的作用就是设置请求的 method
3 xhr.open('POST', './add.php')
4 // 设置请求头中的 Content‐Type 为 application/x‐www‐form‐urlencoded
5 // 标识此次请求的请求体格式为 urlencoded 以便于服务端接收数据
6 xhr.setRequestHeader('Content‐www.gcyl158.com Type', 'application/x‐www‐form‐urlencoded')
7 // 需要提交到服务端的数据可以通过 send 方法的参数传递
8 // 格式：key1=value1&key2=value2
9 xhr.send('key1=value1&key2=value2')
10 xhr.onreadystatechange = function () {
11 if (this.readyState === 4) {
12 console.log(this.responseText)
13 }
14 }
复制代码

事件

　　JavaScript中绑定事件可以用addEventListener

　　　　比如绑定click，可以用onclick，也可以用addEventListener（‘click’，function（）{}）

　　　　onclick绑定的点击事件会覆盖，addEventListener绑定的click不会覆盖（就是可以绑定多个click事件）

　　　　事件冒泡

　　　　点击div里的p后，p的点击事件被触发，事件冒泡到div，divde点击事件也被动触发

　　　　想阻止冒泡事件可以解开第9行的注释

复制代码
1 <body>
2 <div class="wrapper">
3 <p class="one">one<www.gcyL157.com /p>
4 <p class="two">two</p>
5 <p class="three">three</p>
6 </div>
7 <script>
8 var one = document.querySelector(".one").addEventListener('click',function(e){
9 // e.stopPropagation() //阻止事件冒泡
10 alert('this is one')
11 })
12 var wrapper = document.querySelector(".wrapper").addEventListener('click',function(){
13 alert('this is wrapper')
14 })
15 </script>
16 </body>
复制代码

　　　　但是，假设一个场景，如果上述div是一个无限下拉的页面，点击每个p都要打印出p的内容，那应该怎么办？

　　　　给每个p都绑定事件时不可能的，一是你不知道有多少个p，二是这样太麻烦了

　　　　这时候我们可以写一个函数

复制代码
1 function bindEvent(elem, type, selector, fn){
2 if(fn == null)www.michenggw.com{
3 fn = selector //如果没有传入selector，给fn赋值，把selector设置为null
4 selector www.wanchuang178.cn = null
5 }
6 elem.addEventListener(type, function(www.taohuayuangw.com){
7 var target
8 if(selector){
9 //获取触发此事件的元素
10 target = e.target
11 console.log(target)
12 //检测是否是代理元素触发的
13 if(target.matches(selector)){
14 fn.call(target, e)
15 }
16 } else {
17 fn(e)
18 }
19 })
20 }
21 var wrapper = document.querySelector('.wrapper')
22 var one = document.querySelector('.one')
23 //不使用代理
24 // bindEvent(wrapper,"click",function(){
25 // console.log(one.innerHTML)
26 // })
27
28 //使用代理
29 bindEvent(wrapper,www.mhylpt.com"click",'p',function(e){
30 console.log(this.innerHTML)
31 })
复制代码
　　　　给最外层的div绑定一个点击事件，通过事件冒泡，当点击里面的p元素时，冒泡触发外层的div。这样无论你有多少个p，只要绑定一个事件就行。