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

随机推荐

route-显示并设置Linux内核中的网络路由表
route命令网络配置 route命令用来显示并设置Linux内核中的网络路由表,route命令设置的路由主要是静态路由.要实现两个不同的子网之间的通信,需要一台连接两个网络的路由器,或者同时位于两 ...
Struts2学习第三课 Struts2详解
接着上次的课程这次我们看struts.xml 修改如下:这里是加上命名空间,默认的是不加,我们手动加上时就要在访问时加上命名空间. <?xml version="1.0" ...
2. DVWA亲测CSRF漏洞
DVWA登陆用户名:admin 密码:password Low级: 查看源代码: <?php if (isset($_GET['Change'])) { // Turn requ ...
C++中struct和class定义类区别
有一种常见的误解认为用struct保留字定义的类与用class定义的类有很大的区别.唯一的不同只是默认的成员保护级别和默认的派生保护级别,没有其他的区别. 1. 用class定义的类,默认的成员访问级 ...
Glance代码分析
V2版本的glance-api采用Proxy的方式来构建对象(对象套对象),有点类似装饰器模式,包裹的顺序是 Auth(外层) -> Notifier -> Policy -> Qu ...
java IO流部分知识点
IO流部分 IO流常用的有:字符流.字节流.缓冲流.序列化流.RandomAccessFile类等 1.字节流 FileInputStream/FileOutputStream BufferedInp ...
《OD Docker实战》Docker从入门到精通
一. 安装Docker http://wiki.jikexueyuan.com/project/docker-technology-and-combat/ https://mos.meituan.co ...
uva1610 聚会游戏（细节处理）
uva1610 聚会游戏(细节处理) 输入一个n(n<=1000且为偶数)个字符串的集合D,找一个长度最短的字符串(不一定要在D中出现)S,使得D中恰好一半字符串小于等于S,另一半大于S.如果有 ...
CSS布局那点事儿
布局最开始老的一代网站开发,布局都是通过表格实现的. 这样可以形成规整的网格布局,但是也会带来一定的复杂性.比如想要新增某个页面元素,就有可能要改动整个表格,添加很多无用的行或者列. 后来,衍生出不 ...