面向对象认识JS世界

整个JS可以用三句话来概括：

整个JS都是对象，其中包括了：

1. 内置对象：字符串、数组、日期、正则、数字、函数等等
2. BOM对象：windows、document、location、history
3. 自定义对象

BOM对象：

BOM对象是浏览器对象的简称，其实就是把浏览器看成一个对象，其中的属性和方法是：

--窗口

--屏幕

--导航栏

--历史访问记录

--标题

....

history对象的常用属性和方法：

 document.getElementById('btn1').onclick=function() {
        /*改变当前窗口的地址，则会打开新的网页*/
        window.location ='test.html'
    }
    document.getElementById('btn2').onclick=function() {
        /*改变当前窗口的地址，则会打开新的网页*/
        history.forward()
    }

文档内容对象（重点）

html是一种树结构，我们编写的html内容会被编译成一个dom树

树根：html

树的枝干：body

树的枝干的枝干：body中的各种html元素

叶子：属性

DOM对象树结构

编译成一棵树的目的：

增删改查

增：新增一个节点

删：删除一个节点

查：查找树的各个元素

改：修改元素

查询-基础：

getElementById

getElementByTagName

getElementByClassName

查询-兄弟姐妹八辈祖宗

parentNode:查询改节点的父节点

childern:获取子节点

nextSibling:兄弟节点

jquery查询：常规

#id选择器，.class类选择器

jquery查询：层级选择器

parent >child

选择所有指定‘parent’元素中指定的“child”的直接子元素

parent  + next 

紧邻选择器：选择紧接在“prev”元素后面的“next”元素

parent ~sibilings

匹配“prev”元素之后的所有兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器

jquery查询：基本过滤器

：eq(index)   在匹配的集合中选择索引值为index的元素

：gt(index)   在匹配的集合中选择索引值大于给定index的元素

：lt(index)    在匹配的集合中选择索引值小于给定index的元素

 

DOM新增或创建

新增基础方法：

div.innerHTML= '123'

div.innerHTML = '<p>123</p>'

通过创建元素的方式新增：

var p = document.createElement('p')
p.innerHTML = '可以的'
document.getElementById('demo').appendChild(p)

JQuery创建

$li = $('<li>one</li>')
$('#li').append($li)

DOM删除

删除基本方法：removeChild

ocument.getElementById('demo').removeChild(p)

JQuery方法

empty():删除所有匹配元素的内容，只是内容还剩架子

DOM属性样式操作

样式增删查改

var demo = document.getElementById('demo')
demo.style.height = '300px'

属性增删改查

demo.setAttribute('class','one' )

元素内容的增删改查

 demo.innerHTML = '好好学习，天天向上'
demo.innerHTML = ''

jQuery:属性attr

attr(attribute,vulue) 设置每一个元素属性

JQuery：表单元素val

val()获取第一个值

val(value)设置每一个元素值

JQuery:样式css

css(name,value)设置每一个元素的css值

DOM操作总结和框架概述

DOM总结：

document对象中放置了对dom树操作的各种工具

---增删改查

JQuery操作dom总结

由于兼容性问题，使用原生操作dom的方法非常麻烦，所以需要框架

----屏蔽了复杂性

----屏蔽了兼容性

JQuery框架概述

jquery框架包含了如下小框架（对象）：

--选择框架：比如$('#id')、$('.class')

--事件框架：比如click

--运动框架:比如animate

DOM元素节点操作框架,比如append

---样式操作框架：css

---属性操作框架：attr

---内容操作框架：html

ajax框架：ajax

框架和面向对象

框架可以理解为：

--函数：工具

--对象：工具包

--框架：多个工具包

DOM总结：

window API

window 对象属性

document对象

frames对象

history对象

location对象

navagator对象

screen对象

 

 

转载于:https://my.oschina.net/u/3876057/blog/1838931