2022-08-26 卢睿 学习心得
1.JQuery
JS库：别人写好的js文件，我们拿来直接用
- JQuery.js---------濒临淘汰，经典
- React.js-----------30%市场占有
- Augular.js--------最难
- Vue.js--------------简单，主流
CSS库
- bootstrap，layui，easyui
文档就绪函数
-
当页面的文档部分加载完毕之后，要执行的函数
-
$(document).ready(function(){ alert("文档就绪函数"); }); $(function(){ alert("文档就绪函数") })
选择器
基本选择器
-
id选择器——返回值是唯一的
-
<div id="div1"></div> <script> $(() =>{ let s =$("#div1"); console.log(s); }); </script>
-
-
类选择器——返回值是多个
-
<div id="div1" class="div1"></div> <script> $(() =>{ let s =$(".div1"); console.log(s); }); </script>
-
-
标签选择器——返回值是多个
-
<div id="div1" class="div1"></div> <script> $(() =>{ let s =$("div"); console.log(s); }); </script>
-
-
全部选择器——返回值是所有的标签
-
<script> $(() =>{ let s =$("*"); console.log(s); }); </script>
-
层级选择器
- 父标签空格子标签——后代
- 父标签>子标签——直接子元素
- 父标签+子标签——相邻的
过滤选择器
- 标签：first——获取第一个元素
- 标签：last——获取最后一个元素
- 标签：eq(index)——给定位置的元素
- 标签：gt(index)——大于给定位置的元素
- 标签：lt(index)——小于给定位置的元素
- 标签：not(selector)——除了selector以外的所有选择器
内容选择器
- 标签：empty——匹配所有不包含子元素的选择器
- 标签：parent——含有子元素的父元素
属性选择器
- 标签[name]——包含name属性的选择器
- 标签[type=text]——文本框
- 标签[type！=text]——除了文本框的其他选择器
事件
-
click()——单击事件
-
<button id="btn1" >按钮</button> <script> $(function(){ $("#btn1").click(() =>{ alert("按钮被点击") }); }) </script>
-
-
blur()——失去焦点
-
mouseover()——鼠标悬停
-
live()——可以来绑定选择器匹配的元素的事件，哪怕这个元素是后面动态创建出来的
-
【我们常规的去添加事件有前提条件——标签必须原原本本存在HTML页面上】
函数
新建
-
appendTo()：参数是一个JQuery元素,在元素里面追加,从尾部追加
-
$("<p>456</p>").appendTo($("div"));
-
-
prependTo()：在元素里面追加,从头部追加
-
$("<p>41356</p>").prependTo($("div"));
-
-
insertAfter()：在元素后面追加
-
insertBefore()：在元素前面追加
-
$("<p>888</p>").insertBefore($("div"));
-
-
replaceWith()：替换后边换前边
-
replaceAll()：替换前边换后边
-
$("<p>888</p>").replaceAll($("#12"));
-
-
append()：在内部的后面追加
-
$("div").append($("<p>888</p>"));
-
-
prepend()：在内部的前面追加
-
after()：在外部的后面追加
-
before()：在外部的前面追加
删除
-
empty()：清空标签里的全部内容
-
remove()：删除某一个标签
属性
-
属性操作
-
html()——innerText
-
text()——innerHTML
-
val()——input.value
-
<div id="div1"></div> <input type="text" id="username"> <script> $(()=>{ $("#div1").html("<p>1412</p>") $("#div1").text("1412") $("#username").val("666"); }) </script>
-
-
val函数除了可以给文本框赋值，还可以给单选框，多选框，下拉菜单的选择
-
attr()——setAttribute或getAttribute——【有bug】
-
// 设置value属性 $("#as").attr("value","哇哈哈哈哈"); // 获取value属性的值 alert( $("#as").attr("value"))
-
-
-
练习
-
<!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> <script src="12.js"></script> </head> <body> <input type="checkbox" id="xz1"> 全选 / 不全选 <br> <br> <input type="checkbox" class="xz5">🏊1 <input type="checkbox" class="xz5">🤺2 <input type="checkbox" class="xz5">🏃3 <input type="checkbox" class="xz5">🏋️4 <input type="checkbox" class="xz5">🧘5 <input type="checkbox" class="xz5">🏇6 <br> <br> <input type="button" value="全选" id="xz"> <input type="button" value="不全选" id="xz2"> <input type="button" value="反选" id="xz3"> <script> $("#xz").click(() => { $("input[type=checkbox]").prop("checked", true) }) $("#xz2").click(() => { $("input[type=checkbox]").prop("checked", false) }) $("#xz1").click(() => { if ($("#xz1").prop("checked")) { $("input[type=checkbox]").prop("checked", true) } else { $("input[type=checkbox]").prop("checked", false) } }) $("#xz3").click(() => { let a = 0; let index = 1; while ($("input[type=checkbox]:eq(" + index+ ")").prop("checked") != undefined) { if ($("input:eq(" + index + ")").prop("checked")) { $("input:eq(" + index + ")").prop("checked", false) } else { $("input:eq(" + index + ")").prop("checked", true) a++; } index++; } if (a == 6) { $("#xz1").prop("checked", true) } else { $("#xz1").prop("checked", false) } }) $(".xz5").click(() => { let index = 1; while ($("input[type = checkbox]:eq(" + index+ ")").prop("checked") != undefined) { if (!$("input:eq(" + index + ")").prop("checked")) { $("#xz1").prop("checked", false) return; } index++; $("#xz1").prop("checked", true) } }) </script> </body> </html>
-
遍历
// jQuery遍历操作
$(".xz5").each(function (){
// 在each遍历的function中.有一个this对象
// this就是当前正在遍历的dom对象(JS对象)
this.checked = !this.checked
});
- this指向的问题
- 如果使用ES6的箭头函数，this指向的不是DOM，指向当前函数的调用者（BOM）
操作CSS
<button id="styles1">添加样式</button>
<button id="styles2">删除样式</button>
<button id="styles3">添加/删除</button>
<div id="div1">fsafsa</div>
<script>
$(() =>{
$("#styles1").click(() =>{
// 添加样式
$("#div1").addClass("a f");
})
$("#styles2").click(() =>{
// 删除样式
$("#div1").removeClass("a f");
})
$("#styles3").click(() =>{
// 切换样式
$("#div1").toggleClass("a f");
})
})
</script>
动画
<!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>
<script src="12.js"></script>
<style>
.a{
width: 200px;
height: 200px;
background-color: orange;
}
.f{
font-size: 50px;
}
</style>
<!-- JQuery -->
<script src="12.js"></script>
</head>
<body>
<button id="di">隐藏</button>
<button id="di1">显示</button>
<button id="di2">隐藏/显示</button>
<div id="div1" class="a">fsafsa</div>
<hr>
<button id="di3">隐藏</button>
<button id="di4">显示</button>
<button id="di5">隐藏/显示</button>
<button id="di6">透明</button>
<div id="div2" class="a">fsafsa</div>
<hr>
<button id="di7">下来</button>
<button id="di8">上去</button>
<button id="di9">下来/上去</button>
<div id="div3" class="a">fsafsa</div>
<script>
$(()=>{
$("#di").click(()=>{
$("#div1").hide(5000,() =>{
alert("div已经隐藏了")
})
});
$("#di1").click(()=>{
$("#div1").show(5000,() =>{
alert("div已经显示了")
})
});
$("#di2").click(()=>{
$("#div1").toggle(5000)
});
$("#di3").click(()=>{
$("#div2").fadeOut(5000)
});
$("#di4").click(()=>{
$("#div2").fadeIn(5000)
});
$("#di5").click(()=>{
$("#div2").fadeToggle(5000)
});
$("#di6").click(()=>{
$("#div2").fadeTo(2000,0.9)
});
$("#di7").click(()=>{
$("#div3").slideUp(2000)
});
$("#di8").click(()=>{
$("#div3").slideDown(2000)
});
$("#di9").click(()=>{
$("#div3").slideToggle(2000)
});
})
</script>
</body>
</html>
面试题
- window.onload与文档就绪函数有什么区别，分别在什么时候触发
- window.onload除了解析完HTML标签之外，还要等到浏览器创建好DOM对象——是BOM
- JQuery文档就绪函数在页面加载完毕之后触发浏览器解析完HTML标签就能触发——是DOM
- JQuery文档就绪函数能执行多次
- window.onload只能执行一次
- ArrayList：
- 基于数组的连续内存
- 可以利用CPU的缓存
- OA HR cms mis 系统
浙公网安备 33010602011771号