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 ...

随机推荐

sharepoint SDDL 字符串包含无效的SID或无法转换的SID
安装过程中出现以下错误采用独立模式安装Sharepoint Server 2013/Foundation 2013,在进行配置向导的时候会碰到这样的错误 System.ArgumentExcepti ...
PopupWindow-----listview item的点击出现PopupWindow
/** * 设置listview item的点击事件 */ lv_app_manager.setOnItemClickListener(new OnItemClickListener() { @Ove ...
linux下将编译错误输出到一个文本文件
linux下将编译错误输出到一个文本文件 command > filename 把把标准输出重定向到一个新文件中 command > > filename 把把标准输出重定向到一个文 ...
uva 10934 Dropping water balloons
你有k个一模一样的水球,在一个n层楼的建筑物上进行测试,你想知道水球最低从几层楼往下丢可以让水球破掉.由于你很懒,所以你想要丢最少次水球来测出水球刚好破掉的最低楼层.(在最糟情况下,水球在顶楼也不会破 ...
Java核心技术卷1 基础知识-第一天
基本数据类型 java是一种强数据类的的语言共有8种基本数据类型其中: 整型4种 int(4字节) short(2字节) long(8字节) byte(1字节) java中整型的范围与机器无关长 ...
C++成员指针
C++中,成员指针是最为复杂的语法结构.但在事件驱动和多线程应用中被广泛用于调用回叫函数.在多线程应用中,每个线程都通过指向成员函数的指针来调用该函数.在这样的应用中,如果不用成员指针,编程是非常困难 ...
第二周作业-影评、靶机和攻击机的安装与配置、kali的配置、DNS解析
教材作业第一章作业一 <黑客军团>第2季第1集影评本文只分析与黑客攻击有关的情节,不谈其他. 开头,男主通过ssh以root身份远程连接到了一台服务器,并在其上执行了名为fuxsocy ...
虚拟创建失败之Dbus调试
DBus调试命令查询连接名 ### 查询所有连接名 # dbus-send --system --print-reply --dest=org.freedesktop.DBus / org.free ...
C语言经典算法100例（三）
1.河内之塔说明河内之塔(Towers of Hanoi)是法国人M.Claus(Lucas)于1883年从泰国带至法国的,河内为越战时北越的首都,即现在的胡志明市:1883年法国数学家 Edoua ...
knockout+MVC+webapi+sqlserver完成增删查改
快过年了,公司的事情较少,想着开始学习点新东西.这段时间一个项目用到了mvc和webapi,然后一直对knockout比较感兴趣,就想着用这个框架做一个小实例.数据库采用的是sqlserver.话不多 ...