文档章节

JQuery学习笔记(2)

ForingY
 ForingY
发布于 2015/12/10 12:52
字数 2495
阅读 31
收藏 4
点赞 0
评论 0

//---------------------------- 第四章 JQuery中的事件和动画 -------------------------------


·加载DOM

$(window).load() 等价于 window.onload 事件


$(document).ready() 相当于window.onload事件,但有些区别:

  (1)执行时机:

  window.onload 是在网页中所有元素(包括元素的所有关联文件)完全加载后才执行

 $(document).ready() 是在DOM完全就绪时就可以被调用,此时,并不意味着这些元素关系的文件都已经下载完毕


  (2)多次使用:可以在同一个页面注册多个$(document).ready()事件

  (3)简写方式:可以缩写成 $(function(){ })  或  $().ready()

  

·事件绑定

当文档装载完成后,可以通过bind()方法,为特定的元素进行事件的绑定,可重复多次使用

  bind( type, [data, ] fn );

  type:指事件的类型: 

    blur(失去焦点)、focus(获得焦点)

    load(加载完成)、unload(销毁完成)

    resize(调整元素大小)、scroll(滚动元素)

    click(单击元素事件)、dbclick(双击元素事件)

    mousedown(按下鼠标)、mouseup(松开鼠标)

    mousemove(鼠标移过)、mouseover(鼠标移入)、mouseout(鼠标移出)

    mouseenter(鼠标进入)、mouseleave(鼠标离开)

    change(值改变)、select(下拉框索引改变)、submit(提交按钮)

    keydown(键盘按下)、keyup(键盘松开)、keypress(键盘单击)

    error(异常)

  data:指事件传递的属性值,event.data 额外传递给对象事件的值

  fn:指绑定的处理函数,在此函数体内,$(this)指携带相应行为的DOM元素

·合并事件

hover(enter,leave):鼠标移入执行enter、移出事件执行leave

$("#myDiv").hover( function(){

    $(this).css("border", "1px solid black");0

}, function(){

    $(this).css("border", "none");

});


toggle(fn1,fn2,...fnN):鼠标每点击一次,执行一个函数,直到最后一个后重复

$("#myDiv").toggle( function(){

    $(this).css("border", "1px solid black");0

}, function(){

    $(this).css("border", "none");

});


·事件冒泡

下面的例子,BODY元素下有DIV元素,DIV元素下有SPAN元素,分别将三种元素都注册click事件。

那么,click事件会按照DOM的层次结构,像水泡一样不断向上直到顶端,所以称之为事件冒泡。

<body><div><span>我是SPAN我怕谁</span></div></body>

$("span").bind("click", function(){ alert('span click'); });

$("div").bind("click", function(){ alert('div click'); });

$("body").bind("click", function(){ alert('body click'); });


·阻止冒泡

解决这个问题的办法是:在SPAN执行完click事件后,停止事件冒泡。

$("span").bind("click", function(event){

    alert('span click');

    event.stopPropagation(); //停止冒泡

});


·阻止默认行为

提交按钮在提交前做相应的逻辑判断,当不满足时

$("#btnSubmit").bind("click", function(event){

    event.preventDefault(); //阻止默认行为 相当于return false;

});


·事件对象的属性

$("#myDiv").bind("click", function(event){ });

event.type() //返回:click

event.target() //获取当前元素

event.relatedTarget() //引发事件的元素

event.pageX()/event.pageY() //获取鼠标相对于页面的X和Y坐标

event.which() //在单击事件中获取到对应的按键 鼠标左中右分别是123

event.metaKey() //获取操作中的相关功能键(ctrl/alt/shift)


·移除事件

$("#myDiv").bind("click", fn1 = function(){

    alert("function1");

}).bind("click", fn2 = function(){

    alert("function2");

}).bind("click", fn3 = function(){

    alert("function3");

});

$("#myDiv").unbind(); //移除id为myDiv的元素的所有事件

$("#myDiv").unbind("click"); //移除id为myDiv的元素的所有click事件

$("#myDiv").unbind("click",fn1); //移除id为myDiv的元素的名称为fn1的click事件


·一次性事件:绑定的事件执行一次后自动移除

$("#myDiv").one("click", [data], function(){

    alert("function1");

});


·触发事件

$("#btn").trigger("click", [data]); //代码方式触发click事件

$("#btn").click(); //另一种简写方式


·事件命名空间

$("#myDiv").bind("click.hello", function(){

    alert("function1");

});

$("#myDiv").bind("click", function(){

    alert("function1");

})

$("div").unbind("click"); //两个事件都被移除

$("div").unbind(".hello"); //只移除第一个

$("div").unbind("click!"); //只移除第二个(注意感叹号,指没有名字空间的)


