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

原文地址:https://www.cnblogs.com/MrZhujl/p/10044571.html