jQuery基础

jQuery基础

一、jQuery简介

是一款JavaScript库
方便地处理HTML、事件、动画等

html:处理HTML文档中的DOM节点，如添加、删除等
事件：通过jQuery对页面上的事件进行处理（绑定或解绑事件）
动画：通过jQuery实现淡入、淡出、滑动等动画

可以兼容多浏览器
80%以上网站使用

1.jQuery下载与使用
①下载地址：
http://jquery.com/

②压缩和非压缩版本
• Download the compressed, production jQuery
下载压缩版本，用于生产
• Download the uncompressed, development
jQuery 下载非压缩版本，用于开发

③使用：放在body的最后，防止影响性能

④版本的选择：
• V1.x
• V2.x：不兼容IE6-8
• V3.x：分为精简版和普通版

⑤使用CDN
• Content Delivery Network 内容分发网络
• https://code.jquery.com/
使用CDN的好处：性能提高，加快下载速度

在页面中使用cdn：

2.设计哲学
• Write less，do more

结构、表现、行为分离：

结构表现和行为分离.jpg

混杂的.jpg

分离的.jpg

二、jQuery的使用

1.$
jQuery的全局变量，$为该全局变量的别名，其他的jQuery的函数、属性等都定义在该全局变量内。

window.jQuery === window.$

2.$.xxx
调用jQuery本身的属性和方法：

$.each(…)
$.noop
$.toArray()
…

3.$(xxx)
调用jQuery本身的选择，返回一个jQuery对象，xxx为一个查询表达式或者DOM元素等

$('#myDiv')
$('.myClass')
…
$(domObject) -> jQuery Object
$(xxx).get(0) -> DOM Object
$(xxx)[0] -> DOM Object

jQuery对象：
1.是原生DOM对象的封装
2.jQuery对象和原生的DOM对象不同（但可以相互转换）
3.jQuery对象包含了很多方法，方便的操作DOM元素

DOM和jQuery对象转换：任何DOM元素只要通过$()包裹住就变成了jQuery对象

4.链式语法chaining

$('#divTest').text('Hello, world!')
$('#divTest').removeClass('blue')
$('#divTest').addClass('bold')
$('#divTest').css('color', 'red')

--->

$('#divTest')
.text('Hello, world!')
.removeClass('blue')
.addClass('bold')
.css('color', 'red')

内部：每次调用都会返回一个jQuery对象，所以就可以直接再调用，而不用重复再声明一次对象。

注意一：有些jQuery方法有破坏性，如find() add children filter等方法
注意二：有写jQuery方法并不返回jQuery对象

    

        test
    
    

        
123
        
123
        
123
    
    
    
    

5.ready()

$(document).ready(function(){…})

一般在写jQuery的一些操作时，要保证页面的DOM已经加载完毕：
方法一：可以通过window.onload事件；
方法二：ready()方法；

针对有些页面，实际上DOM结构已经加载完毕了，但还在等待加载一些内容，比如一些图片网站，而window onload必须要等页面完全所有DOM的完成，也就是等待这些内容都加载完毕，图片下载完，iframe加载完才能加载window onload后面的处理。而ready方法只会检查DOM结构是否加载完，不会等待图片等其他东西，响应就会快很多。

注意：两个方法最好不要同时使用，有些情况会导致ready失效