认识jQuery

一、JavaScript库

把一些浏览器兼容性的代码或者需要常用的函数装在一个js文件里,封装了很多js代码的一个js文件就是一个库

二、jQuery

• 是一个JavaScript库，免费开源的，体积小，链式编程，隐式迭代，很多优点
• jQuery 的功能概括：html 的元素选取、html的元素操作、html dom遍历和修改、js特效和动画效果、css操作、html事件操作、ajax异步请求方式

三、版本

• 网址：jquery.com

• jQuery的js文件每个版本有两个，第一个是正常版本，第二个是压缩版本，开发的时候两个都可以使用，上线的时候推荐使用压缩版本

• jQuery 版本 2 以上不支持 IE6，7，8 浏览器。如果需要支持 IE6/7/8，那么请选择1.9，你还可以通过条件注释在使用 IE6/7/8 时只包含进1.9。

<!--[if lt IE 9]>
    <script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="jquery-2.0.0.js"></script>
<!--<![endif]-->

四、初体验

1.常识：

• 如果需要使用jQuery中的属性或者方法，那么需要jQuery.属性或者jQuery.方法（）来使用
• 简单的写法：$.属性，或者$.方法
• 大多数情况下，jQuery中使用的都是方法，属性很少
• jQuery中几乎把DOM的事件都封装成了一个方法，在jQuery中几乎是把on去掉，然后变成方法了

    <!-- 
        例子:
        DOM中注册事件: document.getElementById("id的属性值").onclick=匿名函数;
        jQuery中注册事件:$("#id属性值").click(匿名函数)
     -->

2.案例

    <input type="button" value="设置" id="btn">
    <div id="dv"></div>
    <!-- 引入js文件(百度cdn) -->
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        //点击按钮.设置div的宽和高,以及背景颜色
        $("#btn").click(function(){
            $("#dv").css({"width":"200px","height":"200px","backgroundColor":"yellow"});
        });
    </script>

    <input type="button" value="修改" id="btn">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        //修改所有p标签的内容
        $("#btn").click(function(){
            $("p").text("标签p的内容被修改了");
        });
    </script>

五、顶级对象

• jQuery的顶级对象jQuery------符号$代替，方便使用
• 浏览器的顶级对象window
• 页面的顶级对象document

六、jQuery对象和DOM对象互转的问题

• 元素通过DOM获取就是DOM对象，通过jQuery获取就是jQuery对象
• DOM对象调用jQuery的方法不能实现，必须是jQuery对象才能调用jQuery方法
• jQuery对象调用DOM对象的属性和方法也不能实现，但可以使用jQuery对象[0]转DOM对象

    <input type="button" value="点击" id="btn1">
    <input type="button" value="点击" id="btn2">
    <!-- 引入jQuery文件 -->
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        //通过DOM获取的DOM对象
        var btnObj1=document.getElementById("btn1");
        btnObj1.click(function(){
            console.log("哈哈");//无效
        });
        //通过jQuery获取的jQuery对象---转DOM对象
        var btnObj2=$("#btn2");
        btnObj2[0].onclick=function(){
            console.log("哈哈");//哈哈
        };
    </script>

七、jQuery文件的引入

• 下载代码文件至本地项目中，引入。

<script src="jQuery文件的地址"></script>

• 通过 CDN（内容分发网络） 引用它

使用CDN引用的一个好处：许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。

同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

菜鸟教程CDN：<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

百度CDN：<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

又拍云：<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>

新浪：<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

Google：<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> （站点用户是国外的才使用google的，国内使用google不稳定）

Microsoft：<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>

八、案例：网页开关灯

    <!-- DOM版本的写法 -->
    <input type="button" value="DOM关灯" id="btn1">
    <script>
        document.getElementById("btn1").onclick=function(){
            var body=document.body;
            if(body.style.backgroundColor=="black"){
                body.style.backgroundColor="";
                this.value="DOM关灯";
                
            }else{
                body.style.backgroundColor="black";
                this.value="DOM开灯";
            }
        };
    </script>

 <!-- jQuery版本写法 -->
    <input type="button" value="jQuery关灯" id="btn2">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $("#btn2").click(function(){
            if($(this).val()=="jQuery关灯"){
                $("body").css("backgroundColor","black");
                $(this).val("jQuery开灯");
            }else{
                $("body").css("backgroundColor","");
                $(this).val("jQuery关灯");
            }
        });
    </script>