jquery:(库，插件，封装)
目标：使用
好处： 写的少，做的多
库： 别人写好，你拿来用
下载： http://jquery.com/
版本：
v1.x 亚非拉 兼容所有浏览器
v2.x 欧美 高
v3.x
jquery3.0-compat ~~ 1.x IE8+
jquery3.0 ~~ 2.x 高
基本使用:
<b>公共特性：</b>
1)、赋值（事件) --> 函数调用(执行方法)
2)、window.onload=fn --> $(fn)
3)、obj.属性=值fn --> jqObj.属性(值fn)
4)、抓对象: getXxx--> $('CSS选择器')
5)、一件事可以有很多实现方法
jqObj.css()/show()/fadeInt/slideDown
6)、jq的动画其实都是队列动画
想插队 ,需要停止前面的动画
jqObj.stop().slideDown/slideUp/fadeIn/fadeOut()
7)、动画会卡顿:
推荐用 animate 不卡
其他的，要求不高可以用（! a--b>b-->a），快
8)、css 办不到的，jq可以
9)、jq很少报错
10)、jq很少循环，可以一堆操作
11)、修改样式的时候，单位没所谓：推荐加上单位(px)
12)、jq很少赋值,有的都是方法
jqObj.innerHTML=值 jqObj.html()
13)、在jq里面this都是原生
14)、jq的事件都是绑定
15)、jq也还是js写的,js办不到的，jq一样办不到
<b>动画:</b>
jqObj.animate({},{}) ~~ move({},{})
<b>事件:</b>
jqobj.事件名(fn)
jqObj.hover(fn1,fn2)
jqObj.toggle(fn1,fn2,fn3)
....
<b>选择器:</b> $('css选择器');
* 统配
#div1 ID
.active 类class
div tagname
#div .mini 后代
#div > p 一级子
#one , #two 分组
属性:
div[title] 找的是div，但要有属性名title
div[title=test] 找的是div，但要有属性名title=test
div[title^=te] 以什么开头
div[title$=st] 以什么结尾
div[title*=ss] 包含
伪类:
div:first 第0个
div:last 最后1个
div:eq(index) 第几个
div:gt(n) 大于n
div:lt(n) 小于n (不含n)
div:odd 单
div:even 双
div:has(选择器) 找的是div,动的是div,含有末个选择器
div:contains(文本) 含有某段文本的
<b>样式:</b>
jqObj.css(属性，值) 修改
jqObj.css(属性) 获取
- 一堆对象，获取的是第0个
jqObj.css({属性1：值1，属性2：值2,..,..}) 批量修改
属性:
jqObj.attr(属性，值) 修改
jqObj.attr(属性) 获取
- 一堆对象，获取的是第0个
jqObj.attr({属性1：值1，属性2：值2,..,..}) 批量修改 - 无法获取js自定义属性,冲着页面去的
innerHTML obj.innerHTML=值
jqObj.html(值) 修改
jqObj.html() 获取
class操作: 不会覆盖原有样式
添加: jqObj.addClass(类名)
移除: jqObj.removeClass(类名)
判断有没有样式: jqObj.hasClass(类名) 返回true/false
*一堆判断，只要有一个有，就是个true
<b>选项卡:</b>
this 都是原生
原生对象.jq方法() 有问题
$(this) --> o o 包一下(目标：为了使用jq 的方法)
jqObj.index() 索引 jq对象自带索引
eq既是伪类，也是方法
$('div:eq(n)') jqObj.eq(n).xx()
自动播放选项卡:
定时器
取元素的高: jqObj.height()
- 一堆的高，取的是第0个
<b>DOM:</b>
创建：$('html标签')
添加：
b 到 a的过程
jq js
a.append(b) a.appendChild(b) 内尾部
b.appendTo(a) -
a.prepend(b) a.insertBefore(a[0],b) 内头部
b.prependTo(a) -
a.insertBefore(b) - 前方 插入
a.insertAfter(b) - 后方 插入
*** 操作的dom元素已存在(页面),所有的操作都是移动
删除:
jq js
jqObj.remove() obj.parentNode.removeChild(obj)
jqObj.parent() obj.parentNode 父级
jq表单元素.val() 取表单元素的value值
.val(值) 修改
<b>事件:</b>
click/mouseover/mouseout/mousedown/mouseup/....
绑定:
老版本
bind/unbind 绑定/解绑定
jqObj.bind('事件名',函数)
新版本:
on / off ('事件名',函数)
委托：
未来jqObj.live('事件名',函数) 老
事件加给了document 父定死了
父.delegate('未来的子','事件名',函数) 新
事件加给了 父 性能高 ,可以传参
取消委托:
未来jqObj.die('事件名',函数) 老
父.undelegate('未来的子','事件名',函数) 新
mouseover... 都会冒泡
mouseenter/mouseleave/hover 不冒泡
hover 推荐
阻止冒泡:
jq js
return false 事件对象.cancelbubble=true;
阻止默认:
jq js
return false return false;
事件对象(ev): 无需做兼容
只阻止冒泡：
ev.stopPropagation()
只阻止默认:
ev.preventDefault();
<b>大小:</b>
jq js
宽、高
jqObj.height()/width()不带 getStyle 带着单位
jqObj.outerWidth()/outerHeight() offsetWidth/offsetHeight
盒模型： css宽+padding+border W3C
MS: css宽+padding+border+margin MS
<b>位置:</b>
jq js
jqObj.position().left offsetLeft/top
jqObj.offset().left getPos()
<b>链式操作:</b>
对象.方法1().方法2().xx().oo() 连缀
jqObj.stop().animate() 成功
obj.split('-').reverse().join() 成功
jqObj.html().xx() //获取操作,常常会导致连缀
obj.innerHTML.xx()
<b>连缀菜单思路：寻路</b>
jqObj.next() 下一个兄弟
jqObj.children('选择器') 找选择器指定的子
jqObj.siblings() 兄弟们
<b>转换：</b>
js --> jq
obj $(obj)
jq --> js
jqObj jqObj.get(0)/jqObj[0]
<b>循环：</b>
jqObj.each(function(index,element){
index == 索引
element == this == 循环的每一个对象
});
$.browser.内核名称 true/undefined
$.browser.version
*** 没办法判断360
去除前后空格: $.trim(字符)
<b>插件:</b> 满足软件，库，的一些不足
插件网： http://www.jq22.com/
自定义:
$.fn.方法名=fn 单个插件定义
$.fn.extend({ 批量定义
方法名1:fn1,
方法名2:fn2,
方法名N:fnN,
})
<b>幻灯片：</b>
$('class').drag()
$.fn.drag=function(){
this == jq对象
this == 多个class this.li.操作 ,10个
this.each(function(index,element){
element 每一个幻灯片
element.li 5个
})
}
例子：
input:checked 选择已选中的 input
文档滚动距离 $(document).scrollTop()
窗口高度 $(window).height()
div:not(:last) 所有的div,不含最后一个
div:hidden 找的是隐藏div
div:visible 找的是显示div
jqObj.is(':hidden') 返回 true/false
is 判断jqObj是不是选择器所描述的状态
jqObj.toggleClass(类名) 切换样式
网友评论