jQuery(2)__jQuery基础<遍历,盒子>
遍历
①长辈
parent()//爸爸
parents()//爸爸爷爷...
parentsUntil()//爸爸爷爷..到某个标签结束
例:
jq(“span”).parent(“div”).css({"background-color":"blue"})//span的爸爸并且还得是div的背景为blue
jq(“span”).parents().css({"background-color":"blue"})//span的所有直系长辈的背景为blue
jq(“span”).parentsUntil(“div”).css({"background-color":"blue"})//span的爸爸爷爷..到div结束的背景为blue
②晚辈
children()//儿子
find()//所有后代
③同胞
siblings()//所有同胞元素
next()//下一个同胞元素
nextAll()//下一个和后面所有同胞元素
nextUntil(“元素1”)//到元素1之间的所有同胞盒子尺寸
width()//这里获得的宽高跟css()数据类型不一样
innerWidth()
outerWidth()
outerWidth(true)
height()
innerHeight()
outerHeight()
outerHeight(true)盒子位置
offset()// 获取或设置坐标值(相对文档)设置值后变成相对定位,返回一个坐标对象,设置也传对象属性是left和top //offset().top offset({left:100})
position() //获取坐标值(相对父亲)只能读取不能设置//readOnly
scrollTop()//设置或获取元素滚动条垂直卷去的距离:设置scrollTop(100)
scrollLeft()//设置或获取元素滚动条水平卷去的距离
data()
data()方法可以给jq元素设置和获取数据,以键值对的方式
$(‘div’).data(‘a’,100)//存了一个{‘a’:100}//如果已经存过key为’a’的值,这里就是更改
$(‘div’).data(‘a’)//获取存的值
$(‘div’).removeData(‘a’)//删除值(这里的删除跟赋值为null不一样)
修改文档结构
append()//在被选元素的结尾插入n个元素:$(‘#div’).append(‘你好’,’666’)
prepend()//在被选元素的开头插入n个元素
after()//在被选元素之后插入n个元素
before()//在被选元素之前插入n个元素
replaceWith()//把被选元素替换掉
remove()//删除被选元素和他的后代
empty()//删除被选元素的后代
上面的增改方法的参数可以是这5种
var txt1=’我就是个纯文本’
var txt2="<p>文本</p>"// HTML 标签字符串
vartxt3=$("<p></p>").text("文本") // 使用 jQuery 创建的对象
var $(“#div1”).after(txt3)
vartxt4=document.createElement("p");txt4.innerHTML="文本" //DOM 创建的对象
var $(“#div1”).after(txt4)
var txt5=$(‘#p1’)//文档中已经存在的,它自己会被从文档的原来位置移除
//例:$(‘#div1’).replaceWith(txt5)//把id为div1的元素替换成id为p1的元素
clone()//克隆元素(包括后代),返回的对象不在文档中//var cp1=$(‘#p1’)
clone(true)//浅克隆----深克隆