jQuery
jQuery官网: http://jQuery.com
jQuery的入口函数
$(function (){});
$(document).ready(function() {});
jQuery对象和DOM对象
1.原生Js获取来的对象就是dom对象
2.jQuery方法获取的对象就是jQuery对象
3.jQuery对象的本质是:利用$对dom对象包装后产生的对象(伪数组形式存储)
注意:只有jQuery对象才能使用jQuery方法,Dom对象则使用原生的js方法。
jQuery 对象
通过$把dom元素进行包装,$('div')
1.Dom对象转换为jQuery对象,$(Dom对象)
2.jQuery对象转Dom对象(两种方式)
$('div')[index]
$('div').get(index)
jQuery常用api
1.jQuery选择器
$('#id')
$('*')
$('.class')
$('div')
$('div,p,span')并集
$('li.current')交集
$('ul>li')子代
$('ul li')后代
jQuery设置样式
$('div').css('属性',值)
jQuery隐式迭代
2.jQuery筛选选择器
$('li:first')
$('li:last')
$('li:eq(2)')
$('li:odd')奇数
$('li:even')偶数
jQuery筛选方法(重点)
$('li').parent()
$('ul').children('li')相当于$('ul>li')子代
$('ul').find('li')相当于$('ul li')后代
$('.first').siblings('li')
$('.first').nextAll()
$('.first').prevAll()
$('div').hasClass('protected')返回布尔值
$('li').eq(2)
jQuery排他思想
$(this).css('color','red');
$(this).siblings().css('color','');
链式编程
$(this).css('color','red').siblings().css('color','');
$(this).index()获取当前元素的索引号
操作css方法
$(this).css('color');
$(this).css('color','red');
$(this).css({'color':'red','font-size':'20px'});
设置类样式方法
添加类,不影响原先类
$('div').addClass('current');
移除类
$('div').removeClass('current');
切换类
$('div').toggleClass('current');
类操作与className区别
原生Js中className会覆盖元素原先里面的类名。
jQuery里面类操作只是对指定类进行操作,不影响原先的类名。
显示隐藏效果
隐藏语法规范
hide([speed,[easing],[fn]])
参数都可以省略,无动画直接显示。
speed:三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数值(如:1000)。
easing:(Optional)用来指定切换效果,默认是"swing",可用参数"linear"。
fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
toggle([speed,[easing],[fn]])
滑动效果
下滑效果语法规范
slideDown([speed,[easing],[fn]])
上滑效果语法
slideUp([speed,[easing],[fn]])
滑动切换效果
slideToggle([speed,[easing],[fn]])
事件切换
hover([over],out)
over 鼠标移动元素上要触发的函数(相当于mouseenter)
out 鼠标移出元素要触发的函数(相当于mouseleave)
如果只写一个函数,则鼠标经过和离开都会触发它。
动画队列及其停止排队方法
动画或效果队列
动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或效果排队执行。
停止排队stop()
stop()方法用于停止动画或效果
注意:stop()写到动画或者效果的前面,相当于停止结束上一次的动画。
stop()方法必须写到动画的前面。
淡入淡出效果
淡入效果
fadeIn([speed,[easing],[fn]])
淡出效果
fadeOut([speed,[easing],[fn]])
淡入淡出切换
fadeToggle([speed,[easing],[fn]])
渐进方式调整到指定的不透明度
fafeTo([[speed],opacity,[easing],[fn]])
opacity 透明度必须写,取值0-1之间
自定义动画animate
语法
animate(params,[speed],[easing],[fn])
params 想要更改的样式属性,以对象形式传递,必须写,属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。
jQuery属性操作
设置或获取元素固有属性值prop()
获取属性 prop('属性')
设置属性prop('属性','属性值')
设置或获取元素自定义属性值attr()
获取属性 attr('属性')
设置属性 atte('属性','属性值')
也可以获取h5自定义属性
数据缓存 data()
data() 方法可以在指定的元素上存取数据,并不会修改dom元素结构,一旦页面刷新,之前存放的数据都将被移除。
附加数据语法
data('name','value')
获取数据语法
data('name')
还可以读取h5自定义属性data-index,得到的是数字型。
:checked选择器,查找被选中的表单元素。
jQuery内容文本值
主要针对元素的内容还有表单的值操作。
1.普通元素内容html() 相当于原生的innerHTML
html() //获取元素的内容
html('内容') //设置元素的内容
2.普通元素文本内容 text()
text() 获取元素的文本内容
text('文本内容') 设置元素的文本内容
3.表单的值value()
val() 获取表单的值
value('内容') 设置表单的值
toFixed(2) 保留两位小数
jQuery元素操作
遍历元素
jQuery隐式迭代是对同一类元素做同样的操作,如果想给同一类元素做不同操作,就需要遍历。
语法1
$('div').each( function (index,domEle){})
index 每个元素的索引号,domEle是每个dom元素对象,不是jQuery对象
所以想要使用jQuery方法,需要给这个dom元素转换为jQuery对象 $(domEle)
语法2
$.each(object,function (index,element){})
$.each()方法可用于遍历任何对象,主要用于数据处理,比如数组,对象。
里面的函数有两个参数,index是每个元素的索引号,element遍历内容。
创建元素
语法:$("<li></li>");
添加元素
1.内部添加 element.append("内容")
element.prepend("内容")
2.外部添加
element.after("内容") 把内容放入目标元素后面
element.before("内容") 把内容放入目标元素前面
内部添加元素,生成以后为父子关系。
外部添加元素,生成以后为兄弟关系。
删除元素
element.remove() 删除匹配的元素,本身
element.empty() 删除匹配的元素集合中所有的子节点
element.html("") 清空匹配的元素内容
remove 删除元素本身
empty()和html("")作用等价,都可以删除元素里面的内容,只不过html还可以设置内容。
jQuery尺寸,位置操作
jQuery尺寸
width()/height() 取得匹配元素宽度和高度值,只算width/height
innerWidth() /innerHeight() 取得匹配元素宽度和高度值,包含padding
outerWidth()/outHeight() 取得匹配元素宽度和高度值,包含padding,border
outWidth(true)/outHeight(true) 取得匹配元素宽度和高度值,包含padding,border,margin
以上参数为空,是获取相应值,返回的是数字型,如果参数为数字,则是修改相应值,参数可以不必写单位。
jQuery位置
1.offset()设置或获取元素偏移
offset()方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系。该方法有2个属性left,top。
top用于获取距离文档顶部的距离,left用于获取距离文档左侧的距离。
可以设置元素的偏移 offset({top:10,left:30});
2.position() 获取元素偏移
position()用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。该方法有两个属性left 和top。position().top用于获取距离定位父级顶部的距离,position().left用于获取距离定位父级左侧的距离。该方法只能获取。
3.scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
scrollTop()方法设置或返回被选元素被卷去的头部。不跟参数是获取,参数是不带单位的数字则是设置被卷去的头部。
带有动画的返回顶部$("body,html").animate({scrollTop:0})
jQuery事件
事件注册
element.事件(function (){})
$("div").click(function (){})
mouseover,mouseout,mouseenter,mouseleave,blur,focus,change,keydown,keyup,resize,scroll等。
事件处理on()绑定事件
on()方法在匹配元素上绑定一个或多个事件的事件处理函数。
语法:element.on(events,[selector],fn)
events:一个或多个用空格分隔的事件类型,如"click","keydown".
selector:元素的子元素选择器.
fn回调函数,即绑定在元素身上的侦听函数。
on()方法的优势1:
可以绑定多个事件,多个处理事件程序。
$("div").on({
mouseover : function () {},
mouseout : function () {},
click : function () {}
});
如果事件处理程序相同
$("div").on("mouseover mouseout",function () {
$(this).toggleClass("current");
});
on()方法的优势2:
可以事件委托操作,事件委托的定义是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委托给父元素。
$("um").on("click","li",function () {});
在此之前有bind(),live(),delegate()等方法来处理事件绑定或者事件委派,最新版用on代替他们。
on()方法优势3:
动态创建的元素,click()没有办法绑定事件,on()可以给动态生成的元素绑定事件。
$("div").on("click","p",function (){
alert("俺可以给动态生成的元素绑定事件");
});
$("div").append($("<p>我是动态创建的p</p>")):
事件处理off()解绑事件
off()方法可以移除通过on()方法添加的事件处理程序。
$("p").off() //解绑p元素所有事件处理程序
$("p").off("click") //解绑p元素上面的点击事件,后面的off是侦听函数名
$("ul").off("click","li"); //解绑事件委托
如果有的事件只想触发一次,可以使用one()来绑定事件。
自动触发事件trigger()
轮播图自动播放功能跟点击右侧按钮一致,可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。
element.click() //第一种简写形式
element.trigger("type") //第二种自动触发模式
$("p").on("click",function () {
alert("hi");
});
$("p").trigger("click"); //此时自动触发点击事件,不需要鼠标点击。
element.triggerHandler(type) //第三种自动触发模式
triggerHandler模式不会触发元素的默认行为,这是和前面两种的区别。
jQuery事件对象
事件被触发,就会有事件对象的产生。
element.on(events,[selector],function (event) {});
阻止默认行为: event.preventDefault() 或者 return false
阻止冒泡:event.stopPropagation()
jQuery对象拷贝
如果想要把某个对象拷贝(合并)给另一个对象使用,此时可以使用$.extend()方法
语法$.extend([deep],target,object1,[object])
deep :如果设为true为深拷贝,默认为false浅拷贝。
target:要拷贝的目标对象。
object1:待拷贝到第一个对象的对象。
object:待拷贝到第N个对象的对象。
浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象。
深拷贝,前面加true,完全克隆(拷贝的对象,而不是地址),修改目标对象不会影响被拷贝对象。
jQuery多库共存
$符号可以被jQuery代替,
jQuery变量规定新的名称:$.noConflict()
var xx = $.noConflict();
jQuery插件库http://www.jq22.com/
jQuery之家http://www.htmleaf.com/
使用步骤:引入相关文件,复制相关html,css,js
Ctrl+h查找替换
全屏滚动fullpag.js
http://github.com/alvarotrigo/fullpage.js
http://www.dowebok.com/demo/2014/77/
bootstrap 框架也是依赖于jQuery开发的,因此里面的js插件使用,也必须引入jQuery文件。
案例toDolist
www.todolist.cn