一、jQuery
<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>
入口函数 | 等待页面加载完毕后进行执行 |
1 $(document).ready(function () {} | 2 $(function () {} |
$ | 顶级对象,是jQuery的别称,相当于原生js中的window,对元素进行包装,使其成为jquery对象,从而可以调用jquery的方法 |
jquery对象和dom对象的区别 jquery只能用jquery方法,不能使用原生js的方法 | 把jquery转换成dom对象 |
二、jQuery选择器
<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>
</head>
<body>
<div>11111</div>
<div>11111</div>
<div>11111</div>
<div>11111</div>
<script>
// $("选择器")
// $("选择器").css("属性名","属性值")
// $("div").css("color", "pink")
// 隐式迭代
// console.log($("div"))
$("div").css("color", "pink")
</script>
</body>
$("选择器").css("属性名","属性值") | |
隐式迭代 遍历内部DOM元素(伪数组形式存储)的过程 | |
三、筛选选择器
<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>
</head>
<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>
odd | 奇数 |
even | 偶数 |
first | 第一个 |
last | 最后一个 |
eq() | 在元素中索引下标 |
四、筛选的方法
<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>
</head>
<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>
父代选择器 | |
子代选取器 | |
后代选择器 | |
兄弟选择器 | |
五、更改样式
<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>
addClass | 对类名进行添加 |
removeClass | 对类名进行移除 |
toggleClass | 对类名进行切换 |
六、显示和隐藏
<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>
show() | 显示 |
hide() | 隐藏 |
七、滑动
<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>
slideDown() | 滑动显示 |
slideUp() | 滑动隐藏 |
slideToggle() | 滑动切换 |
八、淡入淡出
<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>
stop() | 暂停 |
fadeIn() | 显示 |
fadeOut() | 隐藏 |
fadeToggle() | 切换 |
九、自定义动画
<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>
animate() | 方法是创建一个新的animation的便捷方法,将它应用于元素,然后运行动画。它将返回一个新建的animation对象实例 |
speed | 速度 |
easing | 缓动效果 |
fn | 函数 |