jQuery简单入门(【10bet】三)

来源:http://www.chinese-glasses.com 作者:Web前端 人气:93 发布时间:2020-04-22
摘要:时间: 2019-09-19阅读: 163标签:动画什么是事件?页面对不同访问者的响应叫做事件。事件处理程序指的是当HTML中发生某些事件时所调用的方法。在事件中经常使用术语"触发"(或"激发")常

时间: 2019-09-19阅读: 163标签: 动画什么是事件?页面对不同访问者的响应叫做事件。事件处理程序指的是当HTML 中发生某些事件时所调用的方法。在事件中经常使用术语"触发"(或"激发")常用click()方法触发DOM的加载$(document).ready()方法与window.onload()方法的区别:方法window.onload$(document).ready()执行时机必须等待网页中的所有内容加载完毕后(包括图片)才能执行网页中的所有DOM结构绘制完毕后就执行。可能DOM元素关联的东西并没有加载完编写个数不能同时编写多个能同时编写多个简化无$()事件绑定

3.事件和动画

使用bind()方法为每个匹配元素的特定事件绑定事件处理函数。bind()方法的调用格式:bind(type,[data],fn)


type:含有一个或多个事件类型的字符串,由空格分隔多个事件。比如"click"或"submit",还可以是自定义事件名。•data:作为event.data属性值传递给事件对象的额外数据对象•fn:绑定到每个匹配元素的事件上面的处理函数实例:

 

//事件绑定$("#btn1").bind("click",function(){ alert("点我触发bind函数");})button 点我触发bind函数/button

A. 事件

使用jQuery的is()方法判断元素是否可见,使用is()方法:

  Aa. DOM加载

