JavaScript
文章平均质量分 65
chengqiuming
这个作者很懒,什么都没留下…
展开
-
JavaScript 实现自定义 toast
JavaScript原创 2022-10-19 15:37:28 · 689 阅读 · 0 评论 -
JQuery 实现自定义 toast
toast 自定义原创 2022-08-20 14:43:20 · 838 阅读 · 0 评论 -
js 对 span 的读写操作及修改 span 字体颜色
一 点睛1 js 给 span 赋值document.getElementById("span_id").innerText =someVal;2 js设置 span 字体颜色:document.getElementById("span_id").style.color="green";3 js 获取 span 的值:document.getElementById('span_id').innerText;二 实战1 span 定义的位置<labal.原创 2022-01-12 20:24:34 · 5077 阅读 · 0 评论 -
高德地图调用
一数据库关键数据VISIT_LOCATION:拜访位置VISIT_LOCATION_LON:拜访位置坐标经度VISIT_LOCATION_LAT:拜访位置坐标纬度二前端关键代码{ field: 'id', title: '操作', align: 'center', valign: 'middle', clickToSelect: false, formatter: function (value, row) { var html = '<d..原创 2021-11-19 19:52:38 · 1602 阅读 · 0 评论 -
input 配合 select 控件实现搜索功能
一需求select 控件实现从30万家医院中选择指定医院。如果单独使用 select 控件,会产生性能问题,会使得前端页面选择卡顿,服务器压力增加,因为需要查出30万条数据,因此需要其他控件配合使用。方案一采用省、市、区级联选择的方式选择出指定医院,采用该方案的缺点是:如果不知道该医院所在的省市区,将无从选择。方案二使用一个 input 输入框,用来输入关键字,通过模糊查询,筛选出少量医院,从而完成医院选择。二核心代码1HTML部分<div class="fo...原创 2021-11-02 21:48:25 · 2272 阅读 · 0 评论 -
阿里云视频播放器
一 视频播放器参考文档:https://help.aliyun.com/document_detail/125570.html?spm=a2c4g.11186623.6.1083.1c53448blUNuv51 视频播放器介绍阿里云播放器SDK(ApsaraVideo Player SDK)是阿里视频服务的重要一环,除了支持点播和直播的基础播放功能外,深度融合视频云业务,如支持视频的加密播放、安全下载、清晰度切换、直播答题等业务场景,为用户提供简单、快速、安全、稳定的视频播放服务。2 集成视原创 2020-12-13 15:38:57 · 6125 阅读 · 1 评论 -
Webpack介绍
一 什么是WebpackWebpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。简单理解:它就是一个前端打包和压缩工具。二 Webpack安装1 全局安装npm install -g webpack webpack-cli或npm install -g webpacknpm inst原创 2020-11-22 15:47:39 · 144 阅读 · 0 评论 -
JS模块化
一 模块化简介1 模块化产生的背景随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂。Javascript模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。2 模块化规范 CommonJS模块化规范(基于ES6语法之前) ES6模块化规范(使用ES6语法) 二 ES6模块化规范创建 modularization_pro文件夹1 导出模块创建 src/tea原创 2020-11-22 15:07:27 · 328 阅读 · 1 评论 -
初识 ECMAScript 6
一 ECMAScript 61 什么是 ECMAScript 6ECMAScript 6.0(简称 ES6)是 JavaScript 语言的下一代标准, 2015 年 6 月正式发布。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。2 ECMAScript 和 JavaScript 的关系一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?要讲清楚这个问题,需要回顾历史。1996 年 11 月,JavaScri原创 2020-11-21 14:48:53 · 179 阅读 · 0 评论 -
初识Node.js
一 Node.js的概念1 JavaScript引擎浏览器的内核包括两部分核心: DOM渲染引擎 JavaScript解析引擎:Chrome浏览器内置V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。 2 什么是Node.js脱离浏览器环境也可以运行JavaScript,只要有JavaScript引擎就可以。Node.js是一个基于Chrome V8引擎的JavaScript运行环境:即Node.js内置了Chrome的V8 引擎,可以在Node.js环原创 2020-11-21 13:44:43 · 184 阅读 · 0 评论 -
JS文件包含
一需求common.js需要包含 const.js, commons.js和const.js在 js 目录下。二const.js文件内容var baseUrl = '/api/';// 本地环境var uploadBaseUrl = 'http://192.168.0.211:8080/api/';// 测试环境//var uploadBaseUrl = 'http://192.168.0.212:8080/api/';// 预发布环境//var upload...原创 2020-10-27 18:56:00 · 1327 阅读 · 0 评论 -
ES6的模块化
一点睛模块化就是把代码进行拆分,方便重复利用。类似Java中的导包,要使用一个包,必须先导包。而JS中没有包的概念,换来的是模块。模块功能主要由两个命令构成:export和importexport命令:用于规定模块的对外接口。import命令:用于导入其他模块提供的功能。一些注意点: 模块导入导出各种类型的变量,如字符串,数值,函数,类。 导出的函数声明与类声明必须要有名称(export default 命令另外考虑)。 不仅能导出声明还能导出引用...原创 2020-10-19 08:39:14 · 150 阅读 · 0 评论 -
ES6的promise实战
一点睛当发送异步请求时,如果我们下一个异步请求需要用到上一个异步请求的结果,这个时候就会发生连续嵌套,非常混乱,而通过promise 对象和 then 函数可以解决这一问题二数据准备1user.json{ "id": 1, "name": "zhangsan", "password": "123456"}2 user_corse_1.json{ "id": 10, "name": "English"}3corse_score...原创 2020-10-19 08:37:10 · 267 阅读 · 0 评论 -
ES6中的map和reduce
一实战<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <.原创 2020-10-18 15:01:44 · 412 阅读 · 1 评论 -
ES6对象优化
一点睛扩展运算符( spread )是三个点(...)。它将一个数组或对象转为用逗号分隔的参数序列。二实战<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu..原创 2020-10-18 13:02:02 · 243 阅读 · 0 评论 -
ES6的函数优化
一实战<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <.原创 2020-10-18 12:32:01 · 231 阅读 · 0 评论 -
ES6字符串相关
一实战<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <title>Document</title></head><body>.原创 2020-10-18 12:03:04 · 145 阅读 · 0 评论 -
ES6的解构表达式
一代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <title>Document</title></head><body>.原创 2020-10-18 11:54:11 · 235 阅读 · 0 评论 -
ES6的let和const
一前后端技术栈对比二简介ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。ECMAScript是浏览器脚本语言的规范,而各种我们熟知的js语言,如JavaScript则是规范的具体实现。三小技巧...原创 2020-10-18 11:21:41 · 206 阅读 · 0 评论 -
JS处理函数将对象作为参数传递
目录一点睛二代码三测试四 参考一点睛JSON.parse() 方法用于将一个 JSON 字符串转换为对象。JSON.stringify() 方法用于将 JavaScript 值( 通常为对象或数组)转换为 JSON 字符串。二代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></ti...原创 2020-10-04 23:04:54 · 2369 阅读 · 0 评论 -
JS严格检查模式
目录一IDEA开启ES6二代码三效果四总结一IDEA开启ES6二代码'use strict'// ES6局部变量,合法let str1 = "我是合法的";// 非ES6局部变量,合法console.log("我是合法的")var str = "我也是合法的";console.log("我也是合法的");// 全局变量,不合法,会被严格检查模式检查出来i = 6;console.log("严格检查模式可以检查全局变量")三效果全局变量...原创 2020-07-12 21:38:46 · 575 阅读 · 0 评论 -
JS断点调试方法
一html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS断点调试法</title> <!--外部js--> <script src="resource/js/jsdemo1.js"></script></head><body><.原创 2020-07-12 20:21:25 · 889 阅读 · 0 评论 -
jQuery的parent > child选择器
一 介绍parent > child选择器中的parent代表父元素,child代表子元素,用于在给定的父元素下匹配所有的子元素。使用该选择器只能选择父元素的直接子元素。parent > child选择器的使用方法如下:$("parent > child");parent是指任何有效的选择器。child是用以匹配元素的选择器,并且它是匹配元素的选择器,并且它是parent元素的原创 2017-04-12 10:51:54 · 606 阅读 · 0 评论 -
JQuery的prev + next选择器
一 介绍prev + next选择器用于匹配所有紧接在prev元素后的next元素。其中,prev和next是两个相同级别的元素。prev + next选择器的使用方法如下: $("prev + next");prev是指任何有效的选择器。next是一个有效选择器并紧接着prev选择器。例如,要匹配标记后的标记,可以使用下面的jQuery代码:$("div + img"原创 2017-04-12 10:52:03 · 3754 阅读 · 0 评论 -
jQuery的prev~siblings选择器
一 介绍prev~siblings选择器用于匹配prev元素之后的所有siblings元素。其中,prev和siblings是两个相同辈元素。prev~siblings选择器的使用方法如下:$("prev~siblings");prev是指任何有效的选择器。siblings是一个有效选择器并紧接着prev选择器。例如,要匹配div元素的同辈元素ul,可以使用下面的jQuer原创 2017-04-12 10:52:12 · 1600 阅读 · 0 评论 -
隔行换色并且鼠标指向行变色的表格
一 应用对于一些清单型数据,通常是利用表格展示到页面中。如果数据比较多,很容易看串行。这时,可以为表格添加隔行换色并且鼠标指向行变色功能。 二 代码table{ border:0;border-collapse:collapse;} /*设置表格整体样式*/td{font:normal 12px/17px Arial;padding:2原创 2017-04-12 10:52:20 · 1954 阅读 · 0 评论 -
jquery简单过滤器
一 介绍简单过滤器是指以冒号开头,通常用于实现简单过滤效果的过滤器。例如,匹配找到的第一个元素等。jQuery提供的过滤器下表所示。过滤器说明示例:first匹配找到的第一个元素,它是与选择器结合使用的$("tr:first") //匹配表格的第一行:last匹配找到的最后一个元素,它是与选择器结合使用的$("tr:las原创 2017-04-12 10:52:31 · 762 阅读 · 0 评论 -
jquery内容过滤器
一 介绍内容过滤器就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选。内容过滤器共包括:contains(text)、:empty、:has(selector)和:parent4种,如下表所示。过滤器说明示例contains(text)匹配包含给定文本的元素$("li:contains('DOM')") //匹配含有“DOM”文本内原创 2017-04-12 10:52:39 · 2597 阅读 · 1 评论 -
jquery可见性过滤器
一 介绍元素的可见状态有两种,分别是隐藏状态和显示状态。可见性过滤器就是利用元素的可见状态匹配元素的。因此,可见性过滤器也有两种,一种是匹配所有可见元素的:visible过滤器,另一种是匹配所有不可见元素的:hidden过滤器。在应用:hidden过滤器时,display属性是none以及input元素的type属性为hidden的元素都会被匹配到。二 应用获取页面上隐藏原创 2017-04-12 10:52:51 · 2316 阅读 · 0 评论 -
jquery表单对象的属性过滤器
一 介绍表单对象的属性过滤器通过表单元素的状态属性(例如选中、不可用等状态)匹配元素,包括:checked过滤器、:disabled过滤器、:enabled过滤器和:selected过滤器4种。过滤器说明示例:checked匹配所有选中的被选中元素$("input:checked") //匹配checked属性为checked的input原创 2017-04-12 10:53:00 · 1325 阅读 · 0 评论 -
jquery表单选择器
一 介绍表单选择器是匹配经常在表单内出现的元素。但是匹配的元素不一定在表单中。jQuery提供的表单选择器如下表所示。选择器说明示例:input匹配所有的input元素$(":input") //匹配所有的input元素$("form :input") //匹配标记中的所有input元素,需要注意,在form和:之间有一个空原创 2017-04-12 10:53:09 · 474 阅读 · 0 评论 -
jQuery对元素内容操作
jQuery提供了对元素的内容和值进行操作的方法,其中,元素的值是元素的一种属性,大部分元素的值都对应value属性。下面我们再来对元素的内容进行介绍。元素的内容是指定义元素的起始标记和结束标记中间的内容,又可分为文本内容和HTML内容。那么什么是元素的文本内容和HTML内容?通过下面这段来说明。 测试内容在这段代码中,div元素的文本内容就是“测试内容”原创 2017-04-12 10:53:17 · 1585 阅读 · 0 评论 -
jquery的元素的文本内容与HTML内容操作的区别
一 应用获取和设置元素的文本内容与HTML内容二 代码应用text()方法设置的内容 当前时间:2011-07-06 星期三 13:20:10应用html()方法设置的内容 当前时间:2011-07-06 星期三 13:20:10 $(document).ready(function(){ $("#div1").原创 2017-04-12 10:53:25 · 1028 阅读 · 0 评论 -
jQuery对元素值操作
一 jQuery提供了3种对元素值操作的方法方法说明示例var()用于获取第一个匹配元素的当前值,返回值可能是一个字符串,也可能是一个数组。例如当select元素有两个选中值时,返回结果就是一个数组$("#username").val(); //获取id为username的元素的值var(val)用于设置所有匹配元素的值$原创 2017-04-12 10:53:33 · 638 阅读 · 0 评论 -
jQuery页面加载响应事件
$(document).ready()方法是事件模块中最重要的一个函数,它极大地提高了Web响应速度。$(document)是获取整个文档对象,从这个方法名称来理解,就是获取文档就绪的时候。方法的书写格式为: $(document).ready(function() { //在这里写代码});可以简写成: $().ready(funct原创 2017-04-12 10:53:41 · 3536 阅读 · 2 评论 -
jQuery创建节点
一 介绍创建元素节点包括两个步骤,一是创建新元素,二是将新元素插入到文档中(即父元素中)。二 应用要在文档的body元素中创建一个新的段落节点可以使用下面的代码:三 代码 $(document).ready(function(){ //方法一 var $p=$(""); $p.html("方法一添加的内容"); $("body").append($p原创 2017-04-12 10:53:52 · 1416 阅读 · 0 评论 -
jQuery中的事件
只有页面加载显然是不够的,程序在其他的时候也需要完成某个任务。比如鼠标单击(onclick)事件,敲击键盘(onkeypress)事件以及失去焦点(onblur)事件等。在不同的浏览器中事件名称是不同的,例如在IE中的事件名称大部分都含有on,如onkeypress()事件,但是在火狐浏览器却没有这个事件名称。jQuery帮助我们统一了所有事件的名称。jQuery中的事件如下表所示。原创 2017-04-12 10:54:00 · 357 阅读 · 0 评论 -
jQuery中的事件绑定
在页面加载完毕时,程序可以通过为元素绑定事件完成相应的操作。在jQuery中,事件绑定通常可以分为为元素绑定事件、移除绑定和绑定一次性事件处理3种情况,下面分别进行介绍。一 为元素绑定事件在jQuery中,为元素绑定事件可以使用bind()方法,该方法的语法结构如下:bind(type,[data],fn)type:事件类型。data:可选参数,作为event.data属性原创 2017-04-12 10:54:08 · 467 阅读 · 0 评论 -
AJAX 简介
AJAX 是什么AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。AJAX = Asynchronous JavaScript and XML。AJAX 是一种用于创建快速动态网页的技术。AJAX 通过在后台与服务器进行少量数据交换,使网页实现异步更新。这意味着可以在不重载整个页面的情况下,对网页的某些部分进行更新。传统的网页(不使用 AJAX)如果需要更原创 2017-04-12 10:49:02 · 291 阅读 · 0 评论 -
Ajax技术特点
一 优点与传统的Web应用不同,Ajax在用户与服务器之间引入一个中间媒介(Ajax引擎),从而消除了网络交互过程中的处理——等待——处理——等待的缺点,从而大大改善了网站的视觉效果。下面我们就来看看使用Ajax的优点有哪些。(1)可以把一部分以前由服务器负担的工作转移到客户端,利用客户端闲置的资源进行处理,减轻服务器和带宽的负担,节约空间和成本。(2)无刷新更新页面,从而使用户不原创 2017-04-12 10:49:11 · 3681 阅读 · 0 评论