js►JQuery

03-节点操作,val,宽高,滚动,on注册

jquery节点操作

创建节点

$()里面放html标签字符串

添加节点

append 往父级元素内部的最后面追加子元素

1
2
// parantNode.append(childNode)
p.append(a)

appendTo 子元素追加到父级元素内部的最后面

1
2
// childNode.appendTo(parentNode)
a.appendTo(p)

prepend 往父级元素内部的最前面追加子元素

1
2
// parantNode.prepend(childNode)
p.prepend(a)

prependTo 子元素追加到父级元素内部的最前面

1
2
// childNode.prependTo(parantNode)
a.prependTo(p)

before 追加到元素的前面(同级)

1
2
3
 var siblingDiv = $("<div class='siblingDiv'></div>")
// 原有的元素.before(新加元素)
 div.before(siblingDiv)

after 追加到元素后面(同级)

1
2
// 原有的元素.after(新加元素)
 div.after(siblingDiv)

删除和清空节点

remove()

  1. 删除自身，内部子元素一并删除

empty()

  1. 清空内部所有元素，不包括自身

克隆节点

clone()

  1. 参数默认false
  2. 参数false：克隆标签元素等
  3. 参数true：深度克隆 包括事件

jquery特殊属性操作

val()

设置和获取表单元素的值，如text，textarea等等

html()和text()

  1. html() 相当于 innerHtml
  2. text() 相当于 innerText

width(),height(),innerWidth(),outerWidth(),innerHeight(),outerHeight()

width()

  1. 无参数：获取元素width
  2. 有Number类型参数：设置width

innerWidth()

  1. 获取元素panding和width

outerWidth()

  1. 无参数，参数默认是false时：获取元素pading和border和width
  2. 参数是true时：获取元素pading和border和width和margin

height()

  1. 无参数：获取元素高度
  2. 有Number类型的参数:设置height

innerHeight()

  1. 获取元素padding和height

outerHeight()

  1. 无参数，默认参数是false时： 获取元素padding和border和height
  2. 参数是true时：获取元素padding和border和height和margin

scrollTop()和scrollLeft()

  1. scrollTop() 获取被卷曲的高度, 可设置卷曲高度
  2. scrollLeft() 获取被卷曲的宽度，可设置卷曲高度

js相关的屏幕滚动

  1. window.pageYOffset
  2. window.pageXOffset
  3. 以屏幕左上角为基准获取卷曲宽高—-只读
  4. document.documentElement.scrollTop
  5. document.documentElement.scrollLeft
  6. 这两个属性可读可写
  7. $(window) 不支持的动画,可用$(‘html’)

position()和offset()

  1. offset方法和position方法都是用来获取盒子的位置的 left和top
  2. offset() 相对于文档的位置 返回对象 {left:100,top:100}
  3. position() 获取相对于自身最近的父元素的位置 offsetLeft和offsetTop
  4. 都是返回一个对象

事件注册

简单注册方式

click(func) / mouseenter(handler) / mouseleave(handler)
缺点: 不能注册多个事件

bind注册 (内部是on实现)

$("p").bind("click mouseenter", function(){});
缺点：不支持动态事件绑定

delegate 事件委托(内部是on实现)

  1. 让某一个元素做代理，代处理后代中某一类元素的事件
  2. 核心原理:利用事件冒泡，只指定一个事件(绑定给父级)处理程序来管理某一类型的所有事件(绑定给后代)。
    1
    2
    3
    4
    5
    6
    // 第一个参数：selector，要绑定事件的元素
    // 第二个参数：事件类型
    // 第三个参数：事件处理函数
    $(".parentBox").delegate("p", "click", function(){
        // 给.parentBox下面的所有的p标签绑定事件
    });
    缺点：只能注册委托事件

on注册事件

  1. jQuery1.7之后，jQuery用on统一了所有事件的处理方法。
  2. 最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。

on注册简单事件

1
2
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
 $(selector).on( "click", function() {});

on注册委托事件

1
2
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click",“span”, function() {});

on注册事件的语法

1
2
3
4
5
6
7
8
9
10
11

   // on() 注册方式 jquery1.7版本之后，统一注册方式
   // jquery对象.on("click mouseenter",function(){}) // 自己执行 相当于 bind()
   // jquery父级对象.on("click mouseenter","后代元素的选择器"，{data},function(e){}) // 相当于注册委托事件
           
  // 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件
  // 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将由自己执行。
  // 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
  // 第四个参数：handler，事件处理函数

$(selector).on(events,[selector],[data],handler);