jQuery01
3W1H
What?是什么？
JavaScript库：封装了很多JS代码（类库）
EXjs
JavaScript库
Prototype:是最早成型的JS库之一，对于JS的内置对象做了大量的扩展。
Do jo：提供了很多奇特JS库没有提供的功能。例如：离线存储的API，生成图标的组件等等。
YUI：是由Yahoo公司开发的一套完备的，扩展性良好的富交互网页程序工作集。
Ext JS：原本是对YUI的一个扩展，主要用于创建前端用户界面。
Moo Tools：是一套轻量、简洁、模拟化和面向对象的JS框架。
jQuery：同样是一个轻量级的库，拥有强大的选择器等更多优点，吸引了更多开发者去学习使用它。
官方地址：http://jquery.com/
Why?为什么要学习？
查看官方jQueryLOGO：理念write less，do more
为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件
Where?哪些情况下用？
中大型网站开发
是一些前端框架的基础，比如EasyUI，Bootstrap
How?怎么用？
工具：HBuilderX
案例1：点击按钮获取输入框中的值（JS对比jQuery）
使用jQuery步骤
1.下载jQuery库
开发版本：jquery-3.3.1.js
生产版本：jquery-3.3.1.min.js
2.引入：将js文件复制到项目中
3.使用
jQuery文件结构
jQuery版本
1.x版本：能够兼容IE678浏览器（不再更新版本）
2.x版本：不能兼容IE678浏览器（不再更新版本）
3.x版本：不能兼容IE678浏览器，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）
jQuery文件中可以看出是一个自执行函数
(function(){
window.jQuery = window.$ = jQuery
}());
自执行函数
自执行函数也叫立执行函数
是将函数的声明和调用合并在一起
$和$()
$代表jQuery对象（Java类），同时也是一个函数对象，即$和jQuery是等价的
$()构造了一个jQuery对象。所以，“$()”可以叫做jQuery的构造函数。
$(function(){})
$("选择器")
$("标签")
$(DOM对象)
总结
在jQuery文件中，$和jQuery作为了window对象的一个属性
源码：window.jQuery = window.$ = jQuery;
检测$的类型：Object.prototype.toString.call($);
jQuery选择器
基本选择器
常用选择器：
ID选择器：#ID ——单个元素
类选择器：.class ——元素集合
元素选择器：element ——元素集合
通配符选择器：* ——元素集合
群组选择器(并集)：selector1,selector2 ——元素集合
案例2：分别使用基本选择器，改变元素的背景颜色和字体颜色（div、p、span）
层次选择器
后代选择器(交集)：selector1 selector2 ——元素集合
子代选择器：> ——元素集合
查找所有元素，查询子元素
案例3：使用层次选择器，选择某个元素下面的所有元素和子元素
过滤选择器
参考jQuery文档
获取第一个元素:first
最后一个元素:last
获取偶数下标的元素:even
获取奇数下标的元素:odd
获取某一范围元素
:gt大于
:lt小于
案例4：使用过滤选择器，选择li中的元素
案例5：表格隔行换色
表单选择器
参考jQuery文档
获取选择单选框的值
获取选择多选框的值
获取选择下拉值
案例6：获取表单中的单选、多选、下拉值
jQuery入门
<!-- 导入jQuery -->
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//加载函数
window.onload=function(){
//获取按钮
var btn = document.getElementById('btn1');
//设置按钮的事件
btn.onclick=function(){
alert(13);
}
};
</script>
<!-- jQuery实现点击弹窗 -->
<script type="text/javascript">
$(function(){
$("#btn2").click(function(){alert(123)})
});
</script>
// <script type="text/javascript">
// //自执行函数的定义
// //闭合函数
// (function()){
// alert(123)
// }())
//$和$()的作用
//$这个符号是在jQuery库中定义 属于jQuery
// 在jQuery中，$作为了window对象中的一个属性（对象属性，对象函数 ）
console.log(window);
//window.jQuery = window.$=jQuery;
//$等价于jQuery
//person.add(); new person().add();
//$ 有点类似Java的类 each isFunc
//$() 相当于类的构造的方法
console.log($.type($));
//$() 括号中可以根据需求传入指定的参数
//根据参数不同，意思不同
//1.参数为匿名函数时，意思：加载函数 $(function(){})；
//2.参数为字符时，有两层意思
//2.1获取页面元素（选择器） $("#id") $(".class")
//2.2创建标检 $("<a></a>");
//3.参数为dom对象（js对象） 意思 : 转换
jQuery选择器
//选择器
//jQuery 中的选择器就是一个标记，为了快速获取指定的标签
//jQuery 中常见选择器 ：ID选择器 class选择器 element 选择器
//子代选择器 后代选择器 相邻兄弟选择完全 分组选择器....
//加载函数
$(function(){
//id选择器的使用
//jQuery的样式设置 通过css方法进行设置即可
//一个属性设置
// $("#ul1").css("color","red")
//多个属性的设置 通过json格式进行
//{"属性":"属性值","属性":"属性值"}
// $("#ul1").css({
// "background":"red",
// "color":"yellow"
// });
//类选择器 一组元素
// $(".sb").css("background","red");
//元素 一组元素
// $("li").css("background","red");
//通配符选择器 *
// $("*").css("background","red");
//群组选择器 可以同时设置多个标签的样式
// $("#ul1,.oBox").css("background","red");
//设置ul下的子li的字体颜色
// $("#ul1>li").css("color","red");
//所有后代
// $("#ul1 li").css("color","red");
//过滤选择器的使用
// //：first 获取第一个节点、
// $("#ul1>li:first").css("background","red");
// //:last 获取最后一个节点
// $("#ul1>li:last").css("background","red");
//获取指定的节点 下标
// $("#ul1>li:eq(2)").css("background","yellow");S
//even 奇数 过滤下标为偶数 位置为奇数的标签
// $("#ul1>li:even").css("background","yellow");
//odd 偶数 过滤下标为奇数 位置为偶数的标签
// $("#ul1>li:odd").css("background","yellow");
//gt() 大于 不包括自己
// $("#ul1>li:gt(2)").css("background","yellow");
//lt()小于 不包括自己
// $("#ul1>li:lt(2)").css("background","yellow");
//区间设置背景颜色
//注意事项 如果gt 和 lt 混合使用 并且gt在前 那么获取元素的下标i重新编号
// $("#ul1>li:gt(0):lt(3)").css("background","yellow");
//案例 隔行换颜色
// $("table tr:gt(0):even").css("background","red");
// $("table tr:gt(0):odd").css("background","yellow");
//根据给的内容查找
// $("#ul1>li:contains('zz')").css("background","yellow");
//表单选择器
// $(":input").css("background","red");
// $("form>input:input").css("background","red")
//获取普通文本
// $("form>input:input:text").css("background",red"");
//单选
console.log($("#demo1>input:radio"));
//获取选中
console.log($("#demo1>input:radio:checked"));
//获取value
console.log($("#demo1>input:radio:checked").val());
//复选框
console.log($("#demo2>input:CheckBox"));
//获取选中复选框
console.log($("#demo2>input:CheckBox:checked"));
//复选框
console.log($("#demo2>input:CheckBox"));
// 遍历 eack
})版权声明：本文为qq_64286752原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。