04webapi(笔记).md

最新推荐文章于 2022-03-21 23:02:10 发布

笑中取栗

最新推荐文章于 2022-03-21 23:02:10 发布

阅读量318

点赞数

文章标签： 04WebApi学习

本文链接：https://blog.youkuaiyun.com/mxl00z/article/details/82903003

版权

WEB学习个人笔记专栏收录该内容

6 篇文章

订阅专栏

本文深入探讨JavaScript的基础知识，包括对象属性操作、DOM事件处理、元素创建与删除，以及兼容性解决方案。涵盖事件监听、节点属性、元素操作等关键主题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

day1

注意点：

js中获取对象class属性是通过用对象的.className

js中的style属性之间没有“-”,通用转变是第二个字母大写

day2

事件三要素：事件源，触发，响应

文档>节点（标签和标签中的文字）>元素（标签）

##获得元素的方式
通过选择器获得单个元素
$d o c u m e n t . q u e r y S e l e c t o r ();$
通过选择器过的多个元素的伪数组
$d o c u m e n t . q u e r y S e l e c t o r A l l ();$
通过Id来获得元素
$d o c u m e n t . g e t E l e m e n t B y I d ();$

…

innerText和innerHtml的区别

用innerText给节点添加文本可以添加进标签（标签文本不起作用，自动转换为相应符号）。

用innerText获取节点之间的文本时，只能获得文本，包括嵌套的标签里的文字。但获取不到标签

用innerHtml给节点添加文本时有添加标签，跟写进源代码一样的效果

用innerHtml获取节点之间的文本，可以获得带有标签的文本

innerText和textContent的兼容性

innerText普遍兼容，但IE8不兼容。因此需要写兼容性的代码

//获取和设置元素对象文本的实例
function getInnerTextById(element){
    var eleObj=my$(element);
    return eleObj.textContent=="undefined"?eleObj.innerHTML:eleObj.textContent;
}
function setInnerTextById(element,text){
    var eleObj=my$(element);
    if (eleObj.textContent=="undefined"){
        //    不支持textContent的写法
        eleObj.innerHTML=text;
    } else{
        eleObj.textContent=text;
    }
}

给元素自定义属性的操作

###添加自定义属性

在js代码中用点语法只能给这个对象添加该对象，不能获得它的值。应该用以下两个方法

getAttribute("ele")

###设置自定义属性

和setAttribute("ele","text")

###删除元素自定义属性

removeAttribute(“属性”)

添加点击事件的注意事项

给元素添加点击事件的时候，实际上是直接给元素的onclick添加这个方法的代码。

例如用for循环来添加点击事件

for(var i=0;i<4;i++){
	element.onclick=function(){
		console.log(i);
	}	
}
//给元素添加的事件是console。log（i） 这段代码，i不会随变量的变化。之后调用事件是直接用这个变量的现有值
//这段代码中点击事件是输出5

day3

##节点

###节点的属性：（可以使用标签–元素.出来，可以使用属性节点.出来）

nodeType:节点的类型1----标签，2------属性，3------文本
nodeName:节点的名字：标签节点—大写的标签名字，属性节点—小写的属性名字，文本节点----#text
nodeValue:节点的值：标签节点—null，属性节点—属性值，文本节点----文本的内容

获取节点和元素的十二行代码

获取父节点
$e l e . p a r e n t N o d e$
获取父元素
$e l e . p a r e n t E l e m e n t$
获取子节点
$e l e . c h i l e N o d e s$
获取子元素
$e l e . c h i l e r e n$
获取第一个子节点
$e l e . f i r s t C h i l d$
获取第一个子元素
$e l e . f i r s t E l e m e n t C h i l d$
获取最后一个子节点
$e l e . l a s t C h i l d$
获取最后一个子元素
$e l e . l a s t E l e m e n t C h i l d$
获取前一个兄弟节点
$e l e . p r e v i o u s S l i b l i n g$
获取前一个兄弟元素
$e l e . p r e v i o u s E l e m e n t S i b l i n g$
获取后一个兄弟节点
$e l e . n e x t S i l b l i n g$
获取后一个兄弟元素
$e l e . n e x t E l e m e n t S i l b l i n g$

##兼容节点和元素案例（获取元素）


function getFirstElementChildren(parent) {
    if (parent.firstElementChild) {//有意义
        return parent.firstElementChild;
    } else {
        var node = parent.firstChild;
        while (node && node.nodeType != 1) {
            node = node.nextSibling;
        }
        return node;
    }
}

