图片.png
---学习视频是黑马程序员pink老师的教学视频
传送门
----因为前天喝多了，昨天学的效果不好，忘记了一些今天重新走一遍 ♢︹♢
3.4 jQuery属性操作
3.4.1 jQuery prop()
获取元素默认值
$("a").prop("href")
设置元素默认值
$("a").prop("title","都挺好")
3.4.2 attr()
获取自定义属性
$("div").attr("index")
设置自定义属性
$("div").attr("index",4)
3.4.3 数据缓存 data()
data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存的数据都会被删除
这里面的数据是存放在元素的内存里面
语法：
$("span").data("uname","andy")
输出：
$("span").data("uname")
这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型
console.log($("div").data("index"));//4
3.4.4 全选全不选案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style type="text/css">
*{
list-style: none;
}
</style>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<input type="checkbox" name="" id="" value="" />全选
<div id="">
<input type="checkbox" name="" id="" value="" />A
<input type="checkbox" name="" id="" value="" />B
<input type="checkbox" name="" id="" value="" />C
</div>
<input type="checkbox" name="" id="" value="" />全选
<script type="text/javascript">
$(function(){
$("input").eq(0).change(function(){
console.log($("input").eq(0).prop("checked"))
$(" input").prop("checked",$("input").eq(0).prop("checked"))
})
$("input").eq(4).change(function(){
console.log($("input").eq(4).prop("checked"))
$(" input").prop("checked",$("input").eq(4).prop("checked"))
})
$("input").change(function(){
// console.log($("div input:checked").length)
if($("div input:checked").length === 3){
$(" input").prop("checked",true)
}else{
$(" input").eq(0).prop("checked",false)
$(" input").eq(4).prop("checked",false)
}
})
})
</script>
</body>
</html>
3.5 jQuery 内容文本值
3.5.1 获取设置元素内容
$("div").html("123")
获取设置元素文本内容
$("div").text("123")
获取设置表单值
$("input").val("123")
3.5.2
获取祖先元素
parents()
$("div").oarents("body")
保留两位小数
tofixed(2)
可以让我们保留两位小数
3.6 jQuery元素操作
主要是遍历 创建 添加 删除元素操作
遍历：
语法一：
$("div").each(function(index,domEle){xxx})
1.each（）方法遍历匹配的每个元素，主要用DOM处理，each每一个
2.里面的回调函数有两个参数：index是每个元素的索引值；demEle是每个DOm元素对象不是jQuery对象
语法二：
$.each(object , function (index,element){ xxx; }))
1 $.each()的方法可以用于遍历任意对象，主要用于数据处理，比如数组，对象
2 里面有两个参数： index是索引号 element遍历内容
$.each({
name: "andy",
age: "18"
},function(i,ele){
console.log(i) // 输出 name age (属性名)
console.log(ele) // 输出 andy 18 （属性值）
}
3.6
创建元素
var li = ("<li>一个li元素</li>")
添加元素
内部添加
$("ul").apperd(li)
把元素放到内容的最后面 类似原生的appendChild
$(ul).prepend(li)
内部添加并且放到内容的最前面
外部添加
var div = $("<div>2</div>")
$("元素").after(div)
$("元素").before(div)
删除元素
element.remove() // 删除匹配的元素（本身）
element.empty（）//删除匹配的元素集合中的所有子节点
element.html("") //清空匹配的元素内容
嘟嘟嘟哒哒哒~~
3.7 jQuery尺寸，位置操作
3.7.1 尺寸方法
1 width（） 获取设置元素width或height大小
$("div").width(300)
2 innerWidth() /innerHeight() 获取设置元素 width/height + padding 大小
$("div").innderWidth()
3 outerWidth() / outerHeight() 获取设置元素 width / height +padding + border大小
$("div").outerWidth
4 outerWidth(true) / outerHeight(true)获取设置 width和height +padding + border + margin
3.7.2 jQuery位置方法
有 offset（）。position（） 。scrollTop/scrollLeft()
1 获取设置距离文档的位置（偏移）offset()
offfset() 方法设置或返回被选元素相对于稳当的偏移坐标，跟父级没有关系。
$("元素").offset({
top:300,
left:300
})
2 position（） 获取距离带有定位父级位置（偏移）position 如果没有带定位的父级 则以文档为准
$("子元素").position()
此方法只能获取不能设置
3 scrollTop()/scrollLeft方法设置或返回被选元素 别卷去的头部/左边
(document).scrollTop() //页面滚动时文档被卷去的上方高度
})
3-1 带有动画的返回顶部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style type="text/css">
*{
list-style: none;
}
#back{
display: none;
position:fixed;
bottom: 120px;right: 180px;
cursor: pointer;
background-color: skyblue;
}
#container{
width: 1000px;
height: 2000px;
background-color: pink;
margin: 0 auto;
}
</style>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="back">
返回顶部
</div>
<div id="container">
</div>
<script type="text/javascript">
var boxTop = $("#container").offset().top;
$(window).scroll(function(){
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
})
})
</script>
</body>
</html>
animate动画函数里面有个scrollTop属性，可以设置位置
只能是元素设置动画 文档不行
4 jQuery事件
4.1.1 jQuery 事件注册
- 单个元素注册
$("div").事件（[fn]）
- 多个注册事件
事件处理on（）
(this).css("background","skyblue")
},
click:function(){
(this).css("background","blue")
}
})
on() 可以事件委派操作，事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素
$("父元素").on("事件名"，"子元素"，[fn])
("li").css("color","red")
})
on() 可以给动态创建的元素绑定事件
4.1.2 解绑事件
off()
$("div").off() //全部解绑
$("div").off("click") //解绑单个事件
$("ul").off("click","li") //解绑事件委托
one() 只触发一次的事件
4.1.3 jQuery自动触发事件
element.click() //第一种简写形式 元素。事件
$("div").click()
element.trigger("type") //第二种简写形式 元素。trigger（“事件”）
$("div").trigger("click")
element.triggerHandler(type) //第三种自动触发模式
$("div").triggerHandler("click")
$("input").triggerHandler("focus") //没有光标闪烁
4.2 jQuery 事件对象
事件被查出发iu会有事件对象产生
element.on(evevts,[selector],function(event){})
阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡： event.stopPropagation()
网友评论