一、基础
(一) jQuery版本区别
- 1.x版本支持老浏览器，比如IE678，已经停止更新
- 2.x版本不支持老浏览器，已经停止更新
- 3.x版本不支持老浏览器，还在更新
- jQuery官网：https://jquery.com/
jQuery在线API：https://api.jquery.com/
http://jquery.cuishifeng.cn/(xml文件)
jQuery UI:https://jqueryui.com/
(二) jQuery顶级对象
- DOM中的顶级对象：document，页面中的顶级对象
- document点后面的是DOM中的属性和方法
- BOM中的顶级对象：window，浏览器中的顶级对象
- window点后面的是浏览器的属性和方法，DOM也属于BOM
- jQuery的顶级对象是：jQuery 即 $
(三) jQuery对象和DOM对象相互转换
-
用原生js获取来的对象就是DOM对象
var btnObj = document.getElementById("btn"); -
DOM对象转jQuery对象，只需要把DOM对象放在$()中即可
$(btnObj); -
jQuery对象转DOM对象的两种方式
$("#btn").get(0); 或 $("#btn")[0]; -
this属于DOM对象
(四) JS和jQuery加载和入口函数区别
- 加载的区别
-
原生js的入口函数会等到DOM元素加载完毕，并且图片也加载完毕，才会执行
window.onload = function(e){ ... } -
jQuery的入口函数会等到DOM元素加载完毕，但不会等到图片也加载完毕
$(document).ready(function(){ ... }); 或者 $(function(){ ... }); //推荐
- 原生JS中多个入口函数时，后面的入口函数会覆盖前面的入口函数。jQuery多个入口函数后面的不会覆盖前面的。
(五) jQuery和其他JS插件产生冲突
-
当其他插件中也后“$”作为关键字时，解放jQuery的“$”使用权，同时使用“jQuery”替代jQuery中的“$”
jQuery.noConflict(); -
也可以自定义访问符号，如下代码表示释放jQuery中的“$”符改用nl表示
var nl = jQuery.noConflict();
二、jQuery方法
(一) jQuery的核心函数 ($())
//1.接收一个函数
$(function(){
//2.1接收一个字符串选择器,返回一个jQuery对象，对象中保存了找到的DOM元素
var box1 = $(".box1");
//2.2接收一个字符串代码片段,返回一个jQuery对象，对象中保存了创建的DOM元素
var p = $("<p>我是段落</p>");//创建了一个DOM元素
//3.1接收一个DOM元素,会被包装成一个jQuery对象返回给我们
var span = document.getElementsByTagName("span")[0];
var obj = $(span);
});
(二) jQuery对象与伪数组
- 伪数组: 拥有 length 属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)。
自定义一个伪数组：var obj = {0:a, 1:b, 3:c, length:3}; - jQuery对象是一个伪数组。
(三) jQuery静态方法
-
each(array[, callback])遍历数组
既可以遍历数组，也可以遍历伪数组，返回值是遍历哪个数组，就返回哪个数组。$.each(array, function(index, value){ //index 当前遍历的数组的索引 //value 当前遍历的数组的值 }); -
map(array, callback)遍历数组
既可以遍历数组，也可以遍历伪数组，返回值默认为空，当回调函数中有return时，遍历完成后，将会把return的值作为一个数组整体返回。//array 要遍历的数组 $.map(array, function(value, index){ //index 当前遍历的数组的索引 //value 当前遍历的数组的值 //里边可以return 一个值 }); -
trim(string)去除字符串前后的空格
返回去除空格后的字符串。$.trim(str); -
isWindow(obj)判断是否是window对象
如果是window对象返回true否则返回false$.isWindow(win); -
isArray(obj)判断是否是数组
如果是数组返回true，否则返回false。伪数组返回false。$.isArray(arr); -
isFunction(obj)判断是否是函数
如果是函数返回true，否则返回false。$.isFunction(fun); -
holdReady(booler)暂停ready()方法的执行
booler为true时表示暂停，为false时表示执行。$.holdReady(true);
(四) jQuery操作属性节点
-
属性节点：编写HTML代码时，在标签中添加的属性就是属性节点
如：span标签中的name属性<span name="biu"></span> -
在浏览器中查看属性节点
-
js操作属性节点
var attr = document.getElementById("id"); attr.setAttribute("属性名称", "值"); attr.getAttribute("属性名称"); -
jQuery操作属性节点
-
[1]. attr()方法和prop()方法的区别
在设置disabled、selected、checked等这些Boolean类型自带属性时，我们需要用 prop() 方法；其他字符串类型自带属性时，我们使用 attr() 方法即可;DOM节点可见的自定义属性我们也使用 attr() 方法。 -
[2]. attr(name|pro|key,val|fn) 设置或返回被选元素的属性值。
注意：使用该方法获取属性节点的值，只会返回第一个元素指定的属性节点的值 。
如果是设置属性节点的值，找到多少元素就设置多少个元素。
如果该属性不存在则添加该属性节点。 -
[3]. removeAttr(name) 从每一个匹配到的元素中删除一个属性
注意：会删除所有找到元素指定的属性节点。
如果需要删除多个属性，用空格隔开。 -
[4]. prop(name|key, val) 获取在匹配的元素集中的第一个元素的属性值。
-
[5]. removeProp(name) 用来删除由.prop()方法设置的属性集
(五) jQuery操作类
- addClass(class) 为每个匹配的元素添加指定的类名。
多个类名用空格隔开。 - removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类。
多个类名用空格隔开。 - toggleClass(class|fn[,sw]) 如果存在（不存在）就删除（添加）一个类。
(六) jQuery操作文本
- html([val|fn]) 取得或设置第一个匹配元素的html内容。
- text([val|fn]) 取得或设置所有匹配元素的内容。
- val([val|fn|arr]) 获得或设置匹配元素的当前值。
(七) jQuery获取元素位置
- scrollTop([val]) 获取或设置匹配元素相对滚动条顶部的偏移。
注意：在ie浏览器一般使用$(“body”).scrollTop();来获取滚动条距离顶部的位置，而在其他浏览器则使用$(“html”).scrollTop();来获取。为了兼容ie和其他浏览器，可以使用：
同理设置时，为了兼容ie和其他浏览器$("html").scrollTop()+$("body").scrollTop();$("html,body").scrollTop(300);
三、事件
(一) 事件冒泡
- DOM中，树状结构决定了子元素肯定在父元素里，所以点击子元素，就同时点击了子元素和父元素，以及父元素的父元素，以此类推，当然最终的根节点都是文档，以及window。
- 下面的例子就是点击小div时也会触发大div的click事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .big{ width: 100px; height: 100px; background-color: blue; } .small{ width:50px; height: 50px; background-color: red; } </style> </head> <body> <div class="big"> <div class="small"></div> </div> <script src="jquery-1.12.2.js"></script> <script> $(function(){ $(".big").click(function (){ alert("big"); }); $(".small").click(function (){ alert("small"); }); }); </script> </body> </html> - 阻止事件冒泡：
- [1]. 在小div的事件触发的方法中添加return false；即可。
$(".small").click(function (){ alert("small"); return false; }); - [2]. 也可以在小div的事件触发的方法中添加revent.stopPropagation();来阻止。
$(".small").click(function (event){ alert("small"); event.stopPropagation(); });
(二) 标签的默认行为
- 标签的默认行为： 如标签a的默认跳转，submit按钮的提交表单。
- 阻止默认行为：
- [1].在对应的方法中return false;
- [2].也可以使用event.preventDefault。
- [3].<a href=“javascript:;”>百度</a>或者<a href=“javascript:void(0)”>百度</a>
(三) jQuery绑定事件
-
eventName(fn);
$(id).click(function(){ ... }); -
on(eventName, fn);
$(id).on("click", function(){ ... }); -
区别：第一种编码效率高，第二种可以添加所有的js事件，而第一种部分不行。
注意：这两种方式可以添加多个事件也可以添加多个相同的事件，而不会造成覆盖。
(四) jQuery解绑事件
- off(events,[selector],[fn]) 在选择元素上移除一个或多个事件的事件处理函数。
如果不传参则会移元素上的所有事件，如果有参数则移除该事件。
下边表示移除元素的click事件板凳的test1方法。$(id).off("click", test1);
(五) jQuery自动触发事件
- trigger(type,[data]) 在每一个匹配的元素上触发某类事件。
type:一个事件对象或者要触发的事件类型。
- [1]. 自动触发元素的click事件
$(id).trigger("click");
- triggerHandler(type, [data]) 触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。
- trigger和triggerHandler的不同
-
[1]. trigger会引起事件冒泡，而triggerHandler不会
-
[2]. trigger() 会操作 jQuery 对象匹配的所有元素，而 triggerHandler() 只影响第一个匹配元素。
-
[3].trigger()会引起事件（比如表单提交）的默认行为,triggerHandler()不会
-
[4]. 在如下代码中没有trigger没有触发a标签的默认行为，即没有自动跳转到百度。
<a href="http://baidu.com">sadww</a> <script src="jquery-1.12.2.js"></script> <script> $(function(){ $("a").click(function(){ alert('adfs'); }).trigger("click"); }); </script>$(‘a’).trigger(‘click’)并不能触发a标签中内容的点击事件，只是相当于触发了a本身的onclick，而不是像用户点击一样的事件。如果想要触发click事件，得把trigger绑定到a标签的子元素sapn上面，如：
<a href="http://baidu.com"><span>sadww</span></a> <script src="jquery-1.12.2.js"></script> <script> $(function(){ $("span").click(function(){ alert('adfs'); }).trigger("click"); }); </script>
(六) jQuery自定义事件
- 需要满足的前提条件
-
[1].事件必须通过on绑定
-
[2].事件必须通过trigger或者triggerHandler来触发
$(id).on("myCLick", function(){ ... }); $(id).trigger("myClick");
(七) jQuery事件命名空间
- 事件命名空间的前提条件
- [1]. 事件通过on()来绑定
- [2]. 通过trigger或者triggerHandler来触发
//在zs的命名空间下注册id元素的click事件 $(id).on("click.zs", function(){ ... }); //在ls的命名空间下注册id元素的click事件 $(id).on("click.ls", function(){ ... }); //id元素触发zs命名空间下的click事件 $(id).trigger("click.zs");
- 命名空间的注意点
-
[1]. 利用trigger触发子元素带命名空间的事件，那么父元素带命名空间的事件也会被触发。而父元素没有命名空间的事件不会被触发。
-
[2]. 利用trigger触发子元素不带命名空间的事件，那么子元素所有相同类型的事件（带命名空间和不带命名空间的事件）和父元素所有相同的事件都会被触发。
//.son是.father的一个子元素 $(".father").on("click.ls", function(){ ... }); $(".father").on("click", function(){ ... }); $(".son").on("click.ls", function(){ ... }); //会触发.father的click.ls事件 $(".son").trigger("click.ls"); //触发.father的click, click.ls事件，也会触发.son的click.ls事件 $(".son").trigger("click");
(八) jQuery事件委托
- 事件委托就是利用冒泡的原理，将事件加到 父元素 或 祖先元素上，触发执行效果。
- delegate(selector,[type],[data],fn) 指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
- jQuery 3.0中已弃用此方法，请用 on()代替。
4. 为新添加的li标签添加上click事件
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ul>
<button class="">新增一个li</button>
<script src="jquery-1.12.2.js"></script>
<script>
$(function(){
$("button").click(function(){
$("ul").append("<li>新增的li</li>");
});
//新添加的li不会有click事件
/* $("li").click(function() {
alert($(this).html());
});*/
//新添加的li也会有click事件
$("ul").delegate("li", "click", function (){
alert($(this).html());
});
//使用on实现相同效果
$("ul").on("click", "li", function (){
alert($(this).html());
});
});
</script>
(九) jQuery鼠标指针移入移出事件
- mouseover([[data],fn]) 当鼠标指针位于元素上方时，会发生 mouseover 事件。
- mouseout([[data],fn]) 当鼠标指针从元素上移开时，发生 mouseout 事件。
- mouseover/mouseout事件，子元素移入移出也会触发父元素的事件。
- 不想要子元素触发父元素的事件可以使用mouseenter和mouseleave方法。（推荐）
- hover([over,]out) 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。
-
[1]. 鼠标移入触发over方法，移出触发out方法。
-
[2]. 该方法子元素不会触发父元素的事件。
-
[3]. 只有一个方法时，移入和移出时都会触发该方法。
-
[4].hover并不是一个事件，而是jQuery将mouseover和mouseout合并的一个方法，所以使用on方法绑定hover是不管用的，可以用下面的语句替换：
$(document).on('mouseover/mouseout','.object',function(){})
(十) jQuery滚动事件
- scroll([[data],fn]) 当用户滚动指定的元素时，会发生 scroll 事件。
$(window).scroll( function() { ... } );
四、动画效果
(一) jQuery显示与隐藏
- show([speed,[easing],[fn]]) 显示隐藏的匹配元素。
- speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
- easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
- fn:在动画完成时执行的函数，每个元素执行一次。
- hide([speed,[easing],[fn]]) 隐藏显示的元素
- 参数说明如show()
- toggle([speed],[easing],[fn]) 如果元素是显示状态则改为隐藏状态，如果元素时隐藏状态则改为显示状态。1.9版本 .toggle() 方法删除,jQuery
(二) jQuery展开与收起
- slideDown([speed],[easing],[fn]) 展开元素，在显示完成后可选地触发一个回调函数。
- slideUp([speed,[easing],[fn]]) 收起元素，在隐藏完成后可选地触发一个回调函数
- slideToggle([speed],[easing],[fn]) 如果元素是展开状态的则改为收起状态，如果元素时收起状态则改为展开状态
(三) jQuery动画停止
- stop([clearQueue],[gotoEnd]) 停止所有在指定元素上正在运行的动画。
- clearQueue:如果设置成true，则清空队列。可以立即结束动画。
- gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。
- stop([queue],[clearQueue],[jumpToEnd])
- queue:用来停止动画的队列名称
- clearQueue:如果设置成true，则清空队列。可以立即结束动画。
- jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。
(四) jQuery淡入淡出
- fadeIn([speed],[easing],[fn]) 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
- fadeOut([speed],[easing],[fn]) 过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
- fadeToggle([speed,[easing],[fn]]) 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。
- fadeTo([[speed],opacity,[easing],[fn]]) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
(五) jQuery动画队列
- 现在要实现当展开动画(slideDowm)结束后实现淡出(fadeOut)然后再淡出结束后实现淡入(fadeIn)
//方法1 $(id).slideDown(1000, function(){ $(id).fadeOut(1000, function(){ $(id).faeIn(1000); }); }); //方法二：使用动画队列,stop()的作用是停止该元素上的所有动画 $(id).stop().slideDown(1000).fadeOut(1000).faeIn(1000);
(六) jQuery自定义动画
- animate(params,[speed],[easing],[fn]) 用于创建自定义动画的函数。
- 第一个参数：接收一个对象，可以在对象中修改属性
- 第二个参数：指定动画时长
- 第三个参数：指定动画节奏，默认是swing
- 第四个参数：动画执行完毕后的回调函数
(七) jQuery函数延迟执行
- delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目。
五、文档处理
(一) jQuery内部插入节点
-
append(content|fn) 向每个匹配的元素内部追加内容。
//向p标签中新增一个b标签 $("p").append("<b>Hello</b>"); -
appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中。
//向ul中新增一个li var new_li = $("<li>新增一个li</li>"); new_li.appenTo("ul"); -
prepend(content) 向每个匹配的元素内部前置内容。
//在p标签内容之前添加新内容b //<p>I would like to say: </p> $("p").prepend("<b>Hello</b>"); //结果：<p><b>Hello</b>I would like to say: </p> -
prependTo(content) 把所有匹配的元素前置到另一个、指定的元素元素集合中。
//<p>I would like to say: </p><div id="foo"></div> $("p").prependTo("#foo"); //结果：<div id="foo"><p>I would like to say: </p></div>
(二) jQuery外部插入节点
- after(content|fn) 在每个匹配的元素之后插入内容。
- before(content|fn) 在每个匹配的元素之前插入内容。
- insertAfter(content)把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
- insertBefore(content)把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
(三) jQuery删除节点
- remove([expr]) 从DOM中删除所有匹配的元素。
- 删除元素内容和其本身
//<p>Hello</p> how are <p>you?</p> $("p").remove(); //结果：how are
- empty() 删除匹配的元素集合中所有的子节点。
- 删除元素内容
//<p>Hello, <span>Person</span> <a href="#">and person</a></p> $("p").empty(); //结果:<p></p>
- detach([expr]) 从DOM中删除所有匹配的元素。
- 功能与remove()相同
- 与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
(四) jQuery替换节点
- replaceWith(content|fn) 将所有匹配的元素替换成指定的HTML或DOM元素。
- replaceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素。
(五) jQuery复制节点
- clone([Even[,deepEven]]) 克隆匹配的DOM元素并且选中这些克隆的副本。
-
一个布尔值（true 或者 false）指示事件处理函数是否会被复制。为true时表示深复制，为false时表示浅复制。
-
一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。
六、jQuery原理
(一) jQuery基本结构
- jQuery本质是一个闭包，使用闭包为了避免多个框架的变量冲突
- jQuery使用window来让外界访问内部定义的局部变量
- IE9一下的浏览器undefined可以被修改为了保证内部使用的undefind不被修改，所以jQuery需要接收一个正确的undefined
(function( window, undefined ) { var jQuery = function( ) { return new jQuery.prototype.init( ); } jQuery.prototype = { constructor: jQuery } jQuery.prototype.init.prototype = jQuery.prototype; window.jQuery = window.$ = jQuery; })( window );
(二) jQuery入口函数
- 传入 ‘’ null undefined NaN 0 false, 返回空的jQuery对象
- 字符串:
代码片段:会将创建好的DOM元素存储到jQuery对象中返回
选择器: 会将找到的所有元素存储到jQuery对象中返回 - 数组:
会将数组中存储的元素依次存储到jQuery对象中立返回 - 除上述类型以外的:
会将传入的数据存储到jQuery对象中返回
七、AJAX
(一) 原生AJAX原理
//1. 创建一个异步对象
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
//兼容IE6、IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.设置请求方式和请求地址
/*
2.1 method:请求类型：GET 或 POST
2.2 url： 接收请求的位置
2.3 asyns: 异步请求: true(默认) 或 false
2.4 IE ：当对同一个请求地址发送get请求时，ie会缓存浏览器响应的数据，从而无法获取最新的数据，可以使用Math.random()或者new Date().getTime()使请求地址不一样
2.5 URL中只可以出现字母/数字/下划线/ASCII码,如果需要处理中文需要使用encodeURIComponent方法
encodeURIComponent(key)
*/
xhr.open("GET", "ajax.php?key=value&t=" + (new Date().getTime()), true);
//3. 发送请求
xhr.send();
//3.5如果需要中断请求
//xhr.abort();
//4.监听状态的变化
xhr.onreadystatechange = function(s){
if( xhr.readyState === 4 ){
if(xhr.status >= 200 && xhr.status < 300 || xht.status === 304){
//4.1 获得字符串形式的响应数据。
console.log(xhr.responseText);
//4.2 获得 XML 形式的响应数据。
//console.log(xhr.responseXML);
}else{
console.log("服务器响应失败");
}
}
}
八、COOKIE
- cookie有大小和个数的限制。个数为20~50个，大小为：4KB，根据游览器的不同而不同。
- cookie生命周期默认情况下是一次会话(浏览器被关闭)
- cookie的作用范围：同一个浏览器的同一个路径下访问。在上级路径中设置cookie在下级路径中也能获取到 (在/jquery/cookie中设置cookie在/jquery/cookie/ex路径下也能够访问到)，如果需要整站访问可以将cookie的路径path设置为"/"（path=/）
- 默认情况下子域名(a.baidu.com)无法访问根域名(www.baidu.com)下的cookie，可以使用参数domain=baidu.com来使子域名获取跟域名的cookie
-
获取cookie
document.cookie; -
设置cookie
cookie不能一次性设置多条数据。document.cookie = "键=值[;expires=过期时间;path=保存到的路径;domain=根域名]"; -
cookie封装
/** * key:键 * value：值 * day：过期时间 * path：作用路径 * domain：作用域名 */ function addCookie(key, value, day, path, domain){ //1.处理默认保存的路径 var index = window.location.pathname.lastIndexOf('/'); var currentPath = window.location.pathname.slice(0, index); path = path || currentPath; //2.处理domain domain = domain || document.domain; //3.处理过期时间 if(!day){ document.cookie = key + "=" + value + ";path=" + path +" ;domain=" + domain + ";"; }else{ var date = new Date(); date.setDate(date.getDate() + day); document.cookie = key + "=" + value + ";expires=" + date.toGMTString() + ";path=" + path +" ;domain=" + domain + ";"; } } function getCookie(key){ var res = document.cookie.split(";"); for (k in res) { var temp = res[k].split("="); if(temp[0].trim() === key){ return temp[1]; } return null; } } //默认情况下只能删除默认路径中保存的cookie function delCookie(key, path){ addCookie(key, getCookie(key), -1, path); } addCookie('an', '123', '', '/'); addCookie('an1', '1234', '1', '/'); console.log(getCookie('an')); delCookie('an1','/')
九、HASH
设置hash在url中会有“#值”
-
设置hash
window.location.hash = 2; -
获取hash
window.locathion.hash
扫一扫
1920
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
