jQuery 节点操作
- 创建元素：
语法：var $li = $('<li></li>') - 追加元素
• 向父元素最后追加
语法：父元素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');
-
删除元素
jQuery对象.remove(); -
清空元素
- 清空方式1：jQuery对象.empty(); 推荐使用， 清空内部的所有元素及元素相关的事件
empty() 方法，清除所有子节点的同事，清除子节点上的事件 - 清空方式2：jQuery对象.html(''); 仅仅清空内部的元素，不清清理内存中的元素的事件
html() 方法，将参数设置为空字符串
- 克隆元素
jQuery对象.clone(布尔值); 返回克隆好的元素
• 参数：默认是false,表示仅仅克隆内容。 true，克隆内容和事件
jQuery 操作元素的尺寸
-
width() 和 height() 方法
操作的大小仅仅是内容部分
设置：jQuery 对象.width(数字)
获取：jQuery 对象.width() -
innerWidth() 和 innerHeight() 方法：操作的大小是内容部分 + padding
-
outerWidth() 和 outerHeight() 方法：操作的大小是内容部分 + padding + border
jQuery 操作元素的位置
-
获取元素距离文档的位置：jQuery 对象.offset()
• 返回一个对象，对象中包含了元素的位置
• 注意：offset() 方法获取的元素的位置，永远参照文档,和定位没有关系 -
距离上级定位参考元素的位置：jQuery 对象.position()
• 返回的一个对象，对象中包含了元素的位置
• 注意：position() 方法获取的元素的位置,参照最近的定位元素（和定位有关系） -
操作卷去的页面间距
获取：jQuery 对象.scrollTop() 返回值是数字
设置：jQuery 对象.scrollTop(数字)
jQuery 事件操作
-
简单方式注册事件：jQuery 对象.click(事件处理程序)
-
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())
})
- 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)
- 触发事件：jQuery 对象.trigger('事件名');
应用：轮播图的自动播放，轮播图的切换事件给trigger（）方法的参数
jQuery 事件对象
-
事件对象
• 事件处理程序的第一个形参 e -
鼠标事件对象相关的属性
• 事件对象.clientX/Y 参照浏览器
• 事件对象.pageX/Y 参照文档
• 事件对象.offsetX/Y 参照元素 -
键盘事件对象相关的属性
• 事件对象.keyCode 返回键码数字
• 事件对象.altKey/shiftKey/ctrlKey 返回是布尔值。 检测是否按下（true） -
公共的属性或方法
• 属性
事件对象.target 最初触发事件的DOM元素
事件对象.currentTarget 在事件冒泡阶段中的当前DOM元素
• 方法：
事件对象.preventDefault(); 阻止默认行为
事件对象.stopPropagation(); 阻止事件冒泡 -
多库共存问题
关于 $ 冲突的问题
• 解决方案1：jQuery 中不使用 $,使用 jQuery
• 解决方案2：jQuery 库释放 $ 符合的使用权，用其他简单的符号代替
jQuery.noConflict(); 释放 $,把 $ 代表的函数返回给用户，用户可以用其他变量接收
jQuery 插件使用
- 获取插件
• 百度搜索、github搜索
• jQuery 插件库之家：http://www.htmleaf.com - 注意
先引入 jQuery 文件，再引入插件库文件，再去使用
复制源代码或看文档使用
网友评论