了解Jquery
什么是JQuery
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQueryJavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。简单来说，Jquery是简化版的JS
Jquery的优点：
- 因为jq是轻量级别的框架，大小不大30kb
- 它有强大的选择器，出色的DOM操作封装
- 有可靠的事件处理机制
- 完善的ajax
- 出色的浏览器兼容性
- 支持链式操作，隐式迭代
- 行为层(功能)和结构层(页面元素) 的分离，还支持丰富的插件
Jquery的使用
引入Jquery库： 在使用jquery之前，必须要引入jquery库<script src = "jquery-3.4.1.min.js"></script>"·
声明Jquery变量： [^$ 声明该变量是jq变量 同时$也是JQuery的简写]var $ 变量名 = 赋值内容;
例如：var $ a = 10 ;
jq中顶级对象是 $ 或者jQuery关键字
注意： jQuery中的 $ 和 jQuery关键字 本身同为一个对象
Jquery变量与Dom变量的转换：
- Dom变量转Jquery变量：
var oDiv = document.getElementsByClassName(“box”)[0];获取Dom变量var $b = $(oDiv);将Dom变量赋值给Jquery变量 - Jquery变量转Dom变量：
var $c = $b[0];
利用Jquery来设置CSS的方法：
jquery中提供更简便的链式编程（冒号赋值，逗号间隔），与js的写法有所不同
Jquery元素.css(属性名,属性值)
例：$(".box").css("color","red").css("fontSize","30px");
入口函数:
Js中入口函数：window.onload
Jquery中入口函数:$(document).ready(function(){…});/$(function(){...});
文档的加载步骤：
1.解析HTML结构
2.加载外部的样式表和脚本
3.解析并执行脚本
4.构建HTML–DOM模型 (ready方法执行 - JQ入口函数)
5.加载图片等外部资源
6.页面加载完毕 (load方法执行 - JS入口函数)
Jquery选择器
1.id选择器$("#box")
2.class选择器$(".box")
3.标签名选择器$("div")
4.通用选择器$("*")
5.层级选择器$("div>span").html();
6.后代选择器$("p span")
find()方法
搜索所有段落中的后代 span 元素$("p").find("span")
7.子元素选择器和children方法
- 子元素选择器
$("p>span") - children方法：
$("p").children()p标签中的每个子元素$("p").children(".span")p标签中的每个span
取得一个包含 匹配的元素集合中 每一个元素的所有子元素的元素集合
连续子代选择器$("div>span>span")
8.群组选择器$("div,p")
9.交叉选择器
两个条件必须同时满足$("#btn.div")
10. 紧邻选择器和 next()方法
条件1: 紧挨着制定目标 (这里的指定目标： .box)
条件2： 需要在目标的下方书写
$(".box+button")
next方法$(".d").next()
nextAll 方法$(".d").nextAll("button")
prev 方法$(".d").prev()
prevAll 方法$(".d").prevAll("span")
siblings 方法$(".d").siblings("button")
11. 同辈选择器（同级/同胞选择器)
可以获取到目标下方 所有的元素(无论是否紧邻)$(".box~p")
12. 过滤选择器
- :first匹配到第一个符合条件的元素
$('li:first') - :last匹配到最后一个符合条件的元素
$('li:last') - :not 除了()中指定的条件，获取:前指定的所有元素，
$("li:not(.list)") - :even 索引为偶数的
$("li:even") - :odd 索引为奇数
$("li:odd:not(.list)") - :eq(指定索引值)
$("li:eq(0)") - :gt(大于索引值)
$("li:gt(1)") - :lt(小于索引值)
$("li:lt(2)")
13. 属性选择器
- 获取具有id属性的div
目标[属性名] 当目标具备这个属性时被选中$("div[id]") - 目标[属性名=‘属性值’]
当目标具有 指定属性的属性值时被选中$("div[id='div1']") - 目标[属性名!=‘属性值’]
选取目标中不具有指定属性值的所有元素$("div[id!='box']") - 目标[属性名^=‘属性值’]
目标指定的属性名， 是以指定的属性值开头的$("div[id^='d']") - 目标[属性名$=‘属性值’]
目标指定的属性名 是以指定的属性值结尾的$("div[id$='1']"). - 目标[属性名
*=‘属性值’]
目标指定的属性名 只要包含指定的属性值$("div[id*='iv']")
Jquery动画效果
1.显示/隐藏
目标隐藏：目标.hide( );
目标显示：目标.show( );
目标根据当前状态显示/隐藏：目标.toggle( );
2.淡入/淡出
目标淡入：目标.fadeIn( );
目标淡出：目标.fadeOut( );
目标根据当前状态淡入/淡出：目标.fadeToggle( );
目标渐变到指定的透明度：目标.fadeTo(动画执行时间,指定的透明度);
3.目标滑入/滑出
目标滑入：目标.sildeDown( );
目标滑出：目标.slideUp( );
目标根据当前状态滑入/滑出：目标.slideToggle( );
小括号中设置动画执行时间
4.自定义动画
目标.animate({
动画效果
}，动画执行时间，动画结束后执行的函数);
在动画结束后执行的函数内在此添加animate多重嵌套来实现连续的动画效果
$(".text:first").animate({
opacity: 1,
left:"200px"
},500,function(){
$(this).animate({ top:"-100px" },800,function(){
$(this).fadeOut(200)
})
Jqoery中操作Dom节点
- 节点的创建
var $ 节点名称 = $(节点内容);
例：var $ li = $ ( <li></li>); - 节点的添加
- 内容.appendTo(目标） 将内容添加到目标中的最后一位
例$("<li></li>").appendTo("ul"); - 目标.perpend(内容） 将内容添加到目标中的第一位
例：$("ul").prepend("<li></li>"); - 目标.after(内容） 将目标添加到指定内容之后
例：$(".box").after("<span></span>"); - 目标.insertAfter(目标） 将内容添加到目标后(若内容时页面已有元素，则将该元素移动到指定位置)
例：$("ul").insertAfter($("div")); - 目标.before(内容） 将内容添加到指定目标前
例：$(".box").before("<span></span>"); - 内容.insertBefore(目标)） 将内容添加到目标前(若内容时页面已有元素，则将该元素移动到指定位置)
例：$(".less").insertBefore($(".box"));
- 内容.appendTo(目标） 将内容添加到目标中的最后一位
- 节点删除
- 指定目标.remove(） 将制定目标删除
例：$("span").remove(); - 目标.empty(） 清空目标的子节点(不会对自身造成影响)
例：$("ul").empty( );
- 指定目标.remove(） 将制定目标删除
- 节点复制
目标.clone( ); 返回目标的复制体（需要创建元素接收或者直接使用）
例：var $box = $(".box").clone();
Jquery中数据绑定
-
元素事件绑定
元素.on( 事件类型，执行的子元素，参数，执行函数）；事件类型：是必填选项，可以绑定多个事件，但仅限于功能相同，事件 功能不同时可采用链式变成在其后续写
执行的子元素是可选选项，可以不写
参数指执行时传递到函数内部的数据，是可填选项，可以通过event.date来获取
执行函数是必填选项例：
$(".box").on("click mouseout",".min_box",{sum:20},function (e) {执行函数)
on事件绑定与函数名绑定事件的区别：
函数名绑定事件仅作用于页面的已有元素，对于后续添加的元素无效，而.on绑定事件与事件监听效果类似，可以对后续添加的元素也实现效果 -
元素事件解绑
元素.off(参数1，参数2，参数3）参数1：符合要解除目标的事件类型和事件命名，是必填选项
参数2：看置顶可以出发绑定事件的后代元素，是可选参数
参数3：当事件运行时的执行函数，是可选选项例：
$('ul').off('click',"li");
也可以直接使用(’.class名’)，这样的话，可以移除相同命名空间的不同事件，对于模拟操作.trigger()和.triggerHandler()，用法也是一样的(如果该事件已经删除，则无法模拟使用)
读取和使用鼠标状态：$('button').mousedown(function(e){alert(e.which) 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键})
阻止默认事件和冒泡事件：
阻止默认事件 e.preventDefault();
阻止冒泡事件 e.stopPropagation();
对象的方式 绑定多个事件
$("button").on({
mousedown:function () {
alert("鼠标按下了");
},
mouseup:function () {
alert("鼠标抬起了")
}
})
事件命名空间：
针对同名元素绑定事件时的元素查找$('input').on('click.a', function () {});$('input').on('click.b', function () {});
使用.off来解决永远只响应一次的时间，避免事件叠加冲突：
var iCount = 0;
function sayHello() {
alert("Hello!");
}
$('.btn3').on("click", function () { //每单击一次，响应一次事件
iCount = iCount + 1;
$('.box').html("Say Hello" + iCount + "次");
$(".box").off('click').on('click', sayHello); //先移除事件（避免事件叠加），再绑定事件
})
- 判断目标样式
if(被判断目标.is(".类名")){执行的代码/功能 } - attr与prop的区别：
- 相同：
两者都是用于获取和设置元素属性值 - 区别：
prop是处理元素的固有属性；attr处理自定义属性
操作固有属性时，prop 返回正确值，attr 返回undefind
- 相同：
- each循环：
each( 需要遍历的目标，每个目标要执行的功能 )
用于循环遍历成员、数据，常用于多元素或者任意数组和对象的循环访问 - 停止动画：
stop(参数1，参数2)
参数1：stopAll是否清除动画队列(默认false，后续动画继续执行)
参数2：goToEnd，是否立即完成当前动画(默认false，立即停止) - 释放#的所有权：
var $ js = $.noConflict()使用js代替$
来源：CSDN
作者：Listener丶
链接：https://blog.csdn.net/Listner/article/details/104160273