day15

回顾

事件

鼠标
click
dblclick
contextmenu
mouseenter
mouseleave
mousemove
mousedown
mouseup
​
键盘
keydown
keyup
keypress
​
表单
submit
reset
blur   失去焦点
focus  获取焦点
change  绑定在select
select  
input  事实改变  兼容性
​
文档事件
load  
unload
beforeunload
​
图片事件
load
abort
error
​
其他事件
scroll
resize

ele.on事件 = function(){}
ele.addEventListener('事件名', function(){}, true/false)

Event对象
clientX
clientY
keyCode
button
target  具体触发事件的元素
stopPropagation()  阻止事件冒泡
preventDefault() 阻止默认动作

 

BOM

window  
    window.innerWidth
    window.inenrHeight
​
history
    length
    back()
    forward()
    go()
​
screen
    
​
location
    href
    protocol
    host
    hostname
    port
    pathname
    search
    hash
​
navigator
    userAgent

 

DOM

文档对象模型

 

 

day15

jQuery

1. jQuery 的介绍

2. jQuery的基本使用

2.2 文档就绪事件

$(document).ready(function(){
    code...
})
​
//简写
$(function(){
    
})

 

2.2 jQueryDOM和原生DOM

jQuery 通过 $(选择器) 获取元素，该元素对象是jqueryDOM。 与原生DOM不同
jQueryDOM是在原生DOM基础上进行的的封装，本质上是由原生DOM组成的类数组对象，可以 [索引] 得到原生DOM
$(原生DOM) 转为 jQuery DOM
​

 

 

3. jQuery 选择器

3.1 基本选择器

同CSS3 基本选择器

3.2 层级选择器

同CSS3的层级选择器

空格
>
+
~

3.3 基本筛选器

:first
:last
:eq()  从0开始
:odd   奇数
:even  偶数
:lt()  小于   
:gt()  大于
:not(选择器)

3.4 内容选择器

:contains(text)  包含指定文字的元素
:has(选择器)     包含指定子元素的 元素
:empty           没哟子元素也没有内容的 元素
:parent            有子元素或者有内容 的 元素

3.5 可见性选择器

:hidden
:visible

3.6 属性选择器

[attr]              .list img[title]
[attr=value]        img[title=hello]
[attr!=val]   不等于
[attr^=val]
[attr$=val]
[attr*=val]  attr属性 包含 val
[][][]
​
注意
少了  ~= 和  |=

3.7 子元素选择器

:first-child
:first-of-type
:last-child
:last-of-type
:nth-child
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type

3.8 表单选择器

:input  所有的表单控件  input、select、textarea、button
:text       input type=text
:password
:radio
:checkbox
:submit
:reset
:button
:file

3.9 表单对象选择器

:disabled
:enabled  可用的
:checked   
:selected  定义选中项 option

 

4 jQuery 筛选器

4.1 过滤

eq(index) 从0开始   指定索引值
first()             第一个
last()              最后一个
filter(选择器)      并且符合选择器条件的元素
not(选择器)         除了这个选择器之外的所有元素
has(选择器)         包含指定选择器的祖先元素
slice(start, end)  从当前选择器中 截取

4.2 查找

查找 子元素
children([selector])  子元素
find(selector)       后代元素
​
查找 父元素
parent([selector])
parents([selector])
parentsUntil([selector])
offsetParent()
​
#兄弟元素
next([selector])  后面紧邻的兄弟元素
nextAll([selector])  后面所有的兄弟元素
nextUntil([selector])  后面兄弟元素 指定结束条件
prev([selector])  前面紧邻的兄弟元素
prevAll([selector])
prevUntil([selector])
siblings([selector])  所有的兄弟元素（除了自己）
​
#其他
closest(selector)  从自己开始往祖先元素找，返回第一个满足条件的

 

4.3 串联

add()
addBack()
end()