【前端学习笔记】JQuery的基本思想、常用方法
2015-08-09 16:49
931 查看
JQ思想————————————————————————
$()下的常用方法————————————————————–
[code]1.模仿CSS获取元素 2.方法函数化,JQ以各种方法传参代替了JS的属性赋值操作 3.方法链式操作 4.和原生共存,写法不能混用 5.取值赋值合用一个方法,区别于加不加参数,当一组元素取值时, 取的是第一个元素的值,取出所有元素需要循环。而赋值时, 直接赋值给这组的每个元素
$()下的常用方法————————————————————–
[code]has() 包含: 有包含的被选择,针对元素里面的东西 filter() 过滤: 满足条件的被选择,没满足的过滤掉,针对元素本身的属性 not() filter()的反义词 next() 下一个兄弟节点 prev() 上一个兄弟节点 find() 寻找元素内部的节点 eq() 寻找一组元素的第几个 index() 索引: 在所有兄弟节点中的位置 attr() 取值: oDiv.attr('title'); 设值: oDiv.attr('title','div1'); addClass() 添加class removeClass() 删除class width() 元素width innerWidth() 元素width+padding outerWidth() 元素width+padding+border,outerWidth(true)再加个margin insertBefore() A.insertBefore(B) 把A放在B的前面,剪切 before() A.before(B) 调换两者的位置。B在A前面 A.insertBefore(B)和B.before(A)作用一样,但是后续操作对应的对象不一样,下同 insertAfter() A.insertAfter(B) 把A放在B的后面,剪切 after() appendTo() A.appendTo(B) 把A放在B的内部最后,剪切 append() A.append(B) B在A的内部最后 prependTo() A.prependTo(B) 把A放在B的内部最开始的位置,剪切 prepend() A.prepend(B) B在A的内部最前 remove() A.remove(); 删除元素 on() 事件绑定
[code]$('div').on('click mouseover',function(){ alert(123); }); $('div').on({ 'click' : function(){alert(123)}, 'mouseover' : function(){alert(456)} });
[code]off() 取消事件绑定 $('div').off() 取消全部事件 $('div').off('click') 取消某个事件 scrollTop() 可视窗口距顶部距离 创建元素 $('<div>') 获取窗口 $('window') parent() 获取父级 offsetParent() 获取有定位的父级,如果父级没有定位,就获取body val() 获取/设置一个元素的value值,取值/赋值 size() 获取组长 each() for循环的加强
[code] $('li').each(function(i,elem){ //i是下标,$(elem)是元素对象 });
[code]hover()
[code] $('div').hover(function(){//移入},function(){//移开});
[code]show()
[code] $('div').show(1000)//显示,可加参数以动画形式显示
[code]hide()
[code] $('div').hide(1000)//隐藏,可加参数以动画形式隐藏
[code]fadeIn()
[code] $('div').fadeIn(1000)//淡入
[code]fadeOut()
[code] $('div').fadeOut(1000)//淡出
[code]fadeTo()
[code] $('div').fadeTo(1000,0.5)//调节透明度
[code]slideDown()
[code] $('div').slideDown(1000)//向下展开
[code]slideUp()
[code] $('div').slideUp(1000)//向上卷曲
[code]offset().left[right] 获取到屏幕的总距离 position().left[right] 获取元素变成定位元素后,到定位父级的left/top (没有定位父级的话就是到屏幕)
相关文章推荐
- jQuery学习之AJAX
- 分享在MVC3.0中使用jQuery DataTable 插件
- 希望大家帮我回答个jquery问题
- jQuery 参考手册 - 选择器
- jquery代码阅读jQuery.makeArray()
- jQuery动画效果
- jquery的DOM定位与操作
- jQuery的样式设置方法总结
- jQuery中用于筛选的方法总结
- jQuery基础事件
- jQuery插件开发
- jQuery 操作Cookie
- jQuery
- jQuery必知要点(一)
- jQuery操作Select
- jquery的post提交---$.post
- JQuery函数加载顺序
- jQuery轻量级组件Rhui
- jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
- MVC&JQuery如何根据List动态生成表格