Js总结

最新推荐文章于 2022-11-13 15:56:21 发布

小P趴菜

最新推荐文章于 2022-11-13 15:56:21 发布

阅读量180

点赞数

分类专栏： WEB基础

本文链接：https://blog.csdn.net/qq_32458791/article/details/96485108

版权

WEB基础专栏收录该内容

31 篇文章 1 订阅

订阅专栏

BOM

windows:是浏览器的一个实例对象，即是js访问浏览器窗口的一个接口，又是ES的一个Global对象。所以说每增加一个方法或者对象都是为windows对象添加一个属性。

frame(框架)

每个frame都是一个新的窗口，都有自己相对应的windows对象。

top指向最外层的frame,frames集合里保存着每个ifame可以通过top.frame[index]访问或者windows.frame["name"]访问

窗口大小

location

对应的是浏览器地址栏对象，通过assign()方法可以跳转到新的窗口，replace()方法会替换当前窗口的的页面并且不能后退到以前的页面，reload()会重新加载当前的页面

navigator

成为区别客户端浏览器的标准

history

history保存了我们浏览的记录，通过back()可以后退一页，forword可以前进一页，go可以以几页为单位。

DOM

DOM描述了一棵分层次的节点树，通过操作节点可以达到修改页面的效果，节点具有不同的类型，不同的属性。

节点类型

documnent:文档类型

通过这个文档节点不仅可以获取页面的基本信息，还可以操作页面的外观和底层结构。

1子节点

documnent.documentElement始终指向html元素

document.body始终指向body元素

2文档信息

document.title获取到文档的标题

document.domain获取到文档的域名（可以用来解决跨域问题，用处不大）

document.url获取到完整的页面路径

document.referrer获取到访问当前页面页面的路径

3查找元素

document.getElementById()

document.getElementByTagName()

4特殊集合

5DOM一致性检查

6文档写入

<body>
<div>
    <button onclick="fa()">发布</button>
    <div>
        <script type="text/javascript">
        document.write("sssssfdsafdsafads");
        </script>
    </div>
</div>
</body>

Element类型

用于表现html或者xml元素，提供了对元素的标签名，子节点及特性的访问。

1html元素

2取得特性

每个元素都有一个或者多个特性，这些特性的用途是给出相应元素或其元素内容附加信息。操作DOM的方法主要有三个

getAttribute(),setAttribute(),removeAttribute().一般优先直接操作元素的属性元素名.属性

3设置特性

setAttribute()主要接受俩个参数，要设置的特性名和特性值。如果特性已经存在则替换，不存在则增加。一般优先直接使用标签名.属性

4创建元素

var div = document.creatElement("div")这个方法接受的参数是一个html元素

通过属性添加额外的特性

div.className ="hahah";

追加到一个父标签后

document.body.appendChild(div);

动态js和样式

DOM扩展

选择符api

queryselecor（）很好的一个方法可以通过id,css,标签获取原素。

queryselecorAll()传入的参数和$()一样，但会匹配所有返回一个集合。

事件

1事件含义

事件就是用户或者浏览器做出的一些动作

2事件流

事件冒泡，事件捕获DOM

3事件处理程序

事件处理程序都以on开头，事件处理程序中的代码在执行期间有权访问全局的变量

event代表事件对象，this代表事件的目标元素，event.type可以访问事件的类型，通过this可以访问元素的所有属性。

HTML事件处理程序

1直接在标签上<div οnclick="add">ssss</div>绑定事件处理程序

DOM0事件处理程序

document.gentElememtById("id").onclick = function(){}

阶段被处理

DOM2事件处理程序

addEventListener("click",frametext,false) 
removeEventListener("click",frametext,false);

1所有dom节点中的元素都具有这俩个函数，接受三个参数第一代表事件，第二代表函数，第三代表在什么阶段触发false代表捕获时触发，true代表冒泡时触发。

2移除时传入的参数要和添加时传入的参数一样，匿名函数无法移除

3一般都是在冒泡时处理，兼容性好。相比于前面的优点dom2可以绑定多个监听函数

事件对象

1最重要的俩个要素

target事件监控的目标，type事件的类型，this代表事件的目标对象，可以获取他的所有信息

使用DOM0绑定多个事件

event.preventDefault();//阻止元素的默认行为

event.stopPropagation();//阻止事件冒泡，向上一层传递。

考虑js代码加载和html5元素解析顺序的问题

如果js程序里不需要用到h5元素对象的信息，则加载解系先后顺序无关，如果需要用到，则要先加载解系h5。

正则表达式

对象方式创建

va reg = new RegExp ("")

直接字面量创建

var reg = / pattern(模式)/flags（标志）

用法

一般都是在函数里使用正则找到的数据进行操作

var reg = /s/;
var te = "hello sme";
var ls = te.replace(reg,600);

玩转匹配模式

字面含义

就是字符代表的本身含义

特殊语义元字符

字符代表的特殊含义（\进行转义的标志符，反斜杠）

字符类

[]:字符集里面的所有字母会当作单个字符进行匹配

^apple:匹配一个字符串里不包含的字符

重复

{}

选择分组引用

|选择符

支持的方法

search()参数为一个正则表达式，如果找到返回的是第一个找到的位置，否则为-1

replace()第一个参数可以为正则表达式，第二个参数为字符串内找到的要被替换掉的内容

match()

split()

加载更多的实现

我们在项目中经常使用到下拉加载更多，之前要么是底部写加载按钮，要么是引入插件。今天终于有时间手写一个了，之前感觉挺麻烦，明白原理后，其实很简单...

scrollTop：滚动视窗的高度距离window顶部的距离，它会随着往上滚动而不断增加，初始值是0，它是一个变化的值；
clientHeight:它是一个定值，表示屏幕可是区域的高度；
scrollHeight：页面不能滚动时是不存在的，body长度超过window时才会出现，所表示body所有元素的长度，

由上面的三个值所产生一个原理公式：

scrollTop + clientHeight >= scrollHeight


    let clientHeight  = document.documentElement.clientHeight; //浏览器高度
    let scrollHeight = document.body.scrollHeight;
    let scrollTop = document.documentElement.scrollTop;
 
    let distance = 50;  //距离视窗还用50的时候，开始触发；

    if ((scrollTop + clientHeight) >= (scrollHeight - distance)) {
        console.log("到底了，开始加载数据");
    }