请选择 进入手机版 | 继续访问电脑版

* DOM操作与jQuery操作

2018-11-9 09:34
1140
* DOM操作

  * 基本操作

    * html() - 等价于innerHTML属性

    * text() - 等价于textContent属性
    * val() - 等价于value属性
    * attr() - 等价于getAttribute()和setAttribute()
      * removeAttr() - 等价于removeAttribute()
  * CSS操作
    * attr()方法 - 设置样式(删除原有样式,设置新样式)

      * style属性和class属性
    * class操作
      * addClass() - 添加样式
      * removeClass() - 删除样式
        * removeClass() - 删除所有样式
        * removeClass(className) - 删除指定样式
      * toggleClass(className) - 切换样式
        * 判断当前元素是否具有className样式
          * 如果有,删除 - removeClass()
          * 如果有,添加 - addClass()
      * hasClass(className) - 判断是否包含指定样式
    * css()方法
      * css(name, value) - 设置一个样式属性
      * css({name:value,name:value,...}) - 设置多个样式属性
  * 遍历元素
    * 祖先元素与后代元素

      * 祖先元素 - parents()
      * 后代元素 - find(expr)
    * 父元素与子元素
      * 父元素 - parent()
      * 子元素 - children()
    * 兄弟元素
      * 前一个兄弟 - prev()
      * 前面所有的兄弟 - prevAll()
      * 后一个兄弟 - next()
      * 后面所有的兄弟 - nextAll()
      * 所有兄弟 - siblings()
  * 创建元素 - $(HTML代码)
  * 插入节点

    * 内部插入
      * append()
      * prepend()
    * 外部插入
      * after()
      * before()
  * 替换节点
    * replaceWith()
    * replaceAll() - 颠倒了的replaceWith()
  * 删除节点
    * remove() - 删除自身与后代
    * empty() - 保留自身,删除后代
  * 复制节点
    * clone(boolean) - 是否复制事件
* 事件
  * ready()方法

    * 作用 - 等价于 window.onload
    * 与window.onload的区别
      * ready()
        * 每一个HTML页面中允许存在多个
        * 具有简写
          * $().ready(function(){})
          * $(function(){})
        * 速度快 - 只加载DOM结构
      * window.onload
        * 每一个HTML页面中只能存在一个
        * 没有简写
        * 速度慢 - 加载页面所有内容
  * 与JS库冲突
    * 原因 - $符号的使用权

    * 原则 - jQuery主动放弃
    * 解决
      * jQuery.noConflict(); - 表示jQuery主动放弃
      * 利用自调函数
        (function($){

        })(jQuery);
      * 利用ready()方法
        $(function($){});

* 事件
  * 事件的绑定与解绑

    * bind(type, data, fn)
      * type - 绑定的事件名称
* data - (可选)作为event.data属性值传递给事件对象的额外数据对象
      * fn - 绑定事件的对应处理函数
    * unbind(type, fn)
      * type - 解绑的事件名称
      * fn - 解绑事件的对应处理函数
* 面试题 - bind()、one()、live()和on()的区别
                unbind()、die()和 off()的区别
      * one() - 事件绑定,只能绑定一次(触发一次即失效)
      * live() - 事件绑定,为后面添加的元素绑定事件(参考事件委托)
        * jQuery 1.7版本后,被弃用了
        * jQuery 1.7版本后,新增delegate()方法,作用与live()相同
      * bind() - 事件绑定
      * on() - 统一以上所有事件绑定
        * jQuery 1.7版本后,新增
  * 动画
    * 显示与隐藏 - 同时改变宽度和高度

      * show() - 显示

        * show() - 无参版本,没有动画效果
        * show() - 有参版本,具有动画效果
          * 参数 - 预定义slow、normal和fast,自定义的时间(毫秒)
      * hide() - 隐藏
        * hide() - 无参版本,没有动画效果
        * hide() - 有参版本,具有动画效果
          * 参数 - slow、normal和fast预定义,自定义时间(毫秒)
* DOM操作与jQuery操作-1.jpg

      * toggle() - show() + hide()
        * 显示与隐藏的切换效果
上图还可以直接切换为:
* DOM操作与jQuery操作-2.png

    * 滑动效果 - 改变高度
      * slideUp()

        * 注意 - 并没有提供无动画版本(都滑行了还怎么无动画/黑人问号脸)
   * 不传递参数时 - 底层逻辑默认提供一个动画执行的时间
      * slideDown() - 同slideUp
      * slideToggle() - slideUp() + slideDown()
        * 向上滑动与向下滑动的切换效果
