1、什么是Jquery

(1)JQ图标分析:

jq:初识(初识JQ、JQ入口函数与JS入口函数的区别)_jquery对象

 J:代表JS

Query:查询

write less,do more:写更少的代码,做更多的事情(对HTML文档的遍历和操作、事件处理、动画、Ajax变得更加简单)

(2)概念

jQuery本质上是一个快速、简洁的JavaScript框架。

(3)js库

即library,是一个封装好的特定的集合(方法和函数),从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,如动画:animate、hide、show元素等

简单理解:就是一个js文件,里面对我们的原生js代码进行了封装,存放到里面,这样的话我们可以高效地使用这些封装好的功能

(4)优点

  • 轻量级,核心文件几十kb,不会影响页面的加载速度
  • 基本兼容了现在的主流浏览器
  • 链式编程、链式迭代
  • 对事件、样式、动画支持,大大简化了dom操作
  • 支持插件扩展开发,有着丰富的第三方插件,例如:树形菜单、日期控件、轮播图等
  • 免费、开源

(5)下载

jq:初识(初识JQ、JQ入口函数与JS入口函数的区别)_html_02

 

 生产版本是压缩后的,开发版本的未压缩

 

2、新建Jquery项目

目录结构:

jq:初识(初识JQ、JQ入口函数与JS入口函数的区别)_ajax_03

 代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Jquery入门</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                alert("Hello Jquery!");
            });
        </script>
    </head>
    <body>
    </body>
</html>

运行结果:

jq:初识(初识JQ、JQ入口函数与JS入口函数的区别)_ajax_04

 

 

 

 3、JQ入口函数与JS入口函数的区别

(1)JQ的入口函数

方式一:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Jquery入门</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            jQuery(document).ready(function(){
                alert("新年快乐!");
            });
            
            $(document).ready(function(){
                alert("Happy new year");
            });
            
            $(function(){
                alert("天天开心!");
            });
        </script>
    </head>
    <body>
    </body>
</html>

方式二:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                width: 200px;
                height: 300px;
                background-color: darkred;
                border: 2px solid red;
            }
        </style>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    </head>
    <body>    
        <div></div>  
         <script>
             $(function(){
                 $('div').hide();
             })
         </script>
     
    </body>
</html>

JS入口函数:

window.onload = function () {
    // 执行代码
}

(2)JS存在覆盖问题,JQ不存在

JS:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Jquery入门</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            window.onload = function(){
                alert("新年快乐");
            }
            
            window.onload = function(){
                alert("2020");
            }
        </script>
    </head>
    <body>
    </body>
</html>

只会显示后面的内容:

jq:初识(初识JQ、JQ入口函数与JS入口函数的区别)_jquery_05

 

 

 JQ:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Jquery入门</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                alert("2020");
            });
            
            $(function(){
                alert("新年快乐!");
            });
            
            $(function(){
                alert("Happy new Year!");
            });
        </script>
    </head>
    <body>
    </body>
</html>

点击确认按键,依次显示以下内容:

jq:初识(初识JQ、JQ入口函数与JS入口函数的区别)_jquery对象_06

 

 

 jq:初识(初识JQ、JQ入口函数与JS入口函数的区别)_封装_07

jq:初识(初识JQ、JQ入口函数与JS入口函数的区别)_jquery_08

 (3)JQ的加载速度要比JS快:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Jquery入门</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            
            window.onload = function(){
                alert("新年快乐!");
            }
            
            $(function(){
                alert("2020");
            });
    
        </script>
    </head>
    <body>
    </body>
</html>

jq:初识(初识JQ、JQ入口函数与JS入口函数的区别)_ajax_09

 

 

 

jQuery 的入口函数是在 html 所有标签都加载之后,才会去执行。

JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行,因此,加载速度较慢。

 

4、$是jQuery的别称

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                width: 200px;
                height: 300px;
                background-color: darkred;
                border: 2px solid red;
            }
        </style>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    </head>
    <body>    
        <div></div>  
         <script>
             jQuery(function(){
                 jQuery('div').hide();
             })
         </script>
     
    </body>
