jQuery学习笔记（三）

jQuery中的事件

页面加载

原生DOM中的事件具有页面加载的内容onload事件，在jQuery中同样提供了对应的内容ready()函数。

ready与onload之间的区别：

onload	ready
没有简写方式	具有简写方式
当HTML页面所有内容加载完毕后才执行onload	当DOM节点加载完毕后就执行ready
一个HTML页面只能编写一个onload	一个HTML页面允许同时编写多个ready

ready()的编写方式：

$(document).ready(function(){});
$().ready(function(){});
$(function(){});

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>onload事件机制</title>

       <script src="js库/jquery-1.11.3.js"></script>

       <script>

           /*

         window.onload = function(){

             var user = document.getElementById("user");

         }*/

         /*$(document).ready(function(){

             console.log($("#user").val());

         });*/

         /*$().ready(function(){

             console.log($("#user").val());

         });*/

         $(function(){

             console.log($("#user").val());

         });

       </script>

 </head>

 <body>

       <input type="text" id="user" value="张无忌">

 </body>

 </html>

事件绑定

jQuery中提供了事件绑定与解绑机制，类似于原生DOM中的addEventListener()方法。

jQuery的事件绑定：

单事件绑定

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>012_实现伸缩二级菜单</title>

     <script src="js库/jquery-1.11.3.js"></script>

     <style>

         li {

             list-style: none;

         }

         li span {

             padding-left: 20px;

             cursor: pointer;

         }

         .open {

             background: url("img/minus.png") no-repeat center left;

         }

         .closed {

             background: url("img/add.png") no-repeat center left;

         }

         .show {

             display: block;

         }

         .hide {

             display: none;

         }

     </style>

 </head>

 <body>

     <ul class="tree">

         <li>

             <span class="open">考勤管理</span>

             <ul class="show">

                 <li>日常考勤</li>

                 <li>请假申请</li>

                 <li>加班/出差</li>

             </ul>

         </li>

         <li>

             <span class="closed">信息中心</span>

             <ul class="hide">

                 <li>通知公告</li>

                 <li>公司新闻</li>

                 <li>规章制度</li>

             </ul>

         </li>

         <li>

             <span class="closed">协同办公</span>

             <ul class="hide">

                 <li>公文流转</li>

                 <li>文件中心</li>

                 <li>内部邮件</li>

                 <li>即时通信</li>

                 <li>短信提醒</li>

             </ul>

         </li>

     </ul>

     <script>

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

             if($(this).hasClass("open")){

                 $(this).attr("class", "closed");

                 $(this).next().attr("class", "hide");

             }else{

                 $(this).attr("class", "open");

                 $(this).next().attr("class", "show");

             }

         });

     </script>

 </body>

 </html>

多事件绑定

 <!DOCTYPE html>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title>015_图片提示</title>

     <!--   引入jQuery -->

     <script src="js库/jquery-1.11.3.js" type="text/javascript"></script>

     <style type="text/css">

         body {

             margin: 0;

             padding: 40px;

             background: #fff;

             font: 80% Arial, Helvetica, sans-serif;

             color: #555;

             line-height: 180%;

         }

         img {

             border: none;

         }

         ul, li {

             margin: 0;

             padding: 0;

         }

         li {

             list-style: none;

             float: left;

             display: inline;

             margin-right: 10px;

             border: 1px solid #AAAAAA;

         }

         /* tooltip */

         #tooltip {

             position: absolute;

             border: 1px solid #ccc;

             background: #333;

             padding: 2px;

             display: none;

             color: #fff;

         }

     </style>

 </head>

 <body>

     <h3>有效果：</h3>

     <ul>

         <li><a href="img/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="img/apple_1.jpg" alt="苹果 iPod"/></a></li>

         <li><a href="img/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="img/apple_2.jpg" alt="苹果 iPod nano"/></a></li>

         <li><a href="img/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="img/apple_3.jpg" alt="苹果 iPhone"/></a></li>

         <li><a href="img/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="img/apple_4.jpg" alt="苹果 Mac"/></a>

         </li>

     </ul>

     <script type="text/javascript">

         var x = 10, y = 20, title;

         $("ul>li>a[class=tooltip]").mouseover(function(event){

             title = this.title;

             this.title = '';

             // 获取大图片的文件路径

             var src = this.href;

             // 创建用于显示大图片的元素

             var $div = $("<div id='tooltip'><img src='" + src + "'><br>" + title + "</div>");

             // 添加到页面中

             $("body").append($div);

             // 调整位置 -- 鼠标坐标值

             $("#tooltip").css({

                 "top": event.pageY + y,

                 "left": event.pageX + x

             }).show();

         }).mousemove(function(event){

              $("#tooltip").css({

                 "top": event.pageY + y,

                 "left": event.pageX + x

             });

         }).mouseout(function(){

             this.title = title;

             $("#tooltip").remove();

         });

     </script>

 </body>

 </html>

事件对象

什么是事件对象