·JQuery中的动画

$("div").hide(); //隐藏所有DIV元素,相当于sytle="display:none"

$("div").show(); //显示所有DIV元素


$("div").hide(1000); //一秒内隐藏所有DIV元素,其它参数还有:slow(600) normal(400) fast(200)

$("div").show(1000); //一秒内显示所有DIV元素


$("div").fadeOut(); //降低元素的不透明度,直至消失(支持速度参数,不会改变宽高)

$("div").fadeIn(); //升高元素的不透明度,直至显示


$("div").slideUp(); //由下至上收缩元素,直至消失(支持速度参数)

$("div").slideDown(); //由上至下展开元素,直至显示


·自定义动画animate

$(elem).animate(params, speed, callback);

params:样式属性及值的映射 {protected:"value", protected:"value"}

speed: 速度参数

callback: 动画完成后执行函数,可选


$("#myDiv").animate({left:"500px"}, 2000); //两秒内ID为myDiv的元素移至左边距500px的位置

$("#myDiv").animate({left:"+=500px"}, 2000); //同上,支持累加、累减

$("#myDiv").animate({top:"200px", left:"+=500px"}, 2000); //同上,多重动画,同时执行


$("#myDiv").animate({opacity:"0.5"}, 1000) //先变成50%透明

           .animate({top:"500px"}, 500) //移至离顶端500px

          .animate({left:"500px"}, 500) //移至离左边500px

           .fadeOut(1000); //显示出来 (四个动作为队列,一步步执行)


$("#myDiv").stop([cleanQuene] [,gotuEnd]); //停止动画,参数为boolean


$("#myDiv").is(":animate") //判断元素是否在执行动画


·其它动画

$("#myDiv").toggle(); //显示与隐藏元素

$("#myDiv").slideToggle(); //展开与收缩元素

$("#myDiv").fadeTo(1000, 0.2); //一秒内将元素透明度调整到20%


//-------------------- 第五章 JQuery对表单、表格的操作及更多应用 ------------------------


·单选文本框应用(获得焦点时,加了个特殊的样式,失去焦点时还原,兼容所有浏览器)

$(":input").focus(function(){ this.addClass("inputFocus"); })

           .blur(function(){ this.removeClass("inputFocus"); });


·多行文本框的应用(放大、缩小多行文本框的高度,限制最大500px,兼容所有浏览器)

