Jquery -- 笔记

Jquery

第一章

1.0、入口函数

//1.等着页面加载完毕再去执行js 代码
	$(document).ready(function () {
 	  	$('div').hide()
	})
//2.等着页面加载完毕再去执行js 代码
	$(function (){
	    $('div').hide()
	})

1.1、jQuery的顶级对象 $

1.2、DOM与jQuery对象

转换

第二章

第二章方法大全

方法	格式	说明
click	鼠标点击左键触发
load	完成加载时执行
focus	获得鼠标焦点触发
blur	失去鼠标焦点触发
mouseover	鼠标经过触发-会冒泡
mouseenter	鼠标经过触发-不会冒泡/捕获
mouseout	鼠标离开触发
ready	文档加载后激活函数
mousemove	鼠标移动触发
mouseup	鼠标弹起触发
mousedown	鼠标按下触发
keydown	表示键盘按下时执行
change	内容改变时执行
scrool()	鼠标滚动事件	$(window).scroll(fun…)
常用方法
css	$(“选择器”).css(“属性名”,“属性值”)	设置选择到元素 的属性
this	$(this)	this 当前元素 不加双引号
show()	$(this).children(‘ul’).show()	显示元素 与display:block相仿
hide()	$(this).children(‘ul’).hide()	隐藏元素 与display:none相仿
index()	$(this).index()	得到当前元素索引号
substr()	$(this).substr(1)	截取从1开始的所有元素
jQuery选择器
名称	用法	描述
	选择器
ID选择器	$("#id")	获取指定ID的元素
全选择器	$(’*’)	匹配所有元素
类选择器	$(".class")	获取同一类的class的元素
标签选择器	$(“div”)	获取同一类标签的所有元素
并集选择器	$(“div,p,li”)	选取多个元素
交集选择器	$(“li.current”)	交集元素
	层次选择器
子代选择器	$(“ul>li”)	使用>号，获取亲儿子层级的元素; 并不会获取孙子层级的元素
后代选择器	$(“ul li”)	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等
	筛选选择器
语法	用法	描述
:first	$(‘li:first’)	获取第一个 li 元素
:last	$(‘li:last’)	获取最后一个 li 元素
:eq(index)	$(“li:eq(下标)”)	获取到的 li 元素中，选择索引号为 下标 的元素，索引号index从0开始
:odd	$(“li:odd”)	获取到的 li 元素中，选择索引号为奇数的元素 从0开始
:even	$(“li:even”)	获取到的 li 元素中，选择索引号为偶数的元素 从0开始
	jQ筛选方法重点
语法	用法	描述
parent()	$(“li”).parent()	查找父级
children(selector)	$(“ul”).children(“li”)	相对于 $(“ul > li”) ，最近一级（亲儿子）
find(selector)	$(“ul”).find(“li”)	相对于 $(“ul li”)，后代选择器
siblings(selector)	$(".first").siblings(“li”)	查找==兄弟节点，==不包括自己本身
nextAll([expr])	$(".first").nextAll()	查找当前元素之后所有的同辈元素
prevAll([expr])	$(".last").prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$(".div").hasClass(“protected”)	检查当前元素是否含有某个特定的类，如果有，则返回true
eq(index)	$(".li").eq(2)	相对于$(“li:eq(2)”) ， index从0开始
	jQ显示隐藏重点
语法	用法	描述
show()	show([speed,[easing],[fn]])	显示元素
hide()	hide([speed,[easing],[fn]])	隐藏元素
toggle()	toggle([speed,[easing],[fn]])	显/隐来回切
参数
speed:	三种预定速度之一的字符串(“slow”,“normal”, “fast”) 或动画时长的毫秒数	速度预定
easing:	用来指定切换效果，默认是“swing”，可用参数： "linear"(匀速的)	切换效果
fn:	回调函数，在动画完成时执行的函数，每个元素执行一次	回调函数

