JQuery:
JS库：别人写好的JS文件，我们拿来直接用
开发中，会引入很多的.js文件
JQuery.js------濒临淘汰，经典。10%以下
css库，bootstrap，layui，easyui。
React.js-------30%市场
Angular.js-----10%以下，最难
Vue.js---------50%以上，简单。最主流。
文档就绪函数
当页面的文档部分加载完毕之后，要执行的函数
$(document).ready(function(){
alert("文档就绪函数");
});
选择器
基本选择器
id选择器---返回值是固定的一个
class选择器---返回值是一堆
标签选择器---返回值是一堆
*号选择器---返回值是所有标签
层级选择器
div p---div里的p，后代
div>p---直接子元素
div+p---相邻
过滤选择器
:first---获取第一个元素
:last---获取最后一个元素
:eq(index)---给定位置的元素
:gt(index)---大于给定位置
:lt(index)---小于给定位置
:not(selector)---除了selector以外的所有选择器
内容选择器：
:empty---匹配所有不包含子元素的选择器
:parent---含有子元素的父元素
属性选择器：
[name]---包含name属性的元素
input[type=text]---文本框
input[type!=text]---除文本框的其他
事件
他们分别在什么时候触发？
1、JQuery文档就绪函数在页面加载完毕之后触发。浏览器解析完HTML标签
window.onload，除了解析完HTML标签之外，等到浏览器创建好DOM对象
2、JQuery文档就绪函数可以执行多次，window.onload只能执行一次
$(function(){
alert("JQuery1");
})
window.onload = function() {
alert("window1");
} click()---单击事件
blur()----失去焦点
mouseover()---鼠标悬停 mouseleave()---鼠标离开
change()-----改变事件
live()----它可以来绑定选择器匹配的元素的事件，哪怕这个元素是后面动态创建出来的
function fun() {
$("#cr").click(()=>{
alert("cr");
});
};<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 600px;
height: 600px;
border: 1px solid;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<div id="container">
<p id="p123">123</p>
</div>
<!--
script标签：只可以做一件事情
要么是导入js文件，要么是写js代码
-->
<script src="js/jquery-1.9.1.js"></script>
<script>
$(() => {
/*
appendTo()：参数是一个JQuery元素，追加到xxx
prepareTo()：在之前追加
*/
// $("<p>546</p>").appendTo($("#container"));
// $("<p>999</p>").prependTo($("#container"));
// $("<p>888</p>").insertAfter($("#container"));
// $("<p>777</p>").insertBefore($("#container"));
// $("#p123").replaceWith($("<p>666</p>"));
// $("<span>000</span>").replaceAll($("p"));
// // 在内部的后面追加
// $("#container").append($("<p>100</p>"));
//$("#container").prepend($("<p>200</p>"));
// $("#container").after($("<p>5000</p>"));
// $("#container").before($("<p>6000</p>"));
// // 清空标签内的所有内容
// // $("#container").empty();
// $("p:gt(5)").remove();
})
</script>
</body>
</html>属性操作：
html() ===== innerHTML
text() ===== innerText
val() ====== input.value
val()函数：可以给文本框赋值，
可以操作单选框，复选框，下拉菜单的选中状态
相当于setAttribute
getAttribute
alert($("input[type=checkbox]").attr("value","sss"));
alert($("input[type=checkbox]").attr("checked"));
alert($("input[type=checkbox]").prop("checked",true));
alert($("#sheng").prop("selected"));练习题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
你爱好的运动是？
<input type="checkbox" id="checkAllBox">全选 / 全不选
<br>
<br>
<input type="checkbox" class="item" value="足球">足球
<input type="checkbox" class="item" value="篮球">篮球
<input type="checkbox" class="item" value="羽毛球">羽毛球
<input type="checkbox" class="item" value="乒乓球">乒乓球
<br>
<br>
<input type="button" value="全选" id="checkedAllBtn">
<input type="button" value="全不选" id="checkedNoBtn">
<input type="button" value="反选" id="checkedReverseBtn">
<script src="js/jquery-1.9.1.js"></script>
<script>
$(()=>{
// 给全选按钮绑定事件
$("#checkedAllBtn").click(()=>{
// 选取所有带有checkbox这个属性的值的元素们
$(":checkbox").prop("checked",true);
});
// 全不选绑定事件
$("#checkedNoBtn").click(()=>{
// 选取所有带有checkbox这个属性的值的元素们
$(":checkbox").prop("checked",false);
});
// 反选
$("#checkedReverseBtn").click(()=>{
// 获取全部的复选框
// 遍历复选框
//
// for(let i = 0;i < $(".item").length;i++) {
// $(".item:eq("+i+")").prop("checked",!$(".item:eq("+i+")").prop("checked"));
// }
// JQuery的遍历操作
/*
参数1：index---遍历元素的下标
参数2：item----当前正在遍历的项，这个item是一个DOM对象
*/
$(".item").each((index,item) => {
// 在each遍历的function中，有一个this对象，this就是当前正在遍历的dom对象（JS对象）
/* this指向的问题？如果使用ES6箭头函数，
this指向不是DOM，指向的是当前函数的调用者。
*/
item.checked = !item.checked;
});
// 检查是否满选
// 获取全部的选项的个数
let allCount = $(".item").length;
// 在获取选中的个数
let checkedCount = $(".item:checked").length;
$("#checkAllBox").prop("checked",allCount == checkedCount);
});
// if(allCount == checkedCount) {
// $("#checkAllBox").prop("checked",true);
// }else {
// $("#checkAllBox").prop("checked",false);
// }
$("#checkAllBox").click(() => {
$(".item").prop("checked",$("#checkAllBox").prop("checked"));
});
// 获取所有样式为.item的元素
// 可以直接绑定事件
$(".item").click(()=> {
// 检查是否满选
// 获取全部的选项的个数
let allCount = $(".item").length;
// 在获取选中的个数
let checkedCount = $(".item:checked").length;
$("#checkAllBox").prop("checked",allCount == checkedCount);
});
})
</script>
</body>
</html> <style>
.a{
width: 200px;
height: 200px;
background-color: orange;
}
.f {
color: red;
font-size: 50px;
}
</style>
</head>
<body>
<button id="addStyle">添加样式</button>
<button id="delStyle">删除样式</button>
<button id="toggleStyle">添加 / 删除样式</button>
<div id="div1">123123</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(()=> {
$("#addStyle").click(() => {
$("#div1").addClass("a f");
});
$("#delStyle").click(() => {
$("#div1").removeClass("a f");
});
$("#toggleStyle").click(() => {
$("#div1").toggleClass("a f");
});
})
</script>
</body>动画样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a{
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<button id="btn1">隐藏</button>
<button id="btn2">显示</button>
<button id="btn3">隐藏 / 显示</button>
<div class="a" id="div1"></div>
<hr>
<button id="btn4">隐藏</button>
<button id="btn5">显示</button>
<button id="btn6">隐藏 / 显示</button>
<button id="btn7">透明</button>
<div class="a" id="div2"></div>
<hr>
<button id="btn8">隐藏</button>
<button id="btn9">显示</button>
<button id="btn10">隐藏 / 显示</button>
<div class="a" id="div3"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(()=>{
$("#btn8").click(() => {
$("#div3").slideUp(5000);
});
$("#btn9").click(() => {
$("#div3").slideDown(5000);
});
$("#btn10").click(() => {
$("#div3").slideToggle();
});
$("#btn4").click(() => {
$("#div2").fadeOut(5000);
});
$("#btn5").click(() => {
$("#div2").fadeIn(5000);
});
$("#btn6").click(() => {
$("#div2").fadeToggle();
});
$("#btn7").click(() => {
$("#div2").fadeTo(1000,0.2);
});
$("#btn1").click(() => {
$("#div1").hide(5000,() => {
alert("div已经隐藏了");
});
});
$("#btn2").click(() => {
$("#div1").show(5000);
});
$("#btn3").click(() => {
$("#div1").toggle();
});
});
</script>
</body>
</html>练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 500px;
height: 150px;
position: relative;
margin: auto;
}
.item {
width: 500px;
height: 500px;
position: absolute;
}
.item:nth-child(1) {
background-color: yellow;
}
.item:nth-child(2) {
background-color: red;
}
.item:nth-child(3) {
background-color: green;
}
.item:nth-child(4) {
background-color: blue;
}
.active {
z-index: 10;
}
</style>
</head>
<body>
<!--
需求：
每隔1s钟，切换颜色，
当切换到第四种颜色时，再切换回第1个
我们可以给HTML添加我们自定义的属性
a="1"
原则：
div id="div1"
-->
<div class="container">
<div data-index="1" class="item active"></div>
<div data-index="2" class="item"></div>
<div data-index="3" class="item"></div>
<div data-index="4" class="item"></div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
function next(index) {
index = parseInt(index);
if(index == $(".item").length) {
return 1;
}
return index + 1;
}
setInterval(() => {
// 我要先知道现在是谁在上面
// 我要获取现在在最上面的div
let active = $(".active");
// 接住我们获取到的最上面的div的自定义的索引值属性
let index = active.attr("data-index");
// 现在最上面的div删除激活样式
active.removeClass("active");
$(".item[data-index="+ next(index) +"]").addClass("active");
},500);
</script>
</body>
</html>
1059
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
