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)//浅克隆----深克隆