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

时间: 01-11

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

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事件处理

1.使用jQuery实现事件绑定 语法: $obj.bind(事件类型,事件处理函数) 如: $obj.bink('click',fn); 简写形式 $obj,click(fn); 注: $obj.click()则代表触发了click事件. 2.获得事件对象event 只需要为事件处理函数传递任意一个参数 如: $obj.click(function(e){...}) e就是事件对象,但已经经过jQuery对底层事件对象的封装 封装后的事件对象可以方便的兼容各浏览器 3.事件对象常用的属性 获取

jQuery DOM 节点操作

DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面中的元素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建.插入.替换.克隆.删除等等一些列的元素操作. 一.创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. $('div').append('<strong>节点</strong>'); //向 div 内部插入 strong 节点 $('di

jquery事件处理函数的参数问题:event对象和自定义参数

jquery中如果需要给按钮绑定click事件处理函数,那么我们可以使用如下的代码: $("#button1").click( function() { alert("I was clicked."); } ); 一般我们都会按照上面的写法,注册事件处理函数,很少给处理函数传递参数.但是如果我们需要事件更详细的信息,比如事件发生时鼠标的位置等,那么我们就必须要使用事件对象了. 在IE和FF浏览器下,我们可以使用event对象拿到更多的信息.在jquery中拿到eve

jQuery遍历节点方法汇总

1.children()方法:$('div').children()---遍历查找div元素的所有子元素节点 1 <p>Hello</p> 2 <div> 3 <span>Hello Again</span> 4 <p class="box">您好!</p> 5 </div> 6 <p>And Again</p> 7 8 <script type="t

jQuery自学笔记(四):jQuery DOM节点操作

获得和设置内容:text( ).html( ) 以及 val( ) text( ) - 设置或返回所选元素的文本内容 html( ) - 设置或返回所选元素的内容(包括 HTML 标记) val( ) - 设置或返回表单字段的值 例子: $("#btn1").click(function(){   $("#test1").text("Hello world!"); }); $("#btn2").click(function()

jQuery DOM节点的插入

<div>A</div> var B=$("<p></p>"); append:在A内部末尾插入元素B(A.append(B)); appendTo:将B插入A内部末尾(B.appendTo(A)); prepend:在A内部前面插入元素B(A.prepend(B)); prependTo:将B插入A内部前面(B.prependTo(A)); after:在A外部末尾插入B(A.after(B)); before:在A外部前面插入B(A.

JavaScript之jQuery-4 jQuery事件(页面加载后执行、事件处理、事件冒泡、事件对象、模拟操作)

一.jQuery 页面加载后执行 代码执行的时机选择 - $(document).ready()方法和 window.onload事件具有相似的功能,但是在执行时机方面是有区别的 - window.onload 事件是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行 - $(document).ready()方法注册的事件处理程序,在DOM完全加载后就可以调用 - 一般来讲, $(document).ready()的执行要优于window.onload事件 - 需要注意的是,