【jQuery】

下载网址

官网地址： https://jquery.com/

版本：1x ：兼容 IE 678 等低版本浏览器， 官网不再更新

​ 2x ：不兼容 IE 678 等低版本浏览器， 官网不再更新

​ 3x ：不兼容 IE 678 等低版本浏览器， 是官方主要更新维护的版本

各个版本的下载：https://code.jquery.com/

插件

jQuery 插件库:

http://www.jq22.com/

jQuery 之家：

http://www.htmleaf.com/

懒加载插件

（在jQuery库中查找）

当页面滑动到可视区域，再加载图片

基本使用

选择器

基础选择器

名称	用法	描述
ID选择器	$(‘#id名’)	获取指定的ID元素
全选选择器	$(‘*’)	匹配所有元素
类选择器	$(‘.类名’)	获取同一类class的元素
标签选择器	$(‘标签名’)	获取同一类标签的所有元素
并集选择器	$(‘名,名,名’)	选取多个元素
交集选择器	$(‘li.current’)	交集元素
子代选择器	$(‘父>子’)	使用>号,获取亲儿子层级的元素；注意:并不会获取孙子层级的元素
后代选择器	$(‘ul li’)	使用空格,代表后代选择器,获取ul下所有li元素,包括孙子等

	$('选择器')
例:
	$('div')

1.$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直 接使用 $ 。

2.$ 是jQuery 的顶级对象， 相当于原生JavaScript中的 window。把元素利用$包装成 jQuery对象，就可以调用jQuery 的方法。

筛选选择器

语法	用法	描述
:frist	$(‘li:frist’)	获取第一个li元素
:last	$(li:last)	获取最后一个li元素
:eq(索引号)	$(‘li:eq(2)’)	获取到的li元素中，选择索引号位2的元素，索引号从0开始
:odd	$(‘li:odd’)	获取到的li元素中，选择索引号位奇数的元素（注意：这里的奇偶和元素个数的奇偶正好是相反的）
:even	$(‘li:even’)	获取到的li元素中，选择索引号位偶数的元素

表单属性

属性	描述
:checked	查找被选中的表单元素

筛选方法

语法	用法	说明
parent()	$(“li”).parent()	查找父级
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，最近一级(亲儿子)
find(selector)	$(“ul”).find(“li”)	相当于$(“ul li”)，后代选择器
siblings(selector)	$(“.frist”).siblings(“li”)	查找兄弟节点，不包括自己本身(除了自己以外所有的兄弟)
nextAll([expr])	$(“.frist”).nextAll()	查找当前元素之后所有的同辈元素
prevtAll([expr])	$(“.last”).prevtAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$(‘div’).hasClass(“protected”)	检测当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)	$(“li”).eq(2)	相当于$(“li:eq(2)”),index从0开始

重点记住： parent() children() find() siblings() eq()

设置样式

	元素.css('属性','值')
例:
	$('div').css('backgroundColor','red')

如果是多个样式

	元素.css({
        "属性名":"属性值",
        "属性名":"属性值"
    })
例：
	$(this).css({
        "color":"red",
        "font-size":"20px"
    })

排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式

	//例如：除了这个其他全都没有颜色
	$(this).css('color','red')
	$(this).siblings().css('color','')

链式编程

链式编程是为了节省代码量，看起来更优雅

	$(this).css('color','red').sibling().css('color','')

类样式

原生 JS 中 className 会覆盖元素原先里面的类名。

jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

添加类

	元素.addClass("类名")
例:
	$("div").addClass("current")

移除类

	元素.removeClass("类名")
例：
	$("div").removeClass("current")

切换类

	元素.toggleClass("类名")
例：
	$("div").toggleClass("current")

显示隐藏

显示

	元素.show();
例:
	$('div').show();

隐藏

	元素.hide();
例：
	$('div').hide();

切换显示隐藏

	元素.toggle()
例:
	$('div').toggle()

这三个都可以添加动画

	show(speen,"easing",fn())
	hide(speen,"easing",fn())

（1）参数都可以省略， 无动画直接显示。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

滑动

也可以添加数值，详细看显示隐藏（一样）

下滑

	元素.slideDown()
例：
	$('div').slideDown()

上滑

	元素.slideUp()
例：	
	$('div').slideUp()

切换

	元素.slideToggle()
例：
	$('div').slideToddle()

淡入淡出

也可以添加数值，详细看显示隐藏（一样）

淡入

	元素.fadeIn()
例：
	$('div').fadeIn()

淡出

	元素.fadeOut()
例：
	$('div').fadeOut()

切换

	元素.fadeToggle()
例:
	$('div').fadeToggle()

事件切换

	hover(over,out)

（1）over:鼠标移到元素上要触发的函数（相当于mouseenter）

（2）out:鼠标移出元素要触发的函数（相当于mouseleave）

（3）如果只写一个函数，则鼠标经过和离开都会触发它

动画

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

	元素.animate({动画效果},毫秒数)
例：	
	$('div').animate({left:'100px'},5000)

	元素.animate({动画效果},毫秒数,切换效果,回调函数)
	//后面三个详细看显示隐藏（一样）

停止动画

注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。

	元素.stop()
例：
	$('div').stop()		//什么都不写是按排队顺序一个个停止
	$('div').stop(true)		//一个true是停止所有
	$('div').stop(true,true)	//两个是停止所有，但是会立马执行完结果

属性操作

设置或获取元素固有属性值

获取属性

	元素.prop("属性")
例：
	$('a').prop("href")

设置属性

	元素.prop("属性","属性值")
例：
	$('div').prop('id','box')

