您的位置:首页 > Web前端 > JQuery

Jquery

2020-08-10 21:05 567 查看

第一次写博客 是为了锻炼自己总结能力,如果有哪些错误请大佬指点! 感谢!!!

jquery的学习总结

  • jquery就是把原生JS实现的功能汇集到了一个js文件中,拿来直接用就行

jquery的选择器

  • 基本选择器
  • 层次选择器
  • 过滤选择器
  • 表单选择器
  • Jquery.attr() 获得属性和自定义

  • Jquery.attr(属性名,属性值) 设置属性

  • Jquery.attr({key1:value1,key2:value2}) 设置属性

  • Jquery.prop() 获得获得官方属性

  • Jquery.removeAttr() 移除属性

  • Jquery.css() 获得计算过样式

  • Jquery.css(属性名,属性值) 设置样式

  • Jquery.css({key1:value1,key2:value2}) 设置样式

类操作

  • Jquery.addClass()
  • Jquery.removeClass()
  • Jquery.toggleClass()
  • Jquery.hasClass()

Jquery.offset() 相对文档偏移

Jquery.positon() 相对与父节点偏移

Jquery.width()/height()( 内容大小

Jquery.innerWidth()/innerHeight() 内容+内边距

Jquery.outerWidth()/outerHeight() 内容+内边距+边框

Jquery.outerWidth(true)/outerHeight(true) 内容+内边距+边框+外边距

Jquery.scrollTop/scrollLeft 滑动条位置

上遍历

  • Jquery.parent() 直接父节点
  • Jquery.patents() 所有父节点
  • Jquery.parentsUntil() 区间父节点

下遍历

  • Jquery.children() 直接子集
  • Jquery.find(’*’) 所有后代

水平遍历

  • Jquery.siblings() 除自己外的同级
  • Jquery.next() 下一个同级
  • Jquery.nextAll() 下面所有同级
  • Jquery.nextUntil() 下面区间同级
  • Jquery.prev() 上一个同级
  • Jquery.prevAll() 上面所有同级
  • Jquery.prevUntil() 上面区间同级

过滤

  • first()
  • last()
  • eq()
  • filter()
  • not()

get()返回dom eq()返回Jquery

Jquery.each((index,ele)=>{})

文档加载事件

  • $(function(){
  • })

事件绑定

  • Jquery.bind(‘事件名称’,方法)
  • Jquery.on(‘事件名称’,方法)

事件移除

  • Jquery.unbind(‘事件名称’,方法)
  • Jquery.off(‘事件名称’,方法)

常见事件:hover ,mouseXXX,keyXXX ,表单…

事件冒泡/默认事件

模拟事件

  • Jquery.trigger(‘事件名称’,[参数])
  • Jquery.triggerHandler(‘事件名称’,[参数])
  • triggerHandler只执行函数,不执行默认行为

jquery动画

  • jquery封装了常用的动画效果
  1. 隐藏,显示

    $(‘p’).hide()
    $(‘p’).show()
    $(‘p’).toggle()

  2. 淡入淡出

    $(‘p’).fadeIn()
    $(‘p’).fadeOut()
    $(‘p’).fadeToggle()

  3. 划入划出

    $(‘p’).slideDown()
    $(‘p’).slideUp()
    $(‘p’).slideToggle()

  4. 自定义动画

    $(‘p’).animate()

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: