jQuery学习小结

jQuery

jquery网址 https://api.jquery.com/

jQuery基本使用

• jQuery入口函数

  $(function(){…})
  $(document).ready(function(){…})
  相当于原生js中的DOMcontentloaded事件

• jQuery对象和DOM对象之间转换

  DOM对象转jQuery对象 $(dom对象)
  jQuery对象转DOM对象的两种方式
  $(“div”)[i] // i是索引号
  $(“div”).get(i)

• 推荐使用双引号,和原生js区分一下

  小技巧*****
  隐式迭代中,$(this)是指向正在调用方法的dom对象
  $(this).index()得到当前指向的dom对象的索引号

常用API

jQuery常用选择器

$('选择器') //里面写css选择器即可

刷选选择器
:first :last :eq(index) :odd :even  例子:$('li:eq(2)') 

筛选方法
.parent() 查找最近一级父级   父
.parents("li") 返回指定的祖先级li

.children('li')最近一级子级li   子
.find('li')找后代li  子孙

.siblings('li')找兄弟不含自己   兄弟
.nextAll()本元素之后的所有同辈元素  
.prevtAll()本元素之前所有同辈 

.hasClass('class') 当前元素是否有特定的类
.eq(index) 相当于$('li:eq(index)') 索引从0开始
-----------更多的选择器查看官网或手册-----------------

jQuery样式操作

简单操作,使用css方法修改元素样式

 $('选择器').css('属性','值')
 
隐式迭代,遍历内部DOM元素的过程
简单理解:给匹配到的元素循环遍历执行相应方法,不需要额外循环,简化操作

注意:
	1.参数只写属性名,则返回属性值
	2.逗号分隔,值如果是数字可以不用跟单位和引号
	3.参数可以是对象形式,设置多组样式 {'color':'#fff','font-size':'20px'}属性可以不加引号,复合属性则必须采用驼峰命名法,值不是数字要加引号

复杂操作,操作类修改多个样式

作用等同于以前的classList,这里的语法里面的参数不要加点
添加类 $('div').addClass('current');
删除类 $('div').removeClass('current');
切换类 $('div').toggleClass('current');

jQuery效果

显示隐藏

show([speed,[easing],[fn]])  显示
可选参数speed slow normal fast或者毫秒值
可选参数easing 默认swing   linear
回调函数fn 动画完成后执行,每个元素执行一次
hide([speed,[easing],[fn]])  隐藏
toggle([speed,[easing],[fn]]) 显示隐藏切换

滑动

s速度("slow","normal", or "fast")或者毫秒值 e切换效果，默认"swing"可选"linear" 回调是每个元素一次
slideDown(s,e,fn)
slideUp(s,e,fn)
slideToggle(s,e,fn) 

事件切换(鼠标经过的复合写法)

hover([over,]out)
hover(function(){..},function(){..})分别是鼠标经过和离开的处理函数
如果只写一个函数,经过和离开都会触发函数

动画队列或效果队列,解决短时间内多次触发问题

stop() 停止动画或效果
写在动画或效果之前,相当于停止上一次动画
链式编程:stop().slideToggle();

淡入淡出

fadeIn(s,e,fn),fadeOut(s,e,fn),fadeToggle(s,e,fn)
fadeTo(s,opacity,e,fn) 渐进调整到指定不透明度 速度和opacity必须写,opacity取值0~1

自定义动画

animate(params,[speed],[easing],[fn])
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000) 
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"
fn:在动画完成时执行的函数，每个元素执行一次

params必须写,以对象形式传递,如果是属性名可以不带引号,想要修改的样式属性,复合属性要使用驼峰命名法

jQuery属性操作

jQuery常用三种属性操作prop()/attr()/data()

prop("属性") 获取元素固有属性  prop("属性","属性值") 设置修改固有属性
attr("属性") 获取元素自定义属性 attr("属性","属性值") 设置修改自定义属性

data() 
数据缓存,不修改DOM元素结构,页面刷新,数据消失 
data(key,value) 存储数据  data(key) 获取数据
还可以读取 HTML5 自定义属性  data-index ，data("index")得到的是数字型

jQuery文本属性值

jQuery的文本属性值常见操作有三种：html() / text() / val()

html()  对应js的innerHTML   html() 获取元素内容 html("内容")设置元素内容
text()  对应js的innerText  获取和设置文本内容
val() 对应js的value  表单中通过value来获取和设置值

clone([Even[,deepEven]])  $("div").clone()复制自己  $("div").clone(true)复制自己并复制功能

jQuery元素操作

遍历元素(使用场景:给同一类元素做不同的操作)
$("div").each(function(index,domELe){.....})用于遍历 jQuery 对象
$.each(obj,function(i,e){.....}) 用于遍历任何对象

创建元素
var li = $("<li></li>");

添加元素
内部添加 $("ul").append(li);//放到内容最后面  $("ul").prepend(li);//放到内容的最前面
外部添加  $("div").after($("<div></div>"));  $("div").before($("<div></div>"));

删除元素
$("ul").remove(); //删除自己
ele.empty(); //清空所有的子节点
ele.html(""); //清空元素内容 和empty相似

jQuery尺寸/位置操作

width([val|fn])/height([val|fn]) 参数为空返回元素宽高 参数为数值则修改 参数可不写单位
	function(index, height){} 回调参数:索引位置,旧的高度值
innerWidth()/innerHeight() 返回元素宽高 包含padding值 参数为数值则修改
outerWidth/outerHeight() 返回元素宽高 包含padding border大小
outerWidth(true)/outerHeight(true) 获取位置 宽高+padding+border+margin

offset() 获取元素在当前视口的相对偏移 .offset().top .offset().left    .offset({top:100,left:100})
position() 获取距离带有定位父级的距离,如果没有带定位的父级,以文档为准,这个方法只能获取,不能设置
scrollTop() 获取被卷去头部的距离  设置被卷去头部距离
scrollLeft()

跳回头部,可以使用animate动画函数,
$("body,html").stop().animate({scrollTop:0})

jQuery事件

事件注册

单个事件注册,类似原生js
单多个事件注册  ele.on(events,[selector],fn) 
	优势1.绑定一个或多个事件的事件处理函数
		处理函数不同,传入对象{mouseenter:function(){..},mouseleave:function(){..}}
		处理函数相同,$("div").on("mouseenter mouseleave",function(){..})
	优势2.事件委托
		$("ul").on("click","li",function(){..})事件绑在ul上,触发对象是li,事件冒泡到父级
	优势3.可给未来动态创建的元素都绑定事件(利用事件委托的特性)
off()解绑事件
	.off()解除所有事件
	.off("click")解除click事件
	.off("click","li")解除click的事件委托
one()绑定事件  使用和on()基本一致 只能触发一次

事件处理

自动触发事件(用代码来手动触发)
	ele.click() 
	ele.trigger("click")
	ele.triggerHandler("click")  //不会触发元素的默认行为

事件对象

阻止默认行为 阻止冒泡 
event.preventDefault() event.stopPropagation()

jQuery其他

拷贝对象

$.extend([deep],target,object1,[objectN])  拷贝到target对象上,有同样的key会覆盖target的value
deep true深拷贝 false浅拷贝 默认false

多库共存

1.jQuery解决方案:$统一写为jQuery
2.jQuery释放$符号:$.noConflict()   var 新的符号 = $.noConflict();

jQuery插件

jQuery之家http://www.htmleaf.com/

jQuery插件库http://www.jq22.com/

全屏滚动

fullPage.js  github.com/alvarotrigo/fullPage.js
中文翻译网站 www.dowebok.com/demo/2014/77/