jQuery事件处理，节点

Posted 2021-02-02 1500418882qqcom

事件处理：

1、页面加载后的执行

　　类似于window.onload 但不同于 window.onload

　　jQuery加载后执行的特点：

　　在DOM树加载完毕的时候就开始执行

　　　　$(document).ready( function(){

　　　　//页面的初始化操作

　　　　//DOM树加载完成后就开始运行

　　　　} );

 

　　　　$().ready( function(){

　　　　//页面的初始化操作

　　　　//DOM树加载完成后就开始运行

　　　　} );

 

　　　　$( function(){

　　　　//页面的初始化操作

　　　　//DOM树加载完成后就开始运行

　　　　} );

 

2、jQuery的事件绑定

方式1

$obj.bind("事件名称",事件处理函数);

ex:

　　$obj.bind("click",function(){

　　//事件的行为操作

　　console.log("... ....");

　　});

 

方式2

　　$obj.事件名称(function(){

　　//事件处理函数
　　});

　　ex:
　　　　$obj.click(function(){
　　　　//通过 this 来表示触发该事件的DOM对象
　　　　});

3、事件对象 - event

在绑定事件的时候，允许传递 event 参数来表示事件对象

　　$obj.bind("click",function(event){
　　//event表示当前事件的事件对象
　　});

　　$obj.click(function(event){
　　//event表示当前事件的事件对象
　　});

　　event的使用方式与原生JS事件中的event使用方式一致。
　　event.stopPropagation() : 阻止事件冒泡
　　event.offsetX:
　　event.offsetY:
　　event.target:获取事件源

 

 

节点：

1、children() / children("selector")

　　获取某jQuery对象的所有子元素 或 带有指定选择器的子元素

　　注意：只考虑子代元素，不考虑后代元素

2、next() / next("selector")

　　获取某jQuery对象的下一个兄弟元素 / 满足selector的下一个兄弟元素

3、prev() / prev("selector") 

　　获取某jQuery对象的上一个兄弟元素 / 满足selector的上一个兄弟元素

4、siblings() / siblings(selector)

　　获取某jQuery对象的所有兄弟元素 / 满足selector的所有兄弟元素

5、find("selector")

　　查找满足selector选择器的所有后代元素

6、parent()

　　查找某jQuery对象的父元素