1、jQuery介绍

jQury官网：https://jquery.com/

2、jQuery文件的引入

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery的引入</title>

</head>

<body>

    <div>1111</div>

</body>

<!--都是在body后面-->

    <!--1. 引入jQuery:-->

    <script src="jquery-3.2.1.js"></script>

    <!--2. JQuery代码-->

    <script type="text/javascript">

        $(document).ready(function () {

            alert(111);

        })

    </script>

</html>
        *   jquery-3.2.1.js        用在开发环境

        *   jquery-3.2.1.min.js    用在生产环境

　　网上的jQuery文件： http://libs.baidu.com/jquery/2.0.0/jquery.min.js

2、js的痛点

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>js的痛点</title>

    <style type="text/css">

        div{

            background-color: #1b6d85;

            height: 50px;

            width: 500px;

            display: none;

            margin-bottom: 10px;

        }

    </style>

</head>

<body>

    <button id="btn">展示</button>

    <div></div>

    <div></div>

    <div></div>

</body>

<script type="text/javascript">

    //当html执行完，加载函数

    window.onload = function () {

        //1.获取便签

        var oBtns = document.getElementById('btn');

        var oDivs = document.getElementsByTagName('div');

        //2.点击函数

        oBtns.onclick = function () {

            //3.增加样式

            for(var i=0; i<oDivs.length; i++){

                oDivs[i].style.display = 'block';

                oDivs[i].innerHTML = 'div被展示了';

            }

        }

    }

</script>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>js的痛点</title>

    <style type="text/css">

        div{

            background-color: #1b6d85;

            height: 50px;

            width: 500px;

            display: none;

            margin-bottom: 10px;

        }

    </style>

</head>

<body>

    <button id="btn">展示</button>

    <div></div>

    <div></div>

    <div></div>

</body>

<!--外部引入式：网上连接-->

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

        <!--静态文件-->

<script src="jquery-3.2.1.js"></script>

<script type="text/javascript">

    //jQuery代码

    //如果使用jQuery操作上面的案例，很简单，三句代码搞定

    $(function () {

        $('#btn').click(function () {

            $('div').css('display','block');

            $('div').html('div被展示了');

        })

    })

</script>

</html>

3.jQuery入口函数

// js的入口函数

 <script type="text/javascript">

        window.onload = function () {

            alert(111);

        };

    </script>
    <script src="jquery-3.2.1.js"></script>

    <script type="text/javascript">

        //书写jquery的方式  入口函数

        $(document).ready(function () {

        });

        //等价于

        $(function () {

        })

    </script>

（1）如果没有引入jquery ：$ is not defined

　　（2）jquery是js的一个库文件，既然是库文件，那么就会抛出来一个构造函数或者对象

4.JavaScript和jquery的区别

  1. Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。
  2. jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发
  3. jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到

注意：一般情况下，是库的文件，该库中都会抛出来构造函数或者对象，如果是构造函数，那么使用new关键字创建对象，如果是对象直接调用属性和方法

　　

　　（1）DOM文档加载的步骤

                . 解析HTML结构。

                . 加载外部脚本和样式表文件。

                . 解析并执行脚本代码。

                . DOM树构建完成。

                        $(document).ready()

                . 加载图片等外部文件。

                . 页面加载完毕。

                        window.onload()

　　（2）执行时间不同

.window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

                如果不写 window.onload  代码的执行顺序是 从上到下

. $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

　　（3）编写个数不同

    . window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个

    .$(document).ready()可以同时编写多个，并且都可以得到执行

　　（4）简化写法不同

　　   . window.onload没有简化写法

　　   .$(document).ready(function(){})可以简写成$(function(){});

　　　　

21-[jQuery]-介绍，引入方式，与js的区别的更多相关文章

  1. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  2. Electron中Jquery的引入方式

    原文链接http://huisky.com/blog/16122220522957 Electron默认启用了Node.js的require模块,而jQuery等新版本框架为了支持commondJS标 ...

  3. Python--前端基础之JavaScript（JS的引入方式，JS的变量、常量和标识符，JS的数据类型，运算符，流程控制，JavaScript的对象）

    JavaScript介绍 JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互. JavaScript是浏览器解释执行的,前端脚 ...

  4. jQuery的封装方式与JS中new的实现原理

    function jQuery() { return new jQuery.fn.init(); } jQuery.fn = jQuery.prototype = { init: function() ...

  5. css js 的引入方式和书写位置

    css 的引入方式 1.行内样式 <div id="div1" style="width:100px; height:100px; background:red&q ...

  6. 自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)

    这个插件主要是结合jquery或者xhr异步请求来使用的,它可以把已经引入过的js文件记录在浏览器内存中,当下次再引入相同的文件就忽略该文件的引入. 此插件不支持浏览器刷新保存数据,那需要利用cook ...

  7. offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. JS 引入方式 基本数据类型 运算符 控制语句 循环 异常

    一.JS引入方式 什么是JavaScript? JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互,JavaScript是浏览 ...

  9. JavaScript 基础(一) - JavaScript的引入方式，JavaScript 变量命名规则，JS 的五种基本数据类型，ECMAScript 算数运算符，逻辑运算符

    JavaScript的引入方式 直接编写 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

随机推荐

  1. django新建项目，连接mysql数据库

    安装django,进入Django目录,运行 python setup.py install 在workplace目录下新建一个名为site01的项目: cd workplacedjango-admi ...

  2. 剑指offer 08跳台阶

    一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). java版本: public class Solution { public s ...

  3. Log Structured Merge Trees (LSM)

    1      概念 LSM = Log Structured Merge Trees 来源于google的bigtable论文. 2      解决问题 传统的数据库如MySql采用B+树存放数据,B ...

  4. 基于easyui开发Web版Activiti流程定制器详解（四）——页面结构（下）

    题外话: 这两天周末在家陪老婆和儿子没上来更新请大家见谅!上一篇介绍了调色板和画布区的页面结构,这篇讲解一下属性区的结构也是定制器最重要的一个页面. 属性区整体页面结构如图:  在这个区域可以定义工作 ...

  5. 20165318 2017-2018-2 《Java程序设计》第七周学习总结

    20165318 2017-2018-2 <Java程序设计>第七周学习总结 目录 学习过程遇到的问题及总结 教材学习内容总结 第11章 JDBC与MySQL数据库 错题总结 第五周错题总 ...

  6. 【CF163E 】e-Government

    题目 两个\(log\)的树状数组套树剖? 我们对于给出的\(n\)个模式串建立\(AC\)自动机,之后对于每一个询问串直接丢上去匹配 如果这里是暴力的话,我们直接一路跳\(fail\)累加作为结束位 ...

  7. vue 项目项目启动时由于EsLint代码校验报错

    今天在编写好vue项目代码时,在命令行输入npm start的时候出现了如下图所示的一大堆错误: 在网上查找资料说是缺少EsLint配置文件的问题,最终找到一篇由 hahazexia 编写的一篇博客文 ...

  8. Lambda表达式和For循环使用需要注意的一个地方

    一个需要注意的地方看下面的代码: using System; using System.Collections.Generic; using System.Linq; namespace MyCsSt ...

  9. 联通营业厅API 获取个人信息

    string newValue = base.Request["tel"]; string newValue2 = base.Request["pwd"]; s ...

  10. 论mysql主从复制里面的那些坑

    1.找好配置文件,修改对的配置文件,有的时候会有多个配置文件,要搞清楚加载的哪个配置文件. 2.主库备份钱的操作除了设置 只读状态外,还要设置全局只读=1. 3.mysqldump备份sql很方便,恢 ...