jQuery中的事件、动画和表单的介绍和使用-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

jQuery中的事件、动画和表单的介绍和使用

jquery

是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。

成都创新互联专注于企业营销型网站、网站重做改版、武平网站定制设计、自适应品牌网站建设、H5开发成都做商城网站、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为武平等各大城市提供网站开发制作服务。

jquery设计的宗旨是“write Less,Do More”(即倡导写更少的代码,做更多的事情),其核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。

事件

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。在事件中经常使用术语 " 触发 " (或 " 激发 " )常用click()方法触发

DOM的加载

$(document).ready() 方法与 window.onload () 方法的区别:

jQuery中的事件、动画和表单的介绍和使用

事件绑定

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

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

实例:

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

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

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();
    }
})

合成事件-hover()

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

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

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

实例:

web前端开发学习Q-q-u-n: ⑦⑧④-⑦⑧③-零①②,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
$(function(){           
    /*
     * 合成事件hover()方法的语法结构:
     *  hover(enter,leave);
     * 
     * */
     $("#btn2").hover(function(){
         $(this).next().show();
     },function(){
        $(this).next().hide();
     })
})



   

合成事件-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事件。

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


        
        
    
    
         body
         
           div                            span                    
   

阻止默认行为

网页中的元素有自己默认的行为,例如,单击超链接后会跳转、单击提交按钮后表单会提交,有时需要阻止元素的默认行为。

在 jQuery 中,提供了 preventDefault () 方法来阻止元素的默认行为。

实例:



    
        
        
        
        
    
    
        跳转百度
        
           用户名
           密码
                     
   

事件对象的属性

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

event.type : 获取事件的类型



    
        
        
        
        
    
    
        查看事件对象的属性

    

移除事件:

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




    
        
        
        
        
    

    
        
        
       
   

One()方法

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

on()与bind()的差别

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

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

jQuery的动画

对于 jQuery 的动画的设计我们要分 2 个层面理解:
  1. 每一个动画效果可以看作一个独立的动画对象,每个对象都实现了针对自己这个动画的生命周期的控制
  2. 动画对象与动画对象之间其实是没有直接关系,但是为了做到连续调用就需要引入一套队列机制也就是 Queue 来控制对象之间的转换的控制

隐藏和显示元素-show()方法和hide()方法

hide(): 在HTML文档中,为一个元素调用hide()方法会将该元素的display样式改为 none,代码功能同css("display", "none")。

show(): 把元素隐藏后,可以使用show ()方法将元素的 display 样式改为先前的显示状态("block"或"inline"或其他除了"none"之外的值)。

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

淡入和淡出-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)

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

toggle()方法

toggle()方法可以切换元素的可见状态。如果元素是可见的, 则切换为隐藏; 如果元素时隐藏的, 则切换为可见的。

toggle()会同时改变元素的高度、宽度和透明度

slideToggle()方法

slideToggle()方法通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度。

fadeTo()方法

fadeTo()方法可以把元素的不透明度以渐近的方式调整到指定的值(0–1之间)。这个动画只调整元素的不透明度,即匹配的元素的高度和宽度不会发生变化。

fadeToggle()方法

fadeToggle()方法通过不透明度变化来切换匹配元素的可见性。这个动画效果只调整元素的不透明度

动画方法说明:

jQuery中的事件、动画和表单的介绍和使用

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

表单应用:

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

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

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

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

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

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

prop()**函数的结果**:

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

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

attr**()函数的结果:**

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

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

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

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

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


名称栏目:jQuery中的事件、动画和表单的介绍和使用
本文链接:http://kswsj.cn/article/pjjdoc.html

其他资讯