jQuery的简单使用

通过jQuery注册事件

jQuery注册事件也很简单,通过选择器包装好标签对象后,调用相关的事件方法即可,调用事件方法时需要传递一个函数对象,当事件被触发就会执行函数里的代码。在jQuery里的事件名称并没有与html中的事件名称有多大区别,还是那个熟悉的味道熟悉的套路,示例:

成都创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站制作、做网站、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的龙安网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!



    
        
        
    
    
    
        
        
    
    

函数中的参数就是事件源对象:



    
        
        
    
    
    
        
        
    
    

在函数中可以使用this来表示当前触发事件的对象,也可以通过选择器去获取当前对象:



    
        
        
    
    
    
        
        
    
    

给标签添加/删除样式

在jQuery中有一个addClass方法,可以给标签添加类样式,相对的removeClass方法则是删除标签中的类样式:



    
        
        
    
    
    
    
        

Hello World!

Hello World!

Hello World!

除了以上的方法外,还有一个css方法可以添加样式,以键值的方式添加:



    
        
        
    
    
    
        

Hello World!

Hello World!

Hello World!

如果css方法中传递的是键,那么就可以得到该键的值:



    
        
        
    
    
    
    
        

Hello World!

Hello World!

Hello World!

运行结果:
jQuery的简单使用
jQuery的简单使用

控制标签

通过jQuery可以很方便的控制标签,例如可以对某个标签增加子标签,或者删除某个标签等等,append方法就可以给某个标签添加一个子标签:



    
        
        
    
    
    
        
        

remove方法可以删除某个标签:




    
        
        
    
    

    
        
        

hello world!

hello world!

hello world!

hello world!

hello world!

html方法类似于innerHTML方法,可以给开始和结束标签之间填充HTML或文本:



    
        
        
    
    

    
        
        

text方法可以给开始和结束标签之间填充纯文本内容,即便传的是HTML代码也会被转换成文本:




    
        
        
    
    

    
        
        

val方法可以返回或设置被选元素的值,元素的值是通过 value 属性设置的。该方法大多用于 input 元素。如果该方法未设置参数,则返回被选元素的当前值:




    
        
        
    
    

    
        
        
    
    

控制标签属性

attr方法可以控制标签的所有属性,通过这个方法可以给某个标签动态设置属性,也可以通过这个方法来获得某个属性的值,而removeAttr方法则可以删除指定的属性:




    
        
        
    
    
    
    
        

运行结果:
jQuery的简单使用
jQuery的简单使用

jQuery的显示/隐藏效果

show方法可以显示某个组件,hide方法则可以隐藏某个组件:




    
        
        
    
    
    
    
        

show以及hide方法中都有可选的参数,第一个参数可以设置元素从隐藏到完全可见的速度,可以直接传递毫秒数,也可以传递字符串:slow、normal、fast等。在设置速度的情况下,元素从隐藏到完全可见的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。第二个参数就是回调函数,show 函数执行完之后,要执行的函数,示例:

toggle方法可以切换元素的可见状态,如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素,同样的可以设置过程时间和回调函数:




    
        
        
    
    
    
    
        

想要有淡入淡出的效果可以使用以下四种fade方法:

  • fadeIn() 方法用于淡入已隐藏的元素
  • fadeOut() 方法用于淡出可见元素
  • fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
  • fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)

示例:




    
        
        
    
    
    
    
        

通过jQuery实现元素滑动效果可以使用以下三个方法:

  • slideDown() 方法用于向下滑动元素。
  • slideUp() 方法用于向上滑动元素。
  • slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

示例:




    
        
        
    
    
    

    
        
        
        
        

网站栏目:jQuery的简单使用
URL网址:http://pwwzsj.com/article/ggooei.html