JavaScript学习笔记(五) jQuery

jQuery 是一个 JavaScript 函数库，兼容目前绝大部分的浏览器，概括来说包含如下功能：

• 元素选取
• 元素操作
• 样式设置
• 事件操作
• 过渡与动画
• AJAX

1、安装

（1）在 官网 中下载 jQuery，在项目中通过

2、语法

（1）基础语法

只要学习过 HTML、CSS、JavaScript 的朋友，一定会觉得 jQuery 的语法十分熟悉

一条独立的 jQuery 语句可以分为三个部分，$(selector).action()

• $：jQuery 的全局引用
• selector：选择特定的 HTML 元素
• action：对选择的元素进行操作

（2）执行入口

为了防止在文档完全加载之前运行 jQuery 代码，我们一般会把 jQuery 代码写在下面的回调函数中

// 常规语法
$(document).ready(function(){
    // 其它 jQuery 代码
})

// 简写语法
$(function(){
    // 其它 jQuery 代码
})

3、元素选取

jQuery 可以用来选择特定的 HTML 元素，它与 CSS 选择器类似，但是对其做了一定的拓展

（1）CSS 选择器

这部分的语法与 CSS 选择器类似，常见的有 id 选择器、class 选择器等等，这里不多作介绍

    
    


    
Say Hello To Tomorrow
    
Say Goodbye To Yesterday

（2）拓展

祖先元素

• parent()：返回选中元素的父亲元素
• parents()：返回选中元素的所有祖先元素
• parentsUntil()：返回介于选中元素与给定元素之间的所有祖先元素

后代元素

• children()：返回选中元素的所有孩子子元素
• find()：返回选中元素的所有后代元素

兄弟元素

• siblings()：返回选中元素的所有兄弟元素
• next() / prev()：返回选中元素的下 / 上一个兄弟元素
• nextAll() / prevAll()：返回选中元素之后 / 前的所有兄弟元素
• nextUntil() / prevUntil()：返回介于选中元素与给定元素之间的所有兄弟元素

过滤元素

• first()：返回选中元素的第一个元素
• last()：返回选中元素的最后一个元素
• eq()：返回选中元素中带有指定索引的元素
• filter()：返回符合条件的元素
• not()：返回不符合条件的元素

    
    
    
    
    


    

        祖父元素
        

            其它元素
            
其它元素
            
其它元素
        
        

            父亲元素
            
之前的兄弟元素
            
上一个兄弟元素
            

                选中元素
                

                    孩子元素
                    
孙子元素
                    
孙子元素
                
                

                    孩子元素
                    
孙子元素
                
            
            
下一个兄弟元素
            
之后的兄弟元素
        
    

4、元素操作

jQuery 提供了一系列操作 DOM 的方法，用于访问和操作元素及其属性

（1）访问和操作元素

• text([] | [])：访问或操作选中元素的文本内容
• html([] | [])：访问或操作选中元素的内容
• val([] | [])：访问或操作表单字段的值

    
    
    
    


    
waiting to change
    set text
    set html

（2）访问和操作属性

• prop([, ] | { : , ... })：访问和操作选中元素的属性

  如果存在指定的属性，返回相应的值；如果没有指定的属性，返回 空字符串

• attr([, ] | { : , ... })：访问和操作选中元素的属性

  如果存在指定的属性，返回相应的值；如果没有指定的属性，返回 undefined

    
    
    
    


    
What fruit do you like to eat?
    
All
    
Apple
    
Banana
    
Cherry

（3）添加元素

• append(|)：在选中元素的结尾添加内容（仍属于该元素）
• prepend(|)：在选中元素的开头添加内容（仍属于该元素）
• after(|)：在选中元素的后面添加内容（不属于该元素）
• before(|)：在选中元素的前面添加内容（不属于该元素）

    
    
    
    


    
origin text
    add text

（4）删除元素

• remove()：删除选中元素及其后代元素
• empty()：删除选中元素的后代元素

    
    
    
    


    

        waiting to remove
        
la la la
        
bla bla bla
    
    remove element
    


    

        waiting to empty
        
la la la
        
bla bla bla
    
    empty element

5、样式设置

jQuery 也提供了操作样式的方法，用于设置元素的 class 和 style

（1）class

• addClass()：向选中元素添加 class，可以添加一个或多个
• removeClass()：从选中元素删除 class，可以删除一个或多个
• toggleClass()：对选中元素进行 添加 / 删除 class 的切换操作

（2）style

• css([, ] | { : , ... })：访问或设置选中元素的 style

    
    
    
    


    
这是一段文字
    

larger

（3）size

• width()：访问或设置元素的宽度（width）
• height()：访问或设置元素的高度（height）
• innerWidth()：访问或设置元素的内宽度（width + padding）
• innerHeight()：访问或设置元素的内高度（height + padding）
• outerWidth()：访问或设置元素的外宽度（width + padding + border）
• outerHeight()：访问或设置元素的外高度（height + padding + border）
• outerWidth(true)：访问或设置元素的外宽度（width + padding + border + margin）
• outerHeight(true)：访问或设置元素的外高度（height + padding + border + margin）

    
    
    
    
    


    

    
rectangle width: 
    
rectangle height: 
    
rectangle inner width: 
    
rectangle inner height: 
    
rectangle outer width: 
    
rectangle outer height: 
    
rectangle outer width true: 
    
rectangle outer height true: 

6、事件操作

在 jQuery 中，对于大多数的事件操作都有一个等效的 jQuery 方法

（1）鼠标事件

• click()：点击选中元素
• dbclick()：双击选中元素
• mouseenter()：鼠标移入选中元素
• mouseleave()：鼠标移出选中元素
• hover([, ])：鼠标悬浮在选中元素

    
    
    
    
    


    

        
Hello World
    

（2）键盘事件

• keypress()：按下键盘的某一按键，并且产生一个字符时触发
• keydown()：按下键盘的某一按键时触发
• keyup()：松开键盘的某一按键时触发

（3）表单事件

• submit()：提交表单
• change()：当选中元素的值发生改变
• focus()：当选中元素获得焦点
• blur()：当选中元素失去焦点

（4）文档 / 窗口事件

• resize()：调整浏览器窗口大小
• scroll()：滚动指定元素

7、过渡与动画

在 jQuery 中，也可以处理过渡与动画效果

（1）显示隐藏

• hide([[, ]])：隐藏选中元素
• show([[, ]])：显示选中元素
• toggle([[, ]])：切换 hide() 和 show() 方法隐藏或显示选中元素

    
    
    
    


    
这是一段文本
    Show / Hide

（2）淡入淡出

• fadeIn([[, ]])：淡入隐藏的选中元素
• fadeOut([[, ]])：淡出可见的选中元素
• fadeToggle([[, ]])：切换 fadeIn() 和 fadeOut() 方法淡入或淡出选中元素
• fadeTo(, [, ])：为指定元素设置不透明度

（3）滑动

• slideDown([, ])：向下滑动选中元素
• slideUp([, ])：向上滑动选中元素
• slideToggle([, ])：切换 slideDown() 和 slideUp() 方法向下或向上滑动选中元素

    
    
    
    
    


    
announcement
    

（4）动画

• animate({: , ...}[, [, ]])：为选中元素设置自定义动画

    
    
    
    
    


    
announcement

8、AJAX

• load(, , )：从服务器加载数据，并把返回的数据放入选中元素
• get(, )：从指定资源请求数据
• post(, , )：向指定资源提交数据

    
    
    
    


    get data
    
response status: 

【 阅读更多 JavaScript 系列文章，请看 JavaScript学习笔记 】