jQuery节点操作和元素尺寸以及插件

jQuery 节点操作

1. 创建元素：
   语法：var $li = $('<li></li>')
2. 追加元素
   • 向父元素最后追加
   语法：父元素jQuery对象.append(新创建的jQuery对象);

//$li是创建的元素对象
$("ul").append($li)

语法：新创建jQuery对象.appendTo('父元素选择器' 或 父元素jQuery对象);

// $("ul")父元素选择器
$li.appendTo($("ul"));

• 向父元素最前面追加
语法：父元素jQuery对象.prepend(新创建的jQuery对象);
语法：新创建jQuery对象.prependTo('父元素选择器' 或 父元素jQuery对象);

• 向元素后面追加新的兄弟
语法：jQuery对象.after(新创建的jQuery对象);
语法：新创建jQuery对象.insertAfter('选择器' 或 jQuery对象);

//jQuery对象$li
$("<li>33333333</li>").insertAfter($li);
或
//选择器li
$("<li>33333333</li>").insertAfter('li');

• 向元素前面追加新的兄弟
语法：jQuery对象.before(新创建的jQuery对象);
语法：新创建jQuery对象.insertBefore('选择器' 或 jQuery对象);

//选择器li
$("<li>33333333</li>").insertBefore('li');

3. 删除元素
   jQuery对象.remove();

4. 清空元素

• 清空方式1：jQuery对象.empty(); 推荐使用， 清空内部的所有元素及元素相关的事件
  empty() 方法，清除所有子节点的同事，清除子节点上的事件
• 清空方式2：jQuery对象.html(''); 仅仅清空内部的元素，不清清理内存中的元素的事件
  html() 方法，将参数设置为空字符串

5. 克隆元素
   jQuery对象.clone(布尔值); 返回克隆好的元素
   • 参数：默认是false,表示仅仅克隆内容。 true，克隆内容和事件

jQuery 操作元素的尺寸

1. width() 和 height() 方法
   操作的大小仅仅是内容部分
   设置：jQuery 对象.width(数字)
   获取：jQuery 对象.width()

2. innerWidth() 和 innerHeight() 方法：操作的大小是内容部分 + padding

3. outerWidth() 和 outerHeight() 方法：操作的大小是内容部分 + padding + border

jQuery 操作元素的位置

1. 获取元素距离文档的位置：jQuery 对象.offset()
   • 返回一个对象，对象中包含了元素的位置
   • 注意：offset() 方法获取的元素的位置，永远参照文档,和定位没有关系

2. 距离上级定位参考元素的位置：jQuery 对象.position()
   • 返回的一个对象，对象中包含了元素的位置
   • 注意：position() 方法获取的元素的位置,参照最近的定位元素（和定位有关系）

3. 操作卷去的页面间距
   获取：jQuery 对象.scrollTop() 返回值是数字
   设置：jQuery 对象.scrollTop(数字)

jQuery 事件操作

1. 简单方式注册事件：jQuery 对象.click(事件处理程序)

2. on 方法注册事件

• 注册简单事件语法：jQuery 对象.on('事件名',事件处理程序);

// on() 方法的封装的底层实际是 addEventListener()
$("input").on("click",function () {
    alert(2)
})

• 事件委托的实现：jQuery 对象.on('事件名','选择器',事件处理程序);
选择器：子孙元素
注意：在事件处理程序中，this 代表的是子孙元素（所点最先触发的）

// 原生 DOM 中如何实现事件委托
var ul = document.getElementsByTagName("ul")[0];
ul.onclick = function (e) {
    e.target.style.background = "pink";
};

// jQuery 中的事件委托
// on() 方法传递三个参数
// 参数1： 事件类型
// 参数2： 进行委托的子元素的选择器
// 参数3： 事件处理程序
$("ul").on("click", "li", function () {
    // 在事件委托过程中，事件函数的内部 this 不是指向事件源，而是指向触发事件的 委托子元素
    alert($(this).text())
})

3. off 方法移除事件

• 解绑简单的事件：jQuery 对象.off('click',事件处理程序名称)

// 定义事件处理函数
var fun1 = function () {
    alert(2)
}; 
var fun2 = function () {
    alert(3)
};
// 绑定简单事件
$("input").on("click",fun1)
$("input").on("click",fun2)

// 解绑事件
$("input").off("click",fun2)

• 解绑事件委托注册的事件：jQuery 对象.off('click',‘选择器’,事件处理程序名称)

var fn1 = function () {            
    alert($(this).text())
};
var fn2 = function () {            
    alert($(this).index())
};
// 绑定事件委托的事件
$("ul").on("click", "li", fn1)
$("ul").on("click", "li", fn2)
// 解绑事件委托
$("ul").off("click", "li", fn2)

4. 触发事件：jQuery 对象.trigger('事件名');
   应用：轮播图的自动播放，轮播图的切换事件给trigger（）方法的参数

jQuery 事件对象

1. 事件对象
   • 事件处理程序的第一个形参 e

2. 鼠标事件对象相关的属性
   • 事件对象.clientX/Y 参照浏览器
   • 事件对象.pageX/Y 参照文档
   • 事件对象.offsetX/Y 参照元素

3. 键盘事件对象相关的属性
   • 事件对象.keyCode 返回键码数字
   • 事件对象.altKey/shiftKey/ctrlKey 返回是布尔值。 检测是否按下（true）

4. 公共的属性或方法
   • 属性
   事件对象.target 最初触发事件的DOM元素
   事件对象.currentTarget 在事件冒泡阶段中的当前DOM元素
   • 方法：
   事件对象.preventDefault(); 阻止默认行为
   事件对象.stopPropagation(); 阻止事件冒泡

5. 多库共存问题
   关于 $ 冲突的问题
   • 解决方案1：jQuery 中不使用 $,使用 jQuery
   • 解决方案2：jQuery 库释放 $ 符合的使用权，用其他简单的符号代替
   jQuery.noConflict(); 释放 $,把 $ 代表的函数返回给用户，用户可以用其他变量接收

jQuery 插件使用

1. 获取插件
   • 百度搜索、github搜索
   • jQuery 插件库之家：http://www.htmleaf.com
2. 注意
   先引入 jQuery 文件，再引入插件库文件，再去使用
   复制源代码或看文档使用