Java Script Query
前言：
JQ，其实就是 JS 的一个的工具，其内核就是 JS 代码，只不过我们用的时候可以更方便而已，就像 CSS/Brostrp 一样
使用 JQ 就必须引入 JQ 包，引入方式和引入外部 JS 代码一样。
而JQ如何操作，它只需要一个函数 $ 即可，可以去看底层源码，其实就是用JS写的一个函数而已
JQ 比 JS 的语法更加的简洁，运用起来更加灵活，没有太多的繁琐代码。
好了，让我们正式开始这场 JQ 的梦幻之旅把！！！
// 首先我们看下一个入门案例：
<script>
/* JS 代码
window.onload = function (){
let btnId = document.getElementById("btn");
btnId.onclick = function (){
alert("哈哈");
}
}
*/
$(function (){ // 表示页面加载完后，相当于 window.onload
$("#btn").click(function (){ // $("#查询对象ID") == document.getElementById
alert("JQuery的单击事件");
});
});
</script>
<button id="btn">Hello</button>
这就是一个简单的JQ例子，没看懂的可以跟上面的JS代码对比一下
这个 $("#btn") 就是查询的ID，下面会在选择器那边说到
没有看错，函数我们直接写在方法体中就好了，不用像 JS 一样还要 = function(){}
并且单击事件也没有了 on ，直接 click
⭐
还有一点，需要注意，估计很多新手都会犯
就是如果要用JQ语句的话，必须将所有的JQ语句都放在
$(function(){
/**
这个里面
这个$(function(){}); 语句就相当于JS的 windows.onload = function(){}; 一样
为什么要在这个里面呢？
因为底下的DOM元素的没有解析，如果不想写这个函数的话，直接将JQ语句放入<body></body>元素下面即可
**/
});
⭐我们先来看看选择器部分，就跟JS代码中的选择器类似⭐
JQ的选择非常的多，所以使用起来非常灵活，我们就简单的介绍几个，毕竟我也没学太深。
基本选择器
层级选择器
属性选择器
过滤选择器
表单过滤选择器
⭐所有的选择器的返回值都是返回的就是这个标签的 element 元素，跟JS一样的。⭐
一开始我学的时候看到了这么多选择器，人都麻透了，实在是太多了。
不过其实我们只要记住大部分就够，冷门的等以后有空了再来看看，我们现在只要能运用JQ做一些实际的开发就够了。
嗯，我们从基本选择器开始说。
基本选择器
// 基本选择器，顾名思义就是很基本的选择器，什么ID啊，标签元素啊什么的
$("HTML标签元素名"); // 标签选择器：我们直接将标签名输入进去即可。如搜索一个h1标签 $("h1");
$("#id的名称"); // ID选择器：这个就是根据 ID 进行选择，记得前面要加 #
$(".class的名称"): // class选择器：这个就是根据 class名称 进行选择的，前面加 .
$("div.dd"); // 这个是配合使用的情况，这个例子是：找到带有 class="dd" 的所有DIV元素
$("选择器1,选择器2...") // 并集选择器：里面可以放各种不同的选择器格式，比如$("p,#hs"); 这个不仅差 所有的P元素，还有 id 为 hs 的元素
$("*"); // 看到*号就知道所有，所以这个就是查找所有的元素
// 层级选择器，看到层级就知道 儿子父亲 之类的关系了，而且选择方式跟 CSS 的选择器类似，脑子要糊透了
$("选择器A 选择器B"); // 后代选择器：选择 A元素下的 所有B元素，注意，只要在A元素下，所有的B元素都会被选择，是所有！！！就相当于后辈！！！
$("选择器A > 选择器B"); // 子选择器：选择 A元素下一层的 所有B元素，注意，只是A元素的下一层而已，而不是全部！！！相当于儿子辈
// 属性选择器，就是可以根据标签里面的属性进行选择
$("A元素[属性名B]"); // 属性名称选择器：选择A元素下的属性为B的元素。
$("A元素[属性名B='C']") // 属性值选择器：选择A元素下属性为B且其值为C的元素
$("A元素[属性名B='C'],[属性名D="E"]...") // 复合属性选择器：注意，元素是固定的，但是属性可以添加多个，跟上面的一样，只是可以添加的属性多了而已
过滤选择器
里面的语法：
$(“A元素:语法”);
比如第一个选择器：首元素选择器，就这样写
$(“A元素:first”);
所以后面我就不写那些重复的东西了
还有一种语法，就是：
$(“A元素”).parent();
这种语法就是一种函数了，我们需要在后面加 .方法名 即可，下面我也省略所有重复的东西
:first; // 首元素选择器：选择A元素下的第一个元素
:last; // 尾元素选择器：选择A元素下的最后一个元素
:eq(index); // 等于索引选择器：选择A元素下的index个元素，从0开始
:not(“选择器C”); // 非元素选择器：选择不包含选择器C的所有元素，同时只有下级或同级才可以使用
:even; // 偶数选择器：从0开始计数，选择A元素同级的索引为偶数的元素
:odd: // 奇数选择器：从0开始计数，选择A元素同级的索引为奇数的元素
.parent(); // 父选择器：选择A元素的上一个元素
.parents(); // 祖先选择器：选择A元素上的所有元素
.children(); // 子元素去：选择A元素的下一个元素
.find(“B元素”); // 子指定元素选择器：选择A元素下的B元素
.sibings(); // 同级选择器：选择A元素的同级元素
表单过滤选择器，其语法和上面过滤选择器类似
:enabled; // 可用元素选择器：获得可用元素; 示例：$ (“input[type=text]:enabled”)
:disabled; // 不可用元素选择器：获得不可用元素;
:checked; // 选中选择器：获得单选/复选框选中的元素;
:selected; // 选中选择器：获得下拉框选中的元素; 示例： alert($("#job > option:selected").length); 选择ID为job下，下拉框选中的元素
⭐数组/字符串遍历⭐
选择器基本讲完了，如果想要了解更多的小伙伴，建议去W3C里面看看。
下面，我们就要开始说 数组和字符串的遍历。
数组遍历的语法和JS以及JAVA还是有点差距的，一些字符串的方法倒没有多大出入。
// 数组遍历
$.each(数组名称,function(index,var){}); // index：就是数组下标 var：值
<script>
// 创建一个数组
let arr = [1,2,3];
// 进行循环遍历
// arr : 数组名称
// i : 自定义的数组下表
// n : 自定义的获取值
$.each(arr,function (i,n){
document.write("元素[" + i + "]：" + n + "<br>");
});
</script>
// 去除重复
$.unique(数组名称)[需要先进行sort排序];
<script>
// 创建一个数组
let arr = [1,2,3,3,32,2,21,132,23,55,3,2];
// 进行排序
arr.sort();
// 进行去重操作
$.unique(arr);
// 进行循环遍历
$.each(arr,function (i,n){
document.write("元素[" + i + "]：" + n + "<br>");
});
document.close();
</script>
// 是否存在
$.inArray(需要找的值,目标数组);
<script>
// 创建一个数组
let arr = [1,2,3];
// 根据值搜索这个数组中是否存在这个值，不存在则返回-1
alert($.inArray(9,arr));
</script>
// 去除首尾空白
$.trim();
如果这篇文章对你有用的话，记得点个赞哦！
修仙永无止境。
904
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
