jQuery day_02(7.13)

jQuery: 利用封装技巧 把 DOM操作进行封装. 提供更加 简单, 易用 的操作方案

• 特点1: 查询更容易 $()

• 特点2: 自带遍历

• 特点3: 大量采用函数重载技巧, 一个函数有多种用途

知识点:

• $()

  • 实参是字符串: 进行查询操作

  • 实参是DOM元素: 封装成JQ对象. 例如 $(this)

• 操作style: css

• 操作class: addClass removeClass toggleClass

• index: 获取元素在其兄弟中的 序号

• 点击: click 鼠标悬浮: mouseover

• 兄弟

  • siblings: 所有兄弟元素

  • next: 下一个兄弟

  • prev: 上一个兄弟

• 获取查询到的数据中, 某个序号对应的: eq(n) n>=0 正数; n<0 倒数

• 显示/隐藏: show / hide

  • 滑动动画: slideUp / slideDown / slideToggle

• 自定义动画: animate

  • 适合简单的动画, 不支持 transform 和 颜色

  • 动画效果依然推荐 css 中 transition / animation

一、评分效果

 知识点:
    prevAll: 选择上方所有的兄弟
    nextAll: 选择下方所有的兄弟
    parent: 父元素
    html : 用于设置元素的 innerHTML
 小图标: 推荐到 iconfont 网站

 二、准备就绪

 

 三、委托

    事件冒泡: 当子元素发生事件后, 会传递给父元素
    事件委托: 通过父元素 帮助子元素处理事件
    适合场景: 动态新增的子元素

 练习

 四、数据添加

 练习

 五、ajax

1. 先准备一个容器, 例如 div, 用于存放请求而来的数据 转化后的元素 
2. 在JS中发送请求,获取数据 
3. 把获取到的数据, 转换成HTML代码, 添加到准备好的容器里

练习

 

 练习

 

 

内容总结

• 更多的选择元素的方式

  • nextAll: 上方所有兄弟

  • prevAll: 下方所有兄弟

  • parent: 父元素

• 准备就绪

  • 当把JS代码书写在 外部的 js文件里

  • 防御性编程: 防范用户在头部引入JS 导致无法操作DOM的情况

  • 在 onload 页面加载完毕后再调用

  • $(function(){})

• 委托:

  • $().on(事件名, 选择器, function(){})

  • 其中 this 指向触发事件的当事元素

  • 特别适合 动态新增的子元素, 例如 网络请求后添加到页面的元素

• append: 添加子元素

  • empty:清空子元素

• ajax

  • get: 通过 get请求获取数据 $.get(地址, 回调函数)