jquery day2

11、attr的弊端

<div style="color:blue;width:200px"></div>

<script>

attr("style","color:red") //div宽度消失

css("color","red") //div颜色为红色，宽度200px，即仅改变颜色

css({"color":"red","width":"200px"}) //div为红色，宽度为200px

</script>

attr设置style时，会将style所有的方法，包括宽度整句话都改为"color:red",即宽度会消失，故设置style时常用css

12、parent()

通常，jquery在获取自身属性时只获取第一个（text()）除外，获取自身以外的元素时获取所有的，比如：

var div=$('.div').parent()

parent()将获取所有.div的父亲

13、parents()

var div=$('.div').parents() //将获取.div所有的长辈

14、parentsUntil() //爸爸爷爷.....到某个标签结束

jq(“span”).parentsUntil(“div”).css({"background-color":"blue"})

//span的爸爸爷爷..到div结束的背景为blue

15、children() //儿子（注：jquery中，不包括空文本节点，dom操作中包括空文本节点

16、find() //查找所有后代

var re=$("#fdiv").find("#div") //在#fdiv范围里来找所有的#div

17、siblings() // 所有同胞元素

next() //下一个同胞元素

nextAll() //下一个以及后面所有同胞元素

nextUntil("元素1") //到元素1之间的所有同胞

18、修改文档结构

append() //在被选元素的结尾插入n个元素

注：$(".div1").append(str1)

//若str1在dom里已存在，则在str添加到.div1里后原位置的str1会被抽掉，若不存在，则直接添加

prepend() //在被选元素的开头插入n个元素

after() //在被选元素之后插入n个元素

before() //在被选元素之前插入n个元素

replaceWith() //把被选元素替换掉

remove() //删除被选元素和他的后代

empty() //删除被选元素的后代

clone() //克隆元素(包括后代),返回的对象不在文档中

clone(true) //浅克隆----深克隆

19、盒子尺寸

width() //这里获得的宽高跟css()数据类型不一样

innerWidth()

outerWidth()

outerWidth(true)

 

height()

innerHeight()

outerHeight()

outerHeight(true)

///这八个方法有的不能设置(没有setter方法),根据实际情况来:比如width(100)

注：两个盒子之间的距离取决于较大的margin的盒子的margin，当其中一个盒子的margin改变时，不影响另一个盒子的outerHeight(true)

20、盒子位置

offset() // 获取或设置坐标值(相对文档)设置值后变成相对定位,返回一个坐标对象,设置也传对象属性是left和top //offset().top    offset({left:100})

position()       // 获取坐标值(相对父亲)只能读取不能设置

scrollTop() //设置或获取元素滚动条垂直卷去的距离:设置scrollTop(100)

scrollLeft() //设置或获取元素滚动条水平卷去的距离

21、data()

data()方法可以给jq元素设置和获取数据,以键值对的方式

$(‘div’).data(‘a’,100) //存了一个{‘a’:100} 如果已经存过key为’a’的值,这里就是更改

$(‘div’).data(‘a’) //获取存的值

$(‘div’).removeData(‘a’) //删除值(这里的删除跟赋值为null不一样)