jQuery笔记
<1>隐式迭代：偷偷的遍历，在jQuery中，不需要手动写 for 循环了，会自动进行遍历
$("li"）可以获取所有的 li 元素
<2>大版本分类
1.x版本：能够兼容IE678浏览器
2.x版本：不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。
3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）
<3>压缩版和为压缩版
jquery-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等 东西，但是基本没有颗阅读性。
jquery-1.12.4.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读。
<4>jQuery的入口函数
第一种写法
$(document).ready(function() {
});
第二种写法
$(function() {
});
<5>Jquery入口函数与js入口函数的对比
1. JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
2. jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。
<6>jQuery 对象和 DOM对象的区别（重点）
1. DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
2. jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
3. jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合（伪数组））
4. DOM对象与jQuery对象的方法不能混用。
<7>DOM 对象转换成 jquery 对象 [联想记忆:花钱]
$("li") . text( );
jQuery对象转换成DOM对象
$("li")[0]
<8> $符号的实质
$其实就是一个函数，以后用$的时候，记得跟小括号 $();
参数不同，功能就不同
3种用法
1. 参数是一个function, 入口函数
$(function () {
});
2. $(domobj) 把dom对象转换成jquery对象
$(document).ready(function () {
});
3. 参数是一个字符串,用来找对象
$("div") $("div ul") $(".current")
<9> jQuery选择器
1,基本选择器
ID选择器 $(“#id”); 类选择器 $(“.class”); 标签选择器 $(“div”); 并集选择器 $(“div,p,li”); 交集选择器 $(“div.redClass”);
2,层级选择器
子代选择器 $(“ul>li”) 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器 | $(“ul li”); 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等
3, 过滤选择器
这类选择器都带冒号:
:eq（index） $(“li:eq(2)”).css(“color”, ”red”); 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd $(“li:odd”).css(“color”, ”red”); 获取到的li元素中，选择索引号为奇数的元素
:even $(“li:even”).css(“color”, ”red”); 获取到的li元素中，选择索引号为偶数的元素
4,筛选选择器(方法)
筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
children(selector) $(“ul”).children(“li”) |
find(selector) $(“ul”).find(“li”); 相当于$(“ul li”),后代选择器 |
siblings(selector) $(“#first”).siblings(“li”); 查找兄弟节点，不包括自己本身。
parent() $(“#first”).parent(); 查找父亲
eq(index) $(“li”).eq(2); 相当于$(“li:eq(2)”),index从0开始
next() $(“li”).next() 找下一个兄弟
prev() $(“li”).prev() 找上一次兄弟
<10>jQuery css操作
①修改单个样式：css(name, value)
$("li").css("backgroundColor","pink");
②修改多个样式：
css(obj) $("li").css({
backgroundColor : "pink";
color : "red" ;
fontSize : "32px" ;
})
③获取样式 ： css(name)
$("li") .eq(0). css("fontSize") ;
隐式迭代：设置操作的时候，会给 jq 内部的所有对象都设置上相同的值
获取的时候，只会返回第一个元素对应的值
<11>jQuery classs操作
①添加一个类：$("li").addClass("basic");
②移除一个类：$("li").removeClass("basic"）;
③判断类：$("li").hasClass("basic");
④切换类：$("li").toggleClass("basic") , 如果有 basic 类就移除 basic类，没有这个类就添加这个类
<12>jQuery属性操作
样式：是在style里面写的，用css来操作
属性：在js 里面写的，用attr方法操作
①设置单个属性：attr(name, value)
$("img").attr("alt", "哈哈哈") ;
②设置多个属性：
$("img").attr({
alt : "hahaha",
title: "lalalal"
})
③获取属性：
$("img").attr("alt");
<13>对于布尔类型的属性，不用 attr 方法，应该用 prop 方法
<input type="button" value="选中"> <input type="button" value="不选中"> <input type="checkbox" id="ck"> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("input").eq(0).click(function () { $("#ck").prop("checked", true); }); $("input").eq(1).click(function () { $("#ck").prop("checked", false); }); }); </script>
<14>jQuery三组基本动画
①显示 / 隐藏
$("div").show() // $("div").hide()
show(speed , callblack) : speed动画的持续事件，可以是毫秒值，还可以是固定字符串
fast : 200ms normal : 400ms slow : 600ms
callback （）还可以传回调函数
②滑入滑出：slideIn / slideDown
slideIn (speed , callback)
切换： $("div"). slideToggle() ，如果是滑入状态，就执行滑出动画，如果是滑出状态，就执行滑入动画
③淡入淡出： fadeIn / fadeOut
fadeIn(speed, callback)
切换：fadeToggle()
<15>自定义动画
$("div").animate({left : 800} , 8000 )
$("div").animate({left : 800} ,8000, "swing");
$("div").animate({left : 800} , 8000 , "linear " , funciton(){} )
第一个参数：对象，里面可以传需要动画的样式
第二个参数：speed 动画的执行时间
第三个参数：动画的执行效果 : swing ：摇摆； linear : 线形，匀速
第四个参数：回调函数
<16>动画队列
把未执行的动画放在一个队列里面，当前执行的动画结束之后，再挨个执行队列里面的动画
$("div").animate({left : 800})
.animate({width : 300 , height : 300})
.animate ({ top : 0})
<17>停止动画
$("div").slideDown().stop().slideUp();
$("div").stop(true,true);
.stop().animate()
stop：停止当前正在执行的动画
clearQueue：是否清除动画队列，true / false
jumpToEnd：是否跳转到当前动画的最终效果 true / false
<18>jQuery节点操作：
1，创建节点：
2,添加节点：
添加到子元素的最后面：
$("div").append($("p"));
$("p").appendTo($("div"));
添加到子元素的前面：
$("div").prepend($("p"));
$("p").prependTo($("div"));
添加到兄弟元素的前面或后面：
$("div").after($("p"));
$("div").before($("p”));
$("#box").append(' <a href="http://www.baidu.com" target="_blank">哈哈哈哈</a>')
3，清空节点：
$("div").empty()
不用 $("div").html(" ") ，因为这个会泄露内存，可以清空一个元素的内容，但是无法清空它里面的事件，就会占用内存，即内存泄漏，而empty()方法可以清空元素内容和事件
4，删除节点：
$("div").remove();
5，克隆节点：
$("div").clone(true) .appendTo("#box");
clone()里面不传参数或是参数是 false , 都是深度复制，但不会复制事件
参数是 true ，也是深度复制，但是可以复制事件
<19>val（）方法
val方法用于设置和获取表单元素的值，例如input、textarea的值
获取值 : $(“#btn”). val () ;
设置值：$("txt "). val ("123");
案例：[京东搜索] : 表单获得焦点，默认值清空，表单失去焦点，设置默认值
<body> <input type="button" value="呵呵" id="btn"> <input type="text" value="洋酒" id="txt"> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("#txt").focus(function () { if($(this).val() === "洋酒"){ //如果是默认值，清空内容
$(this).val("");
}
});
$("#txt").blur(function () {
if($(this).val() === ""){
$(this).val("洋酒");
}
});
});
</script>
</body>
<20>html 方法 与 text 方法：
html （）： 相当于 innerHTML
text () : 相当于 innerText
获取值: $("div").html()
设置值 : $("div").html("<p>我是文本<p>") // 我是文本,
$("div").text("<p>我是文本</p>") // <p>我是文本</p>
区别: html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。
<21>width 方法与 height 方法
获取宽度: $("div").width() , 直接获取到数字
设置宽度: $("div").width (400)
$("div").innerWidth() ; // padding + width
$("div").outerWidth() ; // padding + width +border
$("div").outerWidth(true) ; //padding+ width + border+margin
获取页面可视区的宽度和高度:
$(window).width()
$(window).height()
<21>scrollTop 与 scrollLeft
设置或者获取垂直滚动条的位置
scrollTop() : 被卷去的高度
scrollLeft () : 被卷去的宽度
$(window).scrollTop() ; 获取页面被卷去的高度
$(window).scrollLeft(); 获取页面被卷去的宽度
案例 : 固定导航条案例 + 小火箭返回顶部案例
<22>offset方法与position方法：
offset方法：获取元素距离document的位置 $("div"). offset()；
position方法：获取的是元素距离有定位的父元素的位置 $("div"). position()；
<23>jQuery事件发展历程：
简单事件绑定 >> bind事件绑定 >>delegate事件绑定 >>on事件绑定
简单事件注册：
click() mouseenter() ....
缺点：不能同时注册多个事件
bind方式注册事件：
$("p") . bind ("click mouseenter " , function(){} )
第一个参数：事件类型
第二个参数：事件处理程序
缺点：不支持动态事件绑定（如新添加的元素没有绑定事件）
delegate注册委托事件：
$(".father").delegate("p" , "click" , function(){ } ) // 为.father下面的所有的p 标签绑定事件
第一个参数：selector , 要绑定事件的元素
第二个参数：事件类型：
第三个参数：事件处理函数
缺点：只能注册委托事件，一次注册事件需要记得方法太多了
on 注册事件
最现代的方式，兼容zepto（移动端类似jQuery的一个库），强烈建议使用
语法：
第一个参数：events , 绑定事件的名称可以是由空格分隔的多个事件(标准事件或自定义事件）
第二个参数：selector，执行事件的后代元素（可选），如果没有后代元素，那么事件将由自己执行
第三个参数：data ， 传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
第四个参数：hander：事件处理函数
on注册简单事件：
$("div") . on("click" , funciton(){ } ) //表示给div绑定代理事件，并且有自己触发，不支持动态绑定
on注册委托事件：
$("div").on("click" , "span" , function(){ } ) //表示给div绑定代理事件，但必须是它的内部元素span才能触发这个事件，支持动态绑定
<24>事件解绑
$("div").off() ; //解除匹配元素的所有事件
$("div").off( "click") ; //解除匹配元素的所有 click事件
<25>触发事件：
$("div").click() ; //触发 click事件
$("div").trigger("click");
<26>delay的用法：
$("div").fadeIn(1000).delay(2000).fadeOut(1000);
<27>链式编程
通常情况下，只有设置操作才能把链式编程延续下去，因为获取操作的时候，会返回获取到的相应的值，无法返回jQuery对象
end( ) ; // 筛选选择器会改变jQuery 对象的DOM对象，想要恢复到上一次的状态，并且返回匹配元素之前的状态
$(this).text("wjx-s").prevAll( ) .text("wjx-s").end( ).nextAll( ).text("wjx-k");
<28>each方法
jQuery的隐式迭代会对所有的DOM对象设置相同的值,但是如果我们需要给每一个对象设置不同的值的时候,就需要自己进行迭代了
each方法 : 遍历jQuery对象集合 , 为每个匹配的元素执行一个函数
$("div").each(function( index ,element){ })
第一个参数 : 表示当前元素在所有匹配元素中的索引号
第二个参数 : 表示当前元素 (DOM对象)
案例 : 给每个 li 设置不同的透明度
each方法
$("li").each(function(index, element){ $(element).css("opacity" , (index+1)/10) ; })
for循环的方法
for(var i=0; i < $("li").length; i++) { $("li").eq(i).css("opacity" , (i+1)/10); }
<29>$冲突
jQuery使用$作为标识符, 但是如果与其他框架中的 $ 冲突时, jQuery可以释放 $ 的控制权
$.noConflict ( ) ; // jQuery释放控制权
var $$=$.noConflict( ) ; //释放 $ 的控制权, 并且把 $ 的能力给了 $$
入口函数 : $$(function(){ })
<30>jQuery插件
jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。
1，jQuery.color.js
animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<!--1. 引入jquery的js文件-->
<script src="jquery-1.12.4.js"></script>
<!--2. 引入插件的js文件-->
<script src="jquery.color.js"></script>
<script>
$(function () {
//3. 直接使用即可。
//说明jquery不支持颜色的渐变,颜色最好用16进制
$('div').animate({backgroundColor:"#ffc0cb"}, 3000, function () {
alert("呵呵");
});
});
</script>
</body>
</html>
</script>
使用插件的步骤：
1，引入jQuery文件
2，引入插件（如果有用到 css 的话，需要引入 css)
3，使用插件
2,jQuery.lazylode.js 懒加载插件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { height: 4000px; } </style> </head> <body> <div></div> <img class="lazy" data-original="02.gif" alt=""> <script src="jquery-1.12.4.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script> <script> $(function () { $("img.lazy").lazyload(); }); </script> </body> </html>
制作jQuery插件
原理：jQuery插件其实就是给jQuery对象增加一个新的方法，让jQuery对象拥有某一个功能
通过给 $.fn添加方法就能够扩展jQuery对象
<31> 原型的概念
1，给数组原型增加一个 sayHi 的方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> Array.prototype.sayHi=function () { console.log("hello"); }; var arr = new Array(); arr.sayHi(); </script> </body> </html>
2, jQuery 原型
给 jQuery原型增加一个 sayHi () 方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="jquery-1.12.4.js"></script> <script> $(function(){ // 1, jQuery.prototype.sayHi=function () { // console.log("hi"); // } // jQuery(document).sayHi(); // jQuery对象调用这个方法 // 2, $.prototype.sayHi=function () { // console.log("hi"); // } // $(document).sayHi(); $.fn.sayHi =function () { console.log("hi"); } $(document).sayHi(); }) </script> </body> </html>
<32>制作一个简易的 jQuery 插件 （改变背景颜色）
jQuery.bgColor.js 文件：
$.fn.bgColor = function (color) { this.css("backgroundColor" , color); // 原型对象的 this 指的就是 jQuery return this; // jQuery就可以链式编程 }
在HTML文件中使用这个插件：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 200px; height: 200px; background-color: pink; } </style> </head> <body>
<div></div> <p>1234</p> <script src="jquery-1.12.4.js"></script> <script src="jquery.bgColor.js"></script> <script> $(function () { $("p").bgColor("green"); $("div").bgColor("red").width(400); }); </script> </body> </html>
