入口函数
1. $(function() {..}) 页面dom加载完成
2. $(document).ready(function() {..})
$是jQuery的*对象,相当于原生js中的window,把元素利用$包装成 jQuery对象,就可以调用jQuery方法
用算生js获取来的对象就是dom对象,
用jQuery方法获取的元素就是jQuery对象jQuery对象的本质是
利用$对dom对象包装后产生的对象,伪数组的形式存储
jQuery对象和dom对象转换
1. dom对象转换成jQuery对象,方法只有一种
var box = dociment.getElementById(‘box‘) // 获取dom对象
var jQueryObject = $(box) // 把dom对象转换为jQuery 对象
2.jQuery对象转换为dom对象的方法 (两种)
2.1 jQuery对象[索引值]
var domObject1 = $(‘div‘)[0]
2.2jQuery对象.get(索引值)
var domObject2 = $(‘div‘).get(0)
基础选择器
名称 用法 描述
ID选择器 $(‘#id‘) 获取指定ID的元素
全选选择器 $(‘*‘) 匹配所有元素
类选择器 $(‘.class‘) 获取同一类class的元素
标签选择器 $(‘div‘) 获取同一标签的所有元素
并集选择器 $(‘div,p,li‘) 获取多个元素
交集选择器 $(‘li.current‘) 交集元素
层级选择器
子代选择器 $(‘lu > li‘) 使用>号,获取亲儿子层级的元素,不会回去孙子层级的元素
后代选择器 $(‘ul li‘) 使用空格,表示后代选择器,包括孙子级
筛选选择器
:first $(‘li:first‘) 获取第一个元素
:last $(‘li:last‘) 获取最后一个元素
:eq(index) $(‘li:eq(2)‘) 获取到的li元素中,选择索引号为2的元素,
:odd $(‘li:odd‘) 获取到li元素中,选择索引号为奇数的元素
:even $(‘li:even‘) 获取到li元素中,选择索引号为偶数的元素
节点选择
语法 用法 说明
parent() $(‘li‘).parent() 查找父级
children(selector) $(‘ul‘).children(‘li‘) 最近一级的亲儿子
find(selector) $(‘ul‘).find(‘li‘) 后代选择器
siblings(selector) $(‘.first‘).siblings(‘li‘) 查找兄弟节点,不包括自己本身
nextAll([expr]) $(‘.first‘).nextAll() 查找当前元素之后所有的同辈元素
prevAll([expr]) $(‘.last‘).prevAll() 查找当前元素之前所有的同辈元素
hasClass(class) $(‘div‘).hasClass(‘pritected‘) 检查当前元素是否含有某个特定类,如有返回true
eq(index) $(‘li‘).eq(2) 选择获取到的li的索引号为2的元素
jQuery设置样式
$(‘div‘).css(‘属性‘,‘值‘)
jQuery样式操作
方法一
1.参数只写属性名,则返回属性值
var strColor = $(‘div‘).css(‘color‘)
2.参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css(‘color‘,‘red‘)
3.参数可以是对象形式,方便设置多组样式,属性名和属性值用冒号隔开,属性可以不用加引号
$(this).css({‘color‘:red, width: 200,})
方法二 设置类样式方法
1.添加类 (不会影响之前存在的的类)
$(‘div‘).addClass(‘cureent‘)
2.删除类 (不会影响之前存在的的类)
$(‘div‘).removeClass(‘current‘)
3.切换类 (不会影响之前存在的的类)
$(‘div‘).toggleClass(‘current‘)
jQuery效果
显示隐藏 show() 显示 , hide()隐藏, toggle()切换(如果目标元素是隐藏状态就显示出来)
滑入滑出 slideDown()下滑 slideUp()上滑 slideToggle()切换
淡入淡出 fadeIn()淡入 fadeOut()淡出 fadeToggle()切换 fadeTo(1,2)修改透明度,1透明度 2 速度 必须写
自定义动画 animate({
// 想要更改的 样式属性,以对象的形式传递,必须写,属性名可以不用带引号,复合属性需要采取驼峰命名法
},200) 动画 200时间可不加
停止动画排队 stop() 写到动画或者效果的前面,相当于结束上一次的动画,先调用stop()在调用动画
事件切换
语法 hover ([over,] out) // over 和out为两个函数
over 鼠标移到元素上要触发的函数 (相当于mouseenter)
out 鼠标移出元素要触发的函数 (相当于mouseleave)
如果只写一个函数,则鼠标经过和离开都会触发它
属性操作
1.prop(‘属性‘); prop(‘属性‘, ‘属性值‘) 适合操作表单属性
2.attr(‘属性‘); attr(‘属性‘, ‘属性值‘) 用于获取和设置 自定义属性
3.data(‘name‘, ‘value‘) 向被选元素附加数据 ,
获取方法 date(‘name‘) 向被选元素获取数据 可以读取自定义属性, 得到的是数字型
文本属性值
1.html() 可以获取元素的内容, 设置元素内容要加引号 可识别标签
2.text() 可以获取元素的内容, 设置元素内容要加引号 不能识别标签
3.val() 可以获取表单的值,设置表单的值要加引号
元素操作
遍历元素
语法1 $(‘div‘).each(function (index, domEle) { ... })
each()方法遍历匹配的每一个元素,
里面的回调函数有两个参数,index是每个元素的索引号,domEle是每个DOM元素的对象 不是jQuery对象
想用jQuery方法,需要转换为jQuery对象 $(domEle)
语法2 $.each(objct, function(index, element) { ... })
$.each() 方法看用于遍历任何对象,主要用于数据处理,比如数组,对象
里面的函数有两个参数, index 是每个元素的索引号, element 遍历内容
使用jQuery方法也需要转换
创建元素
1. $(‘<li> </li>‘)
添加元素
内部添加 (父子关系)
element.append(‘ 内容 ‘) 把内容放入匹配元素内部的最后面
element.prepend(‘内容‘) 把内容放入匹配元素内部的最前面
外部添加 (兄弟关系)
element.after(‘内容‘) 把内容放入目标元素的后面
element.before(‘内容‘) 把内容放入目标元素的前面
删除元素
element.remove() 删除匹配的元素 (本身)
element.empty() 删除匹配的元素集合中所有的子节点
element.html(‘‘) 清空匹配的元素内容,要加空字符串 也就是 ‘ 引号 ‘
尺寸操作
width() / height() 取得匹配元素宽度和高度 只包括 width 和 height
innerWidth() / innerHeight 取得匹配元素宽度和高度 包含内边距
outerWidth() / outerHeight() 取得匹配元素宽度和高度, 包含内边距和边框
outerWidth(true) / outerHeight(true) 取得匹配元素宽度和高度,包含内边,边框,外边
以上参数为空,则是获取相应值,返回的是数字型
如果参数为数字,则是修改对应的值 参数可以不写单位
位置操作
offset() 设置或返回被选元素相对于文档的偏移坐标,offset().top距离文档顶部距离 .left距离文档左侧
可以设置元素的偏移 offset({ top:10 })
position()用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准
该方法只能获取
scrollTop() / scrollLeft()
用于设置或返回被选元素被卷去的头部和左侧
不跟参数是获取, 参数为不带单位的数值则是设置被卷去的头部
事件处理
on()用于事件绑定,可以绑定多个事件,多个处理事件处理程序,可用于动态生成的元素
可以事件委托操作,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委托给父元素
例: $(‘ul‘).on(‘click‘, ‘li‘ , function() {})
$(‘div‘).on(事件1,事件2)
如果事件处理程序类型相同则可以写一起 例 $(‘div‘).on(‘mouseover mouseout‘ , function(){})
off()事件解绑
概念 : 当某个事件上面的逻辑,在特定需求下不需要的时候,可以把该事件上的逻辑移除,这个过程就是事件解绑
语法:
$(‘p‘).off() // 解绑p元素所有的事件处理程序
$(‘p‘).off(‘click‘) // 解绑p元素上面的点击事件,后面的是侦听函数名
$(‘p‘).off(‘click‘ , ‘li‘) // 解绑事件委托
如果有的事件指向触发一次,可以使用one()来绑定事件
事件处理 trigger() 自定触发事件
概念: 在某些特定的条件下,我们希望某些事件能够自动触发,比如轮播图的自定播放
语法:
第一种 trigger()
element.click() // 第一种简写
element.trigger(‘事件类型‘) // 第二种自动触发模式
第二种triggerHandler()
element.triggerHandler(‘事件类型‘) // 第三种自动触发模式
triggerHandler() 模式不会触发元素的默认行为,这是和之前两种的区别
事件对象
概念: jQuery对DOM中的事件对象event进行了封装,兼容性更好,获取方便,使用变化不大
事件被触发,就会有事件对象的产生
语法:
element.on(‘事件类型‘, [选择器], function(event) {}) // event 同 e
阻止默认行为 event.prevenrDefault() 或者 return false
阻止冒泡 event.stopPropagation()
拷贝对象
语法 :
$.extend(true, targetObj, obj);
targetObj为接收拷贝内容的对象
obj 为被拷贝对象
1. 如果设为true则为深拷贝,默认为false 浅拷贝 默认值时不用写 ,为true要写
2. 浅拷贝目标对象引用的被拷贝对象的地址,修改目标对象会影响被拷贝的对象
3. 深拷贝,前面加true, 完全克隆, 修改目标对象不会影响被拷贝对象
多库共存
1.把$符号同一改成jQuery 比如 jQuery(‘div‘)
2.jQuery变量规定新的名称 : $.noConflict() var xx = $.noConflict()
例
var suibian = jQuery.noConflict();
console.log(suibian("span"));