JQuery
js的缺点总结
1.入口函数只能有一个，如果出现多个，后面的会覆盖掉前面的
2.代码容错性差，容易出错，出错会导致后面的代码不执行
3.存在浏览器兼容性，比如innerText在火狐浏览器中不起作用
4.DOM操作复杂，实现简单的动画很麻烦
jQuery的两种入口函数：
$(document).ready(function(){});
$(function(){});
对比JavaScript的入口函数与jQuery的入口函数
1.JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行
2.jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。
了解jQuery
$:其实就是一个函数； $():参数不一样，功能不一样
jQuery对象与DOM对象之间的转换（难点）
什么是DOM对象？
使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。比如使用document.getElement*系列的方法返回的就是dom对象。
dom对象只可以使用dom对象的方法和属性
什么是jQuery对象
jQuery对象就是使用jquery的方法获取页面中的元素返回的对象就是jquery对象。比如使用$()方法返回对象都是jquery对象
jquery对象只能使用jquery对象的方法
jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合）
jQuery对象和DOM对象的相互转换
jquery对象转DOM对象
第一种方法（推荐使用）
var $li = $("li");
第二种方法：
$li[0]
$li.get(0) 两种方法等价 取到DOM元素集合
其实jQuery对象转DOM对象的实质就是取出jQuery对象中封装的DOM对象
DOM对象转jQuery对象
var $obj = $(domObj);
$(document).ready(function(){});就是典型的DOM对象转jQuery对象
JavaScript是一门编程语言，jquery是用JavaScript实现的一个JavaScript库，目的是简化我们的开发
选择器：
基本选择器、层级选择器、过滤选择器、筛选选择器
基本选择器：ID选择器 类选择器 标签选择器 并集选择器 交集选择器（标签指定式选择器）
层级选择器：子代选择器 后代选择器
过滤选择器：:eq（index） :odd :even
筛选选择器：children(selector) find(selector) siblings(selector) parent() eq(index)
jQuery操作样式
css操作 功能：设置或者修改样式，操作的是style属性 （参数是一个对象，对象中包含了需要设置的样式名和样式值）
class操作
addClass(name);添加样式类
removeClass() 不带参数，移除所有的样式类 带参数，移除单个样式类
hasClass(name) 判断是否有样式类 返回值为true false
toggleClass(name); 切换样式类 name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。
经验总结：
1.如果操作到的样式非常少，可以考虑css方法
2.如果操作到的样式非常多，那么可以通过class方法来操作，将样式写到一个class类里面。
3.如果考虑到后期维护方便，将css从js中分离出来，那么推荐使用class的方式来操作。
jquery动画
show()显示 hide()隐藏 toggle():显示隐藏切换，如果是显示状态，执行隐藏操作，否则执行显示操作。
show([speed], [callback]);
滑入：slideDown（） 滑出：slideUp() 滑入滑出切换：slideToggle()
slideUp(speed, callback);
淡入：fadeIn（） 淡出：fadeOut() 淡入淡出切换：fadeToggle()
fadeIn(speed, callback);
自定义动画
animate：自定义动画
$(selector).animate(json,[speed],[easing]，[callback]);
// json：要执行动画的CSS属性，带数字（必选）
// speed：执行动画时长（必选，默认normal）
//easing：控制动画的效果
//1.swing：摇摆、秋千(默认)
//2.linear:匀速
// callback：动画执行完后立即执行的回调函数（可选）
stop方法：停止当前正在执行的动画效果
stop(clearQueue, jumpToEnd);
//第一个参数：是否清除队列
//第二个参数：是否跳转到最终效果
jquery操作DOM(节点)
创建元素 $(“<span>这是一个span元素</span>”);
添加元素 $(“div”).append($span); $(“div”).append(“<span>这是一个span元素</span>”);
清空元素：
empty：清空指定节点的所有元素，自身保留(清理门户)
$(“div”).html(“”);//使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除。
remove：相比于empty，自身也删除（自杀）
克隆元素：
// 复制$(selector)所匹配到的元素（深度复制）
//clone(true)
// 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。
$(selector).clone();
jQuery操作属性
attr(name, value);
//用法举例
$(“img”).attr(“title”,”哎哟，不错哦”);
$(“img”).attr(“alt”,“哎哟，不错哦”);
attr(obj)
//用法举例
$("img").attr({
title:"哎哟，不错哦",
alt:"哎哟，不错哦",
style:"opacity:.5"
}）；
获取属性：
attr(name)
1.获取属性时，只会获取到第一个元素对应的属性，与css方法一样
2.获取属性时，如果该属性不存在，那么会返回undefined
移除属性：
removeAttr(name);
//用法举例
$("img").removeAttr("title");
prop
注意：在jQuery1.6之后，对于checked、selected、disable这类boolean类型的属性来说，
如果使用attr方法获取属性值，得到的不是true和false，而是checked以及undefined。，
使用prop方法来获取或者设置checked、selected、disable这类的值。prop方法使用跟attr方法一样。
//设置属性
$(“:checked”).prop(“checked”,true);
//获取属性
$(“:checked”).prop(“checked”);//返回true或者false
jQuery操作值与内容
val方法用于设置和获取表单元素的值，例如input、select、textarea的值
//设置值
$(“#name”).val(“张三”);
//获取值
$(“#name”).val();
html方法与text方法的区别：
html方法会识别html标签，text方法会把内容直接当成字符串，并不会识别html标签。
jQuery操作尺寸
height()与width()：设置或者返回元素的高度及高度,返回结果是数值类型。
innerWidth()与innerHeight()：返回元素的宽度及高度（包括padding）
outerWidth()与outerHeigth()：返回元素的宽度及高度（包括padding、border）
outWidth(true)与outerHeight(true)：返回元素的宽度及高度（包括padding、border、margin）
注意：只有height()与width（）可以进行设置操作，innerWidth（）、outWidth（）都是只读属性，只能获取、不能设置。
offset：
设置或者获取元素相对于文档document的位置。
注意：使用offset操作，如果元素没有设置定位(默认position:static)，则会把position修改为relative.会修改left、top
position
获取相对于其最近的有定位的父元素的位置。offsetLeft
// 获取，返回值为对象：{left:num, top:num}
$(selector).position();
注意：position方法只能获取，不能设置
scrollTop
设置或者获取垂直滚动条的位置
// 有参数表示设置偏移，参数为数值类型
$(selector).scrollTop(100);
// 无参数表示获取偏移
$(selector).scrollTop();
scrollLeft
设置或者获取水平滚动条的位置
// 有参数表示设置偏移，参数为数值类型
$(selector).scrollLeft(100);
// 无参数表示获取偏移
$(selector).scrollLeft();
jQuery事件的发展历程
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
$("p").bind("click mouseenter", function(){
//事件响应方法
}); 可以绑定多个事件 缺点：不支持动态创建出来的元素绑定事件。
$(".parentBox").delegate("p", "click", function(){
//为 .parentBox下面的所有的p标签绑定事件
}); 支持动态创建出来的元素绑定事件。
为什么delegate支持动态绑定事件？原因是事件冒泡机制。因为事件时绑定到父元素上的，由子元素触发。
表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click",“span”, function() {});
表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定（不使用代理）。
$(selector).on( "click", function() {});
事件解绑：
unbind() undelegate() off（）
jQuery事件对象：
event.type 事件类型
event.data 存储绑定事件时传递的附加数据
event.target 点了谁就是谁
event.currentTarget 当前DOM元素，等同于this
event.delegateTarget 代理对象
screenX和screenY 对应屏幕最左上角的值
offsetX和offsetY 点击的位置距离元素的左上角的位置
clientX和clientY 距离页面左上角的位置（忽视滚动条）
pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）
event.witch 鼠标按键类型，1=鼠标左键 2=鼠标中键 3=鼠标右键
event.keyCode 按下的键盘代码
event.stopPropagation() 阻止事件冒泡行为
event.preventDefault() 阻止浏览器默认行为
return false;
链式编程
链式编程原理：return this;
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。
end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。
隐式迭代：
隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，
简化我们的操作，方便我们调用。如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。
设置性操作的时候，设置的是所有的元素。 获取性操作：获取的是第一个元素
each方法：
有了隐士迭代，为什么还要使用each函数遍历？
大部分情况下是不需要使用each方法的，因为jQuery的隐士迭代特性。如果要对每个元素做不同的处理，这时候就用到了each方法
多库共存：
我们知道jQuery占用了$这个标识符，如果引用的其他库也用到$这个标识符，这时候为了保证每个库都能正常使用，
这时候就存在了多库共存的问题。后引入的$的会覆盖掉先引入的库中的$。
解决办法：
$ === jQuery
jQuery的$和jQuery是两个相同的变量，因此遇到多库共存的时候，可以让jquery交出$符的控制权，这个时候还是可以使用$.时间： 2024-10-26 11:41:06