JS库
开发中，会引入很多的.js文件----->别人写好的js文件，我们拿来直接用
- JQuery.js-----濒临淘汰，经典
- React.js------30%市场
- Angular.js----最难
- Vue.js--------主流
JQuery
文档就绪函数
当页面的文档部分加载完毕之后，要执行的函数
$(document).ready(function () {
alert("!!!");
});
//简写
$(function () {
alert("!!!");
});
//通过箭头函数实现
$(() => {
alert("!!!");
})
选择器
- 通过id选择器抓取-----返回值是固定的一个
<div id="div1"></div>
<script>
$(() => {
let div = $("#div1");
console.log(div);
})
</script>
- 通过类选择器抓取-----返回值是一堆
<div id="div1" class="div1"></div>
<script>
$(() => {
let div = $(".div1");
console.log(div);
})
</script>
- 通过标签选择器抓取---返回值是一堆
<div id="div1" class="div1"></div>
<script>
$(() => {
let div = $("div");
console.log(div);
})
</script>
- *号选择器----返回值是所有标签
层级选择器
- 父元素 子元素----div里的p，后代
- 父元素>子元素----直接子元素
- 父元素+子元素----相邻
过滤选择器
- 标签:first---获取第一个元素
- 标签:last----获取最后一个元素
- 标签tr:eq(index)--获取给定位置的元素
- 标签:gt(index)----大于给定位置
- 标签:lt(index)----小于给定位置
- 标签:not(selector)---除了selector以外的所有选择器
内容选择器
- 标签:empty----匹配所有不包含子元素的选择器
- 标签:parent---含有子元素的父元素
属性选择器
- 标签[name]---包含name属性的元素
- input[type=text]---文本框
- input[type!=text]---除了文本框的其他
事件
window.onload和JQuery文档就绪函数的区别？分别什么时候触发？
区别：window.onload----BOM
JQuery文档就绪函数----DOM
- JQuery文档就绪函数在页面加载完毕之后触发，浏览器解析完HTML标签
- window.onload除了解析完HTML标签之外，等到浏览器创建好DOM对象
- JQuery文档就绪函数可以执行多次
- window.onload只能执行一次，写在最后面的
window.onload = function () {
console.log("window");
}
$(function () {
console.log("jquery");
})
window.onload = function () {
console.log("window1");//window1会覆盖window
}
$(function () {
console.log("jquery1");//jquery和jquery1都能显示
})
事件的操作
- click()----单击事件
- blur()-----失去焦点
- mouseover()--鼠标悬停
- change()----改变事件
- live()---它可以来绑定选择器匹配的元素的事件，哪怕这个元素是后面动态创建出来的
添加事件
前提条件：新增的事件必须放在一个标签内----->标签必须原原本本存在于HTML页面上
<body>
<button id="btn1" onclick="">按钮1</button>
<button id="btn2" onclick="fun()">按钮2</button>
<div id="btns"></div>//存放新增按钮的标签
<script src="./jquery-1.9.1.js"></script>
<script>
$(() => {
$("#btn1").click(() => {
$("<button id='cr'>创建</button>").appendTo($("#btns"));
});
})
function fun() {
$("#cr").click(() => {
alert("cr")
});
};
</script>
</body>
- 方法
<body>
<div id="container">
<p id="p123">123</p>
</div>
<script src="./jquery-1.9.1.js"></script>
<script>
$(() => {
/*
appendTo()：参数是一个JQuery元素
prependTo()：在之前追加
*/
$("<p>234</p>").appendTo($("#container"))//追加到目标容器之后(容器内)
$("<p>345</p>").prependTo($("#container"))//追加到目标容器之前(容器内)
$("<p>456</p>").insertAfter($("#container"))//插入到目标容器之后(容器外)
$("<p>567</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").remove()
})
</script>
</body>
jQuery HTML / CSS 方法
- html()相当于 innerHTML：设置或返回被选元素的内容
- text()相当于 innerText：设置或返回被选元素的文本内容
- val()相当于 input.value：设置或返回被选元素的属性值（针对表单元素）
- attr()：设置或返回被选元素的属性/值
- prop()：设置或返回被选元素的属性/值
- addClass()：向被选元素添加一个或多个类名（如需添加多个类，请使用空格分隔类名）
- removeClass()：方法从被选元素移除一个或多个类（如果没有规定参数，则该方法将从被选元素中删除所有类）
- toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换----->该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之
隐藏/显示
- toggle() 方法来切换 hide() 和 show() 方法----->显示被隐藏的元素，并隐藏已显示的元素
- hide() 和 show() 方法来隐藏和显示 HTML 元素
$(() => {
$("#btn1").click(() => {
$("#div1").hide(5000, () => {
alert("div已经隐藏了");
});
});
$("#btn2").click(() => {
$("#div1").show(5000);
});
$("#btn3").click(() => {
$("#div1").toggle(5000);
});
});
淡入淡出
- fadeIn() 用于淡入已隐藏的元素
- fadeOut() 方法用于淡出可见元素
- fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
- 如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果
- 如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果
$(() => {
$("#btn4").click(() => {
$("#div2").fadeOut(5000);
});
$("#btn5").click(() => {
$("#div2").fadeIn(5000);
});
$("#btn6").click(() => {
$("#div2").fadeToggle(5000);
});
$("#btn7").click(() => {
$("#div2").fadeTo(1000, 0.5);
});
});
滑动
-
slideDown() 方法用于向下滑动元素
-
slideUp() 方法用于向上滑动元素
-
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换
-
如果元素向下滑动，则 slideToggle() 可向上滑动它们
-
如果元素向上滑动，则 slideToggle() 可向下滑动它们
-
$(() => {
$("#btn8").click(() => {
$("#div3").slideUp(5000);
});
$("#btn9").click(() => {
$("#div3").slideDown(5000);
});
$("#btn10").click(() => {
$("#div3").slideToggle(5000);
});
});