function getLastElementChildren(parent) {
    if (parent.lastElementChild) {//有意义
        return parent.lastElementChild;
    } else {
        var node = parent.lastChild;
        while (node && node.nodeType != 1) {
            node = node.previousSibling;
        }
        return node;
    }
}

// 总结，获取节点的父节点和父元素，全部子节点和全部子元素在IE8，谷歌，火狐都得到支持
// 凡是获取节点和元素在火狐和谷歌中都得到相关节点和元素
// 在IE8中获取子节点得到的是子元素，获取子元素得到的是undefined

元素

###元素的创建

元素创建的目的

为了提高用户体验

元素创建的三种方式

$d o c u m e n t . w r i t e ();$

缺陷：如果是页面加载完毕后再调用这个方法，会把之前加载好的内容干掉
$e l e O b j . i n n e r H t m l = " t e x t ";$
$d o c u m e n t . c r e a t e E l e m e n t (" 标签元素 ")$
```
//案例代码
    var wz = [
        {name: "百度", href: "www.baidu.com"},
        {name: "搜酷", href: "91sokoo.com"},
        {name: "99496", href: "www.99496.com"},
        {name: "哔哩哔哩", href: "www.bilibili.com"}
    ];
    var btn = my$("btn");
    var dv = my$("dv");
    btn.onclick = function () {
        var tbObj = document.createElement("table");
        tbObj.border="1";
        tbObj.cellPadding="0";
        tbObj.cellSpacing="0";
        tbObj.style.height="200px";
        tbObj.style.width="300px";
        dv.appendChild(tbObj);
        for (var i = 0; i < wz.length; i++) {
            var trObj = document.createElement("tr");
            tbObj.appendChild(trObj);
            var name = document.createElement("td");
            setInnerTextByElement(name, wz[i].name);
            var href = document.createElement("td");
            href.innerHTML = "<a href=" + wz[i].href + ">" + wz[i].name + "</a>";
            trObj.appendChild(name);
            trObj.appendChild(href);
            trObj.onmouseover = mouseoverHandle;
            trObj.onmouseout = mouseoutHandle;
        }
    }

    function mouseoverHandle() {
        this.style.background="yellow";
    }

    function mouseoutHandle() {
        this.style.background="";
    }
```
备注：创建的节点要指定是添加在哪个节点后面。例如用appendChild（NewEle）
###元素的删除

$e l e . r e m o v e C h i l d (e l e)$

为按钮添加点击事件

注册/移除事件的三种方式

var box = document.getElementById('box');
box.onclick = function () {
  console.log('点击后执行');
};
box.onclick = null;
//谷歌和火狐支持 IE8不支持
box.addEventListener('click', eventCode, false);
box.removeEventListener('click', eventCode, false);

//IE8支持
box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);

function eventCode() {
  console.log('点击后执行');
}

兼容代码

function addEventListener(ele,type,callbackfunction){
    if (type.indexOf("on")!=-1){type=type.substring(2,type.length)}
    console.log(type);
    if (ele.addEventListener){
        ele.addEventListener(type,callbackfunction,false);
    } else if (ele.attachEvent){
        ele.attachEvent("on"+type,callbackfunction);
    }else{
        ele[type]=callbackfunction;
    }
}

其他内容

复选框的是否选择可以通过 checkBoxObj.chended的值来知道。如果选中的就是true。如果没选中就是false

day4

移除监听事件

使用什么方法添加监听事件，就用什么方法移除监听事件

兼容代码

<input type="button" value="点我啊" id="btn1">
<input type="button" value="删除第一个按钮的点击事件" id="btn2">
<script>
    addEventListener(my$("btn1"),"onclick",f1);
    addEventListener(my$("btn1"),"onclick",f2);
    addEventListener(my$("btn2"),"onclick",f3);
    function f1(){
        console.log("第一个方法")
    }
    function f2(){
        console.log("第二个方法");
    }
    function f3(){
        removeEventListener(my$("btn1"),"onclick",f2);
    }
</script>

为同个是元素添加

不同事件监听同个方法

<input type="button" value="iphone" id="btn">
<script>
    var btn = my$("btn");
    addEventListener(btn, "onclick", f1);
    addEventListener(btn,"onmouseover",f1);
    addEventListener(btn,"onmouseout",f1);
    function f1(e){
        switch (e.type){
            case "click":console.log("click事件");break;
            case "mouseover":console.log("mouseover");break;
            case "mouseout":console.log("mouseout");break;
        }
    }

事件冒泡

//事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了.

