精华内容
下载资源
问答
  • 拉勾前端高薪训练营 作者\/:byteGuy 函数(方法)是由事件驱动的或者当它被调用时执行的可重复使用的代码块 —— 官方说明向来觉得官方的文档是有些生硬的,举个例子: 函数可以看做是功能(以一辆汽车为例,如下...

    拉勾大前端高薪训练营

    函数(方法)是由事件驱动的或者当它被调用时执行的可重复使用的代码块 —— 官方说明向来觉得官方的文档是有些生硬的,举个例子:
    函数可以看做是功能(以一辆汽车为例,如下图),这些都可以看做成是方法
    刹车油门鸣笛档位

    在这里插入图片描述 这些功能任何一个里面都有很多个零件的配合,共同完成某一个任务,我们只需要去调用(踩刹车,踩油门,按喇叭,挂挡),功能就会执行函数也是一样的,**它内部封装了一些操作,只有我们去调用的时候才会执行** > **1.2 一个最简单的函数及触发方法**

    ;!DOCTYPE html;
    ;html;
        ;head;
            ;meta charset="utf-8";
            ;title;我的第一个方法;/title;
        ;/head;
        ;body;
            ;button onclick="myFunction()";点击触发函数;/button;
            ;script;
                // 必须有 function关键字,命名通常为驼峰命名,首字母小写
                function myFunction(){<!-- -->
                    alert("这是我的函数");
                }
            ;/script;
        ;/body;
    ;/html;
    
    

    1.3 带参数的函数(形参与实参)

    形参 : 函数中定义的变量(此时是没有值的,只是一个代称)实参 : 在运行时的函数调用时传入的参数(实际的值)js中,方法中即使定义了形参,调用时不传实参也不会报错

    ;!DOCTYPE html;
    ;html;
        ;head;
            ;meta charset="utf-8";
            ;title;形参与实参;/title;
        ;/head;
        ;body;
            ;!-- 这里的5和2是实参 --;
            ;button onclick="addNum(5, 2)";计算5+2的值;/button;
            ;script;
                // 此处的num1,与num2便是形参
                function addNum(num1, num2){<!-- -->
                    alert(num1 + num2)
                }
            ;/script;
        ;/body;
    ;/html;
    
    

    1.4 带有返回值的函数 ———— return

    function fn(a, b){<!-- -->
        return a*b;
    }
    // 调用并给num赋值
    let num = fn(3, 5);
    console.log(num) // 得到15
    
    

    1.5 js函数内置对象 ———— arguments(重点,考点)

    它是函数一创建就有的**是一个类数组(并不是真正的数组)**方法调用时,可以得到所有传进来的参数你传多少,我就能拿到多少

    function fn(){<!-- -->
        console.log(arguments)
     }
     fn(1, 2, 3, 4);
    
    

    在这里插入图片描述

     function fn(){<!-- -->
        let sum = 0;
        for(let i = 0; i ; arguments.length; i++){<!-- -->
            sum += arguments[i];
        }
        // 返回 sum
        return sum
     }
     let allSum = fn(1, 2, 3, 4);
     console.log(allSum)    // 得到10
    
    

    1.6 函数内的变量

    在函数内的定义的变量均为局部变量函数运行完之后就会销毁(垃圾回收机制),所以外界无法访问变量应尽量避免重名(局部与全局变量可能会混淆,导致一些意料之外的问题

    function fn() {<!-- -->
        // 此为局部变量
        let a = 5;
        console.log(a)
    }
    fn();
    console.log(a) // 此处报错,无法访问
    
    

    1.7 匿名函数(难点)

    顾名思义指的是没有名字的函数必须采用下面的语法,否则会报错

    (function (){<!-- -->
        //由于没有执行该匿名函数,所以不会执行匿名函数体内的语句。
        console.log("666");
    })
    
    

    匿名自执行函数(类似于JS的单例模式)

    (function (){<!-- -->
        console.log("666"); // 此处会打印666
    })()
    
    

    2. JS事件

    HTML 事件是发生在 HTML 元素上的事情。JavaScript 可以触发这些事件。可以看做是用户的某些操作,或者说业务需要监听的某些操作

    2.1 HTML事件

    HTML 页面完成加载HTML input 字段改变时HTML 按钮被点击
    常用事件整理

    |事件名|说明
    |------
    |onchange()|HTML 元素改变(一般用于表单元素)
    |onclick ()|用户点击 HTML 元素
    |onmouseover()|用户在一个HTML元素上移动鼠标
    |onmouseout()|用户从一个HTML元素上移开鼠标
    |onkeydown()|用户按下键盘按键
    |onkeyup()|键盘按键弹起
    |onload()|浏览器已完成页面的加载

    2.2 JavaScript 事件一般用于做什么?

    页面加载时触发事件页面关闭时触发事件用户点击按钮执行动作验证用户输入内容的合法性…(用户的一切操作都可以监听

    2.3 事件实例

    ;input id="test" type="button" value="提交"/;
    ;script;
    // 页面加载完触发
    window.onload = function(){<!-- -->
        let test = document.getElementById("test");   
        test.addEventListener("click",myfun2);   
        test.addEventListener("click",myfun1);
    }
    function myfun1(){<!-- -->  
        alert("你好1");
    }
    function myfun2(){<!-- --> 
        alert("你好2");
    }
    ;/script;
    
    

    3. JavaScript 对象

    在JS里 —— 万物皆为对象

    在这里插入图片描述
    字符串也可以是一个对象日期是一个对象数学和正则表达式也是对象数组是一个对象函数也可以是对象…

    3.1 对象定义

    对象是变量的容器写法以键值对的方式(键名:键值)键值对称之为对象的属性循环对象一般用 for in

    // 对象定义
    let person = {<!-- -->
        firstName:"ouyang",
        lastName:"xiu",
        age:18
    };
    
    // 循环对象
    for(let key in person){<!-- -->
    	console.log(key);	// 键名
    	console.log(person[key])	// 键值
    }
    
    

    3.2 大厂经典面试题分析

    let obj = Object.create(null) 与 let obj = {} 有什么区别?
    之前腾讯面试的时候,问了这个问题:**对象字面量创建对象与 Object.create(null)创建对象有什么区别?**一开始是有点懵的,不都是创建对象么,能有啥不同,后面我去试了一下,结果发现还蛮有意思:

    let obj = {<!-- -->};
    let obj2 = Object.create(null);
    console.log(obj);
    console.log(obj2)
    
    

    控制台打印 在这里插入图片描述乍一看,好像没啥区别,都是一个花括号然而,展开后,确实大有不同 在这里插入图片描述Object.create(null)创建的对象是非常纯净的,没有任何其它元素而另一个let创建的对象是带有_proto_的,下面有一些方法与属性,这便是js的原型链继承,它继承了Object的方法和属性。这便是区别。

    展开全文
  • -[hash].bundle.js [name]-[chunkhash:8].bundle.js【推荐】 [name]-[contenthash].bundle.js 总结: 以上是前端高薪训练营课程里第二部分的前端工程化实践关于webpack打包的一些配置的讲解,以及一些注意事项,...

    1、快速上手

    npm init -y
    
    npm i webpack webpack-cli
    
    webpack

    webpack配置文件

    // webpack.config.js
    // 导出一个对象
    module.exports = {
        entry: '',
        oupput: {
            filename: 'bundle.js',
            path: path.join(__dirname, 'output'), // 输出目录:绝对路径
        }
    }
    // 导出一个函数
    let config = {}
    module.exports = (env, argv) => {
        if (argv.mode === 'development') {
            config.devtool = 'source-map';
        }
        if (argv.mode === 'production') {
            //...
        }
        return config;
    }

    3、工作模式:mode

    modehttps://webpack.docschina.org/configuration/mode/icon-default.png?t=L892https://webpack.docschina.org/configuration/mode/

    •  production(默认):生产模式
    •  development:开发模式
    •  none:不使用任何默认优化选项
    // 配置文件
    module.exports = {
      mode: 'development',
    };
    // cli
    webpack --mode=development

    4、打包结果运行原理

    • 输出的是一个立即执行函数,接受一个modules参数,调用时传入一个数组
      • 数组每个元素都是一个函数,对应源代码的每一个模块,实现模块的私有作用域
    • 立即执行函数内部
      • 定义一个对象用于缓存加载过的模块
      • 定义一个`__webpack_require__`函数,用于加载模块
        • 判断模块是否加载过,加载过则读取缓存
        • 创建新的对象
        • 调用模块对应的函数,传入模块对象、模块导出对象、__webpack_require__函数
      • 在`__webpack_require__`上挂在一些数据、工具函数
      • 调用`__webpack_require__(0)`

    5、资源模块加载

    添加相应的`loader`处理非JS文件

    • `css-loaser`将css文件打包成一个模块,如果需要使用可使用`style-loader`配合
    • `style-loader`是将css通过`style`标签,将css代码注入
    • `注意:` use数组执行顺序`从右到左`
    • `使用:` 在js文件内`import`引入非js类型文件,建立依赖关系
    module.exports = {
        module: {
            rules: [{
                test: /.css$/,
                use: ['style-loader', 'css-loader']
            }]
        }
    }

    5.1、文件资源加载器

    `file-loader`

    基本过程:

    • 打包时遇到图片等文件,根据配置匹配到对应的文件加载器
    • 将导入的文件拷贝到输出目录
    • 将输出路径作为当前模块的返回值返回
    • `注意:` 可以配合`publicPath` 指定输出目录,例如:`dist/`,源代码里需要做拼接,所以必须带`/`
    // png
    module.exports = {
        output: {
            filename: 'bundle.js',
            path: path.join(__dirname, 'dist'),
            publicPath: 'dist/' // 注意这里
        },
        module: {
            rules: [{
                test: /.png$/,
                use: ['file-loader']
            }]
        }
    }

    5.2、URL 加载器

    // Data URL 格式
    // 协议 媒体类型和编码 文件内容
    
    data:[<mediatype>][;base64],<data>

    `url-loader` 和 `file-loader`

    设置`limit`属性,表示低于该值的会被转换成base64,超出则单独提取存放

    module.exports = {
        module: {
            rules: [{
                test: /.png$/,
                use: {
                    loader: 'url-loader',
                    limit: 10 * 1024 // 10Kb 
                }
            }]
        }
    }

    5.3、其他常用加载器

    • 编译转换类:`css-loader`等
    • 文件操作类:`file-loader`等
    • 代码检查类:`eslint-loader`等

    5.4、`babel-loader` 处理ES新特性

    `@babel-core` 和 `@babel-preset-env`

    实际babel只是一个平台,需要通过不同的插件转换代码具体特性

    module.exports = {
        module: {
            rules: [{
                test: /.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel-preset-env']
                    }
                }
            }]
        }
    }

    5.5、加载资源的方式

    • 支持ESM标准的`import`声明
    • 支持CommonJS标准的`require`函数
      • 默认导出需`require('xxxx.js').default`
    • 支持AMD标准的define函数和require函数
    • Loader加载非JS触发的资源加载
      • css文件里的`@import`、`url`
      • html里的`src`属性

    5.6、开发一个loader

    实现一个自己的 `markdown-loader`

    实际就是一个输入到输出的一个转换,类比管道的概念,可以对同一个资源依次使用多个loader

    基本步骤:

    • 导出一个模块,传入`source`,即资源内容
    • 返回修改后的内容
    • 必须是JS代码
    • 可交给下一个loader处理
    // webpack.config.js
    module.exports = {
        module: {
            rules: [{
                test: /.md$/,
                use: './markdown-loader.js'
            }]
        }
    }
    // markdown-loader.js
    const marked = require('marked');
    module.exports = (source) => {
        // console.log(source)
        // return “console.log('hello')”
    
        // 第一种:返回JS可用于执行
        const html = marked(source)
        return `module.exports = ${JSON.stringfy(html)}`
    
        // 第二种:返回html字符串交给下一个loader处理
        // 需要修改webpack.config.js里的use: ['html-loader', './markdown-loader.js']
        return html
    }

    6、webpack 核心工作原理

    • 根据配置的`entry`找到打包入口
    • 根绝js文件里的`import`等语句找到该文件依赖的其他模块,解析每个模块依赖的其他模块,形成一个依赖关系树
    • 遍历该关系树,找到每个资源对应的文件
    • 根据配置里`rules`里的`loader`处理模块
    • 最终打包输出到配置里`output`指定的位置

    7、webpack 插件

     Plugin API

    compiler 钩子

    • 在钩子上挂载任务
    • 一个函数或者是一个包含apply方法的对象

    7.1、webpack 常用插件

    • `clean-webpack-plugin`
    • `html-webpack-plugin`
    • `copy-webpack-plugin`

    8、增强开发体验

    8.1、webpack dev server

    减少磁盘读写,直接写入内存,httpserver直接读取内存

    // 安装
    npm install webpack-dev-server --save-dev
    // 使用
    module.exports = {
        devServer: {
            contentBase: '', // 额外的静态资源路径
            proxy: { // 代理配置
                '/api': {
                    target: 'https://api.github.com', // http://localhost:8080/api/users ---> https://api.github.com/api/users
                    pathRewrite: { // 重写:// http://localhost:8080/api/users ---> https://api.github.com/users
                        '^/api': ''
                    },
                    changeOrigin: true
                }
            }
        }
    }

    8.2、sourceMap

    映射源代码和转换后的代码关系

    基本格式:# sourceMappingURL=xxxxx.map

    所有配置

     特点:

    • eval: 是否使用eval执行代码
    • cheap: 是否包含行信息
    • module: 是否能够得到loader之前的源代码

    推荐使用

    • 开发环境:cheap-module-eval-source-map
    • 生产环境:none/nosources-source-map

    8.3、webpack自动刷新

    HMR:模块热替换

    --hot

    • 需要手动处理
    • 样式模块可自动处理
    • 注意:
      • 热替换失败,退回自动刷新机制,可使用`hotOnly`替代
      • `module.hot`需要提前判断
    // webpack.config.js
    module.exports = {
        devServer: {
            hot: true, // 热替换失败,退回自动刷新机制
            hotOnly: true
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin({
                // Options...
            })
        ]
    }
    
    // xx.js
    if (module.hot) { // webpack.HotModuleReplacementPlugin 提供的
        module.hot.accept('./yy', () => {
    
        })
    }

    9、生产环境优化

    • 针对不同环境生成不同的配置文件
      • `webpack-merge`:合并配置
      • `scripts`: --config
    • webpack4 增加了一些默认的优化配置
      • `webpack.DefinePlugin`:在`编译`时配置一个`全局常量`
        • 注意:定义的值会原封不动显示
      • `tree shaking`:默认 `mode` 为 `production` 会开启
        • none模式:借用 `optimization` 里的属性
          • usedExports: true // 删除未引用的代码
          • minimize: true // 压缩
          • concatenateModules: true // 合并模块,输出为一个模块
        • 引用babel会失效??
          • 最新版本并不会失效,是因为babel默认开启ESM
          • 可以在babel的`env`插件里强制设置`module`属性,注意这里是数组套数组
      • 副作用:
        • optimization 设置 sideDffects: true:开启功能
        • packages.json 设置 sideDffects: 表示没有副作用
          • false/[]
      • 代码分割:分包、按需加载
        • 多入口打包:多页应用 + 公共模块提取
          • 多页设置:
            • entry: 对象
            • output.filename: '[name].bundle.js'
            • HtmlWebpackPlugin添加 chunks: ['index'] --> 对应entry的key
          • 公共模块提取:
            • optimization.splitChunks: { chunks: 'all' }
        • 动态导入:
          • import('../xx.js').then(() => {})
          • 魔法注释:import(/* webpackChunkNmae: 'aaa' */'../xx.js').then(() => {}) // 为打包出的模块添加一个名字
      • 代码压缩:
        • 默认生产模式会自动压缩,但是通过`mini-css-extract-plugin`link注入的css不会,需要手动`optimization.minizier`里通过插件压缩
          • `optimize-css-assets-webpack-plugin`
          • `terser-webpack-plugin`
      • 生产模式给文件添加`hash`
        • [name]-[hash].bundle.js
        • [name]-[chunkhash:8].bundle.js【推荐】
        • [name]-[contenthash].bundle.js

    总结:

    以上是前端高薪训练营课程里第二部分的前端工程化实践关于webpack打包的一些配置的讲解,以及一些注意事项,webpack是我们开发过程中必须掌握的利器,所以基本的配置以及使用是必须要知道。在学习过程中,除了对基本配置的巩固以及需要注意的点和优化事项都讲解的很详细,课程还有实践以及最新webpack5的课程,学无止境,待我后期更新~~~

    展开全文
  • <!DOCTYPE html> <..."en"> ...拉勾教育训练营", password:123 }, methods: { update:function(){ this.message = "拉钩"; } }, }); </script> </html>
  • 前端高薪训练营 001 期 大前端高薪训练营 001 期相关资料 点我 点我 点我 :backhand_index_pointing_right: 我们会随着学习计划,同步更新此仓库中对应的相关资料。 Table of Contents 录播部分 录播部分代码(移...
  • 文章内容输出来源:拉勾教育大数据开发高薪训练营 本篇文章是java学习课程中的一部分笔记。 本博文主要是记录一些基础的知识点,通过实操更容易理解 这章主要讲的是前端的基础知识, HTML HTML语法 特点 HTML...

    题记:

    文章内容输出来源:拉勾教育大数据开发高薪训练营
    本篇文章是java学习课程中的一部分笔记。

    本博文主要是记录一些基础的知识点,通过实操更容易理解

    这章主要讲的是前端的基础知识,

    HTML

    HTML语法

    • 特点 HTML文件不需要编译,直接使用浏览器阅读即可 HTML文件的
    • 扩展名是*.html 或 *.htm
    • HTML结构都是由标签组成
    • 标签名预先定义好的,我们只需要了解其功能即可。
    • 标签名不区分大小写 <A name="属性值" age="18" >标签体</a>
    • 通常情况下标签由开始标签和结束标签组成。例如: <a 属性名="属性值" href="01_html">标签体</a>
    • 如果没有结束标签,建议以/结尾。例如: <img />

     

    基本标签

    1.标题标签

     

    HTML提供 <hn> 系列标签,用于修饰标题,包含: <h1><h2><h3><h4><h5><h6> <h1> 定义最大的标

    题。 <h6> 定义最小的标题

    特点:

           1. 加了标题的文字会变的加粗,字号也会依次变大。

           2. 一个标题独占一行。

    2.段落标签

    • <p></p> 标签会自动在其前后创建一些空白。

                   标签语义:可以把 HTML 文档分割为若干段落

    • 换行标签<br>

           在 HTML 中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望某段文本强制换行显示,就需要使用换行标签 ,<br> 标签插入一个简单的换行符。

                             标签语义:强制换行。

                      特点:

                        1. 是个单标签。

                        2. 标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。

    3. 字体标签

    <font> 规定文本的字体、字体尺寸、字体颜色。

     

    4.文本格式化标签

    为文字设置粗体、 斜体 或下划线等效果,这时就需要用到 HTML 中的文本格式化标签,使 文字以特殊的方式显示。

    标签描述
    <b>定义粗体文本
    <em>定义着重文字
    <i>定义斜体字
    <small>定义小号字
    <strong>定义加重语气
    <sub>定义下标字
    <sup>定义上标字
    <ins>定义插入字
    <del>定义删除字

    5.图片标签

    HTML 标签中, 标签用于定义 HTML 页面中的图像。<img src="url" alt="some_text">

    属性描述
    aligntop
    bottom
    middle
    left
    right
    HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。
    alttext规定图像的替代文本。
    borderpixelsHTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框。
    crossoriginanonymous
    use-credentials
    设置图像的跨域属性
    heightpixels规定图像的高度。
    hspacepixelsHTML5 不支持。HTML 4.01 已废弃。 规定图像左侧和右侧的空白。
    ismapismap将图像规定为服务器端图像映射。
    longdescURLHTML5 不支持。HTML 4.01 已废弃。 指向包含长的图像描述文档的 URL。
    srcURL规定显示图像的 URL。
    usemap#mapname将图像定义为客户器端图像映射。
    vspacepixelsHTML5 不支持。HTML 4.01 已废弃。 规定图像顶部和底部的空白。
    widthpixels规定图像的宽度。

    6.列表标签

    列表
    描述
    取值
    <ul>定义一个无序列表
    disc 实心圆、 square 方块 、 circle 空心圆
    <ol>定义一个有序列表
    A a I i 1
    <li>定义一个列表项
    A a I i 1 )( disc 实心圆、 square 方块 、 circle 空心圆)
    <!--列表标签-->
    <ul type="circle"> <!--以“空心圆”显示无序列表-->
    <li>无序</li>
    <li>无序</li>
    <li>无序</li>
    </ul>
    <ol type="I"> <!--以大写阿拉伯数字显示序号-->
    <li>有序</li>
    <li>有序</li>
    <li>有序</li>
    </ol>

    7.超链接标签

    HTML 标签中, 标签用于定义超链接,作用是从一个页面链接到另一个页面。

    1)超链接标签语法

    <a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

    2)超链接属性

    属性描述
    downloadfilename指定下载链接
    hrefURL规定链接的目标 URL。
    relalternate
    author
    bookmark
    help
    license
    next
    nofollow
    noreferrer
    prefetch
    prev
    search
    tag
    规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。
    target_blank  
    在新窗口中打开 href 确定的页面。

    _parent
    _self

    当前页打开
    _top
    framename

    规定在何处打开目标 URL。仅在 href 属性存在时使用。
    typeMIME_type

    规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。
    注:MIME = Multipurpose Internet Mail Extensions。

     

    3)超链接分类  

    分类
    举例
    1. 外部链接:例如 < a href="http://www.lagou.com ">拉勾。
    2. 内部链接:网站内部页面之间的相互链接.例如 < a href="index.html"> 首页
    3. 空链接:如果当时没有确定链接目标时,< a href="#"> 首页
    4. 下载链接:如果 href 里面地址是一个文件或者压缩包,会下载这个文件。
    5. 网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.
    6. 锚点链接:点我们点击链接,可以快速定位到页面中的某个位置.

    8. 表格标签

    1)表格标签作用

    表格主要用于显示、 展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。

    HTML表格由 <table> 标签以及一个或多个 <tr><th> <td> 标签组成。

    <tr> 元素定义表格行,<th> 元素定义表头,<td> 元素定义表格单元。

    2)表格的基本语法

    <table>
    <tr>
    <td>单元格内的文字</td>
    ...
    </tr>
    ...
    </table>

    3)标签属性介绍

    table属性

    属性描述
    alignleft
    center
    right
    规定表格相对周围元素的对齐方式。
    bgcolorrgb(x,x,x)
    #xxxxxx
    colorname
     规定表格的背景颜色。
    border1
    ""
    规定表格单元是否拥有边框。
    cellpaddingpixels规定单元边沿与其内容之间的空白。
    cellspacingpixels规定单元格之间的空白。
    framevoid
    above
    below
    hsides
    lhs
    rhs
    vsides
    box
    border
    规定外侧边框的哪个部分是可见的。
    rulesnone
    groups
    rows
    cols
    all
    规定内侧边框的哪个部分是可见的。
    widthpixels
    %
    规定表格的宽度。

    td/th 属性

    属性描述
    alignleft
    right
    center
    justify
    char
    规定单元格内容的水平对齐方式。
    bgcolorrgb(x,x,x)
    #xxxxxx
    colorname
    规定单元格的背景颜色。
    colspannumber规定单元格可横跨的列数。
    headersheader_id规定与单元格相关联的一个或多个表头单元格。
    rowspannumber设置单元格可横跨的行数。

    4合并单元格

    把多个单元格合并为一个单元格, 这里同学们会最简单的合并单元格即可 。

    合并单元格方式:

    跨行合并:rowspan="合并单元格的个数"

    跨列合并:colspan="合并单元格的个数"

    5)合并方式

    合并单元格三步曲:

    • 1. 先确定是跨行还是跨列合并。
    • 2. 找到目标单元格. 写上合并方式 = 合并的单元格数量。比
    • 如:<td colspan=“2” ></td>
    • 3. 删除多余的单元格。
    表格练习

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>个人简介</title>
        <style>
            td{
                width: 20%;
                height: 50px;
                text-align: center;
            }
            th{
                height: 80px;
            }
        </style>
    </head>
    <body>
        <table align="center" width="50%" cellspacing="0" border="1px">
            <tr>
                <th colspan="5">个人简介</th>
            </tr>
            <tr>
                <td>姓名</td>
                <td></td>
                <td>学历</td>
                <td></td>
                <td rowspan="3" style="width: 30%;"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td></td>
                <td>生日</td>
                <td></td>
            </tr>
            <tr>
                <td>年龄</td>
                <td></td>
                <td>民族</td>
                <td></td>
            </tr>
    
        </table>
    </body>
    </html>

    表单相关标签

    1.什么是表单及作用

    使用表单目的是为了收集用户信息。 在我们网页中, 我们也需要跟用户进行交互,收集用户资料,此时就需要表单。

    2.表单的组成

    一个完整的表单通常由表单域表单控件(也称为表单元素)和提示信息3个部分构成。

    3.表单的标签

    表单域是一个包含表单元素的区域。 在 HTML 标签中,标签用于定义表单域,以实现用户信息的收集和传递。 会把它范围内的表单元素信息提交给服务器.

    <form action="url地址" method="提交方式" name="表单域名称">
    各种表单元素控件
    </form>

    2)常用属性

    属性描述
    actionURL规定当提交表单时向何处发送表单数据。
    methodget
    post
    规定用于发送表单数据的 HTTP 方法。
    nametext规定表单的名称。

    3) 输入域标签 : <input>

    input 表单的属性
    属性描述
    acceptaudio/* video/* image/* MIME_type规定通过文件上传来提交的文件的类型。 (只针对type="file")
    alttext定义图像输入的替代文本。 (只针对type="image")
    autocompleteon offautocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。
    autofocusautofocus属性规定当页面加载时 <input> 元素应该自动获得焦点。
    checkedcheckedchecked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")
    disableddisableddisabled 属性规定应该禁用的 <input> 元素。
    formform_idform 属性规定 <input> 元素所属的一个或多个表单。
    formactionURL属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")
    formenctypeapplication/x-www-form-urlencoded multipart/form-data text/plain属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。
    formmethodget post定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")
    formnovalidateformnovalidateformnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
    formtarget_blank _self _parent _top framename规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")
    heightpixels规定 <input>元素的高度。(只针对type="image")
    listdatalist_id属性引用 <datalist> 元素,其中包含 <input> 元素的预定义选项。
    maxnumber date属性规定 <input> 元素的最大值。
    maxlengthnumber属性规定 <input> 元素中允许的最大字符数。
    minnumber date属性规定 <input>元素的最小值。
    multiplemultiple属性规定允许用户输入到 <input> 元素的多个值。
    nametextname 属性规定 <input> 元素的名称。
    patternregexppattern 属性规定用于验证 <input> 元素的值的正则表达式。
    placeholdertextplaceholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。
    readonlyreadonlyreadonly 属性规定输入字段是只读的。
    requiredrequired属性规定必需在提交表单之前填写输入字段。
    sizenumbersize 属性规定以字符数计的 <input> 元素的可见宽度。
    srcURLsrc 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")
    stepnumberstep 属性规定 <input> 元素的合法数字间隔。
    typebutton
    checkbox
    color
    date
    datetime
    datetime-local
    email
    file
    hidden
    image
    month
    number
    password
    radio
    range
    reset
    search
    submit
    tel
    text
    time
    url
    week
    type 属性规定要显示的 <input> 元素的类型。
    valuetext指定 <input> 元素 value 的值。
    widthpixelswidth 属性规定 <input> 元素的宽度。 (只针对type="image")

    <input type=""> 标签用于获得用户输入信息,type属性值不同,搜集方式不同。

    最常用的type属性值
    text:普通文本
    password:密码输入框,里边的密码以黑色的小圆点显示
    radio:单选框
    checkbox:多选框
    fifile:上传文件
    image:上传图片使用
    hidden: 隐藏域 , 存储数据使用 , 不会在浏览器页面显示
    botton:普通按钮,配合js使用
    reset:重置按钮,把表单的恢复到默认状态(清空表单)
    submit:提交按钮,把表单的数据,提交到服务器。

    4) 下拉列表标签: <select>

    <select> 下拉列表。可以进行单选或多选。需要使用子标签指定列表项

            name属性:发送给服务器的名称

     

            multiple属性:不写默认单选,取值为“multiple”表示多选。

            size属性:多选时,可见选项的数目。

    <option> 子标签:下拉列表中的一个选项(一个条目)。

            selected :勾选当前列表项

            value :发送给服务器的选项值。

    5)文本域标签: <textarea>

    <textarea> 标签定义一个多行的文本输入控件。

    文本区域中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。

    可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小,不过更好的办法是使用 CSS 的 height 和 width 属性。

    <textarea rows="10" cols="30">
    我是一个文本框。
    </textarea>

    表单练习,分别用get,和post分别测试

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>个人简介</title>
        <style>
            td{
                width: 20%;
                height: 50px;
                text-align: center;
            }
            th{
                height: 80px;
            }
        </style>
    </head>
    <body>
        <table align="center" width="50%" cellspacing="0" border="1px">
            <tr>
                <th colspan="5">个人简介</th>
            </tr>
            <tr>
                <td>姓名</td>
                <td></td>
                <td>学历</td>
                <td></td>
                <td rowspan="3" style="width: 30%;"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td></td>
                <td>生日</td>
                <td></td>
            </tr>
            <tr>
                <td>年龄</td>
                <td></td>
                <td>民族</td>
                <td></td>
            </tr>
    
        </table>
    </body>
    </html>

     

    div + css  

    1. 什么是div

    div就是html一个普通标签,进行区域划分。

    特性:独自占一行。独自不能实现复杂效果。必须结合CSS样式进行渲染。

    块标签: 1)行级元素:div 2) 行内元素:span

    <!-- div标签:块标签,行级元素,会霸占html的一行 -->
    <div>div中的数据</div>div之外的数据
    <br />
    <!-- span标签:块标签 ,行内元素,不会占用一行 -->
    <span>span中的数据</span>span外的数据

    2.CSS介绍

    CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。 CSS 让我们的网页更加丰富多彩,布局更加灵活自如。简单理解:CSS 可以美化 HTML , HTML 更漂亮, 让页面布局更简单。

    • CSS (Cascading Style Sheets) :指层叠样式表
    • 样式:给HTML标签添加需要显示的效果。
    • 层叠:使用不同的添加方式,给同一个HTML标签添加样式,最后所有的样式都叠加到一起,共同作用于该标签。

    • 选择器是用于指定 CSS 样式的 HTML 标签,花括号内是对该对象设置的具体样式
    • 属性和属性值以键值对的形式出现
    • 属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等
    • 属性和属性值之间用英文“:”分开
    • 多个键值对之间用英文“;”进行区分

     注意事项:

    CSS样式选择器严格区分大小写,属性属性值不区分大小写。

    多个属性之间必须用英文状态下的分号隔开,最后一个属性后的分号可以省略,但是,为了便于增加新样式最好保留。

    如果属性的值由多个单词组成且中间包含空格,则必须为这个属性值加上英文状态下的引号。例如:

    p { font-family:"Times New Roman";}

    在编写CSS代码时,为了提高代码的可读性,通常会加上CSS注释,例如:

    /* 这是CSS注释文本,此文本不会显示在浏览器窗口中 */

    属性的值和单位之间是不允许出现空格的,否则浏览器解析时会出错。例如,下面这行代码就是不正确的。

    h1{ font-size:20 px; } /* 20和单位px之间有空格 这样是不正确的*/

    4.引入css样式

    CSS使用非常灵活,及可以嵌入在HTML文档中,也可以是一个单独的文件,如果是单独的文件,则必须以.css为扩展名。CSSHTML的结合3种常用方式:

    1. 行内样式

    行内样式,是通过标签的style属性来设置元素的样式。

    <a style="color: #f00; font-size: 30px;">拉勾教育</a>

    2.内部样式

    内部样式又称为内嵌式,是将CSS代码集中写在HTML文档的head头部标签体中,并且使用style标签定义。

    给当前html文件中的多个标签设置样式。

    htmlhead标签中使用style标签来定义CSS

    <style type="text/css"> body{background-color: #ddd; } </style>

    内嵌式CSS样式只对其所在的HTML页面有效,可以对多处标签统一设置样式,因此,仅设计一个页面时,使用内嵌式是个不错的选择。但如果是一个网站,不建议使用这种方式,因为他不能充分发挥CSS代码的重用优势。

    3.外部样式

    外部样式又称为链入式,是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过link标签将样式连接到HTML文档中。

    <!--方式3:外部样式
    rel="stylesheet" ,固定值,当前文件和引入文件的关系,rel是relationship的缩写,stylesheet是样式表
    type="text/css", 固定值,表示浏览器解析方式
    href ,表示css文件位置
    font-family 表示使用的字体系列,多个字体使用逗号分隔。例如:“字体1,字体2,字体3”,此时优先使用“字体1”,如
    果“字体1”系统不存在,再使用“字体2”,以此类推。
    -->
    <link rel="stylesheet" type="text/css" href="css/demo00.css"/>

    链入式最大的好处是同一个CSS样式表可以被不同的HTML页面链接使用,同时一个HTML页面也可以通过多个link标记链接多个CSS样式表。

    三种样式的优先级

    • 行内样式>内部样式|外部样式(谁写在后边,使用谁,后边的会覆盖前边的)

    5. 选择器

    要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器,本小节将对CSS基础选择器进行详细地讲解,具体如下:

    1) 元素选择器

    标记选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标记指定统一的CSS样式。其基本语法格式如下:

    标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

    2) ID选择器

    id选择器使用“#”进行标识,后面紧跟id名,其基本语法格式如下:

    #id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

    3) 类选择器

    类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:

    .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

    4)派生选择器

    派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择 器,我们可以使 HTML代码变得更加整洁。 比方说,你希望列表中的li标签下 strong 元素变为斜体字,而不是通常的粗体字,可以这 样定义一个派生选择器:

    li strong{font-style: italic;font-width: normal;}

    6. CSS样式

    1) 边框

    CSS边框属性允许你指定一个元素边框的样式和颜色。

    边框就是给html选中的元素设置边线.

    属性:

    border-style : 设置线条的样式 (dotted 点状线条 ; dashed 虚线 ; solid 单实线 ; double 双实线)

    border-width : 设置线条的粗细 (10px ; 20px)

    border-color : 设置线条颜色

    简写版:

    border : 1px solid red; (推荐)

    需求:创建5p标签.

    1)第一个p标签设置线条为 点状线条 , 宽度1px ,颜色为红色;

    2)第二个p标签设置线条为 虚线 , 宽度2px ,颜色为蓝色;

    3)第三个p标签设置线条为 单实线, 宽度3px ,颜色为黄色;

    4)第四个p标签设置线条为 双实线 , 宽度4px ,颜色为粉色;

    5) 采用简化写法设置边框 1px 单实线 金色

    <p style="border-style: dotted; border-width: 1px; border-color: red;">第一个p标签设置线条为 点状线条 , 宽度1px ,颜色为红色;</p>
    <p style="border: 2px dashed blue">第二个p标签设置线条为 虚线 , 宽度2px ,颜色为蓝色;</p>
    <p style="border: 3px solid yellow">第三个p标签设置线条为 单实线, 宽度3px ,颜色为黄色;</p>
    <p style="border: 4px double pink">第四个p标签设置线条为 双实线 , 宽度4px ,颜色为粉色;</p>
    <p style="border: 1px solid gold">采用简化写法设置边框 1px 单实线 金色</p>

    2)尺寸

    CSS 尺寸属性允许你控制元素的高度和宽度。同样,还允许你增加行间距。

    3) 转换:display

    HTML提供丰富的标签,这些标签被定义成了不同的类型,一般分为:行级元素和行内标签。

    行级元素:以区域块方式出现。每个块标签独自占据一整行或多整行。

    • 常见的块元素: <h1><div>

    行内元素:不必在新的一行开始,同时也不强迫其他元素在新的一行显示。

    • 常见的行内元素: <span><a>

    在开发中,希望行内元素具有块元素的特性或者行内元素具有块元素的特性,可以使用display进行转换

    选择器{display:属性值}

    常用的属性值:

    inline:此元素将显示为行内元素(行内元素默认的display属性值)

    block:此元素将显为块元素(块元素默认的display属性值)

    none:此元素将被隐藏,不显示,也不占用页面空间。

    <div>我是一个div,我会霸占一行</div>
    <div style="display: inline;">我是一个div,被转换为了行内元素,不在占用一行</div>
    <span>我是一个span标签,只占用一行中的一部分</span>
    <span style="display: block;">我是一个span标签,被转换为了行级元素,会霸占一行</span>
    <div style="display: none;">我是一个隐藏的div,你是看不到我的</div>

    4) 字体:colorfont-size

    color :颜色,字体颜色
    font-size:字体的大小,像素px
    font-family:字体,幼圆,宋体,楷体...
    text-decoration: none 取消文字上的下划线
    <a href="#" target="_blank" style="color: red;">我是红色超链接</a>
    <a href="#" target="_blank" style="font-size:50px">我是最大超链接</a>
    <a href="#" target="_blank" style="font-family: 楷体;">我是楷体超链接</a>
    <a href="#" target="_blank" style="text-decoration: none;">我是无下划线的超链接</a>

    5) 背景色:background-color

    background-color:设置背景色

            background-image:url(背景图片的连接)

    6) 布局:floatclear

    通常默认的排版方式,将页面中的元素从上到下一一罗列,而实际开发中,需要左右方式进行排版,就需要使用浮动

    选择器{float:属性值;} 常用属性值:

    left:元素向左浮动
    right:元素向右浮动
    none:元素不浮动(默认值)

    由于浮动元素不再占用原文档流的位置,所以它会对页面中其他元素的排版产生影响。如果要避免影响,需要使用clear属性进行清除浮动。

    选择器{clear:属性值;} 常用属性值:

    left :不允许左侧有浮动元素(清除左侧浮动的影响)
    right:不允许右侧有浮动元素(清除右侧浮动的影响)
    both:同时清除左右两侧浮动的影响

    7) CSS的盒子模型

    什么是盒子模型: CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

    我们可以设置这个盒子到其他和盒子之间的距离

    使用css的属性:margin,设置外边距

    margin: 同时设置 4个外边距
    margin-top:上外边距
    margin-bottom:下外边距
    margin-lex:左外边距
    margin-rigt:右外边距

    也可以设置这个盒子中html元素到盒子之间的距离

    使用css的属性:padding,设置内边距

    padding: 同时设置4个内边距
    padding-top:上内边距
    padding-bottom:下内边距
    padding-lex:左内边距
    padding-rigt:右内边距

    小练习

    <div style="width:500px;color: white;text-align: center">
        <div style="height: 60px;background-color: dodgerblue">head</div>
        <div style="height:380px;width: 100%">
            <div style="float: left;width: 120px;height:100%;background-color: lightgreen;">leftbar</div>
            <div style="float: left;height:100%;width:260px;background-color: steelblue;">content</div>
            <div style="float: left;width: 120px;height:100%;background-color: lightgreen;">rightbar</div>
        </div>
        <div style="height: 60px;background-color: dodgerblue">footer</div>
    </div>
     

    JavaScript

    1 JavaScript 的概述

    1) 什么是JavaScript

    JavaScript是现在网络上比较流行的一种脚本语言,通过javaScript可以让用户与Web 站点之间增强交互。

    JavaScript可以被所有Web浏览器解析。

    什么是脚本语言:脚本语言叫做动态语言,它是一种解释型语言,它一般由文本编辑器编辑。脚本语言,一般它不能单独运行,需要嵌入到其它语言中,例如:javaScript, 我们可以将编写的javaScript嵌入到HTML代码中,由浏览器解析执行它。

    2) javaScript的应用场景

    数据可视化

    数据可视化是当下大家所推崇的一种互动展示模式,而JavaScript拥有EChartsD3.js等多种可实现数据可视化效果的框架。

    移动应用

    PhoneGapWebVieW带向了移动应用,同时也将JavaScript带向了移动应用。

    服务端

    因为V8的性能将JavaScript带到了一个新的高度,于是Node.js诞生了——前端、后台都可以用JavaScript,现在任何一个网页都离不开JavaScript

    VR

    利用3D游戏引擎,如Three.js.

    游戏

    JavaScript也可以做出华丽的特效!

    3) JavaScript的组成

    ECMAScript:描述了该语言的语法、语句和基本对象。

    BOM:浏览器对象. 描述处理网页内容的方法和接口。

    DOM:Document Object Model.操作文档中的元素和内容.

    4) JavaScript的引入

    HTML文件中引入JavaScript有两种方式,一种是在HTML文档直接嵌入JavaScript脚本,称为内嵌式,另一种是链接外部JavaScript脚本文件,称为外联式。对他们的具体讲解如下:

    1.内嵌式,在HTML文档中,通过script标签引入,

    语法如下

    <script type="text/javascript"> //此处为JavaScript代码 </script>

    2.外联式,在HTML文档中,通过script标签引入.js文件

    语法如下:

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

    2 基本语法

    1) 变量

    1. 在使用JavaScript时,需要遵循以下命名规范:

    • 变量名必须以字母或下划线开头,数字不能开头
    • 变量名不能包含特殊符号 (:空格等符号 )
    • 变量名不能使用JavaScript关键字作为变量名,如:function
    • JavaScript严格区分大小写。

    2. 变量的声明

    var 变量名; //JavaScript变量可以不声明,直接使用。默认值:undefined

    3.变量的赋值

    var 变量名 = 值; //JavaScript变量是弱类型,及同一个变量可以存放不同类型的数据

    2) 数据类型

    基本类型

    • undefifined:undefifined类型只有一个值,即 undefifined。当声明的变量未初始化时,该变量的默认值是 undefifined
    • boolean,有两个值 true false
    • number,表示任意数字
    • string,字符串由双引号(")或单引号(')声明的。JavaScript 没有字符类型

    关键字:typeof 可以查看变量的数据类型 typeof(变量)

    引用类型

    • 引用类型通常叫做类(class),也就是说,遇到引用值,所处理的就是对象。
    • JavaScript是基于对象而不是面向对象。
    • JavaScript提供众多预定义引用类型(内置对象)。
    造一个对象:var obj = new Object();
    造一个字符串对象:var str = new String();
    造一个日期对象:var date = new Date();逻辑运算符

    3) 运算符

    JavaScript运算符与Java运算符基本一致。

    算术运算符

    运算符描述
    +加法
    -减法
    *乘法
    /除法
    %系数
    ++递加
    --递减

    赋值运算符

    运算符例子等同于
    =x = yx = y
    +=x += yx = x + y
    -=x -= yx = x - y
    *=x *= yx = x * y
    /=x /= yx = x / y
    %=x %= yx = x % y

    比较运算符

    运算符描述
    ==等于
    ===等值等型
    !=不相等
    !==不等值或不等型
    >大于
    <小于
    >=大于或等于
    <=小于或等于
    ?三元运算符

    逻辑运算符

    运算符描述
    &&逻辑与
    ||逻辑或
    !逻辑非

    4) 运算符操作

    JavaScript规范规定以下操作规则(了解)

    Boolean运算

    参数类型结果
    Undefinedfalse
    Nullfalse
    Boolean结果等于输入的参数(不转换)
    Number如果参数为 +0, -0 或 NaN,则结果为 false;否则为 true。
    String如果参数为空字符串,则结果为 false;否则为 true。
    Objecttrue

    5)JS中的语句

    java一样,js也存在ifif-elseforswitch等逻辑语句,与java使用方式一致,此处不再一一阐述

    <script type="text/javascript">
    for (var i=0; i<10; i++) {
    //alert(i);
    }
    //定义数组
    var arr = [1,2,3,5.5,true,"hello"];
    //普通for遍历数组
    /*for(var i=0; i<arr.length; i++){
    alert(arr[i]);
    }*/
    //加强for循环
    for(index in arr){
    alert(arr[index]);
    }
    </script>
     

    6) 函数(重要)

    js的函数是js非常重要的组成部分,js最常用的函数的定义方式有两种:

    1.普通函数:

    //定义函数
    function 函数名(参数列表){
       js逻辑代码
      //return 返回值,若不需要返回值可以省略return
    }
    //函数调用:函数名(实际参数);

    2.匿名函数:

    匿名函数没有办法直接调用,使用场景: 将匿名函数赋值给一个变量,使用变量调用函数

    //定义函数并赋值给变量: 
    var fn = function(参数列表){ 
        js逻辑代码 
    }
    //调用函数:
    fn(实际参数);

    7) 事件(重要)

    1 事件概述

    js的事件是js不可或缺的组成部分,要学习js的事件,必须要理解如下几个概念:

    • 1. 事件源:被监听的html元素
    • 2. 事件:某类动作,例如点击事件,移入移除事件,敲击键盘事件等
    • 3. 事件与事件源的绑定:在事件源上注册上某事件
    • 4. 事件触发后的响应行为:事件触发后需要执行的代码,一般使用函数进行封装

    2 常用的事件

    属性当以下情况发生时,出现此事件
    onabort图像加载被中断
    onblur元素失去焦点
    onchange用户改变域的内容
    onclick鼠标点击某个对象
    ondblclick鼠标双击某个对象
    onerror当加载文档或图像时发生某个错误
    onfocus元素获得焦点
    onkeydown某个键盘的键被按下
    onkeypress某个键盘的键被按下或按住
    onkeyup某个键盘的键被松开
    onload某个页面或图像被完成加载
    onmousedown某个鼠标按键被按下
    onmousemove鼠标被移动
    onmouseout鼠标从某元素移开
    onmouseover鼠标被移到某元素之上
    onmouseup某个鼠标按键被松开
    onreset重置按钮被点击
    onresize窗口或框架被调整尺寸
    onselect文本被选定
    onsubmit提交按钮被点击
    onunload用户退出页面

    3 事件绑定函数

    给页面上的标签添加一个事件,关联一个函数. 当我们操作这个标签是,javaScript就会侦听到对应的事件发生,从而执行关联的函数我们称为事件绑定函数.

    需求:
    写一个表单,并绑定onsubmit事件,阻止提交
    
    1.在页面上给定2个按钮,第一个按钮绑定单击事件; 第二个按钮绑定双击事件 (关联函数)
    2.在页面上写一个input type=text 文本框; 绑定一个 光标失去事件
    3.在页面上写一个input type=text 文本框; 绑定一个 获取光标事件
    4.编写一个下拉框,绑定一个 onchange 内容改变事件
    5.写div ,设置宽度和高度边框; onmouseenter 鼠标进入事件 ; onmousedown 某个鼠标按键被按下 ;
    onmouseup 某个鼠标按键被松开 ; onmouseout 鼠标从某元素移开-->
    <form  action="tableSelf.html"  method="post" onsubmit="return canjump(this)">
        <input type="text" name="name" value="名字" onblur="altertext('失去光标')">
        <input type="text" name="age" value="年龄" onfocus="altertext('获得光标')">
        <input type="button" onclick="altertext('button1')">
        <input type="button" ondblclick="altertext('button2')">
        <select onchange="altertext('我改变了')">
            <option>a</option>
            <option>b</option>
            <option>c</option>
        </select>
        <div style="width:20px;height:20px;background-color: red"
             onmouseenter="altertext('鼠标进入事件')"
             onmousedown="altertext('某个鼠标按键被按下 ')"
             onmouseup="altertext('某个鼠标按键被松开')"
             onmouseout="altertext('鼠标从某元素移开')"></div>
    
        <input type="submit" >
    </form>
    
    
    
    
    <script type="text/javascript">
        // window.onload=function (e) {
        //     alert(e);
        // }
        function canjump(e){
            console.log(e);
            return false;
        }
        function altertext(str) {
            console.log(str);
    
        }
    
    </script>

    4 派发事件

    不修改html, 通过js方式获取到一个html中的元素对象,并且给它动态的设置一个事件并关联一个函数.我们称为事件派发.

    派发的好处是:不污染原来的html代码; 不好处是:需要页面内容加载完毕在可以使用,一般写在页面加载函数中

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //1.事件派发,给button派发一个单机事件,关联一个函数
            //alert(document.getElementById("btn"));
            //2.页面加载函数
            //作用:当整个html页面全部加载完毕之后,自动执行的函数
            //格式 :window.onload = function(){ }
            //页面加载
            window.onload = function(){
    //派发事件
                document.getElementById("btn").onclick = function(){
                    alert("点我干嘛!");
                }
            }
        </script>
    </head>
    <body>
    <input type="button" id="btn" value="点我啊" />
    </body>
    </html>
     

    BOM对象 

    1. js BOM 概述

    BOMBrowser Object Model),浏览器对象模型(将客户端的浏览器抽象成一类对象),是将我们使用的浏览器抽象成对象模型,例如我们打开一个浏览器,会呈现出以下页面,通过js提供浏览器对象模型对象我们可以模拟浏览器功能。

    例如,在浏览器地址栏输入地址,敲击回车这个过程,我们可以使用location对象进行模拟。在例如,浏览器中的前进和后退按钮,我们可以使用history对象模拟。当然除此之外,BOM对象不仅仅具备这些功能,让我们来学习吧。

    2. js BOM 对象

    1. Screen对象,Screen 对象中存放着有关显示浏览器屏幕的信息。

    2. Navigator对象,包含的属性描述了正在使用的浏览器

    3. Window对象(重点)Window 对象表示一个浏览器窗口或一个框架。

    4. History对象,其实就是来保存浏览器历史记录信息。

    5. Location对象(重点)Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。

    3. Window 对象

    Window对象此处学习它的三个作用:

    1. 获取文档对象document

    2. 弹框的方法

    3. 定时器

    4. 弹框的方法(重点)

    alert() 提示框,弹出一个警告框
    
    confirm("提示信息") 确认框,如果用户点击确认返回一个true; 点击取消返回一个false

    prompt("提示信息") 输入框 . 用户输入的内容会作为方法的返回值.

     

    弹出框演示
    <script type="text/javascript">
       
        // window.alert("警告框");
        // var result = confirm("您是否确认删除?")
        // alert(result);
        var res = prompt("请输入您的名字");
        alert(res);
    
    </script>
    5. 定时器(重点)
    setInterval((js代码/函数,毫秒值); 反复执行的定时器
    clearInterval(定时器的id);取消反复执行的定时器
    setTimeout(js代码/函数,毫秒值); 执行一次的定时器
    clearTimeout(定时器的id);取消执行一次的定时器

    代码:

    <script type="text/javascript">
    
    
        //周期调用函数
        var flag = window.setInterval(fn,500);
        function fn(){
            console.log("我是函数...");
        }
        //清除周期执行任务
        function clearfun() {
            clearInterval(flag)
        }
        //定时调用任务
        var flag2=window.setTimeout(function () {
            console.log("我是函数2.。。。")
        },2000);
        //清除定时任务
        function clearTimeoutd() {
            console.log("清除timeout");
            clearTimeout(flag2);
        }
    
    </script>

    6.常用的全局方法

    内置函数的重要转换: 字符串转成数字

    parseInt \ parseFloat

    <script>
        /**
         * parseInt() 把字符串的数值类型转成 number类型
         *
         * pareFloat() 把字符串的数值类型转成 number类型
         *
         */
        var a1 = "100";
        var b2 = 200;
        var result = parseInt(a1) + b2;
        alert(result);
        var c3= "1.5";//var c3 = "abc"; //NaN (NOT A Number)
        var d4 = 10;
        var result2 = parseFloat(c3) + d4;
        alert(result2)
    </script>

    7. Location对象(重点)

    重点记忆location.href可以在js中进行url访问

    • location.href 相当于在浏览器的地址栏中输入地址 并敲回车
    • location.reload() ; 让页面重新加载(刷新页面)

    代码实现

    function goTo(){ 
        //该行代码执行就相当与在浏览器地址栏输入地址,按回车 
        location.href="http://www.taobao.com"; 
    }
    function refresh(){ 
        //整合html页面被加载,页面刷新 
        location.reload(); 
    }

     

     DOM对象

    1. 什么是 DOM

    DOMDocument Object Model 文档对象模型,定义访问和操作结构化文档(HTML)的方式。

    创建的结构化文档:htmlxml

    DOM包括:核心DOMHTML DOMXML DOM。通常情况下HTML DOM XML DOM是可以相互使 用的。

    HTML DOM 将 整个HTML文档呈现成一颗DOM,树中有元素、属性、文本等成员。

     2. document 文档对象

    浏览器加载整个HTML文档形成Document 对象,Document 对象可以访问和操作HTML文档中的所有元素。

    1) 获得元素对象

    获取标签元素方法
    描述
    document.getElelentById("id")获取idxx的是元素节点
    document.getElementsByName("name名称")获取多个元素的节点,通过name属性值
    document.getElelmetsByClassName("class名称")根据class名字获取多个节点
    document.getElementsByTagName("标签名称")根据标签名获取多个元素

    2) 操作标签体内容

    语法
    描述
    对象名.innerHTML = 标签体;设置标签体html
    对象名.innerHTML获取标签体html
    对象名.innerText = 文本内容;设置标签体文本
    对象名.innerText获取标签体文本

    3) 属性的操作

    方法
    描述
    getAtrribute(name)获得属性的值
    setAtrribute(name,value)设置属性的值
    removeAtrribute(name)删除某个属性

    JavaScript内置对象  

    JS 的对象也分为内置对象定义对象

    例如: String Array Date MathRandom

    1. JS 内置对象 String

    String 对象用于处理文本(字符串)。

    String 对象属性

    属性
    描述
    length字符串的长度

    String 对象方法

    方法
    描述
    charAt(x)返回在指定位置的字符。
    indexOf(x)检索字符串。
    lastIndexOf(x)从后向前搜索字符串。
    split(x)把字符串分割为字符串数组。
    substring(开始索引,结尾索引)获取两个索引之间的字符,包含头,不包含尾
    substr(开始索引)获取的是开始索引到结尾之间的字符
    substr(开始索引,字符个数)从开始索引开始,获取指定个数个字符
    2. JS 内置对象 Array

    Array 对象,就是JS数组,用于存储多个值,存储的元素类型可以是任意类型。

    创建 Array 对象的语法

    • new Array();
    • new Array(size);
    • new Array(element0, element0, ..., elementn);

    参数

    参数 size 是期望的数组元素个数。返回的数组,length 字段将被设为 size 的值。

    参数 element ..., elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时,新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。

     

    实现轮播图 

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div class="box">
            <div class="l" onclick="l()">←</div>
            <div class="center">
                <img src="#" class="img" />
            </div>
            <div class="r" onclick="r()">→</div>
    
        </div>
    </body>
    <style>
        .box{
            width: 800px;
            height:300px;
            margin: 0 auto;
        }
        .l,.r{
            float: left;
            margin-top:60px;
            font-size: 20px;
            background-color: darkgray;
            width:50px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        .center{
            float: left;
            width: 700px;
        }
        .center .img{
            width: 100%;
        }
    </style>
    <script type="text/javascript">
        //图片列表
        var imgURL=new Array("https://www.lgstatic.com/thumbnail_1200x0/i/image/M00/36/A2/CgqCHl8X4zOAaICdAAJfXRNcCcA894.PNG",
            "https://www.lgstatic.com/thumbnail_1200x0/i/image/M00/41/F9/CgqCHl82hsuAUjqyAAOTmcXDgU073.JPEG",
            "https://www.lgstatic.com/thumbnail_1200x0/i/image/M00/40/F7/CgqCHl8zy_SAS3l9AAMk3KBxwJw901.JPG",
            "https://www.lgstatic.com/thumbnail_1200x0/i/image/M00/3E/7B/Ciqc1F8sw3SAcafEAAGax2W7CVA37.JPEG");
        //当前图片索引
        var indexImg=0;
        
        function changeImgl(i) {
            //设置图片
            document.getElementsByClassName("img")[0].setAttribute("src",imgURL[i]);
        }
    
        //上一张
        function l() {
            indexImg=indexImg<1?imgURL.length-1:indexImg-1;
            changeImgl(indexImg);
        }
        //下一张
        function r() {
            indexImg=indexImg==imgURL.length-1?indexImg=0:indexImg+1;
            changeImgl(indexImg);
        }
        //周期函数 执行下一张
        var imgflag=setInterval(r,1000);
    </script>
    </html>

     

    展开全文
  • 文章内容输出来源:拉勾教育大数据开发高薪训练营 本篇文章是java学习课程中的一部分笔记。 本博文主要是记录一些基础的知识点,通过实操更容易理解 这章主要讲的是前端进阶知识, jQuery基本概念 jQuery基本...

    题记:

    文章内容输出来源:拉勾教育大数据开发高薪训练营
    本篇文章是java学习课程中的一部分笔记。

    本博文主要是记录一些基础的知识点,通过实操更容易理解

    这章主要讲的是前端进阶知识,

    jQuery基本概念

    jQuery 基本概念

    jQuery是一个javascript库,jQuery凭借着简洁的语法和跨平台的兼容性,极大的简化了js操作DOM、处理事件、执行动画等操作。jQuery强调的理念是:'write less, do more'(写的少,做的多)

    官网下载地址:http://jquery.com/download

    进不去可以去http://www.jq22.com/jquery-info122

    jQuery 初体验
     
    jQuery 对象 和 DOM 对象

    1)DOM对象

    DOM ( Document Object Model ,文档对象模型),每一份 DOM 都可以表示成一棵树。

     js 中,通过 getElementByTagName 或者 getElementById 来获取元素节点。像这样得到的 DOM 元素就是 DOM 对象。而且 DOM 对象可以使用 js 中的方法,如: innerHTML

    var domObj = document.getElementById('id'); 
    // 获得DOM对象 
    var objHTML = domObj.innerHTML; 
    // 使用Javascript中的属性-innerHTML

    2)jQuery对象

    jQuery 对象,是通过 jQuery 包装 DOM 对象后产生的对象, jQuery 对象是 jQuery 独有的,它可以使用 jQuery里面的方法。

    // 获取id为test的元素内的html代码
    $('#test').html(); // .html()是jQ里面的方法
    上面的代码等同于:
    document.getElementById('test').innerHTML;

    3)注意事项

    • jQuery中,无法使用任何DOM对象的方法,例如:$('id').innerHTML,这是错误的写法。
    • js中也无法使用jQ对象里面的方法,例如:document.getElementById('id').html(),这样也是错误的。
    jQuery 对象与 DOM 对象转换

    jQ对象转成DOM对象:

    方法一(常用)[index]

    var $test = $("#test"); // jQ获取到的对象
    var node = $test[0]; // 转成DOM对象
    node.innerHTML = "你好啊"; // 使用DOM对象的方法

    方法二: get(index)

    var $test = $('#test'); // jQ获取到的对象
    var test = $test.get(0); // 转成DOM对象
    test.innerHTML = "我来了"; // 使用DOM对象的方法

    dom对象转成jQuery对象:

    $() DOM 对象包裹起来就是一个 jQ 对象了

    var test = document.getElementById("test"); // 获取的DOM对象
    var $test = $(test); // 转成jQ对象

     

    jQuery的函数与事件 

    1. 页面加载

    Js页面加载方式   Window.onload = function(){ }

    jQuery页面加载方式

    格式1: $(function(){ })
    格式2: $(document).ready(function(){ })

    结论: javaScript的页面加载只执行一次,最后一次加载的执行; jQuery的页面加载执行多次,每次都执行

    2. 事件绑定与事件派发

    1)jQuery中常用事件

    jQuery中的事件与javaScript中的事件用法一样,但是名称都去掉了on.

    鼠标事件键盘事件表单事件文档/窗口事件
    clickkeypresssubmitload
    dblclickkeydownchangeresize
    mouseenterkeyupfocusscroll
    mouseleave blurunload
    hover   

    2)元素绑定事件

    <input type="button" value="点我试试" id="btn1" onclick="fn()">
    function fn(){
        alert("试试就试试!!");
    }

    3)元素派发事件

    <head>
        <script>
            $(function(){
                $("#btn2").click(function(){
                    alert("jQuery想试试");
                })
            })
        </script>
    </head>
    
    <input type="button" value="点我试试" id="btn2">

    轮播图练习用jquery

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery-3.5.1.min.js"></script>
        <script>
            //图片列表
            var imgURL=new Array("https://www.lgstatic.com/thumbnail_1200x0/i/image/M00/36/A2/CgqCHl8X4zOAaICdAAJfXRNcCcA894.PNG",
                "https://www.lgstatic.com/thumbnail_1200x0/i/image/M00/41/F9/CgqCHl82hsuAUjqyAAOTmcXDgU073.JPEG",
                "https://www.lgstatic.com/thumbnail_1200x0/i/image/M00/40/F7/CgqCHl8zy_SAS3l9AAMk3KBxwJw901.JPG",
                "https://www.lgstatic.com/thumbnail_1200x0/i/image/M00/3E/7B/Ciqc1F8sw3SAcafEAAGax2W7CVA37.JPEG");
            //当前图片索引
            var indexImg=0;
    
            function changeImgl(i) {
                //设置图片
                // document.getElementsByClassName("img")[0].setAttribute("src",imgURL[i]);
                $(".img").prop("src",imgURL[i]);
            }
    
            //上一张
            function l() {
                indexImg=indexImg<1?imgURL.length-1:indexImg-1;
                changeImgl(indexImg);
            }
            //下一张
            function r() {
                indexImg=indexImg==imgURL.length-1?indexImg=0:indexImg+1;
                changeImgl(indexImg);
            }
    
            $(function () {
                //周期函数 执行下一张
                var imgflag=setInterval(r,1000);
                $(".l").click(l)
            })
        </script>
    </head>
    <body>
        <div class="box">
            <div class="l" >←</div>
            <div class="center">
                <img src="#" class="img" />
            </div>
            <div class="r" onclick="r()">→</div>
    
        </div>
    </body>
    <style>
        .box{
            width: 800px;
            height:300px;
            margin: 0 auto;
        }
        .l,.r{
            float: left;
            margin-top:60px;
            font-size: 20px;
            background-color: darkgray;
            width:50px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        .center{
            float: left;
            width: 700px;
        }
        .center .img{
            width: 100%;
        }
    </style>
    
    </html>

     

    jQuery选择器 

    选择器实例选取
    *$("*")所有元素
    #id$("#lastname")id="lastname" 的元素
    .class$(".intro")所有 class="intro" 的元素
    element$("p")所有 <p> 元素
    .class.class$(".intro.demo")所有 class="intro" 且 class="demo" 的元素
    基本过滤选择器
      
    :first$("p:first")第一个 <p> 元素
    :last$("p:last")最后一个 <p> 元素
    :even$("tr:even")所有偶数 <tr> 元素
    :odd$("tr:odd")所有奇数 <tr> 元素
    索引选择器  
    :eq(index)$("ul li:eq(3)")列表中的第四个元素(index 从 0 开始)
    :gt(no)$("ul li:gt(3)")列出 index 大于 3 的元素
    :lt(no)$("ul li:lt(3)")列出 index 小于 3 的元素
    :not(selector)$("input:not(:empty)")所有不为空的 input 元素
       
    :header$(":header")所有标题元素 <h1> - <h6>
    :animated 所有动画元素
       
    :contains(text)$(":contains('W3School')")包含指定字符串的所有元素
    :empty$(":empty")无子(元素)节点的所有元素
    :hidden$("p:hidden")所有隐藏的 <p> 元素
    :visible$("table:visible")所有可见的表格
    多匹配  
    s1,s2,s3$("th,td,.intro")所有带有匹配选择的元素
    属性选择器
      
    [attribute]$("[href]")所有带有 href 属性的元素
    [attribute=value]$("[href='#']")所有 href 属性的值等于 "#" 的元素
    [attribute!=value]$("[href!='#']")所有 href 属性的值不等于 "#" 的元素
    [attribute$=value]$("[href$='.jpg']")所有 href 属性的值包含以 ".jpg" 结尾的元素
    表单选择器
      
    :input$(":input")所有 <input> 元素
    :text$(":text")所有 type="text" 的 <input> 元素
    :password$(":password")所有 type="password" 的 <input> 元素
    :radio$(":radio")所有 type="radio" 的 <input> 元素
    :checkbox$(":checkbox")所有 type="checkbox" 的 <input> 元素
    :submit$(":submit")所有 type="submit" 的 <input> 元素
    :reset$(":reset")所有 type="reset" 的 <input> 元素
    :button$(":button")所有 type="button" 的 <input> 元素
    :image$(":image")所有 type="image" 的 <input> 元素
    :file$(":file")所有 type="file" 的 <input> 元素
    表单对象属性选择器
      
    :enabled$(":enabled")所有激活的 input 元素
    :disabled$(":disabled")所有禁用的 input 元素
    :selected$(":selected")所有被选取的 input 元素
    :checked$(":checked")所有被选中的 input 元素

    jQueryDOM操作 

    1 jQuery DOM 树中的文本和值进行操作

    语法

    API 方法
    解释
    val([value])获得/设置元素value属性相应的值
    text([value])获得/设置元素的文本内容
    html([value])获得/设置元素的标签体内容
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>3-10-1</title>
        <style type="text/css">
            .test {
                font-weight: bold;
                color: red;
            }
    
            .add {
                font-style: italic;
            }
        </style>
        <!-- 引入jQuery -->
        <script src="../js/jquery-3.5.1.js"></script>
        <script type="text/javascript">
            function fn1() {
                alert($("p").html());
            }
            function fn2() {
                alert($("p").text());
            }
            function fn3() {
                $("p").html("<font>这是一个行内元素<font>");
            }
            function fn4() {
                $("p").text("<span>这是一个行内元素</span>");
            }
            function fn5() {
                alert($("#btn1").val());
            }
            function fn6() {
                $("#btn2").val(777777);
            }
            function fn7(e) {
                alert($(e).val());
                console.log(e)
            }
        </script>
    </head>
    <body>
    <input type="button" value="获取P元素的HTML代码" onclick="fn1()"/>
    <input type="button" value="获取P元素的文本" onclick="fn2()"/>
    <input type="button" value="设置P元素的HTML代码" onclick="fn3()"/>
    <input type="button" value="设置P元素的文本" onclick="fn4()"/>
    <input id="btn1" type="button" value="获取按钮的value值" onclick="fn5()"/>
    <input id="btn2" type="button" value="设置按钮的value值" onclick="fn6()"/>
    <input id="btn3" type="button" value="获取当前按钮对象" onclick="fn7(this)"/>
    <hr/>
    <p title="demo"><strong>你好啊,我来了,别跑啊</strong></p>
    </body>
    </html>
    2 jQuery DOM 树中的属性进行操作

    语法

    API 方法
    解释
    attr(name[,value])获得/设置属性的值
    prop(name[,value])获得/设置属性的值(checkedselected)
    removeAttr(name)删除属性值
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>3-8</title> <!-- 引入jQuery -->
        <script src="../js/jquery-3.5.1.js"></script>
        <script type="text/javascript">
            function fn1() {
                alert($("h1").attr("title"));
            }
            function fn2() {
                $("h1").attr("title","疯子一样的少年");
            }
            function fn3() {
                $("h1").removeAttr("title");
            }
        </script>
    </head>
    <body>
    <input type="button" value="设置h1元素的属性'title'" onclick="fn1()"/>
    <input type="button" value="获取h1元素的属性'title'" onclick="fn2()"/>
    <input type="button" value="删除h1元素的属性'title'" onclick="fn3()"/>
    <h1 title="风一样的少年"><strong>我是风一样的少年</strong></h1></body>
    </html>

    attrprop的注意问题

    • attrprop是以1.6为界限
    • checked selected 使用prop获取
    • 其他使用attr获取 获取不到换成prop
    3 jQuery class 进行操作 ( 了解 )

    语法

    API 方法
    解释
    css(name[,value])获取/设置指定的CSS样式
    addClass(value)addClass(类样式名) 给指定的对象添加新的类样式,指定类样式名字即可
    removeClass(value)removeClass(类样式名) 删除指定的类样式
    toggleClass(value)toggleClass(类样式名) 切换样式,如果没有类样式,则添加,如果有类样式,则删除
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>3-9-1</title>
        <style type="text/css">
            .two {
                font-weight: bold; /* 粗体字 */
                background: red;
                font-family: "楷体";
            }
    
            .one {
                font-style: italic;
                color: green;
            }
        </style>
        <!-- 引入jQuery -->
        <script src="../js/jquery-3.5.1.js"></script>
        <script type="text/javascript">
            function fn1() {
                alert($("h2").css("font-family"));
            }
            function fn2() {
                $("h2").css("font-family","Arial");
    
            }
            function fn3() {
                $("h2").addClass("two");
            }
            function fn4() {
                $("h2").removeClass();
            }
            function fn5() {
                $("h2").removeClass("two");
            }
            function fn6() {
                $("h2").toggleClass("two");
            }
        </script>
    </head>
    <body>
    <input type="button" value="获取字体样式" onclick="fn1()"/>
    <input type="button" value="设置字体样式" onclick="fn2()"/>
    <input type="button" value="追加class类" onclick="fn3()"/>
    <input type="button" value="删除全部class类" onclick="fn4()"/>
    <input type="button" value="删除指定class类" onclick="fn5()"/>
    <input type="button" value="重复切换class类" onclick="fn6()"/>
    <h2 class="one" title="你最喜欢的英雄是?">你最喜欢的英雄是?</h2>
    </body>
    </html>

    4 jQuery创建插入对象

    语法

    API 方法
    解释
    $("")  例$("<div>abc</div>")创建A元素对象
    父元素.append(element)添加成最后一个子元素,两者之间是父子关系
    父元素.prepend(element)添加成第一个子元素,两者之间是父子关系
    兄弟元素.before(element)添加到当前元素的前面,两者之间是兄弟关系
    兄弟元素.after(element)添加到当前元素的后面,两者之间是兄弟关系
    5 jQuery 删除对象

    语法

    API 方法
    解释
    remove()删除指定元素
    empty()清空指定元素的所有子元素
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <!-- 引入jQuery -->
        <script src="../js/jquery-3.5.1.js"></script>
        <script>
            /*
            * 1.创建2个带文本和title属性的li节点
            * 2.获取ul父节点
            * 3.获取第2个li节点
            * 4.将第1个li节点添加为ul父节点的最后一个子节点
            * 5.将第2个li节点追加为ul父节点的第一个子节点
            * 6 最后一个元素之后添加$li_3
            */
    
            function fnold() {
                var li1 = $("<li title='sunshangxiang'>孙尚香</li>");
                var li2 = $("<li title='diaochan'>貂蝉</li>");
                var li3 = $("<li title='zhugeliang'>诸葛亮</li>");
                var parent = $("ul");
                alert($("li:eq(1)").attr("title"));
                parent.append(li1);
                parent.prepend(li2);
                $("li:last").after(li3);
            }
            function fn() {
                $("li:first").empty();
            }
            function fn1() {
                $("li:eq(1)").remove();
            }
            function fn2() {
                $("li").parent().empty();
            }
        </script>
    
    </head>
    <body>
    <p title="王者荣耀">你喜欢的英雄是?</p>
    <ul>
        <li title='zhaoyun'>赵云</li>
        <li title='xiaoqiao'>小乔</li>
        <li title='luban'>鲁班</li>
    </ul>
    <button onclick="fnold()">操作</button>
    <button onclick="fn()">清空第一个节点,但不删除节点</button>
    <button onclick="fn1()">删除第二个元素</button>
    <button onclick="fn2()">使用父节点清空所有子节点</button>
    </body>
    </html>

     

    jQuery的遍历 

    1 原始方式遍历

    语法

    for(var i=0;i<元素数组.length;i++){ 
        元素数组[i]; 
    }
    2 jquery 对象方法遍历

    语法

    jquery对象.each(function(index,element){});
    其中,
    index:就是元素在集合中的索引
    element:就是集合中的每一个元素对象
    
    <body>
    <script type="text/javascript">
        $(function(){
            var $lis = $("#city li");
            $lis.each(function(index,element){
                alert(index+"--"+$(element).html());
            });
        });
    </script>
    
    <ul id="city">
        <li>北京</li>
        <li>上海</li>
        <li>天津</li>
        <li>重庆</li>
    </ul>
    </body>
     
    3 jquery 的全局方法遍历

    语法

    $.each(jquery对象,function(index,element){}); 
    其中, index:就是元素在集合中的索引 
    element:就是集合中的每一个元素对象
    
    var $lis = $("#city li");
    $.each($lis,function(index,element){
         alert(index+"--"+$(element).html());
    });
    4 jQuery3.0 新特性 for of 语句遍历

    语法

    for(变量 of jquery对象){ 
        变量; 
    }
    其中, 变量:定义变量依次接受jquery数组中的每一个元素 
    jquery对象:要被遍历的jquery对象
    
    
    var $lis = $("#city li"); 
    for(li of $lis){ 
        alert($(li).html()); 
    }
     

    jQuery动画

    jQuery 可以通过方法对 HTML元素进行效果设置: 隐藏,显示,切换,滑动,淡入淡出,动画等设置

     1 隐藏和显示

    方法名称
    解释
    show([speed,[easing],[fn]])显示元素方法
    hide([speed,[easing],[fn]])隐藏元素方法
    toggle([speed],[easing],[fn])切换元素方法,显示的使之隐藏,隐藏的使之显示

    参数

    参数名称
    解释
    speed三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
    easing用来指定切换效果,默认是"swing",可用参数"linear"
    fn
    在动画完成时执行的函数,每个元素执行一次
    2 滑动效果
    方法名称
    解释
    slideDown([speed,[easing],[fn]])向下滑动方法,
    ( 划入 ) 展现
    slideUp([speed,[easing],[fn]])向上滑动方法
    ( 划出 ) 消失
    slideToggle([speed],[easing],[fn])切换元素方法,显示的使之隐藏,隐藏的使之显示
    3 链式编程

    链是允许我们在同一个元素上在一条语句中运行多个jQuery方法,可以把动作/方法链接在 一起 ;这样的话,浏览 器就不必多次查找相同的元素。如需链接一个动作, 只需简单地把该动作追加到之前的动作上。 下面的例子把 css()slideUp() slideDown() 链接在一起。"p1" 元素首先会变为红 色,然后向上滑动,再然后向下滑动:

            $("#p1").css("background","red").slideUp(1000).slideDown(1000);
    
    4.animate 自定义动画

    animate() 方法用于创建自定义动画。

    语法:

    $(selector).animate({params},speed,callback);
    必需的 params 参数定义形成动画的 CSS 属性。
    可选的 speed 参数规定效果的时长 。它可以取以下 值:"slow""fast" 或毫秒。
    可选的 callback 参数是动画完成后所执行的函数名称。

    需求:使用animate实现div高度变为300px ,透明度opacity 0.4, 宽度变为400px,透明度opacity 0.6 , 向右移动300px, 再向下移动300px,弹出框提示动画演示结束.

    <body>
    <script type="text/javascript">
        $(function(){
            /*需求:使用animate实现div高度变为300px ,透明度opacity 0.4, 宽度变为400px,透明度opacity 0.6 , 向右移动300px, 再向下移动300px,弹出框提示动画演示结束.*/
            $("div").animate(
                {
                    height:"300px",
                    opacity:"0.4"
                },3000
            ).animate(
                {
                    width:"400px",
                    opacity:"0.6"
                },2000
            ).animate({left:"300px"},1000).animate({left:"300px"},1000).animate({top:"300px"},800)
    
        });
        
    </script>
    <div style="width: 50px;height: 50px;background: blue;position:absolute">这是一个div</div>
    </body>

    弹幕案例

    ​
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>弹幕案例</title>
        <script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
        <style>
            html,
            body {
                margin: 0px;
                padding: 0px;
                width: 100%;
                height: 100%;
                font-family: "微软雅黑";
                font-size: 62.5%;
            }
            .boxDom {
                width: 100%;
                height: 100%;
                position: relative;
                overflow: hidden;
            }
            .idDom {
                width: 100%;
                height: 50px;
                background: #666;
                position: fixed;
                bottom: 0px;
            }
            .content {
                display: inline-block;
                width: 430px;
                height: 40px;
                position: absolute;
                left: 0px;
                right: 0px;
                top: 0px;
                bottom: 0px;
                margin: auto;
            }
            .title {
                display: inline;
                font-size: 4em;
                vertical-align: bottom;
                color: #fff;
            }
            .text {
                border: none;
                width: 300px;
                height: 30px;
                border-radius: 5px;
                font-size: 2.4em;
            }
            .btn {
                width: 60px;
                height: 30px;
                background: #f90000;
                border: none;
                color: #fff;
                font-size: 2.4em;
            }
            span {
                width: 300px;
                height: 40px;
                position: absolute;
                overflow: hidden;
                color: #000;
                font-size: 4em;
                line-height: 1.5em;
                cursor: pointer;
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
    <script type="text/javascript">
        $(function(){
            $(".btn").click(submit);
            $(".text").keyup(function (e) {
                if(e.keyCode==13){
                    submit();
                }
            })
        });
        function submit() {
            var colors=["red","blue","green","yellow"];
            var divE=$("<span></span>").text($(".text").val()).css("color",colors[parseInt(Math.random()*4)]).css("left","1400px").css("top",parseInt(Math.random()*600)+"px").animate({left:"-100px"},5000)
            $("#boxDom").append(divE)
            $(".text").val("");
        }
    
    </script>
    <body>
    <div class="boxDom" id="boxDom">
        <div class="idDom" id="idDom">
            <div class="content">
                <p class="title">弹幕:</p>
                <input type="text" class="text" id="text" onkeypress="fnn(this)" />
                <button type="button" class="btn" id="btn">发射</button>
            </div>
        </div>
    </div>
    </body>
    </html>
    
    ​​
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>弹幕案例</title>
        <script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
        <style>
            html,
            body {
                margin: 0px;
                padding: 0px;
                width: 100%;
                height: 100%;
                font-family: "微软雅黑";
                font-size: 62.5%;
            }
            .boxDom {
                width: 100%;
                height: 100%;
                position: relative;
                overflow: hidden;
            }
            .idDom {
                width: 100%;
                height: 50px;
                background: #666;
                position: fixed;
                bottom: 0px;
            }
            .content {
                display: inline-block;
                width: 430px;
                height: 40px;
                position: absolute;
                left: 0px;
                right: 0px;
                top: 0px;
                bottom: 0px;
                margin: auto;
            }
            .title {
                display: inline;
                font-size: 4em;
                vertical-align: bottom;
                color: #fff;
            }
            .text {
                border: none;
                width: 300px;
                height: 30px;
                border-radius: 5px;
                font-size: 2.4em;
            }
            .btn {
                width: 60px;
                height: 30px;
                background: #f90000;
                border: none;
                color: #fff;
                font-size: 2.4em;
            }
            span {
                width: 300px;
                height: 40px;
                position: absolute;
                overflow: hidden;
                color: #000;
                font-size: 4em;
                line-height: 1.5em;
                cursor: pointer;
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
    <script type="text/javascript">
        $(function(){
            $(".btn").click(submit);
            $(".text").keyup(function (e) {
                if(e.keyCode==13){
                    submit();
                }
            })
        });
        function submit() {
            var colors=["red","blue","green","yellow"];
            var divE=$("<span></span>").text($(".text").val()).css("color",colors[parseInt(Math.random()*4)]).css("left","1400px").css("top",parseInt(Math.random()*600)+"px").animate({left:"-100px"},5000)
            $("#boxDom").append(divE)
            $(".text").val("");
        }
    
    </script>
    <body>
    <div class="boxDom" id="boxDom">
        <div class="idDom" id="idDom">
            <div class="content">
                <p class="title">弹幕:</p>
                <input type="text" class="text" id="text" onkeypress="fnn(this)" />
                <button type="button" class="btn" id="btn">发射</button>
            </div>
        </div>
    </div>
    </body>
    </html>
    
    ​

     

    ajax概述  

    1. ajax 概念

    Ajax "Asynchronous Javascript And XML"(异步 JavaScript XML),是指一种创建交互式网页应用的网页开发技术。

    2. ajax 功能

    Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。提升用户的体验。

    3. AJAX 的应用场景

    数据校验

    按照需求获取数据

    自动更新页面内容

    4. 同步与异步

    两种方式的区别主要体现在客户端和服务器端相互通信的基础上。

    • 同步方式:客户端必须等待服务器端的响应,在等待的期间客户端不能做其他操作。
    • 异步方式:客户端不需要等待服务器端的响应,在服务器处理请求的过程中,客户端可以进行其他的操作。

    js原生的ajax 

    1. 原生的 ajax 的开发步骤

    1)创建Ajax引擎对象

    2)为Ajax引擎对象绑定监听(监听服务器已将数据响应给引擎)

    3)绑定提交地址

    4)发送请求

    5)接受响应数据

    2 js原生的ajax的代码实现

    IDEA配置tomcat   https://www.cnblogs.com/Knowledge-has-no-limit/p/7240585.html

    新建一个模块,javaee的,勾选web application

    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            function sendRequest() {
    //js的ajax访问
    //1)创建Ajax引擎对象
                var xmlhttp = new XMLHttpRequest();
    //2)为Ajax引擎对象绑定监听(监听服务器已将数据响应给引擎)
                xmlhttp.onreadystatechange = function () {//引擎状态一改变就触发该事件
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    //5)接受响应数据
    //获得服务器端返回给引擎对象的数据
                        alert(xmlhttp.responseText);
                    }
                }
    //3)绑定提交地址
                /*
                GET:请求方式
                url地址
                true是否异步 代表异步 false代表同步
                */
                xmlhttp.open("GET", "/AjaxDemo/ajaxServlet", true);
    //4)发送请求
                xmlhttp.send();
            }
        </script>
    </head>
    <body>
    <input type="button" value="ajax异步访问服务器端" onclick="sendRequest()">
    </body>
    </html>
     
        @WebServlet("/ajaxServlet")
        public class AjaxServlet extends HttpServlet {
            protected void doGet(HttpServletRequest request, HttpServletResponse response) throws
                    ServletException, IOException {
                response.getWriter().write("ajax response data ...");
            }
            protected void doPost(HttpServletRequest request, HttpServletResponse response) throws
                    ServletException, IOException {
                doGet(request, response);
            }
        }

    jQuery方式的ajax 

    1 jQuery 方式 ajax 简介

    jquery是一个优秀的js类库,自然对js原生的ajax进行了封装,封装后的ajax的操 作方法更简洁,功能更强大,与ajax操作相关的jquery方法有如下几种,但开发中 经常使用的有三种:

    请求方式
    语法
    GET请求$.get(url, [data], [callback], [type])
    POST请求$.post(url, [data], [callback], [type])
    AJAX请求$.ajax([settings])
    2 GET 请求方式

    概述

    通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能,如需复杂的ajax参数设置请使用$.ajax

    语法

    $.get(url, [data], [callback], [type])

    其中,参数说明如下:

    参数名称
    解释
    url请求的服务器端url地址
    data发送给服务器端的请求参数,格式可以是key=value,也可以是js对象
    callback当请求成功后的回掉函数,可以在函数体中编写我们的逻辑代码
    type预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defaul

    html

        <script>
            function sendJqueryRequest() {
                $.get("/javaServer/ajaxServlet","name=bigload&age=12",function (res) {
                    alert(res);
                },"text")
            }
        </script>
    
        <input type="button" value="jquery,ajax异步访问服务器端" onclick="sendJqueryRequest()">

    server

    @WebServlet("/ajaxServlet")
    public class serverAJAX extends HttpServlet {
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws
                ServletException, IOException {
            String name=request.getParameter("name");
            String age=request.getParameter("age");
            response.getWriter().write("ajax response data ..."+"name:"+name+"...age:"+age);
        }
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws
                ServletException, IOException {
            doGet(request, response);
        }
    }
    3 POST 请求方式

    概述

    通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能,如需复杂的ajax参数设置请使用$.ajax

    语法

    $.post(url, [data], [callback], [type])

    其中,参数说明如下:

    参数名称
    解释
    url请求的服务器端url地址
    data发送给服务器端的请求参数,格式可以是key=value,也可以是js对象
    callback当请求成功后的回掉函数,可以在函数体中编写我们的逻辑代码
    type预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defaul
        <script type="text/javascript">
            function sendRequest(){
                $.post(
                    "/AjaxDemo/ajaxServlet",
                    "name=haohao&age=33",
                    function(data){
                        alert(data);
                    },
                    "text"
                );
            }
        </script>
    4 AJAX 请求方式

    概述

    通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高层实现见getpost方法。$.ajax()方法可以更加详细的设置底层的参数。

    语法

    $.ajax([settings])

    其中,settings是一个js字面量形式的对象,格式是{name:value,name:value... ...},常用的name属性名如下:

    属性名称
    解释
    url请求的服务器端url地址
    async(默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false
    data
    发送到服务器的数据,可以是键值对形式,也可以是js对象形式
    type(默认: "GET") 请求方式 ("POST" "GET")
    dataType预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defaul
    success请求成功后的回调函数
    error请求失败时调用此函数
            function sendRequest(){
                $.ajax({
                    url:"/AjaxDemo/ajaxServlet",
                    async:true,
                    data:"name=haohao&age=33",
                    type:"GET",
                    dataType:"text",
                    success:function(data){
                        alert(data);
                    },
                    error:function(){
                        alert("数据没有成功返回!")
                    }
                });
            }

     

     json数据格式

    1. json的概念

    json的全称叫做:JavaScript object NotationJavaScript对象表示法。

    json现在主要的功能是:用于存储和交换文本信息的语法,进行数据的传输。

    json的主要优点:JSON XML 更小、更快、更易解析。

    2.json的转换工具

    1 ) json转换工具的概述

    json的转换工具是通过java封装好的一些jar工具包,直接将java对象或集合转换成json格式的字符串。

    2 ) 常见的json转换工具

    工具名称
    介绍
    JsonlibJava 类库,需要导入的jar包较多
    Gsongoogle提供的一个简单的json转换工具
    Fastjsonalibaba技术团队提供的一个高性能的json转换工具
    Jackson开源免费的json转换工具,springmvc转换默认使用jackson

    3 ) jackson工具使用

    1)导入json相关jar

    https://www.cnblogs.com/yinghuapiaoluo/p/12593389.html

    • jackson-annotations-2.2.3.jar
    • jackson-core-2.2.3.jar
    • jackson-databind-2.2.3.jar

    2)创建java对象或集合

    3) 使用jacksonObjectMapper对象的writeValueAsString方法进行转换

    4 ) 注解使用

    @JsonIgnore:排除属性。

    @JsonFormat:属性值的格式化,例如,针对日期格式:@JsonFormat(pattern = "yyyy-MM-dd")

    5) 转换代码实现

    public class jsonTest {
        public static void main(String[] args) throws JsonProcessingException {
            //创建User对象
            User user = new User("100","bigload",33);
    
            //创建List集合
            List<String> arr = new ArrayList<>();
            arr.add("aaa");
            arr.add("bbbb");
            arr.add("ccccc");
            //创建Map集合
            Map<String,User> map = new HashMap<>();
            map.put("user", user);
            //转换
            ObjectMapper om = new ObjectMapper();
            String userJson = om.writeValueAsString(user);
            String arrJson = om.writeValueAsString(arr);
            String mapJson = om.writeValueAsString(map);
            System.out.println(userJson);
            System.out.println(arrJson);
            System.out.println(mapJson);
    
        }
    }
    
    class User implements Serializable {
    
        private String id;
        private String name;
        private int age;
    
        public User(String id, String name, int age) {
            this.id = id;
            this.name = name;
            this.age = age;
        }
    
        public String getId() {
            return id;
        }
    
        public void setId(String id) {
            this.id = id;
        }
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    
        public int getAge() {
            return age;
        }
    
        public void setAge(int age) {
            this.age = age;
        }
    
        
    }
    
     

    综合案例  检测用户名是否已经被注册

    需求

    在用户注册页面,输入用户名,当用户名输入框失去焦点时,发送异步请求,将输入框的用户名传递给服务器端进行是否存在的校验。

    使用技术

    前台: html jQuery ajax

    后台: Servlet JDBC Druid QueryRunner

    数据库: mysq

    出现的问题

    使用druid可能会出现java.lang.NoClassDefFoundError: org/apache/commons/dbutils/ResultSetHandler

    需要把jar包WEB-INF/lib下面,可以参考https://blog.csdn.net/hdn_kb/article/details/86476836

    代码实现
    1. 数据库 SQL
    #创建user表
    CREATE TABLE USER (
    id INT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(32),
    PASSWORD VARCHAR(32)
    );
    #添加数据
    INSERT INTO USER VALUES(NULL,'zhangsan','123');
    INSERT INTO USER VALUES(NULL,'lisi','123');
    INSERT INTO USER VALUES(NULL,'wangwu','123');

    2.druid工具类

    import com.alibaba.druid.pool.DruidDataSourceFactory;
    
    import javax.sql.DataSource;
    import java.io.InputStream;
    import java.sql.Connection;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    import java.sql.Statement;
    import java.util.Properties;
    
    public class DruidUtils {
        //1.定义成员变量
        public static DataSource dataSource;
        //2.静态代码块
        static{
            try {
                //3.创建属性集对象
                Properties p = new Properties();
                //4.加载配置文件 Druid 连接池不能够主动加载配置文件 ,需要指定文件
                InputStream inputStream = DruidUtils.class.getClassLoader().getResourceAsStream("mysql_druid.properties");
                //5. 使用Properties对象的 load方法 从字节流中读取配置信息
                p.load(inputStream);
                //6. 通过工厂类获取连接池对象
                dataSource = DruidDataSourceFactory.createDataSource(p);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        //获取连接的方法
        public static Connection getConnection(){
            try {
                return dataSource.getConnection();
            } catch (SQLException e) {
                e.printStackTrace();
                return null;
            }
        }
        //获取连接池的方法
        public static DataSource getDataSource(){
            return dataSource;
        }
        //释放资源
        public static void close(Connection con, Statement statement){
            if(con != null && statement != null){
                try {
                    statement.close();
                    //归还连接
                    con.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }
        public static void close(Connection con, Statement statement, ResultSet resultSet){
            if(con != null && statement != null && resultSet != null){
                try {
                    resultSet.close();
                    statement.close();
                    //归还连接
                    con.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }
    }

    3.数据库处理类

    package com.bigload.server;
    
    import org.apache.commons.dbutils.QueryRunner;
    import org.apache.commons.dbutils.handlers.ScalarHandler;
    
    import java.sql.SQLException;
    
    public class dbQueryRunner {
        private static QueryRunner qr=new QueryRunner(DruidUtils.getDataSource());
        private static String sql = "select id from user where username=?";
        private static String addSql="insert into user values(NULL,?,?)";
    
        //查找用户
        public static boolean findUser(String name){
            Object[] param={name};
            try {
                if(null==qr.query(sql,new ScalarHandler(),param)){
                    return false;
                }
                return true;
            } catch (SQLException e) {
                e.printStackTrace();
                return false;
            }
        }
        //添加用户
        public static boolean addUser(String name,String password) {
            Object[] param = {name, password};
            try {
                qr.update(addSql,param);
                return true;
            } catch (SQLException e) {
                e.printStackTrace();
                return false;
            }
        }
    
        public static void main(String[] args) {
            System.out.println(findUser("lii"));
    //        addUser("bigload","123");
        }
    
    }
    

    4.服务器,两个文件

    @WebServlet("/finduser")
    public class findUser extends HttpServlet {
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws
                ServletException, IOException {
            doPost(request, response);
        }
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws
                ServletException, IOException {
    
            request.setCharacterEncoding("UTF-8");
            response.setContentType("text/html;charset=utf-8");
            String name=request.getParameter("username");
            response.getWriter().print(dbQueryRunner.findUser(name));
        }
    }
    
    @WebServlet("/adduser")
    public class addUser extends HttpServlet {
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws
                ServletException, IOException {
    
            doPost(request, response);
        }
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws
                ServletException, IOException {
            String name=request.getParameter("username");
            String password=request.getParameter("password");
            response.getWriter().print(dbQueryRunner.addUser(name,password));
        }
    }
    

    5.前端

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>用户注册</title>
        <script src="../js/jquery-3.5.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                //调用查询用户名接口
                $("#name").blur(function () {
                    var name=$("#name").val();
                    $.post("/javaServer/finduser","username="+name,function (res) {
                        res=(res === "true");
                        $("#msg").html("<font color="+(res?"red":"green")+">"+(res?"用户名已经存在":"真是个好名字")+"</font>");
                        if(res){
                            $("#btn").attr("disabled","false");
                        }else{
                            $("#btn").removeAttr("disabled");
                        }
    
                    },"text")
                })
    
                //调用添加用户接口
                $("#btn").click(function () {
                    var name=$("#name").val();
                    var password=$("#pwd").val();
    
                    $.post("/javaServer/adduser",{"username":name,"password":password},function (res) {
                        alert(res?"注册成功":"注册失败,请稍后重试");
                        console.log(res);
                    },"json")
                })
            })
        </script>
    </head>
    <body>
    <h1>会员注册</h1>
    用户名<input type="text" name="username" id="name" /><span id="msg"></span><br/>
    密码<input type="password" name="password" id="pwd" /><br/>
    <input type="button" id="btn" disabled="false" value="注册"/>
    </body>
    </html>

     

    Vue  

    vue 快速入门 https://cn.vuejs.org/
    1 )入门案例

    一共三个步骤

    1. 引入vue.js

    2. 创建Vue对象设置el属性和data属性

    3. 使用插值表达式将数据渲染到html页面

     
    2 )插值表达式

    数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值,Mustache 标签将会被替代为对应数据对象上属性的值。无论何时,绑定的数据对象上属性发生了改变,插值处的内容都会更新。 Vue.js 都提供了完全的JavaScript 表达式支持。

    {{ dataNum + 1 }}
    {{ true ? 'YES' : 'NO' }}
    这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含单个 表达式,所以下面的例子都不会生效。
    <!-- 这是语句,不是表达式 -->
    {{ var a = 1 }}
    <!-- 流控制也不会生效,请使用三元表达式 -->
    {{ if (ok) { return message } }}
    3 el 挂载

    message中的内容会替代插值表达式{{message}}中的内容.

    注意事项:

    1.Vue管理的el选项命中元素及其子元素都有作用。 比如: idappdiv外使用{{message}} 不能解析,但在内部使用{{message}}可以解析。

    2.除了id选择器其他的选择器也可以使用

    3.htmlbody标签上不能挂使用el挂在。

    4) data 数据对象

    当一个 Vue 实例被创建时,它将 data 对象中的所有的 property 加入到 Vue 响应式系统中。当这些 property 的值发生改变时,视图将会产生响应,即匹配更新为新的值

    Vue 常用指令
     
    v-text v-html

    很像innerTextinnerHTML

    v-text:更新标签中的内容

    • v-text和插值表达式的区别

                       v-text 更新整个标签中的内容

                       插值表达式: 更新标签中局部的内容

    v-html:更新标签中的内容/标签

    • 可以渲染内容中的HTML标签
    • 注意:尽量避免使用,容易造成危险 (XSS跨站脚本攻击)

    v-if v-show
    • 作用:根据表达式的bool值进行判断是否渲染该元素
            <div id="app">
                <!-- 如果isShow的值是true ,就显示p标签 -->
                <p v-if="isShow">我是p标签中的内容</p>
                <p v-show="isShow">我是p标签中的内容</p>
                <!-- 如果标签显示与隐藏切换频繁, 就使用v-show
                v-show本质是通过修改标签的display值
                -->
            </div>
            <script src="./vue.js"></script>
            <script>
                new Vue({
                    el: '#app',
                    data: {
                        isShow: false
                    }
                });
            </script>

    v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。

    因此,如果需要非常频繁地切换,则使用 v-show 较好;

    如果在运行时条件很少改变,则使用 v-if 较好。

    v-on

    作用:使用 v-on 指令绑定 DOM 事件,并在事件被触发时执行一些 JavaScript 代码。

    语法: @事件名.修饰符 = "methods中的方法名"

    注意: $event 可以传形参

    <body> <!--
    
    1.获取元素,操作元素点击按钮一 count值增加
    
    点击按钮二 count值减少2.参数传递
    
    传递count
    
    传递$event : 如果有一个输入框,键盘按下,只能输入数字,不能输入其他内容.
    
    需求:有一个文本输入框,只可以输入数字0-9 ,其他内容不能输入.
    
    -->
    
    <div id="app">
    
        <button v-on:click="add">按钮一count增加</button>
        <button @click="sub">按钮二count减少</button>
        <hr>
    
        <button v-on:click="count += 1">按钮一count增加-方式2</button>
        <button @click="count -= 1">按钮二count减少-方式2</button>
        <hr>
    
        <button @click="fun(count)">获取元素count</button>
        <hr>
    
        <button @click="fun1($event)">传递事件对象</button>
        <hr>
    
        <input type="text" name="name" id="id" @keydown="fun2($event)">
        <h2>{{count}}</h2>
    
    </div>
    
    </body>
    
    <script>
    
        var app = new Vue({
            el: "#app",
            data: {
                count: 1
            },
            methods: {
                add: function () {
                    this.count += 1
                }, sub: function () {
                    this.count -= 1
                }, fun: function (c) {
                    alert(c)
                }, fun1: function (e) {
                    alert(e);
                }, fun2: function (e) {
    
                    //获取到键盘事件,可以获取到具体的案件 keyCode
                    //alert(e.keyCode)
                    //如果按钮大于57 或者按钮小于48 ,阻止事件发生 preventDefault()
                    if(e.keyCode > 57 || e.keyCode < 48) {
                        //阻止事件发生
                        e.preventDefault();
                    }
    
                }
    
            }
        })
    
    </script>

    修饰符

    语法:

    格式1: v-on:事件名称.修饰符 = "函数名称"

    简写: @事件名.修饰符 = "methods中的方法名"

     

    按键别名:

    .enter

    .tab

    .delete

    .esc

    .space

    .up

    .down

    .left

    .right

    .ctrl

    .alt

    .shift

    v-for

    根据一组数组或对象的选项列表进行渲染。

    v-for 指令需要使用 item in items 形式的特殊语法,

    items 是源数据数组 /对象

    当要渲染相似的标签结构时用v-for

    <!-- 对象 -->
    <!-- (v,k,i)in 对象
    v:值
    k:键
    i:对象中每对key-value的索引 从0开始
    注意: v,k,i是参数名,见名知意即可!
    -->
    <p v-for="value in per">{{value}}</p>
    <hr>
    <p v-for="(value,key) in per">{{value}}----{{key}}</p>
    <hr>
    <p v-for="(value,key,i) in per">{{value}}----{{key}}--{{i}}</p>

    注意: 在使用v-for,要把一个唯一值赋值给:key属性(通常是数组的index或者数据的id)

    <!-- v-for
    key属性: 值通常是一个唯一的标识
    key是一个可选属性
    养成好习惯:建议在写v-for时 设置:key="唯一值"
    -->
    <ul>
    <li v-for="(item,index) in list" :key="index">{{item}}---{{index}}</li>
    </ul>
    v-bind

    作用: 可以绑定标签上的任何属性。

    绑定srcalt属性

    <div id="app">
        <img :src="imgUrl" v-bind:alt="alt" >
    </div>
    <script src="./vue.js"></script>
    <script>
    var vm = new Vue({
        el: '#app',
        data: {
            imgUrl:"img/3.jpg",
            alt:"拉勾图片",
        }
    });
    </script>
    绑定 class 类名

    对象语法和数组语法

    对象语法

    如果isActivetrue,则返回的结果为 <div class="active"></div>

    数组语法

    渲染的结果 <div class="active text-danger"></div>

    <!-- 可以简化为 :,简化语法更常用 -->

    <div :class="{active: isActive}">

    v-model

    作用: 获取和设置表单元素的值(双向数据绑定)

    特点: 双向数据绑定

    数据发生变化可以更新到界面

    通过界面可以更改数据

    案例:获取和设置表单元素的值(双向数据绑定)

    <body>
    <div id="app">
        <input type="button" @click="update" value="修改message">
        <input type="text" v-model="message">
        <h2>{{message}}</h2>
    </div>
    </body>
    <script src="./vue.min.js"></script>
    <script>
        var VM = new Vue({
            el:"#app",
            data:{
                message:"拉勾教育大数据训练营"
            },
            methods: {
                update:function(){
                    this.message="拉钩教育";
                }
            }
        })
    </script>

     

    案例 - 表格展示

    功能分析

    渲染表格

    删除商品

    添加商品

    <!DOCTYPE html>
    <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>vue测试</title>
        <script src="../js/vue.js"></script>
    
    </head>
    <body>
    <div id="app">
        <input type="button" @click="update" value="修改message">
        <input type="text" v-model="message">
        <h2>{{message}}</h2>
        <table border="1px" cellspacing="0">
            <tr v-for="(item,index) in items">
    <!--            <td>{{key}}</td>-->
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td><a :id="'id'+index" href="#" @click="delItem(index)">删除</a></td>
            </tr>
            <tr v-if="items==null || items.length===0">
                <td colspan="4">没有品牌数据</td>
            </tr>
        </table>
        <div class="add"> 品牌名称:
            <input type="text" v-model="name">
            <input type="button" value="添加" @click="addItem">
        </div>
    </div>
    </body>
    <script src="./vue.min.js"></script>
    <script>
        var VM = new Vue({
            el:"#app",
            data:{
                message:"拉勾教育大数据训练营",
                // items:[],
                name:"",
                items: [{name: 'LV', date: '2020-4-1' }, {name: 'Lenovo', date: '2020-5-1' }, {name: 'TCL', date: '2020-6-1' } ]
            },
            methods: {
                update:function(){
                    this.message="拉钩教育";
                },
                delItem:function (index) {
                    if(confirm("是否删除")){
                        this.items.splice(index,1);
                    }
    
                },
                addItem:function () {
                    if(this.name){
                        this.items.push({
                            name:this.name,
                            date:new Date()
                        });
                        this.name="";
                    }else{
                        alert("名字不能为空");
                    }
                }
            }
        })
    </script>
    </html>

     

     

    vue生命周期 

    1. 什么是 vue 的生命周期

    vue的生命周期是指从Vue实例创建、运行到销毁期间伴随的这些事件,这些事件对应的函数记录着vue对象的整个生命周期。

    2.Vue 实例的产生过程

    1. beforeCreate 在实例初始化之后,数据观测和事件配置之前被调用。

    2. created 在实例创建完成后被立即调用。

    3. beforeMount 在挂载开始之前被调用。

    4. mounted el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。

    5. beforeUpdate 数据更新时调用,发生在虚拟DOM打补丁之前。

    6. updated 由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。

    7. beforeDestroy 实例销毁之前调用。

    8. destroyed 实例销毁后调用。

    3.Vue 对象的生命周期流程图
     
     

    axios异步访问 

    1.axios 介绍

    VUE中结合网络数据进行应用的开发

    目前十分流行网络请求库,专门用来发送请求,其内部还是ajax,进行封装之后使用更加方便

    axios作用: 在浏览器中可以帮助我们完成 ajax异步请求的发送.

    2 axios 入门
    使用步骤:

    1.导包

    <!-- 官网提供的 axios 在线地址 -->

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    或者去github中下载源码

    https://github.com/axios/axios

    2.请求方式,GETPOST举例

    GET

    格式1: axios.get(地址?key=value&key2=value2).then(function(response){},function(error){});

    格式2: axios.get(地址,{params:{key1:value1...}}).then(function(response){},function(error){});

    POST

    axios.post(地址,{key:value,key2:value2}).then(function(response){},function(error){})

    接口1:随机笑话

    请求地址:https://autumnfish.cn/api/joke/list

    请求方法:get

    请求参数:num(笑话条数,数字)

    响应内容:随机笑话

                showSmile:function(){
                    var t=this;
                    axios.get("https://autumnfish.cn/api/joke/list",{params:{num:1}}).then(
                        function (response) {
                            console.log(response);
                            t.smiles=response.data.jokes;
                        }
                    )
                },

    接口2:用户注册

    请求地址:https://autumnfish.cn/api/user/reg

    请求方法:post

    请求参数:username(用户名,字符串)

    响应内容:注册成功或失败

                sigin:function(){
                  var t=this;
                  axios.post("https://autumnfish.cn/api/user/reg",{username:"bigload3333"}).then(function (response) {
                    console.log(response);
                    alert(response.data);
                  })
                },
    3.axios 总结

    1. axios 必须导包才能使用

    2. 使用get或者post方法,就可以发送请求

    3. then方法中的回调函数,会在请求成功或者请求失败的时候触发

    4. 通过回调函数的形参可以获取响应的内容,或者错误信息

    4. 其他请求类型

    axios.request(confifig)

    axios.get(url[, confifig])

    axios.delete(url[, confifig])

    axios.head(url[, confifig])

    axios.post(url[, data[, confifig]])

    axios.put(url[, data[, confifig]])

    axios.patch(url[, data[, confifig]])

    vue综合练习 

    天气查询案例

    1 需求分析

    输入指定城市点击回车或点击查询,展示从今天开始的四天的天气情况

    2 接口文档

    请求地址:http://wthrcdn.etouch.cn/weather_mini

    请求方法:get

    请求参数:city (要查询的城市名称)

    响应内容:天气信息

    3 案例演示

        <div>
            <input type="text" v-model="city" @keyup.enter="selectWeather" placeholder="请输入想查询的城市">
            <table border="1px" cellspacing="0">
                <tr v-for="weather in weathers">
                    <td>{{weather.date}}</td>
                    <td>{{weather.fengli}}</td>
                    <td>{{weather.fengxiang}}</td>
                    <td>{{weather.high}}</td>
                    <td>{{weather.low}}</td>
                    <td>{{weather.type}}</td>
                </tr>
            </table>
        </div>
    <script>
        var VM = new Vue({
            el:"#app",
            data:{
               
                city:"",
                weathers:[],
                
            },
            methods: {
                selectWeather:function(){
                  var t=this;
                  axios.get("http://wthrcdn.etouch.cn/weather_mini",{params: {city:t.city}}).then(
                      function (response) {
                        console.log(response);
                        t.weathers=response.data.data.forecast;
                      }
                  )
                }
            }
        })
    </script>

    4 案例总结

    1. 应用的逻辑代码,建议与页面进行分离,使用单独的JS编写

    2. axios回调函数中的 this的指向改变,无法正常使用, 需要另外保存一份

    3. 服务器返回的数据比较的复杂时,获取数据时要注意层级结构

    展开全文
  • 学习总结

    2021-01-05 18:01:55
    文章内容输出来源:拉勾教育前端训练营 。文章原文链接 前言 ​ 我是拉勾前端训练营2期的学员,入学时间是2020-06-11,到现在已经过去了半年多了,目前的学习进度在3-6 的Vue项目的实战开发。现在是2021年初,停下...
  • 文章内容输出来源:拉勾教育大数据开发高薪训练营 本篇文章是java学习课程中的一部分笔记。 本博文主要是记录一些基础的知识点,通过实操更容易理解 这章主要讲的是JAVA Web后端基础 一 Web知识概述 1 软件架构 ...
  • 【文章内容来自拉勾教育前端高薪训练营课程】
  • 【文章内容来自拉勾教育前端高薪训练营课程】
  • 【文章内容来自拉勾教育前端高薪训练营课程】
  • 【文章内容来自拉勾教育前端高薪训练营课程】
  • 【文章内容来自拉勾教育前端高薪训练营课程】
  • 文章内容输出来源:拉勾教育前端高薪训练营
  • 前端笔记

    2020-08-31 15:48:21
    文章内容输出来源:拉勾教育大数据训练营 记录一下前端的笔记,本篇来自于预科第二阶段第二模块 这里是大概的思维导图,笔记和相关代码都写在备注里面,完整思维导图链接在此:...
  • 前端知识点——Gulp

    2021-06-11 00:05:16
    笔记内容大多出自于拉勾教育前端高薪训练营的教程,因此也许会和其他文章雷同较多,请担待。 认识gulp的任务 // gulp入口文件 exports.foo = done => { // yarn gulp foo console.log('gulp working foo') ...
  • 文章内容输出来源:拉勾教育前端高薪训练营 前端工程化 基本介绍 定义 前端工程化是指遵循一定的标准和规范,通过工具去提高效率,降低成本的一种手段。 面临的问题 1、想要使用 ES6 + 新特性,但是兼容有问题 2...
  • 笔记内容大多出自于拉勾教育前端高薪训练营的教程,因此也许会和其他文章雷同较多,请担待。 兼容 tsconfig.json 将target设置为需要兼容到的版本,然后在lib中以数组方式添加从兼容版本到目前为止的所有版本,...
  • 笔记内容大多出自于拉勾教育前端高薪训练营的教程,因此也许会和其他文章雷同较多,请担待。 Yeoman $ npm i yo -g / $ yarn global add yo $ npm i generator-node -g / $ yarn global add generator-node // ...
  • 笔记内容大多出自于拉勾教育前端高薪训练营的教程,因此也许会和其他文章雷同较多,请担待。 Promise核心逻辑实现 Promise就是一个类,在执行这个类的时候需要传递一个执行器出去,执行器会立即执行 Promise有三...
  • 笔记内容大多出自于拉勾教育前端高薪训练营的教程,因此也许会和其他文章雷同较多,请担待。 hash <------> history hash 兼容性好,但是链接有# history 链接美观,没有多余的符号等,但只能 IE10 以后...
  • 前端控制器:DispatcherServlet 用户请求到达前端控制器,它就相当于 MVC 模式中的 C,DispatcherServlet 是整个流程控制的中心,由它调用其它组件处理用户的请求,DispatcherServlet 的存在降低了组件之间的耦合性...
  • 笔记内容大多出自于拉勾教育前端高薪训练营的教程,因此也许会和其他文章雷同较多,请担待。 JS内存管理 内存 -> 由可读写单元组成,表示一片可操作空间 管理 -> 人为地去操作一片空间的申请、使用、释放 ...
  • 笔记内容大多出自于拉勾教育前端高薪训练营的教程,因此也许会和其他文章雷同较多,请担待。 ES Module 基本特性 使用type="module"就可以使用ES Module的标准执行其中的JS代码了 自动采用严格模式,忽略use ...
  • 前端知识点——异步

    2021-06-10 23:29:52
    笔记内容大多出自于拉勾教育前端高薪训练营的教程,因此也许会和其他文章雷同较多,请担待。 EventLoop js代码被读取后会进行一次匿名函数的执行,执行的就是js的本身 首先一行一行执行完代码中的同步操作,如果...
  • 前端 Bootstrap详解

    2021-03-08 15:33:13
    文章内容输出来源:拉勾教育Java就业训练营 bootstrap 什么是Bootstrap? Bootstrap来自 Twitter,是目前最受欢迎的响应式前端框架。 Bootstrap是基于 HTML、CSS、JavaScript的,它简洁灵活,使得 Web 开发更加快捷...
  • 文章内容输出来源 拉勾教育前端高薪训练营 一、Vue模版编译入口 二、Vue首次渲染过程 三、Vue模版编译过程 四、Vue响应式处理过程 五、Vue整体过程分析
  • 前端学习总结

    2020-09-27 19:23:13
    2020.5.13 加入拉勾教育前端高薪 1 期训练营,到今天已经是有了4个月多月的时间,相比较与以前,自己变得更加忙碌了,因为拉勾教育,基本每天下班都在学习,看视频,做笔记~~~,因为目前完成了一个大模块的学习...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 523
精华内容 209
关键字:

拉勾教育前端训练营