jQuery的诞生及简单操作

一、jQuery诞生背景

JavaScript中原生的好多写法对操做页面元素来说一个词“繁琐”，虽然原生有原生的好处，但是“繁琐”在好多时候还是让人难以忍受的。

就在那个时候，有位名叫John Resig的外国工程师创立了名为jQuery的一个框架库。jQuery横空出世后，成为了DOM编程领域的霸主，极大的简化了原生JavaScript的DOM编程。
围观一下jQuery的整体架构：

jQuery整体框架.png

二、jQuery能够解决处理js原生DOM操作的几个问题及相关函数

1. 页面元素选择问题解决及$()函数

$()函数就是jQuery的核心函数，query就是选择的意思，也就是说jQuery的核心功能就是选择元素：

$("#box ul li.light span")

(“选择器”)```
选择的就是所有符合条件的元素（可以说成是一个集合，类似数组），而不是一个。

和jQuery是同一个函数：

jQuery("#box ul li.light span")

2. 页面元素样式问题解决及CSS()函数

获取页面类名为box的元素的宽度，得到样式如下：

$(".box").css("width");

通过$()函数选择出来的东西，都是jQuery对象，所有的jQuery对象，都可以继续打点调用css函数，css函数已经封装了计算后的样式。设置样式如下：

$(".box").css({
    "width":700,
    "height" : 300,
    "opacity" : 0.4
});

3. 页面元素动画问题的解决及animate()函数

jQuery内部含有一个运动框架（牛牛牛，比原生看起来强好多！）

$(".box").animate({"left":900},4000,function(){
    alert("运动完成");
});

4. 批量添加监听、节点

$(".circles ol li").mouseenter(function(){
        $(this).css("background-color","red");
});

三、应用实例展示

1.文本加颜色

    
        
        
        
          
    
    
        
 p1 
        
 p2 
        
 p3 
        
 p4 
        
    

文本颜色.png

2.div元素加样式背景

div加背景.png