jQuery属性操作
jQuery的attr方法和removeAttr方法
attr() 方法设置或返回被选元素的属性值。根据该方法不同的参数,其工作方式也有所差异。
$(selector).attr(attribute)
$(selector).attr(attribute,value)
- 可以传一个值,代表获取被选元素的属性值
- 也可以传两个值,代表设置被选元素的属性和值
注:
- 如果传一个值,无论找到多少个元素,只返回找到的第一个元素
- 如果传两个值,就是设置值,那么找到多少个就设置多少个
removeAttr()方法用于删除元素的属性,删除的话就是找到多少个就删除多少个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery的attr方法</title>
<script src="../jquery-3.5.1.js"></script>
</head>
<body>
<span class="span1" name="a1"></span>
<span class="span2" name="a2"></span>
</body>
<script>
/*
1.$(selector).attr(attribute),$(selector).attr(attribute,value)
可以传一个值,代表获取被选元素的属性值
也可以传两个值,代表修改被选元素的属性和值
*/
console.log($("span").attr("name"))
// 注:无论找到多少个元素,只返回找到的第一个元素
$("span").attr("class", "box")
//注:如果是设置值的话,那么找到多少个就设置多少个
$("span").removeAttr("name")
//注:删除的话就是找到多少个就删除多少个
</script>
</html>
jQuery的prop方法和removeprop方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery的prop方法和removeprop方法</title>
<script src="../jquery-3.5.1.js"></script>
</head>
<body>
<span class="span1" name="a1"></span>
<span class="span2" name="a2"></span>
</body>
<script>
/*
1.prop方法
特点和attr方法一致
2.removeProp方法
特点和removeAttr方法一致
*/
$("span").eq(0).prop("demo", "aaa") //设置原型中demo
$("span").eq(1).prop("demo", "bbb")
$("span").prop("demo")
$("span").removeProp("demo")
/*
注:prop不仅能操作属性,还能操作属性节点
*/
$("span").prop("class", "box") //操作属性节点,修改class变成box
</script>
</html>
jQuery操作类相关方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery操作类相关方法</title>
<script src="../jquery-3.5.1.js"></script>
<style>
.class1 {
width: 20px;
height: 20px;
background-color: red;
}
.class2 {
border: 5px solid black;
}
</style>
</head>
<body>
<button>添加类</button>
<button>删除类</button>
<button>修改类</button>
<div></div>
</body>
<script>
/*
1.addClass(class,fn)
作用:给元素添加一个类,如果要添加多个的话,就写在同一个“”里用空格隔开
2.removeClass(class,fn)
作用:删除一个类
3.toggleClass(class,fn)
作用:切换类,有就删除,没有就添加
*/
$(function () {
var btns = document.getElementsByTagName("button")
btns[0].onclick = function () {
// $("div").addClass("class1") //给元素添加类名的操作
$("div").addClass("class1 class2")
}
btns[1].onclick = function () {
$("div").removeClass("class2")
}
btns[2].onclick = function () {
$("div").toggleClass("class2")
}
})
</script>
</html>
jQuery文本值相关方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery文本值相关方法</title>
<script src="../jquery-3.5.1.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<button>设置html</button>
<button>获取html</button>
<button>设置text</button>
<button>获取text</button>
<button>设置value</button>
<button>获取value</button>
<div></div>
<input type="text">
</body>
<script>
$(function () {
var btns = document.getElementsByTagName("button")
btns[0].onclick = function () {
$("div").html("<p>我是p</p>")
//和原生js中innerHTML一样
}
btns[1].onclick = function () {
console.log($("div").html())
}
btns[2].onclick = function () {
$("div").text("<p>我是p</p>")
//和原生js的innerText一样
}
btns[3].onclick = function () {
console.log($("div").text())
}
btns[4].onclick = function () {
$("input").val("请输入:")
//类比原生js的value属性
}
btns[5].onclick = function () {
console.log($("input").val())
}
})
</script>
</html>
jQuery操作html样式的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery操作html样式的方法</title>
<script src="../jquery-3.5.1.js"></script>
</head>
<body>
<div></div>
</body>
<script>
$(function () {
//逐个设置css属性
$("div").css("width", "100px")
$("div").css("height", "100px")
$("div").css("background", "red")
//链式设置
$("div").css("width", "100px").css("height", "100px").css("background", "blue")
//批量设置(直接传个对象)
$("div").css({
width: "100px",
height: "100px",
background: "yellow"
})
//获取样式
console.log($("div").css("width"))
})
</script>
</html>
jQuery操作尺寸和位置方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery操作尺寸和位置方法</title>
<script src="../jquery-3.5.1.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 200px;
background: red;
border: 50px solid black;
margin-left: 50px;
position: relative;
}
.son {
height: 100px;
width: 100px;
background: blue;
position: absolute;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
</body>
<script>
$(function () {
var btns = document.getElementsByTagName("button")
btns[0].onclick = function () {
console.log($(".father").width()) //获取宽度
console.log($(".son").offset().left)
console.log($(".son").position().left)
//offset是获取或者设置元素距离屏幕的偏移量
} //监听获取
btns[1].onclick = function () {
$(".father").width("200px") //设置元素的宽度
$(".son").offset({
left: 10
})
// $(".son").position({
// left: 10
// })//此步不生效,position只能获取,不能设置
} //监听设置
})
</script>
</html>
jQuery的scrollTop方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery的scrollTop方法</title>
<script src="../jquery-3.5.1.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.scroll {
width: 100px;
height: 200px;
border: 1px solid black;
overflow: auto;
}
</style>
</head>
<body>
<div class="scroll">我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div我是div我是div
</div>
<button>获取</button>
<button>设置</button>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
<script>
var btns = document.getElementsByTagName("button")
btns[0].onclick = function () {
console.log($(".scroll").scrollTop()) //获取元素内部滚动条的位置
console.log($("html").scrollTop()) //获取网页的滚动条的位置
}
btns[1].onclick = function () {
$(".scroll").scrollTop(300) //设置元素内部滚动条的位置
$("html").scrollTop(300) //设置网页的滚动条位置
}
</script>
</html>
jQuery事件绑定与解绑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery事件绑定</title>
<script src="../jquery-3.5.1.js"></script>
</head>
<body>
<button>我是按钮</button>
</body>
<script>
$(function () {
/*
两种事件绑定方式:
1.通过eventName(fn)
2.on(eventName,fn)
*/
$("button").click(function () {
alert("hello")
})
$("button").on("click", function () {
alert("hello2")
})
// $("button").off() //没有参数就是直接解绑全部
$("button").off("click") //传递一个参数就会移除所有这个类型的事件
})
</script>
</html>
jQuery事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery事件冒泡</title>
<script src="../jquery-3.5.1.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 200px;
background: red;
}
.son {
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<a href="http://www.baidu.com">我是百度</a>
<form action="http://www.taobao.com">
<input type="text">
<input type="submit" value="">
</form>
</body>
<script>
$(function () {
/*
1.事件冒泡
2.如何阻止事件冒泡
3.什么是默认行为
4.如何阻止默认行为
*/
$(".father").click(function () {
alert("father")
})
$(".son").click(function () {
alert("son")
return false //在子级中写这个就可以阻止事件冒泡
// event.stopPropagation()//也可以阻止事件冒泡
})
//当父级和子级都绑定事件时,执行子级后会自动执行父级的事件,这就是事件冒泡
//一般情况下,我们需要点谁就是谁,所以要阻止事件冒泡
//当点击a标签或提交按钮时,会自动的跳转到网页,这就是默认行为
//接下来要阻止a标签的默认跳转行为
$("a").click(function (event) {
alert("注册")
return false //此步为阻止a标签默认行为
// event.preventDefault() //阻止默认行为
})
})
</script>
</html>
jQuery事件自动触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery事件自动触发</title>
<script src="../jquery-3.5.1.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 200px;
background: red;
}
.son {
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<a href="http://www.baidu.com">我是百度</a>
<form action="http://www.taobao.com">
<input type="text">
<input type="submit" value="">
</form>
</body>
<script>
$(function () {
$(".son").click(function () {
alert("son")
})
$(".father").click(function () {
alert("father")
})
// $(".son").trigger("click") //如果自动触发用trigger的话,那么会带有事件冒泡的问题
// $(".father").trigger("click") //使自动触发指定事件
$(".son").triggerHandler("click") //triggerHandler自动触发是没有时间冒泡的问题的
$(".father").triggerHandler("click") //也是自动触发事件
})
</script>
</html>