码迷,mamicode.com
首页 > Web开发 > 详细

jQuery

时间:2019-07-01 21:37:28      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:事件对象   链式编程   自定义   清除   变量   for   htm   down   样式   

1. jQuery与DOM 的转换

  jquery → DOM: jQuery对象[ ]

  DOM → jQuery:$(dom对象 )

2. 注册事件

  简单方式: $(‘选择器‘).事件名(事件处理程序)

  on的方法: jQuery对象.on( ‘事件名‘, 事件处理程序)

  事件委托: jQuery对象.on(‘事件名‘, ‘选择器‘, 事件处理程序)

  移除事件

    简单:jQuery对象.off(‘click‘, 事件程序名)

    事件委托:jQuery对象.off(‘事件名’, ‘选择器‘, 事件处理程序名)

  bind 和 unbind方法操作事件

    注册:jQuery对象.bind(‘事件名‘, 事件处理程序)

    移除:jQuery对象.unbind(‘事件名‘, 事件处理程序名)

3. 操作css样式

  jquery对象.css(‘width‘, 500) 

  $(‘.box‘).css({
    ‘width‘:200,
    ‘background-color‘: ‘#090‘
  })
  获取:xx=$(‘.box‘).css(‘height‘)

3.0 操作元素

  创建/追加
    向父元素最追加
      ①新jQuery对象.appendTo( ‘父元素选择器‘, 父元素jQuery对象)【eg:$(‘<li></li>‘).appendTo(‘ul‘)】
      ②父元素jQuery对象.append(‘新jQuery对象‘)
    向父元素最面追加
      ①新jQuery对象.prependTo(‘父元素‘)
      ②父jQuery对象.prepend(‘新jQuery对象‘)
    同级元素追加
      前面插入:jQuery对象.before(‘新jQuery对象‘)
      后面插入:jQuery对象.after(‘新jQuery对象‘)
  删除
    jQuery对象.remove()
  请空
    jQuery对象.empty();清空元素内部所有元素以及元素相关事件
    jQuery对象.html( ‘‘ );请空内部所有元素,但不会释放元素内部相关事件
  克隆
    jQuery对象.clone(布尔);默认false仅克隆内容,true克隆内容和事件

4. 选择器

  基本:id、类、标签、交集、并集

  层级:

名称  用法 描述

:eq(index)

$(‘li:eq(2)‘) 获取li中索引为2的元素
:odd $(‘li:odd‘) 获取li中索引为奇数的元素
:even $(‘li:even‘) 获取li中索引为偶数的元素

  筛选选择器:

名称 用法 描述
children() $(‘ul‘).children(‘li‘) 相当于子类选择器
find() $(‘ul‘).find(‘li‘) 相当于后代选择器
siblings() $(‘#a‘).sibling(‘li‘) 查找兄弟节点,不包括自己
parent() $(‘#a‘).parent() 查找父亲
eq() $(‘li‘).eq(1) 查找索引为1的节点,从0开始
next() $(‘li‘).next() 下一个兄弟元素
prev() $(‘li‘).prev() 上一个兄弟元素
prevAll() $(‘li‘).prevAll() 之前所有的元素

5. 入口函数

  $(function(){  })

  $(document).ready(function(){   })

  区别:

  window.onload = function(){

    当页面中所有资源【DOM树,媒体】加载完毕后才执行

  }

  $(function(){

    仅仅等DOM树加载完毕后执行

  })

6. 操作类名

  添加:$(‘div‘).addClass(‘xx‘)

  移除:$(‘div‘).removeClass(‘xx‘)

  检测类名是否存在:$(‘div‘).hasClass(‘xx‘)

  切换类名:$(‘div‘).toggleClass(‘xx‘)         //有则删没有则添加

7. 操作标签属性

  设置:$(‘div‘).attr(‘pid‘, 110)

  获取:$(‘div‘).attr(‘pid‘)

  移除:$(‘div‘).removeAttr(‘pid‘, 100)

  prop方法:针对表单属性selected、checked、disabled操作使用prop方法

    获取: $(‘input‘).prop( ‘checked‘ )

    设置: $(‘input‘).prop(‘selected‘, true)

8. 操作标签内容

  文本: jquery对象.text()   jquery对象.text(‘xxx‘)

  所有: jquery对象.html()  jquery对象.html(‘xxxx‘)

  表单: jquery对象.val()  jquery对象.val(‘xxx‘)

9. 操作元素尺寸

  width 和 height 【内容部分】

    jQuery对象.width(‘数字’)

  innerWidth 和 innerHeight 【内容+padding】

    jQuery对象.innerWidth()

10. 操作元素位置

  元素距离文档位置

    jQuery对象.offset();返回一个对象,包含元素位置

  元素距离上级定位元素位置

    jQuery对象.position();返回一个对象包含位置

  操作卷去的页面间距

    jQuery对象.scrollTop()

$(‘div‘).scroll(function(){
   // 获取被卷起的间距
   var v = $(this).scrollTop();
   console.log(v);
});

$(‘button‘).click(function(){
    // 设置卷起的间距
    $(‘div‘).scrollTop(0);
}); 

10. 动画

  speed:运动时长;  easing:运动方式,默认swing缓冲,linear匀速

  显示:jQuery对象.show(speed, easing, fn)  

  隐藏:jQuery对象.hide(speed, easing, fn)

  切换:jQuery对象.toggle(speed, easing, fn)

  下拉上卷:

    显示:jQuery对象.slideDown(speed, easing, fn)

    隐藏:jQuery对象.slideUp(speed, easing, fn)

    切换:jQuery对象.slideToggle(speed, easing, fn)

  淡入淡出

    显示:jQuery对象.fadeIn(speed, easing, fn)

    隐藏:jQuery对象.fadeOut(speed, easing, fn)

  自定义动画:

  animate(params, [speed],[easing],fn)
  params传入一个对象
  animate({
     样式属性名:目标值 
  })

  停止动画

    jQuery对象.stop(clearQueue, jumpToEnd)

    clearQueue布尔值   true:请空该物体所有动画;false默认:仅清除当前这一动画

    jumpToEnd布尔值    true:停止动画并直接完成运动目标;false默认:停止动画保持当前状态,不会运动到当前目标

11. 事件对象

  鼠标事件对象相关属性

    事件对象.clientX/Y  参照浏览器

    事件对象.pageX/Y  参照文档

    事件对象.offsetX/Y  参照事件源

  公共属性和方法

    事件对象.target

    事件对象.preventDefault();阻止默认行为

    事件对象.stopPropagation();阻止事件冒泡

12. 链式编程

  jQuery对象调用一些方法做设置操作时,方法完毕后,内部会重新返回当前jQuery对象,所以可以继续调用jQuery的其他方法,这种现象就是链式编程

end方法在链式编程上返回上一jQuery对象

13. 多库共存

  ① jQuery.noConflict();  释放 $ 用其他变量接收,jQuery中不使用$,使用jQuery

  ②jQuery库释放$符合的使用权,用其他简单的符号代替

jQuery

标签:事件对象   链式编程   自定义   清除   变量   for   htm   down   样式   

原文地址:https://www.cnblogs.com/xhrr/p/11116661.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!