一、 jQuery 基础
1.安装jQuery
<script src="./dist/jquery-1.12.4.min.js"></script><script src="./dist/jquery-2.2.4.min.js"></script>
2.ready 事件(等待DOM就绪)
-
用法(写多个 不会覆盖)
$(document).ready(function(){ }) //简写（function可写选择器 例："#box"） $(function(){ }) -
与onload的区别
-
onload 事件 等到页面的一切加载完毕，才能触发
-
ready事件等页面中所有的dom加载完毕，就能触发
<!-- 引入jquery --> <script src="jquery-3.2.1.min.js"></script> <script> $(document).ready(function(){ $(".box").css("width", "300px").css("height", "200px").css("background-color", "#ccc"); alert("ready");//后弹出 }); //ready 简写 $(function(){ $(".box").css("border", "10px solid green"); alert("ready"); }); window.onload = function(){ alert("onload");//先弹出 } </script>
-
3.jquery dom 和 原生js dom（不一样）
-
通过$() 获取的对象，是jquery dom
-
jquery dom 本质上是由 原生dom 组成的集合，通过取下标就可以获取原生dom
-
$()方法可以把 原生dom 变为 jquery dom
$(document)<script> /*对比*/ var $dom = $("#box"); var dom = document.querySelector("#box"); /*判断一下*/ if($dom===dom){ console.log(true); }else{ console.log(false); } dom.style.backgroundColor = "red"; //$dom.style.backgroundColor = "green";错误 $dom.css("background-color", "green"); //dom.css("background-color", "red");错误 // jquery dom 和 原生dom 可以相互转换 //把 jquery dom 变为 原生dom console.log($dom.length); $dom[0].style.border = "2px solid orange"; // 原生dom 转换为 jquery dom $(dom).css("background-color", "yellow"); </script>
4.jquery 中绑定事件
5.jquery连贯操作
二、jquery 选择器
1. 基本选择器
#ID- .className
- tagName
*通配符- selecter1,selecter2...
2.层级选择器
- selecter seclter
- selecter>selecter
- selecter+selecter 仅后面一个兄弟元素
- selecter~selecter 后面所有的兄弟元素
3. 过滤选择器
-
:first（先找：前面的集合，再过滤集合中的第一个） -
:last -
:eq(index)指定某一个（按照顺序找，并不会区分子元素还是孙子元素） -
:lt(index)小于索引值index的元素 -
:gt(index)大于索引值index的元素指定某一个 $("#firstList li:eq(3)").css("border", "3px solid red"); $("#firstList li:lt(5)").css("border", "3px solid red"); $("#firstList li:gt(6)").css("border", "3px solid red"); -
:odd （数数从0开始）奇数
- 不需要像JS（数数从1开始）一样nth-of-type(odd);
- 直接用 例：
li:odd
-
:even 偶数
-
:not(selecter)排除 -
:is(selector)判断是否（true/false） -
:lang(zh) 任何元素都有该属性(类似CSS3)
- li:lang(en)匹配:
<li lang="en-us/en">小丽丽</li>
- li:lang(en)匹配:
-
:header 所有的标题标签(hn)
-
:root 根元素（最外面HTML元素）
-
:target 锚点
$(document).ready(function(){ /*由于时间问题 只写下面的一行没有效果*/ $("ul:target").css("border","10px solid green"); }) -
:animated 选择正在执行动画的元素（不是执行CSS3动画的元素）
-
:focus选中获取焦点的元素$("input").focus(function(){ /*只写下面的一行没有效果*/ $("input:focus").css("border", "1px solid red"); })
4.内容选择器
-
:contains(text) （先找：前面的集合，再过滤）
$("li:contains('翠翠')").css("border", "1px solid red"); /*选择内容包含翠翠的li*/ -
:empty
-
:parent
$("li:parent").css("border", "5px solid red"); /*选择的不是li的父元素，选择有子元素的或者有文本内容的li*/ -
:has(seelcter)（内容选择器）
$("li:has(.item)").css("border", "5px solid red"); /*选择包含子元素.item的li*/
5. 可见性选择器
- :hidden
- :visible 选择所有的元素
6.属性选择器
- [attrName]
- [attrName=value]
- [attrName!=value]
- [attrName^=value]
- [attrName$=value]
- [attrName*=value]
- [attrSel1][attrSel2][attrSelN]
7. 子元素选择器
- :first-child 所有兄弟里的第一个
- :last-child
- :nth-child(index)
- :nth-last-child(index)
- :only-child
- :first-of-type
- :last-of-type 从后往前数
- :nth-of-type(index)
- :nth-last-of-type(index)
- :only-of-type
8.表单选择器
:input所有的表单控件(inputselect extarea)- 不是选择所有的input元素，还包括其他表单控件
- :text 选择type等于text的
- :radio 选择type等于radio的
- :checkbox
- :password
- :image
- :submit 选择type等于submit、button 的
- :reset
- :button 选择type等于button的
- :file
9. 表单对象选择器
- :disabled 不能用的控件
- :enabled 所有能用的表单控件
- :checked
- :selected
三、 筛选（JQ DOM的一些方法）
返回值都是JQ DOM 一个方法调用完了之后可以接着调用另一个
1.过滤（在：满足条件下，再查找）
-
.eq(index|-index)
-
.first() 取第一个
$("li").first().css("border", "5px solid red"); -
.last()
-
not(expr|ele|fn)
$("li").not(".item").css("border", "5px solid red"); -
filter(expr|obj|ele|fn) 选择满足条件的
$("li").filter(".item").css("border", "5px solid red"); -
is(expr|obj|ele|fn) true/false
-
has(selecter)
$("li").has(".item").css("border", "5px solid red"); -
slice(start,[end]) 从集合中截取一部分
$("li").slice(2,6).css("border", "5px solid red"); /*选择第2~6的元素（不包含6）*/ -
is(selecter)返回值是 true/false$("li").click(function(){ //alert($(this).is('.item')) //alert($(this).is(':first-child')) alert($(this).hasClass('item')) }) -
hasClass(className)返回值是/true/false -
map(fn)map(callback)所有的遍历了一遍var arr = $("li").map(function(index, item){ return item.innerHTML; }); console.log(arr);
2. 查找(找亲戚)
-
find(selcter) 后代元素find(e|o|e)
$("#myList").find("li").css("border", "1px solid red"); -
children(selcter) 子元素children([expr])参数可以为空
$("#myList").children("li").css("border", "1px solid red"); /*选择其中一个 用eq*/ $("#myList").children("li").eq(1).css("border", "1px solid red"); -
parent() 父元素parent([selector])
$(".item").parent().css("border", "5px solid red"); -
parents(selcter) 所有的祖先元素parents([expr])可以传参数过滤一下
$(".item").parents("ul").css("border", "5px solid green"); -
parentsUntil(selecter) 所有祖先元素，直到传的参数那里parentsUntil([e|e][,f])
$(".item").parentsUntil("body").css("border", "5px solid blue"); /*向上找所有的祖先元素，直到body*/ -
offsetParent()
-
closest(selecter) 从自身和祖先元素中向上 找到第一个满足条件closest(e|o|e)1.7*
$(".item").closest("li").css("border", "5px solid red"); /*找最近的*/ -
next() 紧跟在后面的一个兄弟元素next([expr])
-
nextAll() 跟在后面的所有兄弟元素nextAll([expr])
$(".item").nextAll().css("border", "5px solid red"); -
nextUntil() 跟在后面的所有兄弟元素，直到传的条件那里 nextUntil([e|e][,f])
$(".item").nextUntil("p").css("border", "5px solid red"); -
prev() 紧跟在前面的一个兄弟元素prev([expr])
-
prevAll() 跟在前面的所有兄弟元素prevall([expr])
-
prevUntil() 跟在前面的所有兄弟元素，直到传的条件那里prevUntil([e|e][,f])
-
siblings() 所有（前面和后面）的兄弟元素（不包含自己） siblings([expr])
$(".item").siblings("li").css("border", "1px solid red");
3.串联
- add(expr|ele|html|obj[,con]) 1.9*
- 把选中的元素加入到当前集合
- 把与表达式匹配的元素添加到JQ对象中
$("li").add("p").css("background-color", "orange");
- andSelf() 被abbBack()代替 1.8-
- 添加堆栈中元素集合到当前集合，一个选择性的过滤选择器（紧挨着的一个）
$("ul").find("li").addBack().css("border", "5px solid red");ul也会选中
- addBack() 1.9+
- 把最近的堆栈中元素加入当前集合
- contents() 返回所有子节点的集合(不是JQ DOM)
- end()
- 返回最近的一个破坏性操作之前的元素。即，将匹配的元素列表变为前一次的状态
$("ul").find("li").end().css("border", "5px solid red");只选中ul
四、属性
1. 属性操作的方法
-
prop(attr [,val]) 只能操作内置(自带的)属性
//获取 某个属性的值(一个参数) console.log($("img").prop('src'));//处理后的地址http://... console.log($("img").prop('width')); //修改、添加某个属性值（两个参数） $("img").prop("title", "哈哈哈"); $("img").prop("alt", "哈哈哈"); -
attr(attr [,va]) 操作自定义属性（也可以操作内置属性、存在的）
//获取自定义属性的值(一个参数) console.log($("img").attr("loadpic")); console.log($("img").attr("src"));//写的什么地址就是什么地址 //修改 不存在的 会自动添加（两个参数） $("img").attr("dddd", "dds"); -
removeAttr(attr) 移除属性
$("img").removeAttr("dddd");/*任何属性都可移除*/ $("img").removeProp("alt");/*移除由Prop设置的 有错误（建议不用）*/
2.class操作
-
addClass() 添加一个类
-
removeClass() 移除一个类
-
toggleClass() 切换
-
hasClass() 判断一个类
// class 操作（不影响原先就有的类） $("img").click(function(){ /*if ($(this).hasClass("current")) { $(this).removeClass("current"); } else { $(this).addClass("current"); }*/ $(this).toggleClass("current"); });
3.HTML代码/文本/值（方法）
-
html([val])
-
text([val])
-
val([val])
//获取 div内的 html内容(包含其中的标签)（不写参数） console.log($(".content").html()); //修改html内容（写参数） //$(".content").html("<p>啊啊啊</p>") //获取 文本内容（仅仅包含文本内容）（不写参数） console.log($(".content").text()); //设置文本内容 原样输出（写参数） //$(".content").text("<h1>锄禾日当午</h1>") //获取表单内容 $("#btn1").click(function(){ //alert($("#name")[0].value()) $("#name").val("请输入用户名"); })
五、CSS
1.css方法
-
css() 返回值是String
/*获取(元素中的第一个)*/ console.log($(".my-list").css('width')); /*设置*/ $("p").css("border","1px solid red").css("padding", "20px"); /*同时设置 对象{，,}*/ $(".my-list li").css({ "border":"2px solid green", "padding":"20px", "margin-bottom":"10px" }) -
逐渐增加div的大小
<script> $("div").click(function(){ $(this).css({ function(index,value){ return parseFloat(value)*1.2; }, height:function(index,value){ return parseFloat(value)*1.2; } }); });
2.位置
-
offset() 当前视口的相对偏移（可以设置）
- 返回的对象包含两个整型属性：top和left
- 单独获取.offset().top/left
- 此方法只对可见元素有效
-
postion() 相对父元素的偏移（只读的，不能设置）
/*获取偏移*/ $("#btn1").click(function(){ console.log($(".my-list li").eq(2).offset()) console.log($(".my-list li").eq(1).position()) }); /*设置偏移 参数（对象）*/ $("#btn2").click(function(){ $(".my-list li").eq(2).offset({ left:100, top:89 }); }); -
scrollLeft([val])
/*相对滚动条左边的偏移*/ $("#btn3").click(function(){ console.log($(".box").scrollLeft()); }); /*设置点击 内容向左滚动*/ $("#btn4").click(function(){ $(".box").scrollLeft($(".box").scrollLeft()+100) }) -
scrollTop([val])
- 匹配元素相对滚动条顶部的偏移
- 此方法对可见和隐藏元素均有效
3.尺寸
-
width() / height()
/** *以10像素的幅度增加p元素的高度 *参数描述function(index,height) */ $("button").click(function(){ $("p").height(function(n,c){ return c+10; }); }); -
innerWidth() / innerHeight()
- 获取内部区域的宽度和高度（包括补白、不包括边框）
- 此方法对可见和隐藏元素均有效
-
outerWidth() / outerHeight()参数设置为true时，计算边距在内
console.log($(".box").outerWidth(), $(".box").outerHeight()); /*设置尺寸*/ $("#btn5").click(function(){ //$(".box").width(500); $(".box").outerWidth(500); })
六、文档处理(添加、删除元素)DOM操作
1.内部插入
-
append(content|fn) （父元素来调用）添加到父元素 后面插入
//添加 $("#btn01").click(function(){ //创建一个元素$("<img>") //var newImg = $("<img>").prop("src", "../../dist/images/002.jpg"); //$(".box").append(newImg); $(".box").append("<img src='../../dist/images/002.jpg'>"); }) -
appendTo(content) （子元素来调用）添加到父元素 后面插入
$("#btn02").click(function(){ $("<img src='../../dist/images/003.jpg'>").appendTo(".box"); }); -
prepend(content|fn) （父元素来调用）添加到父元素 前面插入
$("#btn03").click(function(){ $(".box").prepend("<img src='../../dist/images/002.jpg'>"); }); -
prependTo(content) （子元素来调用）添加到父元素 前面插入
2.外部插入（插入到外面去了，成为兄弟元素）
-
after(content|fn) 后插
$("#btn04").click(function(){ $(".box").after("<img src='../../dist/images/002.jpg'>"); }); -
insertAfter(content) 后插（新元素调用）
$("#btn05").click(function(){ $("<img src='../../dist/images/002.jpg'>").insertAfter(".box"); }); -
before(content|fn)
$("#btn06").click(function(){ $(".box").before("<img src='../../dist/images/002.jpg'>"); }); -
insertBefore(content)
3.包裹（元素的外面再包一层元素）
-
wrap(html|ele|fn) 每个元素都包裹一个新的元素
-
wrapAll(html|ele) 所有元素包裹一个新的元素
-
wrapInner(html|ele|fn) 在里面包裹一个
- img是单标签，调用wrapInner没意义
-
unwrap() 不需要参数（删除添加的wrap，也能删除包裹在外面的父元素）
$("#btn07").click(function(){ $(".box img").wrap("<li>"); }) $("#btn08").click(function(){ $(".box img").wrapAll("<li>"); }); $("#btn09").click(function(){ $(".box").wrapInner("<li>"); }) $("#btn10").click(function(){ $(".box img").unwrap(); });
4.替换
-
replaceWith(content|fn) 旧的元素调用，参数是新的
-
replaceAll(selector) 新的元素调用，参数是旧的
$("#btn11").click(function(){ $(".box img.current").replaceWith("<img src='../../dist/images/003.jpg'>") }); $("#btn12").click(function(){ $("<img src='../../dist/images/002.jpg'>").replaceAll(".box img.current"); })
5.删除元素
-
empty() 清空（子元素），没有参数
-
remove([expr]) 删除（自己），想删谁就谁调用
-
detach([expr]) 删除（自己），
$("#btn13").click(function(){ $(".box").empty(); }); $("#btn14").click(function(){ $("img.current").remove(); })
6.克隆
-
clone([Even[,deepEven]])不光克隆自己，子元素也克隆
$(".box").clone().appendTo(document.body)
七、事件
1.页面载入
- ready(fn)
2.事件绑定方式（事件处理）
-
事件(fn)
$(".box").dblclick(function(){ console.log("啊，我被双击了"); }); -
bind("事件名", fn) 指定对象 同时绑定多个事件bind(type,[data],fn)
$(".box").bind("click", function(){ console.log("啊，我被单机了"); }); -
on("事件", fn) on(eve,[sel],[data],fn) 1.7+
$(".box").on("mouseover", function(){ $(this).css("background", "red"); }); -
off(eve,[sel],[fn]) 1.7+
-
one("事件", fn) 只能绑定一次
$(".box").one("mouseout", function(){ /*可以设置为空 恢复原来的样式*/ $(this).css("background", ""); }); -
同时绑定多个事件（bind）
$(".content").bind({ mouseover:function(){ $(this).css("background", "green"); }, mouseout:function(){ $(this).css("background", "red"); }, mousemove:function(){ console.log("OK"); } })
3.事件解除绑定
-
unbind(t,[d|f])
-
off()
$("#btn").click(function(){ /*解除多个*/ $(".box").unbind("click").unbind("mouseout"); /*解除所有绑定（不写参数）*/ $(".box").unbind(); $(".box").off(); })
4.事件委派(新添加的元素也有效果)
-
live(type,[data],fn) 1.7-（取消了不用）
-
die(type,[fn]) 1.7-（取消了不用）
-
on(事件, 选择器, fn) 选择器是调用on的集合的子元素
/*解决，新添加的元素也有效果*/ $(".my-list").on("mouseover", "li", function(){ $(this).css("background", "orange"); }).on("mouseout", "li", function(){ $(this).css("background", ""); }) -
delegate(选择器， 事件， fn) 跟上面的（on）顺序不一样,用法类似
$(".my-list").delegate("li", "click", function(){ $(this).css("border-color", "red"); }); -
undelegate(选择器) 事件绑定解除undelegate([s,[t],fn])
$(".my-list").undelegate("li");
5.自动触发事件
-
trigger(type,[data])
$(".my-list li").trigger("mouseover"); -
triggerHandler(type, [data])
$(".my-list li").triggerHandler("dblclick"); -
两者的区别：
- triggerHandler(type, [data])
- 只触发Jquery对象集合中第一个元素的事件处理函数
- 委派上的事件不可触发
- 可以触发元素的自带动作(超链接a)
- trigger(type,[data])
- 集合中全部都触发
- 委派上的事件也可触发
- 可以触发元素的自带动作(超链接a)
- triggerHandler(type, [data])
6.jQuery 事件(切换)
-
hover([over,]out) 把mouseover和mouseout合在一起了
-
toggle([spe],[eas],[fn]) 1.9-
$(function(){ $(".my-list li").hover(function(){ $(this).toggleClass("current"); }); })
7.事件
- blur([[data],fn])
- change([[data],fn])
- click([[data],fn])
- dblclick([[data],fn])
- error([[data],fn])
- focus([[data],fn])
focusin([data],fn) 获取焦点 绑定给input父元素的focusout([data],fn) 失去焦点 绑定给input父元素的- keydown([[data],fn])
- keypress([[data],fn])
- keyup([[data],fn])
- mousedown([[data],fn])
mouseenter([[data],fn])mouseleave([[data],fn])- mousemove([[data],fn])
- mouseout([[data],fn])
- mouseover([[data],fn])
- mouseup([[data],fn])
- resize([[data],fn])
- scroll([[data],fn])
- select([[data],fn])
- submit([[data],fn])
- unload([[data],fn])
- focusin
- focusout
八、事件对象
- eve.currentTarget
- eve.data
- eve.delegateTarget1.7+
- eve.isDefaultPrevented()
- eve.isImmediatePropag...()
- eve.isPropagationStopped()
- eve.namespace
- eve.pageX
- eve.pageY
- eve.preventDefault()
- eve.relatedTarget
- eve.result
- eve.stopImmediatePro...()
- eve.stopPropagation()
- eve.target
- eve.timeStamp
- eve.type
- eve.which
九、效果
1.基本
- show()
- hide()
- toggle()
2.滑动
- slideDown()
- slideUp()
- slideToggle()
3.淡入淡出
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
4.自定义
- animate()
- stop()
- delay()
- finish()
5.设置
-
jQuery.fx.off
- 设置为true 关闭所有动画
-
jQuery.fx.interval
- 设置动画的显示帧速。默认值是 13 毫秒。该属性常用于修改动画运行的每秒帧数
十、工具
1.浏览器特性检测
- $.support
2.数组和对象操作
- $.each(object,[callback]) 遍历数组 对象
- $.extend([d],tgt,obj1,[objN]) 合并对象 合并到第一个参数
- $.grep(array,fn,[invert]) 过滤数组
- $.makeArray(obj) 把类数组对象变为数组
- $.map(arr|obj,callback) 操作数组的每一单元
- $.inArray(val,arr,[from]) 判断值是否在数组中
- $.merge(first,second) 合并数组
- $.unique(array) 去重
- $.parseJSON(json) 解析json
- $.parseXML(data) 解析xml
3.函数操作
- $.noop 空方法
- $.proxy(function,context) 改变方法的作用域
4.测试操作
- $.contains(c,c) 判断一个元素是否是另一个元素的后代吗元素
- $.type(obj) 判断类型
- $.isarray(obj) 是否为数组
- $.isFunction(obj) 是否是function
- $.isEmptyObject(obj) 是否为空对象
- $.isPlainObject(obj) 是否为纯粹的对象
- $.isWindow(obj) 是否是window对象
- $.isNumeric(value)1.7+ 是否是number
5.字符串操作
- $.trim(str) 去除左右两边的空格
6.序列化
- $.param(obj,[traditional]) 把对象或数组 转为 特殊格式的字符串
7.其他
- $.error(message) 抛出错误
- $.fn.jquery 返回jqueyr版本
十一、核心
1.核心函数
- jQuery([sel,[context]])
- jQuery(html,[ownerDoc])1.8*
- jQuery(callback)
2.jquery对象访问
- each(callback) 遍历jquery dom
- size() 返回dom集合中的个数 同length
- length 同上
- selector 返回选择器
- context 返回原生js dom
- get([index]) 获取dom集合中一个
- index([selector|element]) 索引值
- toArray() 转为纯数组
3.数据缓存
- data([key],[value])
- removeData([name|list])1.7*
4.队列
十二、插件
1.自定义插件
- jQuery.extend() 扩展jQuery对象本身。
- jQuery.fn.extend() 扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。