想要操作,或者获取元素原有属性,jQuery为我们良好的封装了各种,属性和方法。以下,便是:
jQuery 属性操作
:prop() / attr() / data() ;
1.操作或获取固有属性,什么是固有属性,就是元素本身自带的属性,比如,input表单的value属性 和 a标签的herf属性。
prop(),获取在匹配的元素集中的第一个元素的属性值.
prop(属性值):获取属性 prop(属性,属性值),修改属性的属性值。
2.操作或获取自定义属性:自定义属性,用户给自己自定义添加的属性,称为自定义属性,通过attr()来获取
alttr(属性),获取属性。
alttr(属性,属性),修改属性。
attr() 除了普·通属性操作,更适合操作自定义属性。(该方法也可以获取 H5 自定义属性)。
数据缓存 data()
data() 方法可以在指定的元素上存取数据,并不会修改 DOM 元素结构。一旦页面刷 新,之前存放的数据都将被移除。
data("name","value"),向被选元素附加数据。
data("name"),向被选元素获取数据。
jQuery 文本属性值
常见操作有三种:html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和
value 属性,主要针对元素的内容还有表单的值操作。
1.普通元素内容是html() //类似于源生的 inner HTML
$("div").html(),获取元素内容
$("div").html("你好嘛"),修改元素内容
2.元素内容text()相当于原生的inner text
$("div").text(),获取元素内容
$("div").text("你好嘛"),修改元素内容
html()和text()的区别:html()不识别html标签的 如果div里面有个span元素,那么会连着span标签获取过来,text(),识别html元素。
3.val() 获取表单元素
$("div").val(),获取元素内容
$("div").val("你好嘛"),修改元素内容
遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操 作,就需要用到遍历。
语法1:$("div").each().
$("div").each(funcount(index,ele){xxxx});
1.each()遍历div每个元素,主要用DOM处理
2.里面有两个参数 index 是索引号,ele是DOM对象元素,不是jQuery元素对象。
3.如果想要用jQuery方法 就要转换$("ele")
语法2:$.each($("div"),funcount(index.ele){*****});
$.each(obj,funcount(index,ele){XXXXXX});
$.each().主要用于遍历任何对象,用于数据处理,数组,对象
注意:此方法用于遍历 jQuery 对象中的每一项,回调函数中元素为 DOM 对象,想 要使用 jQuery 方法需要转换。
创建、添加、删除 元素
1.创建元素
var li=$(<li></li>); 创建一个li
2.添加
内部添加 : 内部添加就是添加到匹配元素的里面,父子关系
var li=$(<li></li>); 创建一个li
$("ul").append(li)// 添加到匹配元素的后面
$("ul").prepend(li) // 添加到匹配元素的前面
外部添加:添加到元素的外面,跟匹配元素是 兄弟关系。
$("ul").after("div"),添加到匹配元素的后面
$("ul").before("div"),添加到匹配元素的前面
3.删除元素
element.remove()// 删除元素本身
element.empty()删除匹配元素中的所有子元素节点
element.html("")//清空匹配元素内容
jQuery 尺寸操作
width()/height() 取得匹配元素宽度和高度,只算width 和hight
innerwidht()/innerheight() 取得匹配元素宽度和高度,包含padding值+widht higth
outerwidth()/outerheight() 取得匹配元素宽度和高度,包含padding+border+width/heght
outerwidth(ture)/outerheight(ture) 取得匹配元素宽度和高度 padding+border+maring+width/heght
- 以上参数为空,则获取相应值,放回的数字型,
- 如果参数为数字,则修改相应值
- 参数不毕写单位
jQuery 位置操作
jQuery的位置操作主要有三个: offset()、position()、scrollTop()/scrollLeft() , 具体介绍如下:
1.offset() 获取距离文档的距离 跟父元素没有关系
1.offset()设置或获取元素偏移
offset方法设置或放回被选中元素相对于文档的偏移坐标,跟父级没有关系
offsetTop()// 获取元素距离文档上方的距离
offsetLeft()// 获取元素距离文档左边的距离
2.position() 获取距离父元素的距离,如果没有父元素则是body,这个方法只能获取,不能赋值
1.position()设置或获取元素距离父元素带有定位的距离
position方法设置或放回被选中元素相对于父级带有定位的偏移坐标,如果没有则以body为主
positionTop()//
positionLeft()//
3.scrollTop() / scrollLeft()设置或获取元素被卷去的头部和左侧
scrollTop()/scrollLeft(),方法设置或放回被选元素被卷去头部。
不跟参数是获取,跟参数则是,修改。
<body>
<div class="father">
<div class="son"></div>
</div>
<div class="back">返回顶部</div>
<div class="container"></div>
<script>
$(function() {
// 1. 获取设置距离文档的位置(偏移) offset
console.log($(".son").offset());
console.log($(".son").offset().top);
// $(".son").offset({
// top: 200,
// left: 200
// });
// 2. 获取距离带有定位父级位置(偏移) position 如果没有带有定位的父级,则以文档为准
// 这个方法只能获取不能设置偏移
console.log($(".son").position());
// $(".son").position({
// top: 200,
// left: 200
// });
// 3. 被卷去的头部
$(document).scrollTop(100);
// 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft()
// 页面滚动事件
var boxTop = $(".container").offset().top;
$(window).scroll(function() {
// console.log(11);
console.log($(document).scrollTop());
if ($(document).scrollTop() >= boxTop) {
$(".back").fadeIn();
} else {
$(".back").fadeOut();
}
});
// 返回顶部
$(".back").click(function() {
// $(document).scrollTop(0);
$("body, html").stop().animate({
scrollTop: 0
});
// $(document).stop().animate({
// scrollTop: 0
// }); 不能是文档而是 html和body元素做动画
})
})
</script>
</body>