day48

Posted on 2019-11-19 10:52 猪宝店幼儿园阅读(143) 评论(0) 编辑收藏举报

DAY48

BOM

window.close() //window可不写

计时器

 function func() {
        alert(123)
    }
    function show() {
        var t = setInterval(func,3000);  // 每隔三秒钟执行一次
        function inner() {
            clearInterval(t)    //清除计时器对象
        }
        setTimeout(inner,9000)  //设定事件后执行，只执行一次，可以用clearTimeout取消
    }
    show()

DOM

### 查找标签

#### 直接查找

document.getElementById 根据ID获取一个标签
document.getElementsByClassName 根据class属性获取
document.getElementsByTagName 根据标签名获取标签合集

#### 间接查找

parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素

### 节点操作

#### 创建节点

```js
var divEle = document.createElement("div");

添加节点

somenode.appendChild(newnode)；追加一个子节点（作为最后的子节点）
somenode.insertBefore(newnode,某个节点);把增加的节点放到某个节点的前边。
var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

删除节点

//获得要删除的元素，通过父元素调用该方法删除。

somenode.removeChild(要删除的节点)

替换节点

somenode.replaceChild(newnode, 某个节点);

属性节点

获取文本节点的值

var divEle = document.getElementById("d1")
divEle.innerText；//只是文本
divEle.innerHTML；//包括标签

设置文本节点的值

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

attribute操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

获取值操作

//elementNode.value
var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

class的操作

//通过对象.的方式操作
className  获取所有样式类名(字符串)

classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加

指定css操作

对于没有中横线的CSS属性一般直接使用style.属性名即可
```
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
```
对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可
```
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
```

事件

当符合某个条件下，自动触发的动作或响应

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               应用场景：点击进入input输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入                                                  完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.                                                      （select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。
document.addEventListener("keydown",keydown);
//键盘监听，注意：在非ie浏览器和非ie内核的浏览器
//参数1：表示事件，keydown:键盘向下按；参数2：表示要触发的事件
function keydown(event){
//表示键盘监听所触发的事件，同时传递传递参数event
    console.log(event.keyCode);//keyCode表示键盘编码
}

绑定方式

作为标签的属性，写在标签内（不推荐）

<div id="d1" onclick="changeColor(this);">点我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>

写在script内，通过查找绑定（推荐使用）

<div id="d2">点我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    this.innerText="嘻嘻嘻";
  }
</script>

js代码运行报错

代码自上而下加载，下面的代码还未加载就已经在上面调用了

利用onload，等待某个对象加载完毕之后再执行

JQuery有点类似于python后端的模块 帮你封装了一些简易的操作

将js代码写在body最下方

JQuery

需要导入才能使用

/*jQuery('选择器').action('属性')*/
/*$('选择器').action('属性')*/

刷新页面返回顶部

xwjhyy