jQuery事件处理,节点

事件处理:

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对象的父元素

原文地址:https://www.cnblogs.com/1500418882qqcom/p/10258936.html

时间: 2024-11-05 23:33:36

jQuery事件处理,节点的相关文章

Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作

一.创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div>"; $('body').append(box); //将节点插入到<body>元素内部 二.插入节点 jQuery 提供了好几种个方法来插入节点: 1.内部插入节点方法  方法名 描述 append(content) 向指定元素内部后面插入节点 content append(func

jQuery节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作

一.创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div>"; 2 $('body').append(box); //将节点插入到<body>元素内部 二.插入节点jQuery 提供了好几种个方法来插入节点:1.内部插入节点方法  方法名 描述 append(content) 向指定元素内部后面插入节点 content append(fu

Unit02: jQuery事件处理 、 jQuery动画

Unit02: jQuery事件处理 . jQuery动画 jQuery实现购物车案例 <!DOCTYPE html> <html> <head> <title>购物车</title> <meta charset="utf-8" /> <style type="text/css"> h1 { text-align:center; } table { margin:0 auto; wi

JS添加节点方法与JQuery添加节点方法的比较及总结

原生JS添加节点方法与JQuery添加节点方法的比较及总结 一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="div2">div2 <span id="span1">span1</span> <span id="span2">span2</span> <

jquery 遍历节点

1.jquery 遍历节点时如果,这些节点是随时更新的就要这样通过选择器获取节点: self.modelSlide.find('li').eq(0).appendTo(self.modelSlide); 2. 当有动画播放时,如果不想点击按钮频繁点击时,要设置开关 self.isclick = false;      //默认是可以点击 self.prevBtn.on('click',function(){ if(self.isclick) return;    //如果他已经存在就让他跳出 s

事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,甚至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层级的最顶层,即document对象(有些浏览器是window).. 二.事件冒泡的作用 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元

js、jquery对节点的操作(增、删)

js对节点的操作方法 一.获取 1.父节点的获取 某节点的parentNode属性值即为该节点的父节点.示例: var parent = document.getElementById("one").parentNode; 2.兄弟节点的获取 nextElementSibling和nextSibling属性配合使用. 某节点的nextElementSibling属性值是该节点后面紧邻的兄弟节点,但是这个有兼容性,在ie9以上版本(包含ie9)和其他浏览器,结果是我们想要的弟节点,在ie

jQuery 复制节点的元素实现添加到购物车功能

描述: 用户点击左边div中的商品,对应商品会自动添加到右面的div中,类似电子商城中的添加到购物车功能. 主要用到了jquery中的复制节点功能,基本原理是首先获取点击的元素,然后将相应信息进行克隆,然后添加到右面的div中. 效果如果: show you code: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery test</tit

jQuery事件处理(一)

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>jQuery 事件处理(一)</title> 6 <script type="text/javascript" src="jquery-1.7.2.min.js"></script> 7 <script ty

jquery 事件处理handler函数的参数

jquery 事件处理handler函数的参数  在如下的函数中,我们在处理jquery里经常使用: $( "#foo" ).bind( "click", function() { alert( $( this ).text() ); }); click的handler处理函数一般为function(){},不传参数.那么,这个函数可以接收参数么,内置了什么对象,有什么返回值,怎么获得事件绑定的对象? 1.第一个参数event对象,在function函数里,实际上第