alert($("button").parent().is("body")); /* * $("#b1").is(":visible") 判断id为d1的元素是否可见 * 可见返回true,不可见就返回false * * next($("#b1").is(":visible")); */alert("#btn2").is(":visible");$("#btn2").click(function(){ if($("#b1").is(":visible")){ //$(this).next().css(); $(this).next().hide(); }else{ $(this).next().show(); }})

  1.为什么使用jQuery加载DOM方法?

合成事件-hover()

  以javascript的window.onload()方法加载DOM的先决条件是:必须等待被请求页面的资源全部加载完成,才会为DOM元素添加事件行为;而jquery只要DOM元素加载完成,就立刻绑定事件

hover()模拟光标悬停事件. 当光标移动到元素上时, 会触发指定的第一个函数, 当光标移出这个元素时, 会触发指定的第二个函数。

  2.表现形式:

hover()方法语法结构为:hover([over,]out)

  $(function() {

•over:鼠标移到元素上要触发的函数•out:鼠标移出元素要触发的函数实例:

  //你的实现逻辑

$(function(){/* * 合成事件hover()方法的语法结构: * hover(enter,leave); * * */ $("#btn2").hover(function(){ $(this).next().show(); },function(){ $(this).next().hide(); })})button 点我触发bind函数/buttonbutton 隐藏或者显示/buttondiv img src="img/log.jpg"//div

  });

合成事件-toggle():用于模拟鼠标连续单击事件.第一次单击元素,触发指定的第一个函数,当再一次单击同一个元素时,则触发指定的第二个函数,如果有更多个函数,则依次触发,直到最后一个。


$(function(){/* * 合成事件toggle()方法的语法结构: * toggle(f1,f2,f3,f4....); * * 有俩个功能: * 1:模拟连续点击(自动点击,不是你手动点击); * 2.如果元素本身可见,则会自动隐藏,如果本身是隐藏的,则会自动显示 * *//* $("#btn1").toggle(function(){ alert("触发toggle函数"); });*/ //带俩个参数的toggle方法 $("#btn1").toggle(function(){ $("#btn1").css("color","turquoise"); //alert("触发toggle函数"); },function(){ //alert("触发toggle2函数") $("#btn1").css("background-color","deepskyblue"); })})

 

事件冒泡:在页面上可以有多个事件,也可以多个元素响应同一个事件。假设网页上有两个元素,其中一个嵌套在另一个元素里,并且都被绑定了click事件,同时body元素上也绑定了click事件。

  Ab. 事件绑定

事件会按照DOM层次结构像水泡一样不断向上直至顶端

  事件绑定方法bind(eventType [, data],  function() {...})

style type="text/css"#body1{background-color: deepskyblue;}#div1{background-color: white;}#span1{background-color: yellow;}/stylescript src=""/scriptscript type="text/javascript"$(function(){ /* *演示事件冒泡 * 当一个元素的本身和父类都绑定了相同事件时,它本身触发该事件,则父类也会触发该事件 * 解决方法:停止冒泡 * 方法1:本身return false; * 方法2:stopPropagation(); [event是事件对象] */ $("#body1").click(function(){ alert("body的click方法"); }) $("#div1").click(function(){ alert("div的click方法"); }) $("#span1").click(function(){ alert("span的click方法"); // return false; event.stopPropagation(); }) })/script/headbody  body div  div span  span /span /div/body/html

  10bet 1

阻止默认行为网页中的元素有自己默认的行为,例如,单击超链接后会跳转、单击提交按钮后表单会提交,有时需要阻止元素的默认行为。在jQuery中,提供了preventDefault()方法来阻止元素的默认行为。实例:

  表现形式:

!DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlescript src=""/scriptscript type="text/javascript"$(function(){ //阻止点击之后跳转 $("#a1").click(function(){ alert("你正在阻止a标签的默认行为"); //return false; //方法一 event.preventDefault(); //方法二 }) /* * 写一个登录表单,设置如果用户名不满足正则表达式的要求,阻止请求服务 * 正则判断是否满足符合规则 * */ $(":submit").click(function(){ var na=$("#na").val(); var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; if(!uPattern.test(na)){ alert("你正在阻止a标签的默认行为"); return false; } }) })/script/headbodya href="" 跳转百度/aform action="" method="post"用户名input type="text" /br/密码input type="password" /br/ button type="submit"登录/button/form/body/html

  $(function() {

事件对象的属性

           $(“#id”).bind(“click”, function() {

事件对象:当触发事件时,事件对象就被创建了.在程序中使用事件只需要为函数添加一个参数

          $(this).next().show();

event.type:获取事件的类型

     });

!DOCTYPE htmlhtml head meta charset="UTF-8" title/title script src=""/script script type="text/javascript" $(function(){ /* * 事件对象:对事件对象的常用属性进行封装 * 1.event.type获取事件的类型(也就是事件名称) * 2. event.preventDefault(); 阻止默认的事件行为 (在IE中无效) * 3. event.stopPropagation() 阻止事件冒泡 * 4.event.target 获取触发事件的元素(获取触发的目标) * 5.event.pageX / event.pageY 获取事件光标的X和Y的坐标 * 6.event.which 获取鼠标的按键(左键返回1,中键返回2,右键返回3) */ $("#a1").click(function(){ //alert(event.pageX+","+event.pageY); alert(event.which); return false; }) }) /script /head body a href="" 查看事件对象的属性/a /body/html

  });

移除事件:


在绑定事件的过程中,不仅可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件。

  Ac. 事件合成

!DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlescript src=""/scriptscript type="text/javascript"$(function() {$("#btn1").one("click", function() {$("#test").append("p我的绑定函数1/p");}).one("click", function() {$("#test").append("p我的绑定函数2/p");}).one("click", function() {$("#test").append("p我的绑定函数3/p");})})/script/headbodybutton 绑定函数/buttondiv /div/body/html

  Jquery有两个合成事件:hover()和toggle()

One()方法

  1.hover(enter, leave)模拟光标悬停

one(): 该方法可以为元素绑定处理函数. 当处理函数触发一次后, 立即被删除. 即在每个对象上, 事件处理函数只会被执行一次.

  表现形式:

on()与bind()的差别

  $(function() {

jQuery从1.7+版本开始,提供了on()和off()进行事件处理函数的绑定和取消。

    $(“.class”).hover(function() {

两者的区别就在于是否支持selector这个参数值。如果使用on的时候,不设置selector,那么on与bind就没有区别了。

       //光标悬停,在引用class层叠样式,做出响应

jQuery的动画隐藏和显示元素-show()方法和hide()方法hide(): 在HTML文档中,为一个元素调用hide()方法会将该元素的display样式改为 none,代码功能同css("display", "none")。show(): 把元素隐藏后,可以使用show ()方法将元素的 display 样式改为先前的显示状态("block"或"inline"或其他除了"none"之外的值)。

       $(this).next().show();

$(function(){$("div").hover(function(){$(this).next().show();},function(){$(this).next().hide();})})/script

    }, function() {

淡入和淡出-fadeIn()方法和fadeout()方法fadeIn(), fadeOut(): 只改变元素的透明度. fadeOut()会在指定的一段时间内降低元素的不透明度,直到元素完全消失(“display:none”),fadeIn()则相反。滑上和滑下-slideUp()方法和slideDown()方法slideDown(),slideUp():只会改变元素的高度,如果一个元素的display属性为 none,当调用slideDown()方法时,这个元素将由上至下延伸显示,slideUp()方法正好相反,元素由下至上缩短隐藏。自定义动画方法animate()使用animate()方法来自定义动画,其语法结构为:animate(params,[speed],[fn])params:一组包含作为动画属性和终值的样式属性和及其值的集合,比如{property1:”value1”, property2:”value2”,..}•speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)

       //光标离开引用class层叠样式,做出响应

fn:在动画完成时执行的函数,每个元素执行一次

       $(this).next().hide();

toggle()方法toggle()方法可以切换元素的可见状态。如果元素是可见的, 则切换为隐藏; 如果元素时隐藏的, 则切换为可见的。toggle()会同时改变元素的高度、宽度和透明度slideToggle()方法slideToggle()方法通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度。fadeTo()方法fadeTo()方法可以把元素的不透明度以渐近的方式调整到指定的值(0–1之间)。这个动画只调整元素的不透明度,即匹配的元素的高度和宽度不会发生变化。fadeToggle()方法fadeToggle()方法通过不透明度变化来切换匹配元素的可见性。这个动画效果只调整元素的不透明度动画方法说明:方法名说明

    });

hide()和show()

  });

同时修改多个样式属性,即高度、宽度、不透明度

  上面的案例解释:当光标悬停在引用了class层叠样式时,显示其后面的一个同辈元素;反之隐藏他

fadeIn()和fadeOut()

  2.toggle(fn1, fn2, ...)模拟鼠标点击事件

只改变不透明度

  表现形式:

slideUp()和slideDown()

  $(function() {

只改变高度

    $(“button”).toggle(function() {

fadeTo()

      alert(“鼠标第一次点击!”);

只改变不透明度

    }, function() {

toogle()

      alert(“鼠标第二次点击!”);

用来代替hide()方法和show()方法,所以会同时修改多个样式属性,即高度、宽度、不透明度

    }, function() {

slideToggle()

      alert(“鼠标第三次点击!”);

用来代替slideUp()方法和slideDown()方法,所以只能改变高度

    });

fadeToggle()

  });

用来代替fadeIn()和fadeOut()方法,所以只能改变不透明度

  当鼠标点击完成3次之后,再次点击,则该事件会进入下一轮事件;即:第四次点击会调用第一个函数...

animate()


属性自定义动画的方法,以上各种动画方法实质内部都调用了animate()方法。此外,直接使用animate()方法还能自定义其他的样式属性,例如:“left”、”marginLeft”,”scrollTop”等

   Ad. 事件对象的属性

表单应用:

    1.获取事件类型event.type

一个表单有3个基本组成部分:

  $(“input”).click(function(event) {

•表单标签:包含处理表单数据所用的服务器程序URL以及数据提交到服务器的方法。

         alert(event.type);//因为这是一个click事件,所以代码会输出click

•表单域:包含文本框、密码框、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

  });

•表单按钮:包括提交按钮、复位按钮和一般按钮,用于将数据传送到服务器上或者取消传送,还可以用来控制其他定义了处理脚本的处理工作。

  2.event.preventDefault()//阻止默认事件

attr()和prop()方法区别:

  $(function() {

attr的返回值要么是checked要么是undefined,prop的返回值只有true和false。

    $(“#sumbit”).click(function(event) {

prop()函数的结果:

     event.preventDefault();//阻止表单元素提交

1.如果有相应的属性,返回指定属性值。

    });

2.如果没有相应的属性,返回值是空字符串。

  });

attr()函数的结果:

  ...

1.如果有相应的属性,返回指定属性值。


2.如果没有相应的属性,返回值是undefined。

  Ae. 事件移除

对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。

  Unbind(eventType [,data])

对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

  $(function() {   

具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop()

    $(“#button”).bind(“click”, fn1 = function() {

    alert(“把fn1点击事件绑定到id为button的DOM元素上”);

    }).bind(“click”, fn2 = function() {

      alert(“把fn2点击事件绑定到id值为button的DOM元素上”);

    });

    $(“#button”).unbind(“click”, fn1);//把id值为buttonde的fn1点击事件移除

  });


  Af. 操作模拟(trigger())

10bet,  1.常用模拟

  如:

    情景描述:现在要求页面加载完毕后,立刻触发点击事件

    $(function() {

      $(“#button”).trigger(“click”);//当页面DOM加载立即触发id值为button的 元素上面的点击事件

  });

  2.出发自定义事件

  $(function() {

    //1.自定义事件

    $(“#button”).bind(“iClick”, function() {  

    });

  //2.触发自定义事件

  $(“#button”).trigger(“iClick”);

  });

本文由10bet发布于Web前端,转载请注明出处:jQuery简单入门(【10bet】三)

关键词:

最火资讯