1.jQuery 样式操作
1. 1jQuery 操作css的方法
1.1.1 添加行内样式:$('h4').css('color','red')
1.1.2 添加多个行内样式:$('h4').css({'color','red','border'})
注:添加行内样式直接获取到需要添加的标签,在后面加上css部分即可,css内样式需用''包括,用逗号隔开
1.1.3 $.each(要遍历的对象,回调函数,两个形参,第一个形参是索引,第二个形参是值) jQuery提供的遍历方法
1.2 设置类样式方法(添加,删除,切换)(add,remove,toggle)
2. jQuery 属性操作
jQuery 常用属性操作有三种:prop() / attr() / data() ;
2.1 元素固有属性值 prop()
prop():操作标签固有的属性,例如herf,src,type..。传一个参(属性名).获取该属性的属性值。传两个参(属性名.属性值)设置该属性为指定属性值
获取属性语法:prop("属性")
设置属性语法:prop("属性","属性值 " )
注:prop()相对普通属性的操作,更适合操作表单属性
2.2元素自定义属性值 attr()
attr():操作标签的自定义属性,除了操作自定义属性标签固有属性,除了(checked,disabled,selected,autofocus...这些值为布尔类型的属性)也可以操作,传参同上
获取属性语法:attr("属性") //类似原生的getattribute()
设置属性语法:attr("属性", "属性值" ) //类似原生的setattribute()
注:attr()相对普通属性的操作,更适合操作自定义属性
2.3 有关data
data方法,自定义属性,并不会显示在html结构里
附加数据语法:data("name","value")//向背选取的元素附加数据
获取数据语法:data("name") //向被选取元素获取数据
注意:还可以读取 HTML5 自定义属性 data-index ,得到的是数字型
3. jQuery 文本操作
jQuery的文本属性值常见操作有三种:html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性
3.1 普通元素内容html,相当于原生innerHTML
html() //获取元素内容
html("内容") //设置元素内容
3.2text():获取设置文本标签内容,传值同上,相当于原生innerText
text() //获取元素的文本内容
text("内容") //设置元素的文本内容
3.3val():获取,设置表单标签的value属性。不传值:获取value属性值。传值,设置value属性值,相当于原生value
val() // 获取表单的值
val("内容") // 设置表单的值
4. jQuery 元素操作
用jQuery方法,操作标签的遍历、创建、添加、删除等操作
4.1 遍历元素
4.1.1 $(“div").each(function(index,domEle){}),each()方法遍历匹配的每一个元素,主要用DOM处理,里面的回调函数有两个参数,index是索引号,domEle是每个DOM元素对象,不是jQuery对象,要使用jQuery方法,要把这个DOM元素转化为jQuery对象$(domEle)
4.1.2 $.each(object,function(index,element{})$each()方法课用于遍历所有对象,主要用于数据处理,比如数组,对象,里面的两个参数:index是索引号,element遍历内容
4.2 创建元素
以创建一个li为例:$("<li></li>")
4.3 添加元素
4.3.1 内部添加:最后追尾添加:element.append("内容");开头添加:emelent.prepend("内容")
4.3.2 外部添加:目标元素后添加:element.after("内容");目标元素前加:element.before("内容")
注:区别在于内部添加生成后元素为父子关系二外部添加生成后为兄弟关系
4.4 删除元素
4.4.1 element.remove():删除本身匹配的元素
4.4.2 element.empty():删除匹配的元素集合中所有的子节点,清空
4.4.3 element.html(""):清空匹配的元素内容
4.4.4 empty与html("")的区别:empty为彻底清空,html后续还可以设置内容
5. jQuery 尺寸位置操作
5.1
width、height 元素的宽高,只计算宽高
innerWidth、innerHeight 元素宽高 包含padding
outerWidth、outerHeight 元素宽高 包含padding border
outerWidth(true)、outerHeight(true) 元素宽高,包含padding border margin
5.2
offset():获取目标元素相对于文档的距离,也可以用来设置
position():获取目标元素相对于父元素的距离(translate,定位left/top,不包含内外间距)只能获取
scrollLeft():获取目标元素向左卷曲的值,可以设置卷取值
clone():复制节点,如果传true值,那么复制出的节点会包含原节点事件
scrolltop():获取目标元素向上卷曲的值,可以设置卷取值
6. jQuery 节点操作
6.1 创建节点:document.createElement('li')
6.2 放置节点:
6.2.1 末尾追加:父节点.append(新节点);新节点.appendTo(父节点)
6.2.2 首位添加:父节点.prepend(新节点);新节点.prependTo(父节点)
6.2.3 指定标签前一位:节点.before(新节点)
6.2.4 指定标签后一位:节点.after(新节点)
6.2.5 使用新节点替换指定节点:旧节点.replaceWith(新节点);新节点.replaceAll(旧节点)
6.3 删除节点
6.3.1 remove():谁调用删除谁
6.3.2 empty():谁调用清空谁