jquery——1介绍

最新推荐文章于 2020-09-07 09:58:12 发布

inexaustible

最新推荐文章于 2020-09-07 09:58:12 发布

阅读量221

点赞数

分类专栏： Java ee自学

本文链接：https://blog.csdn.net/inexaustible/article/details/103372862

版权

Java ee自学专栏收录该内容

40 篇文章 0 订阅

订阅专栏

Js:javascript

web前端有一句话:html:结构层,css:表现层,js行为层

js的缺点

Js:ecmaScript的一个实现;js本身也是一个接口;由各大浏览器来实现js的接口;比如:三个浏览器对js的提示框(有三个)展现效果不一样;

要想实现一个效果,三个浏览器写的js代码不一样;ajax(局部刷新-学完服务器端的时候再说)三个浏览器的写法不一样
Js要想使用一个方法或者属性,或者功能;代码比较长;
1. Dom元素;获取dom元素;(和css的选择器一样);id选择器:css和js代码不一样;CSS(#),JS(document.getElementById());
2. 特别想封装一个方法;将那么长的代码(或者功能)封装在一起;
Js做出来的动画特别的low;动画实现起来代码冗余;
Js:轮播图:js制作一个报表,js制作一个图片浏览器,局部放大(商城);代码特别长;
1. Eclipse可以把这些炫的效果做一个插件;
2. 凡是能够流行的软件和框架都是插件满天飞(网上一搜索一大堆)

1.1 介绍：

Jquery它是一个Js的库;是一个别人将一些功能封装好了给我们使用;JS的功能>jquery的功能;
库和框架:都是别人写好的代码,我们直管调用就可以了;只关心参数和返回值、方法名,至于方法体从来不关心;API;
API类似于你生活古代,在一个大庄园上班,管家分给你啥活,你只管干就可以了。

学习库和框架的时候有三个境界:
- 熟练运用+使用
- 看源代码
- 写一个类似的出来

1.2 Jquery

官网: http://jquery.com/download/

jquery-3.2.1.min.js:压缩版的;就是将js文件中所有空格+换行都去掉了;做为使用者,一般使用此版本就可以;(YUI压缩工具)

jquery-3.2.1.js:未压缩;如果想看源代码的,那使用此版本(有格式)

压缩的文件大小是未压缩文件大小的3倍左右;从网上下载的文件是越小越好;JSON战胜XML的原因

1.3 案例

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>jquery_01_hw</title>
   
   <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
   <script type="text/javascript">
       /*
           点击一下,将div的内容给换掉(开始标签和结束标签)
       */
       /**
           原生的js版本
       */
       function testJs(){
           console.info("==testJs==");
           /*
               ~选择一个合适的选择器,获取dom元素
               ~获取dom的三要素值
               ~修改dom的三要素值
           */
           var jsDom = document.getElementById("div");
           console.info("==innerHTML==" + jsDom.innerHTML);
           jsDom.innerHTML = ("我是js修改的");
       }

       /*
           jquery的版本
       */
       function testJquery(){
           console.info("==testJquery==");
           /*
               ~选择一个合适的选择器(和CSS的一样),获取dom元素
               ~获取dom的三要素值
               ~修改dom的三要素值

               使用Jquery,都是$("");
               ~参数是选择器(和CSS一样)
               ~返回值是Jquery对象
           */
           var div = $("#div");
           /* 参数如果没有传,就是获取三要素的值 */
           console.info("==innerHTML==" + div.html());
           /* 参数如果传了,就是为三要素赋值 */
           div.html("我是jquery修改的");
       }
   </script>
</head>
<body>
   <div id="div">这是div</div>
   <button οnclick="testJs()">js版本</button>
   <button οnclick="testJquery()">jquery版本</button>
</body>
</html>