学习要点
- DOM操作
- 设置元素及内容
- 元素属性操作
- 元素样式操作
- css方法
jquery已经将最常用的DOM操作方法进行了有效封装。不需要考虑兼容性
DOM 简介
（一）设置元素及其内容
- 方法名html() 获取元素中HTML内容
- 方法名html(value) 设置元素中HTML内容
- 方法名 text() 获取元素中文本内容
- 方法名text(value) 设置源生中文本内容
- 方法名val() 获取表单中的文本
- 方法名val(value) 设置表单中的文本内容
在常规DOM元素中，我们可以使用html() text()方法来获取内部的数据。
html()方法可以获取或设置html内容,text()可以获取或设置文本内容
$("#box").html() //获取html内容
$("#box").text() //获取文本内容，会自动清理HTML标签
$("#box").html("<div>www.abc.com</div>") //设置HTML内容
$("#box").text("<div>www.abc.com</div>") //会自动转义HTML标签
特别注意的就是当我们使用html()或text()设置元素内容的时候，会清空原来的数据。而我们期待追加数据的话可以
$("#box").html($("#box").html()+"<div>123</div>");//追加数据
如果元素是表单的话，jQuery提供了val()进行获取或设置内部的文本数据.
$("input").val() //获取表单的内容
$("input").val("www.abc.com") //设置表单内容
(二) 元素属性操作
$("div").attr("title"); //获取属性的属性值
$("div").attr({ //设置属性
"title":"123",
"bbb": "234"
})
移除属性
$("div").removeAttr("title"); //删除指定的属性
(三) 元素样式操作
元素样式操作包括直接设置CSS方法，增加css类别，类别切换，删除类别这几种。
$("#div1").css({
"width" : "100px",
"height" : "200px"
}) //设置某个行内多个css样式
addClass(class) 给某个元素添加一个css类
addClass(class1 class2 class3) 给某个元素添加多个css类
removeClass(class) 删除某个元素的css类
removeClass(class1 class2 class3) 删除某个元素的多个css类
toggleClass(class) 来回切换默认样式和指定样式
在jquery中提供了一个遍历的工具专门来处理对象的数组$.each()方法
$.each(box,function(attr,value){
alert(attr+"||"+value);
})
//第一次循环
$("p").each(function(index,element){
console.log(index+element.innerHTML)
})
//第二次循环标签
CSS 方法
比如.css(), addClass()等。
- width()长度
width() 获取某个元素的长度
width(value) 设置某个元素的长度
width(function(index,width){}) //通过匿名函数设置元素长度
$("div").width(); //获取元素的长度，返回类型为number
$("div").width(500); //设置元素的长度。直接传数值。
$("div").width(function(index,value){ //index是索引value是原本值
return value-500
})
- height() 高度
$("div"),height() //获取元素的高度返回类型是num
$("div").height(500); //设置元素的高度。默认加PX
- innerWidth() 获取元素的宽度包括内边距padding
- innerHeight() 获取元素的高度包括内边距padding
- outerWidth() 获取元素的宽度包括边框border和内边距padding
- outerHeight() 获取元素的高度包括border和内边距padding
- outerWidth(true) 全部包含包括外边距
- outerHeight(true) 全部包含包括外边距
- offset() 获取某个元素相对于视口的偏移位置
- position() 获取某个元素相对于父元素的便宜位置
- scrollTop() 获取垂直滚动条的值
- scrollTop(value) 设置垂直滚动条的距离
- scrollLeft() 获取水平滚动条的值
- scrollLeft(value) 设置水平滚动条的值
$("div").offset().left //获取左边的偏移
$("div").offset().top //获取上边的偏移
$(window).scrollTop() //获取当前滚动条距离必须是window
$(window).scrollTop(300) //设置当前滚动条的距离
