jQuery之操作节点/获取元素位置

//今天回顾一下jQuery如何操作节点和获取元素位置。

• jQuery 的节点操作

创建节点  => 对应原生 js 里面的 createElement()
          用法： $(“html 格式的文本”) => $("<div>aha</div>")
          
插入节点  => 对应原生 js 里面的 appendChild()
  		//父子关系
           1. 页面元素.append(要插入的元素)
           2. 要插入的元素.appendTo(页面元素)
           3. 页面元素.prepend(要插入的元素)
           4. 要插入的元素.prependTo(页面元素)
         //兄弟关系
            1. 页面元素.after(要插入的元素)
            2. 要插入的元素.insertAfter(页面元素)
            3. 页面元素.before(要插入的元素)
            4. 要插入的元素.insertBefore(页面元素)
         
删除节点 => 对应原生 js 里面的 removeChild()
          1. 页面元素.empty() -> 把自己变成空标签
          2. 页面元素.remove() -> 把自己移除

替换节点 => 对应原生 js 里面的 replaceChild()
          1. 页面元素.replaceWith(替换元素)
          2. 替换元素.replaceAll(页面元素)
         
克隆节点=> 对应原生 js 里面的 cloneNode()
         1. 元素.clone(boolean,boolean)
       		//第一个参数: 自己的事件是否克隆 , 第二个参数: 子节点的事件是否克隆
         	//不管你是否传递参数, 都会把所有后代元素都克隆下来

---

• jQuery 获取元素尺寸

	  1. width() 和 height()
		=> 获取元素的 内容 区域的尺寸
	  2. innerWidth() 和 innerHeight()
	    => 获取元素的 内容 + padding 区域的尺寸
	  3. outerWidth() 和 outerHeight()
	    => 获取元素的 内容 + padding + border 区域的尺寸
	  4. outerWidth(true) 和 outerHeight(true)
	    => 获取元素的 内容 + padding + border + margin 区域的尺寸

---

• jQuery 获取元素位置

	  1. offset() : 读取或设置当前元素相对于页面位置的偏移量，返回值是一个对象 { left: xxx, top: xxx }
           //传递一个对象就是写入 { left: xxx, top: xxx },该方法不管你本身和页面的尺寸是什么样，写多少就是多少
        2. position() postition: 获取元素相对于定位父级的位置关系 返回值是一个对象 { left: xxx,  top: xxx }
            //该方法只读，如果你写的是 right 或者 bottom, 会自动计算成 left 和 top 值给你

---

• jQuery 获取卷去的尺寸

	1. scrollTop()=> 原生 js 里面 document.documentElement.scrollTop
          => 读写的方法
          => 不传递参数的时候就是获取卷去的高度
          => 传递一个参数就是设置卷去的高度
    2. scrollLeft() => 原生 js 里面 document.documentElement.scrollLeft
          => 读写的方法
          => 不传递参数的时候就是获取卷去的宽度
          => 传递一个参数的时候就是设置卷去的宽度

• jQuery 的动画

标准动画
	1. show()
	2. hide()
	3. toggle()
折叠动画
	1. slideDown()
	2. slideUp()
	3. slideToggle()
 渐隐渐显动画
	1. fadeIn()
	2. fadeOut()
	3. fadeToggle()
	4. fadeTo()
 综合动画
	1. animate()
	// animate({ /* 这里写css属性，tranform和颜色不可用*/ }, 时间, 运动曲线, 运动结束的函数)
 停止动画
	1. stop()
	// 当这个函数触发的时候, 就会让运动立刻停下来,你运动到哪一个位置了就停止在哪一个位置
	2. finish()
	// 当这个函数触发的时候, 就会让运动立刻停下来, 不管你运动到了哪一个位置, 瞬间到达运动完成位置