jQuery 基础()

  • 基本使用
  • 选择器
  • 操作样式
  • 动画效果
  • 属性操作
  • 元素操作
  • jQuery 文档地址

基本使用

  • 入口函数
    // 入口函数
    // 文档 准备好 执行函数
    $(document).ready(function(){
    $(‘div’).hide()
    })

  • DOM 对象 和 JQuery 对象的区别
    jQuery 对象只能使用 jQuery 方法 DOM 对象则使用原生 js 属性和方法

  • DOM 对象 和 JQuery 对象互转

  • 隐私迭代

选择器

  • 筛选选择器

  • 筛选方法 上
    父 parent() 子 children()

  • 筛选方法 下

操作样式

  • css() 方法

  • 类操作
    添加类 addClass() 删除类 removeClass() 切换类 toggleClass()

动画效果

  • 显示与隐藏 show([speed],[easing],[fn])

  • 滑动效果
    下滑动 slideDown() 上滑动 slideUp() 切换滑动 slideToggle()

  • 淡入淡出效果
    淡入 fadeIn() 淡出 fadeOut() 淡入淡出切换 fadeToggle() 修改透明度 fadeTo()

  • animate()

属性操作

  • element.prop(‘属性名’) 获取元素固有的属性值
    // element.prop(‘属性名’) 获取元素固有的属性值
    console.log($(‘a’).prop(‘href’))
    // 设置属性
    $(‘a’).prop(‘title’,’baidu’)
    $(‘input’).change(function() {
    console.log($(this).prop(‘checked’))
    })

  • 元素的自定义属性通过 attr()
    // 元素的自定义属性通过 attr()
    console.log($(‘div’).attr(‘index’))
    $(‘div’).attr(‘index’,’2′)

  • 数据缓存 data() 这个里面的数据是存放在元素的内存里
    $(‘span’).data(‘uname’, ‘xiaoyaee’)
    console.log($(‘span’).data(‘uname’));
    // 获取 data-index h5 自定义属性 获取第一个 不用写 data- 返回数字型
    console.log($(‘div’).data(‘index’));

元素操作

  • 获取设置元素内容 html() 获取设置元素文本内容 text() 获取设置表单值 val()

  • 遍历元素
    给同一类元素做不同操作 遍历 each()

  • 创建添加删除元素
    内部添加:append() 放到内容的最后面 prepend() 放到内容的最前面
    外部添加:after() 放到内容的最后面 before() 放到内容的最前面
    删除元素:remove() 可以删除匹配的元素 empty() 可以删除匹配元素里的子节点 html(”) 可以清空匹配元素里的子节点

  • 元素大小
    width() 获取元素的 width innerWidth() 获取元素的 width+padding
    outerWidth() 获取元素的 width+padding+border outerWidth(true) 获取元素的 width+padding+border+margin

  • 元素位置
    offset() 获取距离文档的位置(偏移)和父级没有关系
    position() 获取相对于带有定位的父级元素的偏移坐标,如果父级都没有定位 则以文档为准 只能获取不能设置

jQuery 文档地址

————————
  • 基本使用
  • 选择器
  • 操作样式
  • 动画效果
  • 属性操作
  • 元素操作
  • jQuery 文档地址

基本使用

  • 入口函数
    // 入口函数
    // 文档 准备好 执行函数
    $(document).ready(function(){
    $(‘div’).hide()
    })

  • DOM 对象 和 JQuery 对象的区别
    jQuery 对象只能使用 jQuery 方法 DOM 对象则使用原生 js 属性和方法

  • DOM 对象 和 JQuery 对象互转

  • 隐私迭代

选择器

  • 筛选选择器

  • 筛选方法 上
    父 parent() 子 children()

  • 筛选方法 下

操作样式

  • css() 方法

  • 类操作
    添加类 addClass() 删除类 removeClass() 切换类 toggleClass()

动画效果

  • 显示与隐藏 show([speed],[easing],[fn])

  • 滑动效果
    下滑动 slideDown() 上滑动 slideUp() 切换滑动 slideToggle()

  • 淡入淡出效果
    淡入 fadeIn() 淡出 fadeOut() 淡入淡出切换 fadeToggle() 修改透明度 fadeTo()

  • animate()

属性操作

  • element.prop(‘属性名’) 获取元素固有的属性值
    // element.prop(‘属性名’) 获取元素固有的属性值
    console.log($(‘a’).prop(‘href’))
    // 设置属性
    $(‘a’).prop(‘title’,’baidu’)
    $(‘input’).change(function() {
    console.log($(this).prop(‘checked’))
    })

  • 元素的自定义属性通过 attr()
    // 元素的自定义属性通过 attr()
    console.log($(‘div’).attr(‘index’))
    $(‘div’).attr(‘index’,’2′)

  • 数据缓存 data() 这个里面的数据是存放在元素的内存里
    $(‘span’).data(‘uname’, ‘xiaoyaee’)
    console.log($(‘span’).data(‘uname’));
    // 获取 data-index h5 自定义属性 获取第一个 不用写 data- 返回数字型
    console.log($(‘div’).data(‘index’));

元素操作

  • 获取设置元素内容 html() 获取设置元素文本内容 text() 获取设置表单值 val()

  • 遍历元素
    给同一类元素做不同操作 遍历 each()

  • 创建添加删除元素
    内部添加:append() 放到内容的最后面 prepend() 放到内容的最前面
    外部添加:after() 放到内容的最后面 before() 放到内容的最前面
    删除元素:remove() 可以删除匹配的元素 empty() 可以删除匹配元素里的子节点 html(”) 可以清空匹配元素里的子节点

  • 元素大小
    width() 获取元素的 width innerWidth() 获取元素的 width+padding
    outerWidth() 获取元素的 width+padding+border outerWidth(true) 获取元素的 width+padding+border+margin

  • 元素位置
    offset() 获取距离文档的位置(偏移)和父级没有关系
    position() 获取相对于带有定位的父级元素的偏移坐标,如果父级都没有定位 则以文档为准 只能获取不能设置

jQuery 文档地址