</html>

$是JQuery的别称,在代码中可以代替Jquery的书写,更加方便快捷

$是Jquery的顶级对象,相当于原生的js中的window对象,把元素利用$包装成JQuery对象,就可以调用JQuery的方法了

 

5、JQuery对象与DOM对象

(1)基本使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    </head>
    <body>    
        <div></div>  
         <script>
              var div=document.querySelector("div");
              console.dir(div);
              
              console.dir($("div"));
         </script>
     
    </body>
</html>

jq:初识(初识JQ、JQ入口函数与JS入口函数的区别)_jquery对象_10

  • DOM对象是原生的js获取过来的
  • JQuery对象是用jq的方式获取过来的对象,本质上是$把dom元素进行了封装(伪数组的形式存储)
  • Jquery对象只能使用jQuery的方法,dom对象使用的是原生js的属性和方法
     div.style.display='none';
    $(div).hide();

(2)dom对象与jQuery对象的转换

DOM对象与Jquery对象是可以相互转换的

因为原生的js要比jq大,原生的一些属性和方法是没有封装到jq中的,要想使用这些对象就要把Jquery对象转换为DOM对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    </head>
    <body>    
        <img src="img/1.jpeg" />
         <script>
              var picture=document.querySelector("img");
              $(picture).hide();
         </script>
     
    </body>
</html>

 

6、jq的排他思想

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    </head>
    <body>    
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
         <script>
               $(function(){
                   $('button').click(function(){
                       $(this).css("background-color","red");
                    $(this).siblings("button").css("background-color","");
                   })
               })
         </script>
     
    </body>
</html>

jq:初识(初识JQ、JQ入口函数与JS入口函数的区别)_封装_11

 这里面包含隐式迭代(遍历所有的button或其余的兄弟节点),不需要再写for循环进行遍历

 

7、对象拷贝

(1)概念

如果想要把某一个对象拷贝给另一个对象使用,可以使用$.extends()方法

(2)拷贝对象

<body>
        <script>
          var mytarget={};
          var obj={
              id:1,
              name:"tom"
          };
          $.extend(mytarget,obj);
          console.log(mytarget);
        </script>
    </body>

jq:初识(初识JQ、JQ入口函数与JS入口函数的区别)_jquery对象_12

参数1:设置为true为深拷贝,默认是浅拷贝

参数2:target,要拷贝的目标对象

参数3:待拷贝到第一个对象的对象

目标对象不为空且与将要拷贝的对象的元素不重名:

<body>
        <script>
          var mytarget={
              password:"123123"
          };
          var obj={
              id:1,
              name:"tom"
          };
          $.extend(mytarget,obj);
          console.log(mytarget);
        </script>
    </body>

jq:初识(初识JQ、JQ入口函数与JS入口函数的区别)_jquery_13

 目标对象不为空且与将要拷贝的对象存在同名元素:

<body>
        <script>
          var mytarget={
              password:"123123"
          };
          var obj={
              password:123,
              id:1,
              name:"tom"
          };
          $.extend(mytarget,obj);
          console.log(mytarget);
        </script>
    </body>

jq:初识(初识JQ、JQ入口函数与JS入口函数的区别)_jquery_14

 会覆盖原来对象中的同名元素的值

(3)深拷贝与浅拷贝

浅拷贝是把拷贝对象复杂类型中的地址拷贝给目标对象,修改目标对象会影响到拷贝对象

深拷贝是完全克隆,拷贝的是对象不是地址,修改目标对象不会影响到被拷贝的对象

 

8、多库共存

jQuery使用$作为标识符,随着jQuery的流行,其他的js库也会用$作为标识符,这样一起使用的话会引起冲突

解决方案:

将jq的$改为jQuery,因为在jq中$和jQuery是等效的

 

每个人都会有一段异常艰难的时光 。 生活的压力 , 工作的失意 , 学业的压力。 爱的惶惶不可终日。 挺过来的 ,人生就会豁然开朗。 挺不过来的 ,时间也会教你 ,怎么与它们握手言和 ,所以不必害怕的。 ——杨绛