jQuery样式操作
方法	格式	说明
addClass()	$(this).addClass("类名")	添加类，不影响原先类
removeClass()	$(this).removeClass("类名")	删除类
toggleClass()	$(this).toggleClass("类名")	切换类（点击添加）
jQuery效果
方法	格式	说明
show()	show([speed,[easing],[fn]])	显示元素
hide()	hide([speed,[easing],[fn]])	隐藏元素
toggle()	toggle([speed,[easing],[fn]])	显/隐 来回切换
参数
speed:	三种预定速度之一的字符串(“slow”,“normal”, “fast”) 或动画时长的毫秒数	速度预定
easing:	用来指定切换效果，默认是“swing”，可用参数： "linear"(匀速的)	切换效果
fn:	回调函数，在动画完成时执行的函数，每个元素执行一次	回调函数
	滑动切换
slideDown()	slideDown([speed,[easing],[fn]])	下滑动
slideUp()	slideUp([speed,[easing],[fn]])	上滑动
slideToggle()	slideToggle([speed,[easing],[fn]])	上/下 来回切换
	事件切换
hover()	hover([over,]out)	两个事件之间的切换
参数	$(“this”).hover(function (){} , function (){})
over:	鼠标移动元素上要触发的函数 （相当于 mouseenter）	第一个函数，鼠标经过
out:	鼠标移出元素要触发的函数 （相当于 mouseleave）	第二个函数鼠标离开
	如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
stop()	$(this).children(“ul”).stop().slideToggle(100)	停止动画执行排队
	淡入淡出效果
fadeIn()	fadeIn([speed,[easing],[fn]])	淡入
fadeOut()	fadeOut([speed,[easing],[fn]])	淡出
fadeToggle()	fadeToggle([speed,[easing],[fn]])	淡入/出切换
fadeTo()	fadeTo([speed],opacity,[easing],[fn]])	修改渐进透明度
	自定义动画
animate()	animate(params,[speed],[easing],[fn])
参数
params:	想要更改的样式属性，以对象形式传递，必须写。属性名可以不带引号，如果是复合属性则需要采用驼峰命名法 borderLeft 其余参数都可以省略	目标样式
speed：	三种预定速度之一的字符串(“slow”,“normal”, “fast”) 或动画时长的毫秒数	速度预定
easing:	用来指定切换效果，默认是“swing”，可用参数： "linear"(匀速的)	切换效果
fn	回调函数，在动画完成时执行的函数，每个元素执行一次	回调函数
jQuery属性操作
方法	格式	说明
prop(“属性名”)	element.prop(“属性名”)	获取属性值
prop(“属性”,“属性值”)	element.prop(“属性”,“属性值”)	设置属性值
attr(“属性名”)	element.attr(“属性名”)	获取自定义元素
attr(“属性”,“属性值”)	element.attr(“属性名”,“属性值”)	设置自定义元素
data(“属性名”)	element.data(“属性名”)	获取放在元素内存里面的属性名
data(“属性名”,“属性值”)	element.data(“属性名”,“属性值”)	给这个元素设置自定义属性，设置在缓存中
jQuery文本操作
text()	element.text("")	获取文本值
text(“属性值”)	element.text(“属性值”)	设置文本值
		返回纯文本，去除标签内容
html()	element.html()	获取被选元素的内容
html(“内容”)	element.html(“内容”)	设置被选元素的内容
		相同于 innerHTML
val()	element.val()	获取当前元素的value值
val(“值”)	element.val(“值”)	设置当前元素的value值
		仅限value值
	jQuery尺寸、位置操作
方法	格式	说明
offset()	element.offset().top/left	返回被选元素相对于文档的偏移坐标，跟父级没有关系
offset({})	element.offset({ top: left:})	设置被选元素相对于文档的偏移坐标
position()	element.position().top/left	返回距离父元素的偏移位置，以带有定位的父盒子为准
position({})	element.position({ top: left:})	设置距离父元素的偏移位置，以带有定位的父盒子为准
scrollTop()	$(window).scrollTop()	获取元素被卷去的头部的长度
scrollTop(数值)	$(window).scrollTop(200)	设置取元素被卷去的头部的长度
scrollLeft()		获取元素被卷去的左侧的长度
scrollLeft({})		设置取元素被卷去的左侧的长度
	jQuery事件
