JQuery学习笔记(2)
博客专区 > ForingY 的博客 > 博客详情
JQuery学习笔记(2)
ForingY 发表于2年前
JQuery学习笔记(2)
  • 发表于 2年前
  • 阅读 28
  • 收藏 4
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

//---------------------------- 第四章 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. );


共有 人打赏支持
粉丝 24
博文 252
码字总数 156129
×
ForingY
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: