Query 是一个 JavaScript 函数库。
jQuery 是一个轻量级的”写的少，做的多”的 JavaScript 库。
jQuery 库包含以下功能：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
JS库：别人写好的JS文件，我们拿来直接用
开发中，会引入很多的.js文件
JQuery.js------濒临淘汰，经典。
css库，bootstrap，layui，easyui。
React.js-------
Angular.js-----
Vue.js---------简单。最主流
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 </p><p> 元素
$("#test").hide() - 隐藏 id="test" 的元素
</p>
选择器
基本选择器
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]---除文本框的其他
<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>
吉林省 辽宁省
<button id="checkAll">全选</button>
Original: https://www.cnblogs.com/ychptz/p/16629790.html
Author: 阿萨德菩提子
Title: 2022-8-26 jq简单了解
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/611125/
转载文章受原作者版权保护。转载请注明原作者出处！