(1)几种方法:
delay() //延迟多长时间执行程序,参数是时间 语法:$('box').delay(1000).animate({'height':100,'width':100}) //延迟1秒执行动画
focus() //可以直接获取光标 语法:$('input').focus()
index() //索引值 语法:$(this).index()
each() //遍历、隐式迭代 语法:$('li').each(function(index,el){书写程序 $(el)代表元素 index代表索引值})
$.noConflict() //多库共存 用这个函数会返回一个对象 通过这个新的对象可以调用jq里面的方法 销毁对象$
语法:var new$ = $.noConflict() //new$是新对象,替换掉了$ 例:选中元素div:new$('div')
toArray() // 转换成纯数组 语法: $(‘div’).toArray()
$.trim() // 清除空格 (这是全局变量的方法) 语法:$.trim(‘$(input).value()’)
事件对象.preventDefault()// 这个方法就是用来阻止默认事件的
(2)属性的操作 attr prop
a) attr() // 操作行内属性 (最少要有一个参数)
语法1:$(‘a’).attr(‘href’) // 传一个参数是获取当前属性值
语法2:$(‘a’).attr(‘href’,’www.baidu.com’) // 传两个参数 就是赋值 会替换掉原来的值
语法3:$(‘a’).attr({‘href’:’#’,’target’:’_blank’,...}) // 可以是对象形式 批量添加 赋值 替换
b) removeAttr() // 删除元素某个属性
语法:$(‘a’).removeAttr(‘href’,’target’); //可以删除一个属性 也可以删除多个属性
c) prop() // 表单属性 ( attr操作不了表单属性 )
语法1:$(‘input’).prop(‘type’) // 可以传一个参数 获取属性值
语法2:$(‘input[type=checkbox]’).prop(‘checkbox’,true); // 传两个参数 赋值 替换掉原来的值
语法3:$(‘input’).prop({‘type’:’text’,’value’=’密码’}); //可以是对象形式 批量添加 赋值 替换
(3) 节点的操作( a - f : 这里的元素都会把之前的元素调换位置 )
a) append() // 在当前元素的最后面添加某元素 语法:$(‘#b1’).append($(‘#b2’));
b) appendTo() // 当前元素添加到某元素的最后面 语法:$(‘#b2’).appendTo(‘$b1’);
c) prepend() // 在当前元素的最前面添加某元素 语法:$(‘#b1’).prepend($(‘#b2’));
d) prependTo() // 当前元素添加到某元素的最前面 语法:$(‘#b2’).prepend($(‘#b1’));
e) before() // 在当前元素的前面添加某元素 语法:$(‘#b1’).before($(‘#b2’));
f) after() // 在当前元素的后面添加某元素 语法:$(‘#b1’).after($(‘#b2’));
g) insertBefore() // 移动节点 在参照物之前插入 语法:$(移动的元素).insertBefore(‘参照物’)
h) insertAfter() // 移动节点 在参照物之后插入 语法:$(移动的元素).insertAfter(‘参照物’)
i) replaceWith() // 替换节点元素 语法:$(‘要被替换的元素’).replaceWith(‘替换后的节点’)
j) clone() // 复制元素 有两个参数 false true 语法:$(‘div’).clone();
true: 深层复制 可以把元素的事件一起复制过来 false :只复制元素 以及内容(默认值)
(4)关系方法
a) end() // 回到上一个元素(链式程常用)语法:$(‘box’).children().hide().end().hide()
b) next() // 下一个兄弟元素 语法:$(‘.box’).next();
c) nextAll() // 某元素后面的所有兄弟元素 语法: $(‘li’).nextAll();
d) prev() // 上一个兄弟元素 语法:$(‘.box’).prev();
e) prevAll() // 某元素前面所有的兄弟元素 语法:$(‘li’).prevAll();
f) siblings() // 所有的兄弟元素 语法:$(‘.box’).siblings(); // 传参数 就是精确查找兄弟元素
g) children() // 所有的子元素 语法:$(‘.box’).children(); // 传参数就是精确查找某个子元素
h) parent() // 父元素 语法:$(‘.box’).parent();
i) parents() // 查找祖级元素 语法:$(‘.box’).parents(); // 传参数 就是精确查找祖级元素
j) closest() // 也是查找祖级元素 语法:$(‘.box’).closest(); // 传参数 就是精确查找祖级元素
k) find() // 查找后代元素 语法:$(‘.box’).find(); // 传参是 就是精确查找后代元素
(5)内容操作 html()text() val()区别
a) html() // 不传参数就是获取元素里的内容 识别标签 语法:$(‘.box’).html();
b) text() // 不传参数就是获取元素里的内容 不识别标签 语法:$(‘.box’).text();
c) val()// 不传参数就是获取元素里的内容 只针对输入框有效 语法:$(‘input’).val();
d) 传参数的话都是替换元素里的内容 $(‘.box’).html/text/val(‘我是替换后的内容’);
(6)清空元素
a) empty() // 只清空元素里的内容 语法:$(‘.box’).empty();
b) remove() // 删除整个元素节点及全部内容 语法:$(‘.box’).remove();
(7)动画方法 动画的使用语法:针对( a - i )
1:$(‘.box’).show() 不传参数没有动画
2:$(‘.box’).show(slow(600ms)2.normal(400ms)3.fast(200ms)还可以写数字 1000=1秒)
3:$(‘.box’).show(时间,function(){动画执行完毕后要执行的程序});
a) show() // 显示(display:block)
b) hide() // 隐藏 (display:none)
c) toggle() // 显示与隐藏切换
d) slideDown() // 向下滑动显示
e) slideUp() // 向上滑动隐藏
f) slideToggle() // 向上向下隐藏切换
g ) fadeIn() // 淡入 显示
h) fadeOut() // 淡出 隐藏
i ) fadeToggle() // 淡出 淡入切换
特殊语法
j ) fadeTo() // 淡淡的达到 语法1:$(‘div’).fadeTo(时间,0-1透明度);
语法2:$(‘div’).fadeTo(时间,0-1透明度,function(){动画执行完毕后执行的程序});
k ) animate() // 自定义动画函数 (属性的值 只能是数字)
语法1:$(‘div’).animate({‘属性’:’值’,‘属性’:’值’,...},时间);
语法2:$(‘div’).animate({‘属性’:’值’,‘属性’:’值’,...},时间,function(){动画执行完毕后要执行的程序});
l ) stop() // 停止动画
语法1:$(‘div’).stop() //没有参数只是清除了当前的动画
语法2:$(‘div’).stop(true,true) //有两个参数 都是布尔值(bool)
第一个值是true 就是清除所有动画排队机制 false 只是清除当前执行的动画机制
第二个值是true 直接跳到当前元素指定动画结束的位置 false立即停止动画 定在那里
语法3:$(‘’div).stop().toggle() //直接写在程序里 每次执行程序之前都先要清除之前的程序 传参数是时间
(8)元素的坐标操作 offset()
a) offset() // 这是一个对象 可以用来设置坐标值 语法:$(‘.box’).offset({‘top’:200,‘left’:100})
b) offset().left // 获取元素在整个页面中left的坐标 语法:$(‘.box’).offset().left
c) offset().top // 获取元素在整个页面中top的坐标 语法:$(‘.box’).offset().top
d) offsetX // 检测鼠标单击一下距离盒子左边的距离 语法: event.offsetX
e) offsetY // 检测鼠标单击一下距离盒子上边的距离 语法: event.offsetY
f) position().left
g) position().top
(9) 网页滚动坐标值scroll
a) scrollTop() // 获取网页上边的滚动坐标值 语法:$(document).scrollTop();
b) scrollLeft() // 获取网页左边的滚动坐标值 语法:$(document).scrollTLeft();
c) 有一种特殊的用法 让网页回到顶部 对象是html与body
$(‘button’).click(function(){
$(‘html,body’).animate({‘scrollTop’:0},100);
})
(10) 鼠标坐标值(要利用到鼠标移动事件的事件对象event)
a) event.pageX // 获取鼠标横向坐标的位置
b) event.pageY // 获取鼠标纵向坐标的位置
(11)事件
a) click() // 单击事件
b) focus() // 获取焦点
c) blur() // 失去焦点
d) mouseover() // 鼠标移上
e) mouseout() // 鼠标离开
f) mouseenter() // 鼠标移上
g) mouseleave() // 鼠标离开
h) keyup() // 键盘按键松开事件
i) keydown() // 鼠标按键按下事件
j) scroll() // 网页滚动事件
k) mousemove() // 鼠标移动事件
l) mousedown() // 鼠标按下事件
m) mouseUp() // 鼠标松开事件
(12)键盘监听 keycode获取键盘按键的unicoed编码
获取案例:
$(document).keydown(function(event){
console.log(event.keyCode);
})
(13)获取宽高(参数的三种写法 width(100) / width(‘100’) / width(‘100px’) 都可以 jq优化了)
a) width() // 获取元素宽度 传参数就是设置宽度 语法:$(‘.box’).width(); / $(‘.box’).width(100);
b) heigth() // 获取元素高度 传参数就是设置高度 语法:$(‘.box’).height() / $(‘.box’).height(100)
(14)class的操作
a) addClass() // 添加类名 例: $(‘div’).addClass(‘box’); //给div元素添加类名box
b) removeClass() // 删除类名 例: $(‘div’).removeClass(‘传参数就是指定类名 ’) 不传参 数就删除div元素上所有类名
c) hasClass() // 判断元素有没有类名
d) toggleClass() // 添加删除类名 有类名就删除 没有添加
Css() //样式操作 语法两种:
语法1:css(‘color’,’pink’); //只能操作一种样式
语法2:css({‘color’:’pink’,’font-size’:’15px’...}) //可以操作多种样式
(15)选择器 (重点)
a) 基本选择器
- $(‘div’) // 标签选择器
- $(‘.box’) // 类名选择器
- $(‘#box’) // id选择器
- $(‘li.box’) // 获取标签名为li且类名为box 的元素 (交集选择器)
b) 层级选择器
- $(‘ul li’) // 后代选择器 选中ul里面所有的li (不论子级还是孙子级)
- $(‘ul>li’) // 子代选择器 只选中 ul里面的子级li
- $(‘ul>li ul’) // 子代后代连用 选中ul里面的子级li里面的所有ul
c) 过滤选择器
- $(‘li:first’) // 选中第一个li
- $(‘li:last’) // 选中最后一个li
- $(‘li:even’) // 选中索引号为偶数的li (索引从0开始)
- $(‘li:odd’) // 选中索引号为奇数的li (索引从0开始)
- $(‘li:eq(5)’) // 选中索引号为 5 的li (索引从0开始)
- $(‘li:first-child’) // 选中当前元素的父元素下的第一个子元素 第一子元素还必须是li
- $(‘li:last-child’) // 选中当前元素的父元素下的最后一个子元素 最后一个子元素还必须是li
- $(‘li:gt(编号)’) // 选中大于某个编号的元素
- $(‘li:lt(编号)’) // 选中小于某个编号的元素
- $(‘li:not()’) // 排除某个元素
d) 属性选择器 <input type=”text”>
- $(‘[type = button]’) //获取页面上所有有type属性且属性值为button的元素
- $(‘[type!=button]’) //获取页面上所有有type属性且属性值不为button的元素
- $(‘[type^=bu]’) //获取页面上所有有type属性且属性值以bu开头的的元素
- $(‘[type$=on]’) //获取页面上所有有type属性且属性值以on结束的元素
- $(‘[type*=tt]’) //获取页面上所有有type属性且属性值包含tt的元素
(16)jq的入口函数
a) $(functin(){要写的程序}); // 推荐使用 (可以写多个)
b) $(document).ready(function(){要写的程序});
c) $().ready(fuction(){要写的程序});
l jquery是一个对象 与dom(document)对象可以互相转换
a) jq转换dom对象
$(‘div’) 转为 $(‘div’)[0] 就可以了 这样就可以直接调用原生js的API ( []里写的是索引值 )
$(‘div’) 转为 $(‘div’).get(0) 也可以( ()里写的是索引值 )
例:$(‘div’)[0].innerHTML = ‘我是jq转换来的dom对象’;
b) dom对象转换为jq对象
var div = document.getElementsByTagName(‘div’)[0];
div 转为 jq对象 为 $(‘div’) 这样就可以直接调用jq对象
例: $(div).css(‘color’,’pink’);
(17)事件绑定与 解绑(详情查看优盘 帮定事件系类)
a) click //a元素触发b元素的事件
b) bind() // 帮定事件 不支持给新元素帮定事件 支持帮定多个事件 也支持给自己帮定事件
语法:$(‘div button’).bind(‘click mouseover’function(){程序})
c) delegate() //事件委派 必须通过父元素委派事件给子元素 支持给新的元素委派事件但不能给自己添加事件
语法:$(‘父元素’).delegate(‘子元素’,’事件’,function(){程序})
d) on() // 添加事件 委派事件 给新元素添加事件 都可以 (用的最多)
语法1:$(‘父元素’).on(‘事件’,’子元素’,function(){程序})
语法2:$(‘元素’).on(‘事件’,function(){程序})
e) off()// 解绑事件 语法1 针对普通事件绑定 / 语法二针对 事件委托解绑(也针对新加的元素解绑)
语法1:$(‘#btn’).off(‘click’) // 要解绑的元素.off(‘解绑的事件’)
语法2:$(‘div’).off(‘click’,’#btn’); // 父元素.off(‘解绑的事件’,’解绑的子元素’)
(18) jq的封装插件
$ 这是一个对象 针对它可以封装插件 插件就是扩展$对象的方法
封装jq插件分两种类型
第一种 全局方法 :主要是用来完成一些功能 跟dom无关
例:$.zijidiyide = function(){
console.log(‘我就是扩展jq的全局方法的插件’)
}
调用:$.zijidiyide();
第二种 局部方法 :主要是用来操作dom元素的 $.fn固定写法
例: $.fn.lunbo = function(参数){
console.log(‘我就是扩展jq的局部方法的插件’)
};
调用:$(‘div’).lunbo();