事件是一种JavaScript结构，它会在元素获得处理事件的机会时被传递给被调用的事件处理程序。这个对象中包含与事件相关的信息，也提供了可以影响事件在DOM中传递进程的一些方法。

事件对象的常用属性

srcElement/target : 事件源对象
eventPhase : 事件所处的传播阶段
clientX/offsetX/pageX/screenX/x：事件发生的X坐标
clientY/offsetY/pageY/screenY/y：事件发生的Y坐标
which/keyCode/charCode : 键盘事件中按下的按键
button：鼠标哪个按键被按下了
cancelBubble ：是否取消事件冒泡
returnValue : 是否阻止事件默认行为

阻止默认行为

所谓默认行为，就是指页面中默认具有的一些行为，例如表单提交、连接跳转等效果。

event.preventDefault();
return false;

与其他JS库共存

第一种方式

 /*

   * 先引入其他JS库,后引入jQuery

   * * "$"符号属于其他JS库

   * 解决冲突

   * * jQuery中 - "$"符号指代jQuery

   * * jQuery中不再使用"$"符号

   */

 jQuery(document).ready(function(){

     console.log("this is ready.");

 });

第二种方式

 jQuery(document).ready(function($){

     // 在当前函数中使用"$"符号 - jQuery

 });

 // "$"符号 - 其他JS库

第三种方式

 (function($){

     // "$"符号 - jQuery

 })(jQuery);

 // "$"符号 - 其他JS库

第四种方式

jQuery.noConflict();

jQuery(function($){

    console.log($("p").text());

});

第五种方式

 jQuery.noConflict();

 (function($){

     console.log($("p").text());

 })(jQuery);

jQuery学习笔记（三）的更多相关文章

jquery学习笔记(三)：事件和应用
内容来自[汇智网]jquery学习课程 3.1 页面加载事件在jQuery中页面加载事件是ready().ready()事件类似于就JavaScript中的onLoad()事件,但前者只要页面的DO ...
jQuery学习笔记三
使用fadeIn()js解释器会将所选元素的CSS opacity属性从0改为100,fadeTo()会动画显示所选元素,将它为改为某个特定的透明度百分比,使用fadeOut()js解释器会将所选元素 ...
初步学习jquery学习笔记（三）
jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...
jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点基本选择器层次选择器过滤选择器表单选择器第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
jQuery 学习笔记
jQuery 学习笔记一.jQuery概述宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
jQuery学习笔记（一）：入门
jQuery学习笔记(一):入门一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器和并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下本文实例讲述了j ...
jQuery学习笔记之jQuery的Ajax（3）
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...
jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...

随机推荐

Eclipse调试Java程序技巧
主要步骤.Debug As"->"Java Application".双击设置断点,F5是跳进,F6是执行下一步,F7是跳出在看这篇文章前,我推荐你看一下Ecli ...
浏览器默认标签样式总结及css初始化程序
html中的大部分的标签都有一些糟糕的样式,有的是标签天然自带的,有的是浏览器默认设置的,我们在写网页时,这些默认的样式就会时不时的跳出来捣一下乱,搞得我们很是无奈.所以成手在写css样式时,一般都会 ...
sql语句去重最后部分没看看1 有用
一数据库 1．常问数据库查询.修改(SQL查询包含筛选查询.聚合查询和链接查询和优化问题,手写SQL语句,例如四个球队比赛,用SQL显示所有比赛组合:举例2:选择重复项,然后去掉重复项:) 数据库里 ...
qboimathtest1 t1 魔法串
题目小 N 最近在沉迷数学问题. 对于一个数字串 S,如果可以将它划分成两个数字 A.B,满足: 1. S=AB. 2. A.B 均不包含前导 0. 3. B 是 A 的倍数,且B / A是完全立方 ...
8.Struts2-057漏洞复现
漏洞信息: 定义XML配置时如果namespace值未设置且上层动作配置(Action Configuration)中未设置或用通配符namespace时可能会导致远程代码执行. url标签未设置va ...
痞子衡嵌入式：恩智浦i.MX RTxxx系列MCU特性介绍（2）- RT685EVKA性能实测(Dhrystone)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RTxxx系列MCU的性能. 在前面的文章 i.MXRTxxx微控制器概览里,痞子衡给大家简介过恩智浦半导体在2018 ...
Listener、Filter、Servlet的创建及初始化顺序
一.创建顺序 1.web.xml文件中的加载顺序为:listener-filter-servlet 2.如果web.xml中配置了<context-param>,初始化顺序: contex ...
mariadb yum安装
安装 yum install mariadb mariadb-server -y 启动 systemctl start mariadb systemctl enable mariadb 安全安装 # ...
codeforces1016 D. Vasya And The Matrix（思维+神奇构造）
D. Vasya And The Matrix time limit per test 2 seconds memory limit per test 256 megabytes input stan ...
An internal error occurred during: "Add Deployment". Container with path org.eclipse.jdt.launching.
导入非本机项目出现这种错误,原因就是JDK版本不一致. 具体解决步骤如下: 右键项目名→Properties→JavaBuild Path→Libraries→选中JRE SystemLibrary[ ...