day48-BOM和DOM

目录

• 父子页面通讯
  • BOM
    • 计时器
  • DOM
    • 添加节点
    • 删除节点
    • 替换节点
    • 属性节点
      • 获取文本节点的值
      • 设置文本节点的值
      • attribute操做
    • 获取值操做
    • class的操做
    • 指定css操做
    • 事件
      • 绑定方式
    • js代码运行报错
• JQuery

父子页面通讯

BOM

window.close() //window可不写
window.open()
window.opener()  //子页面能够调用父页面的函数
history.back()
history.forward()
location.href 获取当前页面所在的url
location.href = url 跳转指定的url
location.reload 刷新页面

#三种提示框
alert
prompt
confirm

计时器

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")

// 自带的属性还能够直接.属性名来获取和设置（name不是自带属性，id是）
/*
imgEle.src
imgEle.src="..."
*/

获取值操做

//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操做

1. 对于没有中横线的CSS属性通常直接使用style.属性名便可

   obj.style.margin
   obj.style.width
   obj.style.left
   obj.style.position

2. 对含有中横线的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表示键盘编码
}

绑定方式

1. 做为标签的属性，写在标签内（不推荐）

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

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

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

js代码运行报错

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

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

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

2. 将js代码写在body最下方

JQuery

须要导入才能使用

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