PythonWeb_jQuery_15_bj

本文详细介绍jQuery如何创建、插入、删除DOM元素,包括内部和外部插入的不同方法,以及如何遍历节点。同时,深入探讨jQuery事件处理机制,如页面加载后执行、事件绑定和事件对象的使用。

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");211obj.append(new);将new); 将new);new元素追加到obj元素的尾部(最后一个子元素)2、obj元素的尾部(最后一个子元素) 2、obj()2obj.prepend(new);将new); 将new);new元素添加到obj元素的头部(第一个子元素)2、外部插入作为兄弟元素插入到网页中1、obj元素的头部(第一个子元素) 2、外部插入 作为兄弟元素插入到网页中 1、obj()21obj.before(new)将new) 将new)new作为obj的上一个兄弟元素插入进来2、obj的上一个兄弟元素插入进来 2、obj2obj.after(new)将new) 将new)new作为obj的下一个兄弟元素插入进来3、删除节点1、remove()语法:obj的下一个兄弟元素插入进来 3、删除节点 1、remove() 语法:obj31remove()obj.remove();
作用:删除 obj元素2、remove("selector")语法:obj 元素 2、remove("selector") 语法:obj2remove("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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值