方法	格式	说明
on()	element.on(events,[selector],fn)	绑定多个事件
参数
events:	一个或多个用空格分隔的事件类型	需要绑定的事件
selector:	元素的子元素选择器
fn：	回调函数 即绑定在元素身上的监听函数	回调函数
	其实还是委托的原理;它绑定的是ol 父亲身上,所以你后来动态添加的肯定是有绑定事件的,因为你父亲是肯定存在的
off（）	$(div).off()	解绑所有事件
	$(div).off(“事件”)	解绑指定事件
自动触发事件
类似于回调函数	$(div).事件()	自动调用上面绑定的指定事件
trigger()	$(div).trigger(“事件”)	自动调用，上面的是简写
阻止默认行为
preventDefault()	event.preventDefault()	阻止默认行为
stopPropagation()	event.stopPropagation()	阻止冒泡
	$(div).on(“click”,function(event){})	event 对象
对象拷贝
extend()	$.extend([deep],target,object1,[objectn])	复制对象，会覆盖原来的对象
参数
deep	如果设为true为深拷贝，默认为false 浅拷贝	尺度设置
target	要拷贝的目标对象	目标对象
object1:	待拷贝到第一个对象的对象	拷贝到的对象
添加节点
append	$(this).append(li)	从后面依次添加Li元素
prepend	$(this).prepend(li)	每次添加元素下标都是0

云

方法	格式	说明
遍历
.next()	$(‘li’).next().css(‘background-color’, ‘red’);	遍历所有li，并 循环修改背景颜色
过滤器
:gt(index)	选取索引大于index的元素（index从0开始）	$(" li:gt(1)" )选取索引大于1的 元素（注：大于1，不包括1
:lt(index)	选取索引小于index的元素（index从0开始）	$(“li:lt(1)” )选取索引小于1的 元素（注：小于1，不包括1）
:header	选取所有标题元素，如h1~h6	$(":header" )选取网页中所有标题元素
通过元素显示状态来选取元素
:visible	选取所有可见的元素	$(":visible" )选取所有可见的元素
:hidden	选取所有隐藏的元素	$(":hidden" ) 选取所有隐藏的元素

jQuery选择器

$( “选择器” ) //里面选择器直接写CSS选择器即可，但是要加引号

名称	用法	描述
选择器
ID选择器	$("#id")	获取指定ID的元素
全选择器	$(’*’)	匹配所有元素
类选择器	$(".class")	获取同一类的class的元素
标签选择器	$(“div”)	获取同一类标签的所有元素
并集选择器	$(“div,p,li”)	选取多个元素
交集选择器	$(“li.current”)	交集元素
层次选择器
子代选择器	$(“ul>li”)	使用>号，获取亲儿子层级的元素; 并不会获取孙子层级的元素
后代选择器	$(“ul li”)	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等
筛选选择器
语法	用法	描述
:first	$(‘li:first’)	获取第一个 li 元素
:last	$(‘li:last’)	获取最后一个 li 元素
:eq(index)	$(“li:eq(下标)”)	获取到的 li 元素中，选择索引号为 下标 的元素，索引号index从0开始
:odd	$(“li:odd”)	获取到的 li 元素中，选择索引号为奇数的元素 从0开始
:even	$(“li:even”)	获取到的 li 元素中，选择索引号为偶数的元素 从0开始
jQ筛选方法	重点
语法	用法	描述
parent()	$(“li”).parent()	查找父级
children(selector)	$(“ul”).children(“li”)	相对于 $(“ul > li”) ，最近一级（亲儿子）
find(selector)	$(“ul”).find(“li”)	相对于 $(“ul li”)，后代选择器
siblings(selector)	$(".first").siblings(“li”)	查找==兄弟节点，==不包括自己本身
nextAll([expr])	$(".first").nextAll()	查找当前元素之后所有的同辈元素
prevAll([expr])	$(".last").prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$(".div").hasClass(“protected”)	检查当前元素是否含有某个特定的类，如果有，则返回true
eq(index)	$(".li").eq(2)	相对于$(“li:eq(2)”) ， index从0开始
jQ显示隐藏	重点
语法	用法	描述
show()	show([speed,[easing],[fn]])	显示元素
hide()	hide([speed,[easing],[fn]])	隐藏元素
toggle()	toggle([speed,[easing],[fn]])	显/隐来回切
参数
speed:	三种预定速度之一的字符串(“slow”,“normal”, “fast”) 或动画时长的毫秒数	速度预定
easing:	用来指定切换效果，默认是“swing”，可用参数： "linear"(匀速的)	切换效果
fn:	回调函数，在动画完成时执行的函数，每个元素执行一次	回调函数

