2018-06-19

BOM（browser object model）浏览器对象模型：

window：

location：

port  protocol host hostname path search hash

reload()

history：

length

back forward go(count)

screen：

height

width

avaiheight

avaiwidth

navigator：

User-Agent

document(DOM):

1、如何获取DOM对象？

通过id直接获取

document.getElementById()

document.getElementsByClassName()

document.getElementsByName()

document.getElementsByTagName()

2、操作DOM对象的内容

DOM对象.innerHTML

DOM对象.innerText

DOM对象.textContext

3、操作DOM对象的属性

DOM对象.属性名称

DOM对象['属性名称']

DOM对象.getAttribute("属性名称")

DOM对象.setAttribute("属性名称", "值");

4、操作DOM对象的样式

DOM对象.style.样式名称

getComputedStyle(DOM对象).样式名称

JavaScript事件：

事件源 事件函数 事件对象event

三种绑定事件的方式

1、页面绑定

button  onclik='事件函数()'

function 事件函数……

2、首先需要获取DOM对象

DOM对象.onclick = function(e) ……

3、监听事件

// 符合w3c规定的浏览器

dom对象.addEventListener("click",funciton(e));

var ev = e | window.event;

// IE9之前

DOM对象.attackEvent("onclick",function(e) {

event

})

jQuery：

jQuery的官方：http://jquery.com/

目前jQuery的版本主要分为三个分支：

jQuery的常规使用：

1、提供强大选择器，使得我们能够快速高效的获取DOM元素

2、提供大量好用的方法，方便于我们进行DOM操作

3、对于事件的处理

4、提供丰富的动画效果

5、对应ajax进行封装

使用jQuery：

下载 jQuery 推荐官网 jquery.com

script 引入进来

============================================

ready

onload

============================================

jQuery选择器：

1、基本选择器：

id #

class .

element

逗号

通配符 *

2、包含选择器

子代选择器 >

后代选择器 空格

下一个兄弟节点 +

后面所有的兄弟节点 ~ 

3、属性选择器

[title]

[title='xxx']

[title*='xxx']

[title^='xxx']

[title$='xxx']

4、表单选择器

:input

:text

:radio

……

:enabled

:disabled

:checked

:selected

5、过滤选择器：

:eq() eq()

:gt()

:lt()

:last() last()

:first() first()

:even()

:odd()