Jquery
JS库：别人写好的JS文件，我们拿来直接用
开发中，会引入很多的.js文件
JQuery.js------濒临淘汰，经典。10%以下
css库，bootstrap，layui，easyui。
React.js-------30%市场
Angular.js-----10%以下，最难
Vue.js---------50%以上，简单。最主流。
尤雨溪
选择器
基本选择器
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只能执行一次
lick()---单击事件
blur()----失去焦点
mouseover()---鼠标悬停
change()-----改变事件
live()----它可以来绑定选择器匹配的元素的事件，哪怕这个元素是后面动态创建出来的
appendTo
<!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>
属性操作
<!DOCTYPE html>标签：Jquery,26,container,元素,js,---,input,孙乃宇,选择器 From： https://www.cnblogs.com/sunnaiyu/p/16629394.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="div1">
<input type="text" id="username">
<input type="checkbox" value="swimming" id="swimming"
readonly required>游泳
<select name="" id="sheng">
<option value="jl">吉林省</option>
<option value="ln">=辽宁省</option>
</select>
<button id="checkAll">全选</button>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(() => {
// $("#div1").text("<p>123</p>");
$("#username").val("666");
/*
属性操作：
html() ===== innerHTML
text() ===== innerText
val() ====== input.value
val()函数：可以给文本框赋值，
可以操作单选框，复选框，下拉菜单的选中状态
*/
$("#checkAll").click(()=> {
// $("#swimming").val("swimming");
// 相当于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"));
})
})
</script>
</body>
</html>