css选择器+js方法

css

属性选择器：选择有某属性的标签

用法：标签名[attr]{}

符号	说明	例子
=	完全匹配	div[class = “search”]{background: red;} /* 只对search设置
*=	部分匹配	div[name = “search”]{background: red;} / *只要name属性值出现过search的都匹配
^=	起始匹配	div[name ^= “search”]{background: green;} /* name属性以search开头的都匹配 */
$=	结束匹配	div[name $= “search”]{background: blue;} /* name属性以search结尾的都匹配 */
[]	组合匹配	div[class][id]{background: pink;} /* 既有class也有id才会匹配 */

层次选择器

选择器	说明	例子
后代 M N{}	在指定的M找指定的N 孩子的孩子也选择	例子：div p{color:red;}
父子 M>N{}	孩子的孩子不选择
兄弟 M~N{}	找到M下面的所有N设置
相邻 M+N{}	只找向下相邻的一个*/

伪类选择器：

选择器	说明
:link{}	初始化的状态
:visited{}	被访问过的状态
:active{}	正在访问状态
:hover{}	鼠标悬浮状态

JS

• js基本数据类型

数据类型	说明
number	数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
string	字符串。 字符串 “abc” “a” ‘abc’
boolean	true和false
null	一个对象为空的占位符
undefined	未定义

• 某些方法

方法	说明
random()	返回 0 ~ 1 之间的随机数。 含0不含1
ceil(x)	对数进行上舍入
floor(x)	对数进行下舍入。
round(x)	把数四舍五入为最接近的整数。

• 事件

事件	说明
onload	一张页面或一幅图像完成加载。
onclick	单击事件
ondblclick	双击事件
onfocus	元素获得焦点
onblur	失去焦点
onchange	域的内容被改变。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onreset	重置按钮被点击。
鼠标事件
onmousedown	鼠标按钮被按下
onmouseup	鼠标按键被松开。
onmousemove	鼠标被移动。
onmouseover	鼠标移到某元素之上。
onmouseout	鼠标从某元素移开。
键盘事件
onkeydown	某个键盘按键被按下。
onkeyup	某个键盘按键被松开。
onkeypress	某个键盘按键被按下并松开。

BOM

Browser Object Model 浏览器对象模型

• 组成

对象	说明
Window	窗口对象
Navigator	浏览器对象
Screen	显示器屏幕对象
History	历史记录对象
Location	地址栏对象

Window：窗口对象

• 说明：

# window对象不需要创建可以直接使用 window使用
window.方法名();

# window引用可以省略
方法名();

• 提示框

方法	说明
alert()	显示带有一段消息和一个确认按钮的警告框。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()	显示可提示用户输入的对话框。

• 窗口

方法	说明
window.close(关闭对象)	关闭浏览器窗口。
window.open(“地址”)	打开一个新的浏览器窗口，返回新的Window对象

• 定时器

返回值：唯一标识，用于取消定时器

方法	说明
setTimeout(方法或计算表达式,毫秒)	在指定的毫秒数后调用函数或计算表达式（执行一次）
clearTimeout()	取消由 setTimeout()方法设置的 timeout。
setInterval(方法或计算表达式,毫秒)	按照指定的周期来调用函数（循环执行）
clearInterval()	取消由 setInterval()设置的 timeout

• 获取其他对象

对象	说明
window.history 或 直接使用
Location
Navigator
Screen
Document	获取DOM对象

Location：地址栏对象

使用	说明
location.reload()	重新加载当前文档。刷新
location.href	设置或返回完整的 URL

History：历史记录对象

使用	说明
history.back()	加载 history 列表中的前一个 URL。
history.forward()	加载 history 列表中的下一个 URL。
history.go(参数)	加载 history 列表中的某个具体页面。
history.length	返回当前窗口历史列表中的 URL 数量。

DOM

Document Object Model 文档对象模型

• 核心dom

dom	说明
Document	文档对象
Element	元素对象
Attribute	属性对象
Text	文本对象
Comment	注释对象

• Document

方法	说明
getElementById()	根据id属性值获取元素对象。id属性值一般唯一
getElementsByName()	根据name属性值获取元素对象们。返回值是一个数组
getElementsByTagName()	根据元素名称获取元素对象们。返回值是一个数组
getElementsByClassName()	根据Class属性值获取元素对象们。返回值是一个数组

• Element

增删属性
createAttribute(name)	创建属性
removeAttribute(“属性名”)	删除属性
setAttribute(“属性名”,“值”)	设置属性
node节点
节点1.appendChild(节点2)	向节点的子节点列表的结尾添加新的子节点。
removeChild()	删除（并返回）当前节点的指定子节点。
replaceChild()	用新节点替换一个子节点。
元素属性
innerHTML	标签体里的内容
style	元素样式。用法：标签元素.style.属性名 = 值;