1.jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<script>
// $("button").click(function () {
// alert("666")
// })
// 入口函数:等待页面加载完毕后进行执行
// 1
// $(document).ready(function () {
// $("button").click(function () {
// alert("666")
// })
// })
// 2
$(function () {
jQuery("button").click(function () {
alert("666")
})
})
// $:顶级对象,是jQuery的别称,相当于原生js中的window,对元素进行包装,使其成为jquery对象,从而可以调用jquery的方法
// jquery对象和dom对象的区别
</script>
</head>
<body>
<button>点击</button>
<script>
let btn = document.querySelector("button")
// let btn2 = $("button")
// console.log(btn)
// console.log(btn2)
// jquery只能用jquery方法,不能使用原生js的方法
// btn2.style.backgroundColor = "pink"
// 把jquery转换成dom对象
$("button")[0].style.backgroundColor = "pink"
</script>
</body>
</html>
入口函数:等待页面加载完毕后进行执行
$: 顶级对象,是jQuery的别称,相当于原生js中的window,对元素进行包装,使其成为jquery 对象,从而可以调用jquery的方法
jquery对象和dom对象的区别 query只能用jquery方法,不能使用原生js的方法
2.jQuery选择器
$("选择器")
$("选择器").css("属性名","属性值") //
例子 :$("div").css("color", "pink")
隐式迭代 console.log($("div")) $("div").css("color", "pink")
3.筛选选择器
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<script>
console.log($("ul li:first"))
console.log($("ul li:last"))
console.log($("ul li:eq(2)")) //获取到的li元素中,索引下标为2的li
$("ul li:odd").css("backgroundColor", "pink")
$("ul li:even").css("backgroundColor", "red")
</script>
</body>
</html>
odd | 奇数 |
even | 偶数 |
eq()最为重要 | 在元素中索引下标 |
4.筛选的方法
<body>
<div class="father">
111
<div class="son">222</div>
<div class="son">3333
<div>ncjdcd</div>
</div>
<li>ncjdnjc</li>
</div>
<script>
// $(".son").parent()
// $(".father").children(".son")、、子代选择器
// $(".father").find("div").css("color", "red") //后代选择器
$("li").siblings("div").css("color", "red")
</script>
</body>
</html>
父代选择器 | $(".son").parent()$(".son").parent() |
子代选取器 | $(".father").children(".son") |
后代选择器 | $(".father").find("div").css("color", "red") |
兄弟选择器 | $("li").siblings("div").css("color", "red") |
5.更改样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js">
</script>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
}
.pink {
background-color: rgb(13, 12, 12);
}
</style>
</head>
<body>
<div>
cbdhcd
</div>
<script>
// $("div").css("backgroundColor", "red")
// $("div").css({ "color": "pink", "backgroundColor": "green" })
// 对类名进行添加
$("div").addClass("pink")
// 移除
// $("div").removeClass("pink")
// 切换
$("div").toggleClass("pink")
hide()
show()
</script>
</body>
</html>
addClass | 对类名进行添加 |
removeClass | 移除 |
toggleClass | 切换 |
6.显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
display: none;
}
</style>
<script>
$(function () {
$("button").eq(0).click(function () {
$("div").show(2000, function () {
console.log("显示按钮的点击事件执行结束了")
})//显示
})
$("button").eq(1).click(function () {
$("div").hide(2000)//隐藏
})
$("button").eq(2).click(function () {
$("div").toggle()//切换
})
})
</script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div>
</div>
</body>
</html>
show () | 显示 |
hide () | 隐藏 |
toggle() | 切换 |
7.滑动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<button>划入</button>
<button>划出</button>
<button>切换</button>
<div></div>
<script>
$(function () {
$("button").eq(0).click(function () {
$("div").slideDown(2000, function () {
console.log("显示按钮的点击事件执行结束了")
})//显示
})
$("button").eq(1).click(function () {
$("div").slideUp(2000)//隐藏
})
$("button").eq(2).click(function () {
$("div").slideToggle()//切换
})
})
</script>
</body>
</html>
slideDown() | 滑动显示 |
slideUp() | 滑动隐藏 |
slideToggle() | 滑动切换 |
8.淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<div></div>
<script>
$(function () {
$("button").eq(0).click(function () {
$("div").stop().fadeIn(2000, function () {
console.log("显示按钮的点击事件执行结束了")
})//显示
})
$("button").eq(1).click(function () {
$("div").stop().fadeOut(2000)//隐藏
})
$("button").eq(2).click(function () {
$("div").stop().fadeToggle()//切换
})
})
</script>
</body>
</html>
stop() | 暂停 |
fadeIn() | 显示 |
fadeOut() | 隐藏 |
fadeToggle() | 切换 |
9.自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: absolute;
width: 300px;
height: 300px;
background-color: pink;
}
</style>
<script src="./jquery.min.js"></script>
</head>
<body>
<button>点击</button>
<div></div>
<script>
// animate(想要更改的样式属性,[speed],[easing],[fn])
$(function () {
$("button").click(function () {
$("div").animate({
left: 150,
top: 500,
opacity: .4,
width: 10
}, 1500)
})
})
</script>
</body>
</html>
animate(想要更改的样式属性,[speed],[easing],[fn])
speed | 速度 |
easing | 缓动效果 |
fn | 函数 |