jQuery:
原生 js 的类库(方法库),把一堆常用的方法进行了封装,能够更好的兼容各种浏览器,操作DOM的时候特别方便。
https://jquery.com/ 英文网
https://www.jquery123.com/ 中文网
一般公司里面用的是1.72左右的版本,因为这个版本兼容IE
jQuery有两个版本,一个版本是开发版(不压缩),一个版本是生产版(压缩的 .mig)
1.引入jQuery库
2.就开始使用了
$ ( function () {
// ready 事件
} );
$ ( " # box " ).css( " border " , " 1px splid #000 " )
选择器:
#box
. li
li
属性选择器 $(“ ele [ 属性key = 属性val ] ”)
伪类选择器
:first
:even 匹配所有索引值为偶数的元素,从0开始奇数(现实中的奇数从1计数)
:odd 匹配所有索引值为奇数的元素,
:lt(num)小于某个索引
:gt(num)大于某个索引
:checked 匹配所有被选择的
$('#list').find('div') -> 所有list 元素下的所有 div
JQ和原生对象互转
jQuery对象转原生对象
加下标即可:$(‘ li ’)-> jquery对象
$(‘ li ’)[0] -> 元素对象
$(' li ').get (0) ->元素对象
原生对象转jQuery
$(包原生对象)
属性操作
$(‘’ele‘’).attr('key','val')
jquery中基本上都有一个特性:传一个参数(字符串)是获取,传两个参数是设置。传个对象是批量设置。
prop专门用来操作表单元素的
$(‘’input‘’).prop('checked','false')
index()
默认以父级为基准,找到子集的索引
小技巧:在使用index的时候,把精确匹配条件加上。
index(‘.li’) 以class为li的元素为基准的索引。
siblings()
以当前节点为基准的所有的兄弟节点
小技巧:因为兄弟节点包含的元素很多,使用时把精确匹配的条件加上
siblings(‘div’) 找到所有兄弟节点为为div的元素
addClass() 添加class
removClass() 删除class
eq(index):找到一组元素的某个,并且还是jQuery对象
学习jQuery的方法跟学习字符串、数组的方法一样,
多用jQuery才能会,只要你会原生,jQuery也就是换种写法
2018-11-30
DOM 增、删、改、查 (创建、插入、替换、上一个、下一个、子级的、父级的、第一个、最后一个)
增:
创建: $(“元素”)
插入:append / before......
。。。。。。
JQ的事件,都是事件 on 绑定的(类似于addEventListener)
JQ的所有的事件都是 on()这个方法,扩展出来的(其它事件都是基于on()二次封装的)
click(function(){ })
mouseover()
mouseout()
。。。。。。
注意:在事件套事件的时候,容易出问题。(重复绑定的问题)
解决:在事件套事件的时候,要把上一次的事件清掉,使用清除事件 off(' 事件名 . 类名 ') (类似于removeEventListener)
off(可以放精确的范围)
比如:具体的事件名、事件名的class
on(‘不带on的事件名’,fn) ->
on(‘不带on的事件名’,target,fn)
on(‘不带on的事件名’,{key:val},function(ev){ }) -> 拿:ev.data.key
jQuery中的event对象是二次封装的对象,增加了很多东西,也是把常用的功能列了出来
ev.data 就是绑定的数据
如果在jq的event下没有找到原生的事件对象属性,还可以在ev.originalEvent(就是原生的事件对象)下查找
hover是 onmouseleave和onmouseover 不冒泡的事件
2018-12-03
运动 :
animate()
JQ中的所有运动都是基于animate
hide() 显示影藏 可以传个参数 比如 100
toggle() 宽高+透明度
slideToggle( ) 切换高度
fadeToggle( ) 切换透明度
stop( ) (多次快速执行运动函数的时候,会出现延迟执行的状态,,,此时可以加上stop( ),让这次点击,清除上次点击,再执行运动函数)
delay( ) (延迟执行,多个运动时,让两个运动之间存在一定延迟,参数也是传数字)
看文档
2018-12-03