排他思想

横向tab栏切换

jQuery样式操作

方法集

方法	格式	说明
addClass()	$(this).addClass("类名")	添加类，不影响原先类
removeClass()	$(this).removeClass("类名")	删除类
toggleClass()	$(this).toggleClass("类名")	切换类（点击添加）

添加类

jQuery效果

方法集

方法	格式	说明
show()	show([speed,[easing],[fn]])	显示元素
hide()	hide([speed,[easing],[fn]])	隐藏元素
toggle()	toggle([speed,[easing],[fn]])	显/隐 来回切换
参数
speed:	三种预定速度之一的字符串(“slow”,“normal”, “fast”) 或动画时长的毫秒数	速度预定
easing:	用来指定切换效果，默认是“swing”，可用参数： "linear"(匀速的)	切换效果
fn:	回调函数，在动画完成时执行的函数，每个元素执行一次	回调函数
滑动切换
slideDown()	slideDown([speed,[easing],[fn]])	下滑动
slideUp()	slideUp([speed,[easing],[fn]])	上滑动
slideToggle()	slideToggle([speed,[easing],[fn]])	上/下 来回切换
事件切换
hover()	hover([over,]out)	两个事件之间的切换
参数	$(“this”).hover(function (){} , function (){})
over:	鼠标移动元素上要触发的函数 （相当于 mouseenter）	第一个函数，鼠标经过
out:	鼠标移出元素要触发的函数 （相当于 mouseleave）	第二个函数鼠标离开
	如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
stop()	$(this).children(“ul”).stop().slideToggle(100)	停止动画执行排队
淡入淡出效果
fadeIn()	fadeIn([speed,[easing],[fn]])	淡入
fadeOut()	fadeOut([speed,[easing],[fn]])	淡出
fadeToggle()	fadeToggle([speed,[easing],[fn]])	淡入/出切换
fadeTo()	fadeTo([speed],opacity,[easing],[fn]])	修改渐进透明度
自定义动画
animate()	animate(params,[speed],[easing],[fn])
参数
params:	想要更改的样式属性，以对象形式传递，必须写。属性名可以不带引号，如果是复合属性则需要采用驼峰命名法 borderLeft 其余参数都可以省略	目标样式
speed：	三种预定速度之一的字符串(“slow”,“normal”, “fast”) 或动画时长的毫秒数	速度预定
easing:	用来指定切换效果，默认是“swing”，可用参数： "linear"(匀速的)	切换效果
fn	回调函数，在动画完成时执行的函数，每个元素执行一次	回调函数

显示隐藏元素

上下滑动切换

hove滑动下拉菜单

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t0oYXBGT-1632832064625)(E:\MarkdownPad/)]

动画队列

邮票人

animate

手风琴

jQuery属性操作

方法集

