jQuery：jquery插件代码分析 + node中npm使用 + Bootstrap(全局css样式、组件、插件）

jquery插件项目代码分析

　　链接：http://www.jq22.com/

　　在 jquery插件中文网 中有很多的项目，可以下载下来，将功能嵌套到自己的项目中，学会看别人的代码。

　　 - 以 登录 为例进行分析

 

node中npm使用

 

　　前端中的nodejs软件

　　1、安装nodejs  自带了 npm     

　　　　　安装包：npm install Bootstrap     npm install jQuery

　　　　好比安装python  自带了pip

　　　　　安装模块：  pip  install  request

　　2、初始化方式目录

　　　　在cmd中切换到当前项目目录：cd + 当前目录

　　　　　　方式一：npm init

　　　　　　方式二：npm init --yes

　　　　　　　　两种方式都会在该目录中直接生成 package.json

 

　　　　（1）该项目目录中会自动生成node_modules文件夹来存放下载的包

 

　　　　

　　　　（2）package.json是用来管理包的版本

　　　　　　　　dependencies: 中包含了包的版本，之前的内容是初始化的时候生成的。

 

 

 

 

 

 

 

 

 

　　3、下载的是 当前项目的依赖包  （dependencise:{}）中的包

　　　　在cmd中输入：npm install jquery --save

　　　　　　会自动生成 node_modules 文件夹

 

　　　　压缩、丑陋化、打包、编译 三大软件：

　　　　　　grand　　gulp　　webpack4.0

 

Bootstrap（全局css样式、组件、插件）

 

　　在bootatrap中文网中有详细的介绍，根据网站中提示的内容完成学习即可。

　　学习3版本的即可，版本4是最近更新的，还不太稳定。

　　bootstrap中文网：http://www.bootcss.com/    https://v3.bootcss.com/css/

　　

　　使用 Bootstrap 需要去官网先下载，中文网中的"起步"中有基本的模板如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> 

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>



    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

 

 

1、全局css样式

　　就是有很多现成的静态样式，可以供直接使用和调用

2、组件

　　组件是包含了html + css + js插件，即有样式又有结构还能实现JS功能

　　组件的作用：实现了功能的重用性

3、bootstrap中的插件

　　封装了某些JS功能，可以帮助我们日常的开发

 

posted @ 2018-10-10 16:06  葡萄想柠檬  Views(1320)  Comments(0)    收藏  举报
目录代码