jQuery
启动运行(和window.onDOMContentLoaded(function(){})功能相同
$(document).ready(function(){ })
或者$(function(){ })
顶级代码$
$=jQuery
jquery对象和DOM对象不能混用,只能使用对应的方法
DOM和jQuery互相转换
$(DOM对象) jQuery对象[index]或jQuery对象.get(0)
有的方法jQuery没有封装,这样转换后则可以使用
基础选择器
$(“选择器”) 选择器格式和css相同
筛选选择器
父子选择器
siblings找到的兄弟不包括自己
属性修改
show()
显示元素 hide()
隐藏元素
修改样式
$(“div”).css(“属性”,”值”)
或者 $("div").css('属性1':'值1','属性2':'值2')
//因为有隐式迭代(隐含for循环),$(“div”)可以是伪数组
设置类方法
- $(“div”).addClass(‘‘current’’);
- $(“div”).removeClass(‘‘current’’);
- $(“div”).toggleClass(‘‘current’’); //有该类时remove,无该类时add
原生 JS 中 className 会覆盖元素原先里面的类名。jQuery 里面类操作只是对指定类进行操作,不影响原先的类名。
jQuery效果
显示
show([speed,[easing],[fn]])
fn: 回调函数,在动画完成时执行的函数,每个元素执行一次
(其他效果参数同上
特殊:fadeTo([[speed],opacity,[easing],[fn]]),必须写目标透明度
事件切换
hover([mouseover,]mouseout)
只填一个函数则鼠标经过和离开都会触发它
动画队列
Q:不希望动画被多次触发出现排队效果(鼠标已经离开但效果还在排队)
A:使用stop()
,stop() 写到动画或者效果的前面, 相当于停止结束上一次的动画。
animate
animate(params,[speed],[easing],[fn])
params: 想要更改的样式属性,以对象形式传递({}中加键值对,不带引号),必须写。 属性名可以不用带引号, 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
获取属性
prop('属性')
自定义属性用attr()
设置属性
prop('属性','属性值')
自定义属性用attr()
数据缓存 data()
data(''name'',''value'') // 向被选元素附加数据
date(''name'') // 向被选元素获取数据
这样添加的数据不会像属性一样出现在html里,而是存在了缓存中
这个方法也可以获取之前所说的data-index自定义属性
console.log($('div').data('index'));
返回的结果是数字型
获取内容
html()
相当于innerHTML()
text()
相当于innerText()
val()
获取/设置表单的值,相当于value()
元素操作
遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作。
如果想要给同一类元素做不同操作,就需要用到遍历。
语法一:
$("div").each(function (index, domEle) { xxx; })
案例
each每次循环时,index和domEle的指向是递增的,思想是让递增的i指向不同的目标效果(如图中是指向了arr数组中不同的颜色),在循环中就可以赋给不同的domEle
语法二:
$.each(object,function (index, element) { xxx; })
这个方法主要用于处理数据,object中不仅仅可以填jQuery对象,还可以填数组等。
创建元素
$('<li></li>')
动态地创建了一个li元素
添加元素
element.append(''内容'')
放入匹配元素内部最后面,类似原生 appendChild。
element.prepend(''内容'')
放入匹配元素内部最前面。
element.after(''内容'')
把内容放入目标元素后面。
element.before(''内容'')
把内容放入目标元素前面。
删除元素
element.remove()
删除元素本身
element.empty()
删除所有子元素
element.html(" ")
清空匹配的元素内容,同时可以设置新内容
jQuery尺寸
以上参数为空,则是获取相应值,返回的是数字型。
如果参数为数字,则是修改相应值。
jQuery 位置
① offset()
方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系。该方法有2个属性 left、top,可以设置值。
②position()
方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。不可以设置left、top的值
③ scrollTop()/scrollLeft()
设置或获取元素被卷去的头部和左侧(可以用来设置“滚动到一定位置出现返回顶部标志”)
jQuery事件
事件注册
element.事件(function(){})
和原生的基本一致
绑定事件
① 可以同时绑定多个事件(以对象的形式
element.on(events,[selector],fn)
$(“div”).on({
mouseover: function(){},
mouseout: function(){},
click: function(){}
});
如果事件处理程序相同
$(“div”).on(“mouseover mouseout”, function() {
$(this).toggleClass(“current”);
});
② on()还可以做事件委派
把对li的事件委派给父元素ul
$('ul').on('click', 'li', function() {
alert('hello world!');
});
③ on()还可以给未来动态生成的元素绑定事件
$("div").on("click",”p”, function(){
alert("俺可以给动态生成的元素绑定事件")
});
$("div").append($("<p>我是动态创建的p</p>"));
off()
解绑事件
如果有的事件只想触发一次, 可以使用 one()
来绑定事件。
jQuery插件
网站:
jQuery之家-推荐!
jQuery 插件库
使用方法:
- 解压后把css和js文件夹复制粘贴到目标位置
- 在自己的html文件中引入新的css和js(内部css和js也记得一起复制)
在下载的网页中有参数的说明,一定要看