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

随机推荐

Neural Networks and Deep Learning 笔记
1 Introduction to Deep Learning 介绍了神经网络的定义,有监督学习,分析了为什么深度学习会崛起 1.1 结构化数据/非结构化数据结构化数据:有一个确切的数据库,有key ...
javascript的DI
学习AngularJS的原因之一就是觉得他的DI很牛叉,为了更好的学习,在研究源码之前,想自己按照自己的思路先实现个DI,希望这个思路能够对学习源码有帮助. (function(){ var conf ...
Ajax 执行流程有用一点
l 1.1使用JavaScript获得浏览器内置的AJAX引擎(XMLHttpRequest对象) l 1.2 通过AJAX引擎确定请求路径和请求参数 l 1.3 通知AJAX引擎发送请求 l AJA ...
R语言中的字符处理
R语言中的字符处理 (2011-07-10 22:29:48) 转载▼ 标签: r语言字符处理字符串连接分割分类: R R的字符串处理能力还是很强大的,具体有base包的几个函数和strin ...
文件格式——fasta格式
fasta格式在生物信息学中,FASTA格式(又称为Pearson格式),是一种基于文本用于表示核苷酸序列或氨基酸序列的格式.在这种格式中碱基对或氨基酸用单个字母来编码,且允许在序列前添加序列名及注 ...
HDU 5973 Game of Taking Stones (威佐夫博弈+高精度)
题意:给定两堆石子,每个人可以从任意一堆拿任意个,也可以从两堆中拿相同的数量,问谁赢. 析:直接运用威佐夫博弈,floor(abs(a, b) * (sqrt(5)+1)/2) == min(a, b ...
JWT使用过程中遇到的问题
1.创建token的盐设置过于简单,出现secret key byte array cannot be null or empty. 异常解决方法:jwt:config:key:hwy ------ ...
在xcode中设置include和lib路径
最近刚刚开始玩xcode,对着教程学编程时很少要动到项目设置,但昨天晚上想使用freetype验证上篇博文的问题,就需要设置include和lib路径了. 首先我下了freetype的源码,并在本地编 ...
清北刷题冲刺 11-01 p.m
轮换 #include<iostream> #include<cstdio> #include<cstring> #define maxn 1010 using n ...
MCP|LDY|Mass Spectrometry-based Absolute Quantification of 20S Proteasome Status for Controlled Ex-vivo Expansion of Human Adipose-derived Mesenchymal Stromal/Stem Cells（基于质谱技术的20S蛋白酶体绝对定量方法监控人体脂肪...
期刊名:Mol Cell Proteomics 发表时间:(2019年4月) IF:5.232 概述 20S蛋白酶体是一种多亚基蛋白质复合物,参与许多组织细胞生命活动过程.本研究基于SILAC标记 ...