方法	格式	说明
prop(“属性名”)	element.prop(“属性名”)	获取属性值
prop(“属性”,“属性值”)	element.prop(“属性”,“属性值”)	设置属性值
attr(“属性名”)	element.attr(“属性名”)	获取自定义元素
attr(“属性”,“属性值”)	element.attr(“属性名”,“属性值”)	设置自定义元素
data(“属性名”)	element.data(“属性名”)	获取放在元素内存里面的属性名
data(“属性名”,“属性值”)	element.data(“属性名”,“属性值”)	给这个元素设置自定义属性，设置在缓存中
jQuery文本操作
text()	element.text("")	获取文本值
text(“属性值”)	element.text(“属性值”)	设置文本值
		返回纯文本，去除标签内容
html()	element.html()	获取被选元素的内容
html(“内容”)	element.html(“内容”)	设置被选元素的内容
		相同于 innerHTML
val()	element.val()	获取当前元素的value值
val(“值”)	element.val(“值”)	设置当前元素的value值
		仅限value值

设置或获取元素属性值（三种）

遍历对象

jQuery尺寸、位置操作

方法集

方法	格式	说明
offset()	element.offset().top/left	返回被选元素相对于文档的偏移坐标，跟父级没有关系
offset({})	element.offset({ top: left:})	设置被选元素相对于文档的偏移坐标
position()	element.position().top/left	返回距离父元素的偏移位置，以带有定位的父盒子为准
position({})	element.position({ top: left:})	设置距离父元素的偏移位置，以带有定位的父盒子为准
scrollTop()	$(window).scrollTop()	获取元素被卷去的头部的长度
scrollTop(数值)	$(window).scrollTop(200)	设置取元素被卷去的头部的长度
scrollLeft()		获取元素被卷去的左侧的长度
scrollLeft({})		设置取元素被卷去的左侧的长度

offset()

scrollTop()

带有动画的scrollTop()

jQuery事件

方法集

方法	格式	说明
on()	element.on(events,[selector],fn)	绑定多个事件
参数
events:	一个或多个用空格分隔的事件类型	需要绑定的事件
selector:	元素的子元素选择器
fn：	回调函数 即绑定在元素身上的监听函数	回调函数
	其实还是委托的原理;它绑定的是ol 父亲身上,所以你后来动态添加的肯定是有绑定事件的,因为你父亲是肯定存在的
off（）	$(div).off()	解绑所有事件
	$(div).off(“事件”)	解绑指定事件
自动触发事件
类似于回调函数	$(div).事件()	自动调用上面绑定的指定事件
trigger()	$(div).trigger(“事件”)	自动调用，上面的是简写
阻止默认行为
preventDefault()	event.preventDefault()	阻止默认行为
stopPropagation()	event.stopPropagation()	阻止冒泡
	$(div).on(“click”,function(event){})	event 对象
对象拷贝
extend()	$.extend([deep],target,object1,[objectn])	复制对象，会覆盖原来的对象
参数
deep	如果设为true为深拷贝，默认为false 浅拷贝	尺度设置
target	要拷贝的目标对象	目标对象
object1:	待拷贝到第一个对象的对象	拷贝到的对象
添加节点
append	$(this).append(li)	从后面依次添加Li元素
prepend	$(this).prepend(li)	每次添加元素下标都是0

动态 绑定多个事件

事件对象

对象拷贝

拷贝会覆盖原来的数据

• 浅拷贝把原来对象里面的复杂数据类型地址铂贝给目标对象
• 深拷贝把里面的数据完全复制一份给目标对象如果里面有不冲突的属性,会合并到一起

好东西

多库共存

jQuery使用 （$） 作为标示符，随着jQuery的流行,其他js库也会用这 作为标识符，这样一起使用会引起冲突。

解决方案

1. .把里面的$符号统一改为jQuery。比如jQuery(“div”")
2. jQuery变量规定新的名称:.
3. $$.noConflict() var xx = $.noConflict0;
   1. var diaoyongming = $.noConflict()
   2. 定义之后，就可以使用var出来的变量代替 $ 符号

jQuery常用插件网站

1. jQuery插件库 http://www.jq22.com/
2. jQuery之家 http://www.htmleaf.com/

全屏滚动

1. gitHub: https://github.com/alvarotrigo/fullPage.js
2. 中文翻译网站:：http://www.dowebok.com/demo/2014/77/