jQuery,没东西,看源码,课件11-30,12-03

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