1、jQuery操作DOM
1、创建对象
语法:$(“创建的完整标记”);
ex:
1、创建一对div元素
var $div = $("
$div.html("
…
");$div.attr(“id”,“container”);
2、创建一个图像标记
var $img = $("");
img.attr("src","img/a.jpg");2、插入元素1、内部插入作为子元素插入到网页中1、img.attr("src","img/a.jpg"); 2、插入元素 1、内部插入 作为子元素插入到网页中 1、img.attr("src","img/a.jpg");2、插入元素1、内部插入作为子元素插入到网页中1、obj.append(new);将new); 将new);将new元素追加到obj元素的尾部(最后一个子元素)2、obj元素的尾部(最后一个子元素) 2、obj元素的尾部(最后一个子元素)2、obj.prepend(new);将new); 将new);将new元素添加到obj元素的头部(第一个子元素)2、外部插入作为兄弟元素插入到网页中1、obj元素的头部(第一个子元素) 2、外部插入 作为兄弟元素插入到网页中 1、obj元素的头部(第一个子元素)2、外部插入作为兄弟元素插入到网页中1、obj.before(new)将new) 将new)将new作为obj的上一个兄弟元素插入进来2、obj的上一个兄弟元素插入进来 2、obj的上一个兄弟元素插入进来2、obj.after(new)将new) 将new)将new作为obj的下一个兄弟元素插入进来3、删除节点1、remove()语法:obj的下一个兄弟元素插入进来 3、删除节点 1、remove() 语法:obj的下一个兄弟元素插入进来3、删除节点1、remove()语法:obj.remove();
作用:删除 obj元素2、remove("selector")语法:obj 元素 2、remove("selector") 语法:obj元素2、remove("selector")语法:obj.remove(“selector”);
作用:将满足 selector 选择器的元素删除出去
3、empty()
语法:obj.empty()作用:清空obj.empty() 作用:清空obj.empty()作用:清空obj内的内容
4、遍历节点
1、children() / children(selector)
作用:获取某对象中的子元素(只考虑元素节点)或满足selector选择器的子元素(只考虑元素节点)。
注意:只能获取子元素,不能获取后代元素
2、next() / next(selector)
作用:获取某对象的下一个兄弟元素 / 满足selector的下一个兄弟元素
3、prev() / prev(selector)
作用:获取某对象的上一个兄弟元素 / 满足selector的上一个兄弟元素
4、siblings() / siblings(selector)
作用:获取某对象的所有兄弟元素 / 满足selector的兄弟元素
5、find(selector)
查找满足selector选择器的所有后代元素
6、parent()
作用:获取某对象的父元素
2、jQuery事件处理
1、页面加载后的执行
在DOM树加载完成后就要执行的操作
1、
$(document).ready( function(){
//页面的初始化操作
//DOM树加载完毕后就开始运行
} );
2、
$().ready( function(){
} );
3、
$( function(){
});
2、jQuery的事件绑定
1、方式1
$obj.bind("事件名称",事件处理函数);
ex:
$obj.bind("click",function(){
alert("单击事件");
});
2、方式2
$obj.事件名称(事件处理函数);
ex:
$obj.click(function(){
});
注意:
在事件处理函数中,允许使用 this 来表示触发当前事件的DOM对象
事件参数对象(事件对象):
1、获取事件对象
1、
function btnClick(event){
}
2、
<button id="btnTest"></button>
var btn = document.getElementById("btnTest");
btn.onclick = function(event){
event : 表示当前事件的事件对象
}
2、事件对象的属性
1、offsetX
获取鼠标所操作的点的 横坐标值
2、offsetY
获取鼠标所操作的点的 纵坐标值
3、target
获取事件源(事件所在的元素)
this:
1、this 在全局函数中,永远都表示的是 window 对象
2、this 在局部函数中,表示都是函数的所有者
btn.onclick = function(){
this:表示的就是函数的所有者 -> btn
}
node.childNodes
node.children
node.nextSibling
node.previousSibling
node.parentNode