day16

回顾

1. jquery基本使用

<script src="jquery.min.js"></script>
<script>
    $(function(){
        $('li').css().css().attr().find()
    })
</script>
​
js 原生dom 和 jQuery DOM
$(原生DOM)  $(this)
jQuery的本质是 由 原生dom组成 的类数组 对象

2 选择器

# 基本选择器
# 层级选择器
# 基本筛选器
    :first
    :last
    :eq(index) 从0开始
    :lt(index)   <
    :gt(index)   >
    :odd   奇数
    :even   偶数
    :not()
# 内容选择器
    :contains(text)
    :has(选择器)
    :empty
    :parent
# 可见性选择器
    :hidden
    :visible
# 属性选择器
    [attr!=value]   不等
    少了 [attr|=val]  [attr~=val]
# 子元素选择器
# 表单选择器
    :input
# 表单对象选择器
    :disabled
    :enabled
    :checked
    :selected

筛选器（jquery DOM 的方法）

# 过滤
first()   $('li').first()
last()
eq(index)
filter(选择器)
not(选择器)
slice(start, end)
​
​
# 查找
find(选择器)     后代元素
children([选择器])      子元素
parent([选择器])    父元素
parents([选择器])           祖先元素
parentsUntil([选择器结束条件])     
offsetParent()   第一个定位祖先元素
next([选择器])
nextAll([选择器])
nextUntil([选择器])
prev([选择器])
prevAll([选择器])
prevUntil([选择器])
siblings([选择器])
closest([选择器])   从自己开始向上找，知道找到满足条件的
​
# 串联
add(选择器)
addBack()  $('ul').find('li').addBack()
end()  返回最近破坏性操作  $(dom).find('li').end()

day16

笔记

1 jQuery DOM操作

1.1 内部插入

append()     最后追加
appendTo()
prepend()    最前面追加
prependTo()

1.2 外部插入

after()     后面插入，永远紧挨被插入元素
insertAfter()  
before()   前面插入，永远紧挨被插入元素
insertBefore()

1.3 包裹

wrap()    每个元素各自包裹一层
wrapAll()  所有元素外被包裹成一层
wrappInner() 元素里面添加一个子元素
unwrap()   去掉包裹到body层

1.4 替换

replaceWith()   a.replaceWith(b)  用b 替换掉 a  如果b是页面中的话 注意clone（）
replaceAll()

1.5 删除

empty()  子元素全部清除
remove()  清除指定的子元素

1.6 克隆

clone()  克隆元素

2 jquery 属性操作

2.1 属性

attr(attrName[, value])   获取属性的值 或者 设置属性的值  内置属性和自定义属性
prop(attrName[, value])   获取属性的值 或者 设置属性的值  只能用于内置属性
removeAttr(attrName)
removeProp(attrName)

2.2 类

addClass()
removeClass()
toggleClass()
hasClass()  返回布尔值    <p class="item active">   p.hasClass('item')

2.3 文本值

html([html])  等同于innerHTML  没有参数 就是获取， 有参数就是设置  识别标签
text([text])  等同于innerText  获取或者设置  不识别标签一起输出
val([val])    用于表单控件 设置或获取

3 jquery 样式操作

获取（无参数）和设置（有参数）

3.1 CSS操作

css('属性', '值')
css('属性')

3.2 元素位置

offset()   相对于视口  可以获取可以设置  返回对象{left: ,top:}
position()   相对于第一个定位的祖先元素，margin减掉。 只能获取
scrollLeft()   控制里面内容的滚动 水平
scrollTop()    控制里面内容的滚动 垂直

3.3 尺寸

width() / height()             content
innerWidth() / innerHeight()   content+padding
outerWidth() / outerHeight()   content+padding+border