学习心得
今天讲述了关于js文件，就是别人写好的，可以直接用的一个库。库里有方法，可以做一些小动画效果。
掌握情况：还行一般
学习总结：如下
JS库：别人写好的JS文件，我们拿来直接用
开发中，会引入很多的.js文件
JQuery.js------濒临淘汰，经典。10%以下
css库，bootstrap，layui，easyui。
React.js-------30%市场
Angular.js-----10%以下，最难
Vue.js---------50%以上，简单。最主流。
尤雨溪
文档就绪函数
当页面的文档部分加载完毕之后，要执行的函数
$(document).ready(function(){
alert("文档就绪函数");
});
$(function(){
alert("111");
})
选择器
基本选择器
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]---除文本框的其他
写法：需要有$符
$(()=>{
let div = $("div");
console.log(div);
})
事件
他们分别在什么时候触发？
1、JQuery文档就绪函数在页面加载完毕之后触发。浏览器解析完HTML标签
window.onload，除了解析完HTML标签之外，等到浏览器创建好DOM对象
2、JQuery文档就绪函数可以执行多次，window.onload只能执行一次
$(function(){
alert("JQuery1");
})
window.onload = function() {
alert("window1");
}
$(function(){
alert("JQuery2");
})
window.onload = function() {
alert("window2");
}
//这么写完之后window的只有2能出来，但JQuery的两个都可以出来。
click()---单击事件
blur()----失去焦点
mouseover()---鼠标悬停
change()-----改变事件
live()----它可以来绑定选择器匹配的元素的事件，哪怕这个元素是后面动态创建出来的
我们常规的添加事件
addEventListener
$().click()
前提条件：
标签必须原原本本存在于HTML页面上
<button id="btn1">按钮1</button>
<button id="btn2" onclick="fun()">按钮2</button>
<div id="btns"></div>
$(() => {
$("#btn1").click(() => {
$("<button id='cr'>创建</button>").appendTo($("#btns"));
});
})
function fun() {
$("#cr").click(()=>{
alert("cr");
});
};
练习
第一个块越来越小
第二个块变浅了
第三个块越来越扁后来没了
<style>
.a{
width: 200px;
height: 200px;
background-color: orange;
}
</style>
<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>
-=-=-=-
标签：function,26,08,选择器,---,2022,div,alert,click From： https://www.cnblogs.com/wxp0909/p/16629354.html