学习任务

1.了解jQuery 中的DOM操作

2.使用jQuery 操作样式

3.使用jQuery 操作元素内容

学习目标

1.了解jQuery 中的DOM操作

2.使用jQuery 操作样式

3.使用jQuery 操作元素内容

4.使用jQuery 操作节点

观看视频

语法参考

1.  设置获取样式      css()     addClass()      removeClass()      toggleClass()    hasClass(）

2. 操作html代码       html()      text()

3. 操作value值         val()

4. 内部插入节点       append()     appendTo()       prepend()       prependTo()

    外部插入节点       after()         insertAfter()      before()         insertBefore()

     5. 删除、清空节点    remove()     empty()

     6. 复制、替换节点    clone()        replaceWith()       replaceAll()

     7. 操作属性             attr()           removeAttr()        prop()

     8. 遍历节点             jQuery 遍历方法

          子元素遍历        children()    find()

            同级元素遍历     next()          prev()        siblings()

            前辈元素遍历     parent()       parents()

            其他遍历方法     each()         end()

上机实践

1.搜索框特效            素材下载         CSS代码     JS代码      

2.QQ简易聊天框       素材下载         JS代码

3.京东问答页面         素材下载

4.图片切换               素材下载          JS代码

知识点：attr()  addClass()  removeClass() siblings()

5.图片动态轮换         素材下载

知识点：attr()  addClass()  removeClass() siblings() setInterval() clearInterval()

6.添加删除表格数据   素材下载       （补充完整js代码）

当点击“添加”按钮时，出现一个灰色的透明遮罩层，并出现添加数据的表单，点击“提交”按钮，表格会在下面新增一行。

知识点：show()  hide ()   val()     appendTo()     on()动态绑定

注意：on()适应于动态添加的元素

7.凡客诚品页面         素材下载         (补充完整js代码）

8.jQuery手风琴轮换图效果     源代码下载 

拓展训练

      1.jQuery聊天机器人               源代码下载

       2.增减购物车商品信息           源代码下载

       3.京东华为商品放大镜效果      源代码下载