一、页面加载

1.页面加载顺序:先加载<head></head>之间的内容,然后加载<body></body>之间的内容

直接在head之间书写jquery代码,浏览器会立即执行脚本。但是由于页面元素在body部分才出现,此时尚未加载,所以jquery操作无法应用到页面元素上

解决方法:

将代码放到$(function(){

        代码代码;

      })

说明:$(function(){})函数等到页面加载完毕之后执行。相当于onload事件

2.onload事件和$(document).ready()区别

  1.window.onload:

    bunn个同时写多个window.onload,没法简化写法

  2.$(document).ready(function()):

    能同时多个编写,写多个时,全部执行:

    简化写法$(function(){});

二、绑定事件

1.bind()方法:

  语法:bind("事件名称 事件名称",处理函数());

2.事件移除:unbind()方法:

  $("p").click(function(){

    $("#btn").unbind("mouseover");

  })

3.事件绑定one()方法:对于只需要触发一次,随后要立即移除绑定事件的情况,可以使用更为方便的one方法。

  $("p").one("click",function(){})

4.模拟触发:trigger()

  $("p").trigger("click");

5.triggerHandler与trigger的区别

  1.triggerHandler不会触发默认浏览器默认事件。比如:输入文本框获得焦点事件focus浏览器会自动带蓝色框。而triggerHandler不会触发浏览器默认的focus事件,只触发内置的focus事件

  2.triggerHandler只触发qjuery对象集合中第一个元素的事件处理函数。

  3.triggerHandler方法的返回的是事件处理函数的返回值

三、事件委派

  live();die();但是被废弃

  统一使用:

  on();off()

四、阻止默认行为的方法:

  $("a").click(function(event){

    event.preventDefault();

    $(this).next("span").text("阻止了a元素的默认行为");

五、阻止事件冒泡:stopPropagation()

  $("a").click(function(e){

    e.stopPropagation();

  })

  })

重要:阻止事件冒泡和默认行为的方法:在函数中书写:return false;

六、时间对象的发生位置和发生时间

  $("p").mousemove(function(event){

    $("p:eq(0)").text("移动鼠标相对页面的坐标"+event.pageX+","+event.pageY());//event.pageX和event.pageY鼠标相对于元素的坐标。

  })

javascript-jquery对象的事件处理的更多相关文章

  1. JavaScript 对象、DOM对象、jquery对象的区别、转换详解

    一.JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 访问对象的属性: [javascrip ...

  2. javascript --- jQuery --- Deferred对象

    javascript --- jQuery --- Deferred对象 javascript的函数式编程是多么引人入胜,jQuery使代码尽可能的精简,intelligent! defer - 必应 ...

  3. jquery对象和javascript对象相互转换

    本文转载:http://jeiofw.blog.51cto.com/3319919/786506 jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuer ...

  4. JavaScript DOM对象和JQuery对象相互转换

    1.分析源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  5. javascript 第26节 jQuery对象

    <html> <head> <title>jQuery</title> <!--导入jquery库--> <script type=& ...

  6. javascript DOM对象转jquery对象

    首先,假设一种情形:要在HTML文件中为一个select对象添加一个函数,这个函数的名字叫dynamic_change(this),当select的option被改变的时候调用onchange事件来处 ...

  7. JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)

    一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...

  8. 使用Javascript/jQuery将javascript对象转换为json格式数据 - 海涛的CSDN博客 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  9. 【JQuery】jquery对象和javascript对象即DOM对象相互转换

    jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法:例如: $(&quo ...

  10. jquery对象和javascript对象的console.log结果

    array.push($("div").children("label")); console.log(array); 输出: 这个是jquery对象,如果在选 ...

随机推荐

  1. tomcat漏洞总结

    描述 Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由Apache.Sun 和其他一些公司及个人共同开发而成.由 ...

  2. MySQL(四)——

    MySQL官方对索引的定义:索引(Index)是帮助MySQL高效获取数据的数据结构.因此索引的本质就是数据结构.索引的目的在于提高查询效率,可类比字典.书籍的目录等这种形式. 可简单理解为" ...

  3. kubeadm方式搭建K8S集群

    一.kubeadm介绍 二.安装要求 三.集群规划 四.环境初始化(在每个服务器节点操作) 1.关闭防火墙 2.关闭selinux 3.关闭swap 4.根据规划设置主机名 5.在Master添加ho ...

  4. MySQL——MySQL客户端命令

    1. mysql: (1)用于数据库连接 (2)用于管理数据库: a: 命令接口自带命令 b: SQL语句: DDL: 数据库定义语言 DCL: 数据库控制语言 DML: 数据库操作语言 2. mys ...

  5. Java并发知识总结,超详细!

    首先给大家分享一个github仓库,上面放了200多本经典的计算机书籍,包括C语言.C++.Java.Python.前端.数据库.操作系统.计算机网络.数据结构和算法.机器学习.编程人生等,可以sta ...

  6. Docker(41)- Portainer 可视化面板安装

    Portainer docker run -d -p 8080:9000 \ --restart=always -v /var/run/docker.sock:/var/run/docker.sock ...

  7. RDS导入注意事项

    1)导入文件大小不超过100M,支持格式有CSV.SQL.ZIP 2)sql文件需注释如下内容: SET @@SESSION.SQL_LOG_BIN=0 ; SET @@GLOBAL.GTID_PUR ...

  8. Element UI:级联选择器Cascader_动态加载_多级请求不同接口(已知第一级调取第二级)

    ELEMENT UI_CASCADER 使用过饿了么级联动态加载的小伙伴应该都知道,lazyLoad本身是一个无差别返回渲染结点的函数. 当我们存在一个需求:已知级联选择器的第一级结点,现在需要通过第 ...

  9. el-upload + accept限制上传的文件格式

    /**  * kevin 2021/1/4  * @description el-upload + accept限制上传的文件格式  * @param e 校验的类型  * @returns {str ...

  10. java 基础语法学习01

    Java基础语法 注释 初次使用idea时相关配置 new project ->Empty project->进入页面 再选择file->project structure-> ...