//事件冒泡,阻止事件冒泡,
  //如何阻止事件冒泡: window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持

  // e.stopPropagation(); 谷歌和火狐支持,

  my$("dv1").onclick=function () {
    console.log(this.id);
  };
  my$("dv2").onclick=function () {
    console.log(this.id);
    //window.event.cancelBubble=true;
  };
  //事件处理参数对象
  my$("dv3").onclick=function (e) {
    console.log(this.id);
    //阻止事件冒泡
    //e.stopPropagation();

```
console.log(e);
```

  };

//  document.body.onclick=function () {
//      console.log("颤抖吧,你们这些愚蠢的标签");
//  };

BOM

localhost对象

1536635878492

标注：localhost.href=url;可以实现网页跳转

localhost.assgin();效果同上

localhost.replase();也是跳转，但没有历史记录

localhost.reload();可以实现刷新操作

history对象

forword();前进

back()后退

go()

navigator

属性 userAgent可以获得浏览器版本

定时器

setInterval(fun,time);

clearInterval(定时器);

day5

动画代码案例

/**
 *element是移动的元素，target是目标x位置,step是每一步的部署，timeSpace是时间,返回值是该定时器
 * */
function animation(element,target,step,timeSpace){
    clearInterval(element.timeId);
    timeSpace=timeSpace?timeSpace:100;
    step=step?step:10;
    element.timeId=setInterval(function () {
        var position=element.offsetLeft;//800
        step=target-position>0?Math.abs(step):-Math.abs(-step);//-10
        if (Math.abs(target-position)>Math.abs(step)){
            // console.log(position)
            position+=step;
            element.style.left=position+"px";
        } else{
            clearInterval(element.timeId);
            element.style.left=target+"px";
        }
    },);
    return element.timeId;
}

克隆代码

ele.cloneNode(true|false);

offset系列

offsetWidth 获取元素的width —有边框
offsetHeight 获取元素的Height -----有边框
offsetTop
offsetLeft

offsetLeft和offsetTop所包含的内容

没有脱离文档流的情况

offsetLeft=父元素的margin-left+父元素的padding-left+父元素的border-left+自己的margin-left+padding-left(没有自己的padding-left)

##直接通过document获得元素

document.dody

document.title

document.documenElement-----------------HTML标签

day6

scroll系列

scrollTop ------获得卷曲出去的高度
scrollLeft -----获得卷曲出去的距离
scrollWidth -----如果元素没有内容或内容不足撑大容器，就是容器的宽度。不然就是内容的实际宽度（overflow隐藏时获得的宽度也是实际内容的宽）
scrollHeight ------同上

获取页面被拉动的坐标

$$
获取很横坐标

window.pageXOffset（IE8支持）

document.documentElement.scrollLeft||document.body.scrollLeft

获取很纵坐标

window.pageYOffset（IE8支持）

document.documentElement.scrollTop||document.body.scrollTop
$$

兼容获取网页被拉动的代码

function  getWindowScroll(){
    return {
        scrollTop:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop,
        scrollLeft:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft,
    }
}

client系列-可视区域

clientWidth:可视区域的宽（没有边框），边框内容的宽度

clientHeight:可视区域的高（没有边框），边框内容的高度

clientTop:上边框的宽度

clientLeft:左边框的宽度

clientX：鼠标的横坐标

clientY:鼠标的纵坐标

获取鼠标位置

function （e）{

//直接传参数的方法谷歌和火狐都支持

//window.event在IE8里支持

e=window.event||e;

var x=e.clientX;

var y=e.clientY;

}

获得元素计算后的样式属性值

谷歌火狐支持
$w i n d o w . g e t C o m p u t e d S t y l e (e l e, 伪类选择器 ∣ ∣ n u l l) [a t t r];$
IE8支持
$e l e . c u r r e n t S t y l e [a t t r]$

兼容代码

function getStyle(ele) {
    return window.getComputedStyle ? window.getComputedStyle(ele, null) : ele.currentStyle;
}

day7

##//获取鼠标的坐标位置


//e.pageX在谷歌火狐支持，但在IE8里不被支持
//如果想要获取就算屏幕有卷曲之后的鼠标位置，IE8应该用e.clientX+window.pageYOffset
var x=e.pageX?e.pageX:e.clientX+window.pageYOffset;
var y=e.pageY?e.pageY:e.clientY+window.pageYOffset;

//设置鼠标移动的时候,文字不被选中

//window.getSelection在IE8中不支持
window.getSelection? window.getSelection().removeAllRanges():document.selection.empty();