认识jQuery

jQuery是一个JavaScript库

jQuery具备简洁的语法和跨平台的兼容性

简化了JavaScript的操作

Document object model 文档对象模型

jQuery具备简洁的语法和跨平台的兼容性。简化了JavaScript操作。

美元符号代表jQuery

通过jQuery方法包装后的对象,是一个数组对象。

jQuery的功能和优势

轻量级 :jQuery引用的js文件小

强大的选择器: JQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及JQuery独创的高级而且复杂的选择器,另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器.

出色的 DOM 操作的封装 :JQuery封装了大量常用的DOM操作

可靠的事件处理机制:吸收了JavaScript专家Dean Edwards编写的事件处理函数

完善的 Ajax : JQuery将所有的Ajax操作封装到一个函数$.ajax()里,使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。

不污染顶级变量:只建立一个名为JQuery的对象,函数方法都在这个对象之下。其别名$也可以随时交流控制权,绝对不会污染其他的对象

出色的浏览器兼容性:JQuery能够在IE6.0+,FF 2+,Safari2.+和Opera9.0+下正常运行

链式操作方式 :最有特色的莫过于它的链式操作方式——即对发生在同一个JQuery对象上的一组动作,可以直接接连写无需要重复获取对象。

隐式迭代:用JQuery找到带有“.myClass”类的全部元素,然后隐藏他们时。无需循环遍历每一个返回的元素。相反,JQuery里的方法都被设计成自动操作的对象集合,而不是单独的对象,这使得大量的循环结构变得不再必要,从而大幅度地减少代码量。

行为层和结构层的分离:使用选择器选中元素,然后直接给元素添加事件。这种将行为层与结构层完全分离的思想,可以使JQuery开发人员和HTML或其他页面开发人员各司其职,摆脱过去开发冲突或个人单干的开发模式

丰富的插件支持:易扩展性,吸引了来自全球开发者来编写JQuery的扩展插件。目前已经有超过几百种官方插件支持

完善的文档: JQuery的文档非常丰富,现阶段多位英文文档,中文文档相对较少。很多热爱JQuery的团队都在努力完善JQuery中文文档

开源 :开源的产品

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>环境搭建</title>
<!--本地引入-->
<script type="text/javascript" src="js/jquery.js"></script>
<!--远程CDN引入-->
<!-- <script src=”http://libs.baidu.com/jquery/1.9.1/jquery.min.js”></script>-->
</head>
<body>
</body>
</html>

下载jQuery

网站: http://www.jq22.com/jquery-in...

jQuery库的类型分为两种,分别是生产版(最小压缩版)和开发版(未压缩版)

jquery.js(开发板) 用于测试,学习和开发;

Jquery.min.jsp(生产版) 经过工具压缩或经过服务器开启Gzip压缩,主要应用于产品和项目;

<!--本地jQuery-->

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">

  $(document).ready(function () {   //等待DOM元素加载完毕

  alert(“Hello World!”);      //弹出一个框

          });

<script>

jQuery文档就绪函数

JavaScript和jQuery加载就绪函数的区别实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
//            JavaScript和jQuery加载就绪函数的区别
            /*window.onload = function(){
                alert("onload-1");
            }
            window.onload = function(){
                alert("onload-2");
            }
            
            $(document).ready(function(){
                alert("jQuery-1");
            })
            $(document).ready(function(){
                alert("jQuery-2");
            })*/
            
            
            //jQuery的就绪函数的三种写法
            $(document).ready(function(){
                alert("完整写法");
            })
            $().ready(function(){
                alert("少一点写法");
            })
            $(function(){
                alert("最简写法");
            })
        </script>
        
    </head>
    <body>
    </body>
</html>

jQuery对象与DOM对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //DOM对象
            /*window.onload = function(){
                var pOne = document.getElementById("one");
                console.log("DOM对象");
                pOne.style.color="red";
                console.log(pOne);
            }
            */
            //jQuery对象
            $(function(){
                var $pOne = $("#one");
                console.log("jQuery对象");
                console.log($pOne);
            })
            
            //jQuery对象
            $(function(){
                var $pOne = $("p");
                console.log("jQuery对象");
                console.log($pOne);
            })
            
            
            $(function(){
                $("#two").css("color","cornflowerblue");
                
                /*
                 * jQuery对象转化为DOM对象
                 *  通过下标去获取
                 * (1)$("#two")[0];
                 * (2)$("#two").get(0);
                 */
                //获取$("#two")的第一个DOM对象
                console.log($("#two")[0]);
                
                
                /*
                 * DOM对象转化为jQuery对象
                 * 只需使用$()去包装DOM对象
                 * var pOne = document.getElementById("one");
                 * $(pOne);
                 */
                var pOne = document.getElementById("one");
                console.log($(pOne));
            })
            
        </script>
    </head>
    <body>
        <p id="one">p_one</p>
        
        <p id="two">p_two</p>
    </body>
</html>

jQuery对象与DOM对象的对比:

jQuery方法包装后的对象,是一个数组对象,而DOM对象就是一个单独的DOM元素。它与DOM对象完全不同,唯一相似的是它们都能操作DOM;

jQuery对象无法使用DOM对象的任何方法, 同样DOM对象也不能使用jQuery里的任何方法;

约定:如果获取的是 jQuery 对象, 那么要在变量前面加上 $.

var $variable = jQuery 对象

var variable = DOM 对象

jQuery对象和DOM对象的区别是什么?

jQuery对象是以数组对象的形式存在的,DOM对象,他是一个文档对象模型,指某个元素

jQuery与DOM对象不同点:结构,jQuery是数组,js单一,(只能调用自己有的方法)

共同点:操作DOM

jQuery对象转成DOM对象,有如下两种处理方法:

1.jQuery对象是一个数组对象,利用数组下标[index]的方法得到对应的DOM对象.

2.使用jQuery中的get(index)方法得到相应的DOM对象。

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章