var $txt = $("#textArea");

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

    if( $txt.height() < 500) $txt.height( $txt.height() + 50 );

    //if( $txt.height() < 500) $txt.animate({height:"+=50"}, 500 );

});

  1. $(".smaller").click(function(){

  2.     if( $txt.height() > 100) $txt.height( $txt.height() - 50 );

  3.     //if( $txt.height() < 500) $txt.animate({height:"-=50"}, 500 );

  4. });


  5. ·复选框的应用(实现全选、全不选、反选)

  6. $("#btnCheckedAll").click(function(){ //全选

  7.     $("[name=items]:checkbox").attr("checked", true);

  8. });

  9. $("#btnCheckedNone").click(function(){ //全不选

  10.     $("[name=items]:checkbox").attr("checked", false);

  11. });

  12. $("#btnCheckedRev").click(function(){ //反选

  13.     $("[name=items]:checkbox").each(function(){

  14.         $(this).attr("checked", !$(this).attr("checked"));

  15.         //this.checked = !this.checked;

  16.     }

  17. });


  18. ·下拉框的应用(将一个下拉列表的选中项搬至另一个下拉列表)

  19. $("#btnAdd").click(function(){ //将选中选项搬过去

  20.     $("#mySelect1 option:selected").appendTo("#mySelect2");

  21. });

  22. $("#btnAddAll").click(function(){ //将全部选项搬过去

  23.     $("#mySelect1 option").appendTo("#mySelect2");

  24. });

  25. $("#mySelect1").dblclick(function()[ //双击项搬过去

  26.     $("#mySelect1 option:selected").appendTo("#mySelect2");

  27. }


  28. ·表单验证

  29. <form>

  30.     <div>

  31.         <label>用户名:</label>

  32.         <input type="text" id="txtUid" class="required" value="" />

  33.     </div>

  34. </form>

  35. $("form :input.required").each(function(){ //往每个class有required样式的input元素后面添加*号

  36.     $(this).parent().append( $("<span class='star'>*</span>") );

  37. });

  38. $("form :input.required").blur(function(){ //失去焦点时验证域

  39.     if( this.value == "" ){

  40.         $(this).parent().append( $("<span class='error'>必填字段</span>") );

  41.     }

  42.     else{

  43.         $(this).parent().append( $("<span class='success'>验证正确</span>") );

  44.         $(this).parent().find(".error").remove();

  45.     }

  46. }).keyup(function(){ //用户每点一个键触发

  47.     $(this).triggerHandler("blur");

  48. }).focus(function(){ //控制有焦点时触发

  49.     $(this).triggerHandler("blur");

  50. });

  51. $("#btnSubmit").click(function(){

  52.     $("form :input.required").trigger("blur"); //让所有需要验证的域失去焦点

  53.     var errNum = $("form .error").length;

  54.     if( errNum ){

  55.         alert("有验证字段失败,请重新填写");

  56.         return false;

  57.     }

  58. });


  59. ·表格应用

  60. $("tr:odd").addClass("oddTr"); //给奇数行添加oddTr样式

  61. $("tr:even").addClass("evenTr"); //给偶数行添加evenTr样式


  62. $("tr:contains('王五')").addClass("highlightTr"); //查找包含“王五”的行,添加highlightTr样式


  63. $("tr").click(function(){

  64.     $(this).addClass("selectedTr") //给当前行添加选中样式

  65.            .siblings().removeClass("selectedTr") //反选移除选中样式

  66.            .end() //结束,返回$(this),否则则是反选的行

  67.            .find(':radio").attr("checked",true); //在当前行查找单选框,选中它

  68. });

  69. //-------------------- 第六章 JQuery与Ajax的应用 ------------------------


  70. ·load( url [,data] [,callback] )方法

  71. url:要请求的页面的地址

  72. data:要发送的相关参数

  73. callback:回调函数


  74. $("#myDiv").load("hello.html"); //向myDiv元素加载hello.html的内容

  75. $("#myDiv").load("hello.html .myClass"); //筛选,只加载hello.html中myClass样式的内容


  76. $("#myDiv").load("hello.html", function(){} ); //没参数的,使用GET方式

  77. $("#myDiv").load("hello.html", {id:'123', name:'dier'}, function(){} ); //有参数的,使用POST方式


  78. $("#myDiv").load("hello.html", function(responseText, textStatus, XMLHttpRequest){ //回调函数

  79.     //responseText : 请求返回的内容

  80.     //textStatus : 请求状态 success error notmodified timeout

  81.     //XMLHttpRequest : Ajax对象

  82. });


  83. ·$.get( url [,data] [,callback] [,type])和$.post( url [,data] [,callback] [,type])方法

  84. url:要请求的页面的地址

  85. data:要发送的相关参数

  86. callback:回调函数

  87. type:指定服务器返回内容的格式 xml html script json text _default


  88. $.get( "test.aspx", {id:"123", name:"dier"}, function(data,textStatus){ //回调函数只有当状态是success才触发

  89.     //data : 请求返回的内容

  90.     //textStatus : 请求状态 success error notmodified timeout

  91.     

  92.     //当data是HTML时,直接加载

  93.     $("#myDiv").html(data);

  94.     

  95.     //当data是XML时,可筛选 <user id="123" name="dier" age="27" />

  96.     var age = $(data).find("user").attr("age");

  97.     

  98.     //当data是JSON时,可直接点出属性来 {id:"123", name:"dier", age:"27"}

  99.     var age = data.age;

  100. });


  101. ·getScript(url [,callback])方法

  102. $(function(){ //动态加载JS脚本

  103.     $.getScript("test.js");

  104.     

  105.     $.getScript("test.js", function(){ //回调函数

  106.         //do something..

  107.     });

  108. });


  109. ·getJSON(url [,callback])方法

  110. $(function(){ //动态加载JS脚本

  111.     $.getJSON("test.js");

  112.     

  113.     $.getJSON("test.js", function(data){ //回调函数

  114.         //do something..

  115.         //data : 返回的数据

  116.         $.each( data, function(index, item){ //遍历,相当于foreach

  117.             //index : 索引

  118.             //item : 当前项内容

  119.             //return false; 退出循环

  120.         });

  121.     });

  122. });


  123. ·ajax(options)方法

  124. url : 请求的地址

  125. type : 请求的方式 GET POST 默认为GET

  126. timeout : 请求超时时间(单位:毫秒)

  127. data : 请求时发送的参数(String,Object)

  128. dataType : 预期返回的数据类型 xml html script json jsonp text

  129. bdforeSend : 发送请求前触发事件,如果return false则取消发送 function(XmlHttpRequest){}

  130. complete : 请求完成后触发事件,不管成功与否 function(XmlHttpRequest, textStatus){}

  131. success : 请求完成并且成功时触发事件 function(data, textStatus){}

  132. error : 请求完成并且失败时触发事件 function(XmlHttpRequest, textStatus, errorThrown){}

  133. global : 是否为全局请求,默认为true,可使用AjaxStart、AjaxStop控制各种事件


  134. $.ajax({

  135.     url : "test.aspx",

  136.     type : "POST",

  137.     timeout : "3000",

  138.     data : {id:"123", name:"dier"},

  139.     dataType : "HTML",

  140.     success : function(data,textStatus){

  141.         $("#myDiv").html( data );

  142.     }

  143.     error : function(XmlHttpRequest, textStatus, errThrown){

  144.         $("#myDiv").html( "请求失败:" + errThrown );

  145.     }

  146. });


  147. ·序列化字符串 serialize()

  148. $.get( "test.aspx", $("#form1").serialize(), function(data,textStatus){

  149.     //将form1整个表单中的所有域序列化成提交的参数,支持自动编码

  150. });


  151. ·序列化数组 serializeArray()

  152. var arr = $(":checkbox, :radio").serializeArray();


  153. ·对象序列化 param()

  154. var obj = {id:"123", name:"dier", age:"27"};

  155. var kv = $.param(obj); //id=123&name=dier&age=27


  156. ·JQuery中的全局Ajax事件

  157. ajaxStart(callback) //请求开始时触发

  158. ajaxStop(callback) //请求结束时触发

  159. ajaxComplete(callback) //请求完成时触发

  160. ajaxSuccess(callback) //请求成功时触发

  161. ajaxError(callback) //请求失败时触发

  162. ajaxSend(callback) //请求发送前触发


  163. $("#loading").ajaxStart(function(){ //当有AJAX请求时显示,完成时隐藏

  164.         $(this).show();

  165.     }.ajaxStop(function(){

  166.         $(this).hide();

  167.     }

  168. );


© 著作权归作者所有

共有 人打赏支持
ForingY
粉丝 23
博文 252
码字总数 156129
作品 0
杭州
程序员
jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 06/18 ⋅ 0

js (jQuery) 之 取值

都是一些老生常谈,没什么新东西,算是开发过程中不知道怎么写去百度的一些东西 。都说程序员写博客是一个好习惯,算是一份保存笔记,以后不用到处百度然后出来的一些答非所问的答案 。 1: ...

architect刘源源 ⋅ 05/07 ⋅ 0

JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

Zepto.js 简介(第一章)

Zepto.js 简介(第一章) 在做C端-H5的时候,很多时候会用到Zepto.js,所以在这里,我就把它整理一下。 什么是Zepto zepto是轻量级的JavaScript库,专门为移动端定制的框架 与jquery有着类似...

张靖bibibi ⋅ 06/19 ⋅ 0

JavaWeb04-HTML篇笔记(三)

1.1 案例二:表格隔行换色的案例:1.1.1 需求: 对数据的表格进行隔行换色的显示效果,使用JQuery完成该效果. 1.1.2 分析:1.1.2.1 技术分析: 【JQuery的选择器】 基本过滤选择器: 如果样式...

我是小谷粒 ⋅ 05/08 ⋅ 0

来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang ⋅ 05/24 ⋅ 0

JavaWeb04-HTML篇笔记(二)

1.1 使用JQuery完成定时弹出广告:1.1.1 需求: 之前使用的JS的方式完成定时弹出广告,现在使用JQuery完成同样的效果: 1.1.2 分析1.1.2.1 技术分析: 【JQuery的概述】 【JS对象和JQ对象的转...

我是小谷粒 ⋅ 05/08 ⋅ 0

【BS学习】jQuery视频总结

【背景】 这两天看完了jQuery视频的视频,对学习到的东西做一个记录。 【内容】 一、JQuery框架简介 1、官方网站:www.jquery.com 2.创立者:John Resig 3.历史: 4.特点:(1)Write Less,...

yym15732626210 ⋅ 03/12 ⋅ 0

3个简单的事情,使你的jQuery代码变得更加棒

     jQuery是现存最流行的(如果不是最多的)JavaScript库之一,并且大量的人使用它来做一些令人惊叹的事情。就个人而言,jQuery让我对学习JavaScript感到兴奋。问题是很多程序员不明白...

webstack前端栈 ⋅ 04/14 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 今天 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

一起读书《深入浅出nodejs》-node模块机制

node 模块机制 前言 说到node,就不免得提到JavaScript。JavaScript自诞生以来,经历了工具类库、组件库、前端框架、前端应用的变迁。通过无数开发人员的努力,JavaScript不断被类聚和抽象,...

小草先森 ⋅ 昨天 ⋅ 0

Java桌球小游戏

其实算不上一个游戏,就是两张图片,不停的重画,改变ball图片的位置。一个左右直线碰撞的,一个有角度碰撞的。 左右直线碰撞 package com.bjsxt.test;import javax.swing.*;import j...

森林之下 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部