参考代码参考显示与隐藏的代码 up!up!up!
    * 淡入淡出 - 改变透明度 - 通过改变不透明度 opacity 来实现显示或者隐藏。
      * fadeIn() - 淡入

      * fadeOut() - 淡出
      * fadeTo(speed, opacity) - 将指定元素的透明度改变到指定值
        * opacity - 表示设置透明度变化到的值 - 0-1的值
      * fadeToggle() - jQuery 1.4版本以后
    * 自定义动画
* animate(params, [duration], [easing], [callback])

        * params - 表示用于实现动画效果的CSS样式属性
* 格式 - Object 类型(以 { },不是 [ ] )
{ name : value, name : value,... }
        * duration - 表示用于实现动画所执行的时长,单位为毫秒
        * easing - 要使用的擦除效果的名称(需要插件支持)
        * callback - 表示动画执行完毕后的回调函数
* animate(params, options)
        * params - 表示用于实现动画效果的CSS样式属性
          * 格式 - Object 类型
            { name : value, name : value,... }
        * options
          * 格式 - Object 类型
          * 选项
            * duration - 表示用于实现动画所执行的时长,单位为毫秒
            * easing - 要使用的擦除效果的名称(需要插件支持)
            * complete - 表示动画执行完毕后的回调函数
            * queue - 为true时排队效果,为false时并发效果
      * 两种用法的效果
并发效果 - 同时改变多个CSS样式属性
- 指的就是多个动画效果同时执行。
           $('#panel').animate({
               left : 400,
               top : 400
           },3000)
        * 排队效果 - 多个CSS样式属性按照先后顺序依次改变
           $('#panel').animate({
               left : 400
           },3000).animate({
               top : 400
           },3000)
* 注意 - 所有与颜色相关的 CSS 样式属性不能使用
        * background-color
        * border-color
        * color

* DOM操作与jQuery操作-3.jpg

* jQuery类数组对象
  * 特点 - 允许存储多个元素,有序排列
  * 属性
    * length - 表示长度,指的是当前存储元素的个数
  * 方法
    * 循环遍历方法
* $().each(function(index,domEle){})

      * $.each(object,function(index,domEle){})
回顾知识点:在jQuery中,也提供了遍历循环。
/*   TODO each(function(index, domEle){})  TODO * 参数 - 回调函数     TODO   function(index, domEle){}  TODO   * index - 表示循环遍历的索引值     TODO   * domEle - (DOM对象)表示循环遍历过程中得到的每个元素  */ /*$opts.each(function(index,domEle){     console.log(domEle.textContent);
[code][/code]
    * toArray()方法
      * 将jQuery对象转换为真正的数组
      * 注意 - 只能操作 jQuery 对象
    * $.inArray(value, array)
      * 作用 - 表示判断指定的值在指定数组中的位置(索引值)
      * 注意
        * 如果数组包含指定的值 - 返回对应的索引值
        * 如果数组不包含指定的值 - 返回固定值 -1
inArray()不能判断对象中是否包含属性或方法
    * $.makeArray(obj)
      * 作用 - 将类数组对象转换为数组对象
      * 注意
        * 类数组对象 - 不仅仅只是指 jQuery 对象,所有类数组对象都可以

* toArray()方法 与 * $.makeArray(obj) 的区别:
* toArray()方法

   将jQuery对象转换为真正的数组
注意 - 只能操作 jQuery 对象
* $.makeArray(obj) :

不仅仅只是指 jQuery 对象,所有类数组对象都可以

* DOM操作与jQuery操作-4.jpg

* JSON格式
* $.parseJSON() - jQuery提供了将JSON字符串转换为JSON对象的方法


       如果将对象转换为JSON字符串:

* DOM操作与jQuery操作-5.jpg

    *  如果你什么都不传入,或者一个空字符串、null或undefined,
     *   parseJSON都会返回 null 。
回顾:在JS中
JSON.parse() 将字符串数组转换为object
JSON.stringify()将对象转换为数组
console.log(JSON.parse(jsonstr));//输出Object
console.log(JSON.stringify(jsonobj));//输出{"name":"wuqing","age":19,"gender":"male"}
* jQuery插件
<!-- TODO 引入插件文件 - 必须先引入jQuery文件再引入插件文件-->

  * 日期插件
    * 基本用法
      * 在HTML页面中引入插件文件
      * 为<input>标签设置 onclick 事件属性,值为 laydate() 方法
    *
  *
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|翁笔

© 2001-2018 Wengbi.com

返回顶部