通过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的简单使用_第1张图片
jQuery的简单使用_第2张图片

控制标签

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

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




    
        
        
    
    

    
        
        

            
hello world!

            
hello world!

            
hello world!

            
hello world!

            
hello world!

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

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

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

控制标签属性

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

运行结果：
jQuery的简单使用_第3张图片
jQuery的简单使用_第4张图片

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() 方法之间进行切换。

示例：