设置或获取元素自定义属性值

用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”

获取属性

	元素.attr('属性')
例：
	$('div').attr('index')

设置属性

	元素.attr('属性','属性值')
例：
	$('div').attr('index','1')

数据缓存

例如：data-name=‘atr’

附加数据

	元素.data('属性','属性值')
例：
	$('div').data('name','atr')		//给div添加data-name='atr'属性

获取数据

	元素.data('属性')
例：
	$('div').data('name')		//获取到的结果就是atr

内容文本值

主要针对元素的内容还有表单的值操作

普通元素内容

相当于原生inner HTML（也就是能认识标签）

//获取元素的内容	
	元素.html()
例：
	$('div').html()
//设置元素的内容
	元素.html('内容')
例：
	$('div').html('我是个盒子')

普通元素文本内容

相当与原生 innerText（也就是不认识标签）

//获取元素文本内容
	元素.text()
例：
	$('div').text()
//设置元素的文本内容
	元素.text()
例：
	$('div').text('我是个盒子')

表单的值

//获取表单的值
	元素.val()
例：
	$('input[name='text']').val()
//设置表单的值
	元素.val('内容')
例：
	$('#text').val('username')

元素操作

遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历

语法1：

	元素.each(function(index,domEle){})	//index是每个元素的索引号，demEle是每个DOM元素对象
例:
	$("div").each(function (index, domEle) { xxx; })

语法2：

	$.each(object,function(index,DOM){})

1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2. 里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容

创建元素

	$("元素")
例：
	$("<li></li>")	//动态创建一个<li>

添加元素

内部添加元素，生成之后，它们是父子关系。

外部添加元素，生成之后，他们是兄弟关系。

内部添加

把内容放入匹配元素内部最后面，类似原生 appendChild

	元素.element.append('内容')
例：
	$('div').element.append('<p></p>')

把内容放入匹配元素内部最前面

	元素.element.prepend('内容')
例：
	$('div').element.prepend('<p></p>')

外部添加

把内容放入目标元素后面

	元素.element.after("内容")
例：
	$('div').element.after('<div></div>')

把内容放入目标元素前面

	元素.element.before("内容")
例：
	$('div').element.before('<div></div>')

删除元素

remove 删除元素本身。

empt() 和 html(‘’‘’) 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容

删除匹配的元素（本身）

	元素.element.remove()
例：
	$('div').element.remove()

删除匹配的元素集合中所有的子节点

	元素.element.empty()
例：
	$('div').element.empty()

清空匹配的元素内容

	元素.element.html("")
例：
	$('div').element.html("")

尺寸

语法	用法
width() / height()	取得匹配元素宽度和高度值，只算width / height
innerWidth() / innerHeight()	取得匹配元素宽度和高度值，包含 padding
outerWidth() / outerHeight()	取得匹配元素宽度和高度值，包含 padding、border
outerWidth(true) / outerHeight(true)	取得匹配元素宽度和高度值，包含 padding、border、margin

以上参数为空，则是获取相应值，返回的是数字型。

如果参数为数字，则是修改相应值。

参数可以不必写单位。

位置

offset() 设置或获取元素偏移

1.offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。

2.该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。

3.可以设置元素的偏移：offset({ top: 10, left: 30 });

position() 获取元素偏移

1.position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。

2.该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离。

3.该方法只能获取。

scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧

1.scrollTop() 方法设置或返回被选元素被卷去的头部。

2.不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部

入口函数

注意：写在标签后面

$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
 }) ;

    $(document).ready(function(){
       ...  //  此处是页面DOM加载完成的入口
    });

1.等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成jQuery 帮我们完成了封装。

2.相当于原生 js 中的 DOMContentLoaded。

3.不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完 毕才执行内部代码。

4.更推荐使用第一种方式。

转换

Dom转jQuery

	$(DOM对象)

jQuery转DOM

jQuery获取对象一般获取过来就是一个数组

	$('div') [索引号] 

	$('div') .get(索引号)

隐式迭代(样式修改)

	元素.css('属性','值')
例:
	$('div').css('background','pink')

事件

鼠标事件

属性	作用
click	点击
mouseenter	经过
mouseleave	离开

单个事件注册

	element.事件(function(){})
例：
	$(“div”).click(function(){  事件处理程序 })

其他事件和原生基本一致。比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等

on方法

用来绑定多个事件

	$('').on({
        click:function(){},
        mouseenter::function(){},
        mouseleave:function(){}
    })

如果执行事件的处理程序是一样的

	$('').on('click mouseenter',function(){})

事件委托

点击父元素触发子元素的处理程序

	$('父元素').on('事件','子元素',function(){})

on可以给未来动态创建的元素绑定事件

(未来动态：子元素那个位置)

事件解绑

off方法

	.off()
例：
	$('div').off();	//解除div的全部事件
	//解除div上的点击事件
	$('div').off('click');
	//解除事件委托
	$('ul').off('click','li');

one方法

执行一次就失效

	$(元素).one(事件类型,function(){});
例：
	$('div').one('click',function(){})

自动触发事件

	元素.事件()
例:
	$('div').click();

	元素.trigger('事件')
例：
	$('div').trigger('click')

不会触发默认行为（上面两个会触发冒泡效果，下边这个不会）

	元素.triggerHandler('事件')
例:
	$('input').triggerHandler('click')

事件对象event

只要有事件，就会有事件对象的产生

	元素.on('事件',function(event){})
例：
	$('ul').on('click','li',function(event){
		event.stopPropagation()
	})

阻止冒泡：

	event.stopPropagation()

阻止默认行为

	event.preventDefault()	或者 return false