JS
明天自己会更好
这个作者很懒,什么都没留下…
展开
-
Ajax创建步骤内含兼容
Ajax创建步骤内含兼容代码代码//1.创建XMLHttpRequest 核心对象function getXhr(){ var xhr=null; if(window.XMLHttpRequest){ xhr=new XMLHttpRequest(); }else{ xhr=new ActiveXObject("Microsoft.XMLHttp");//IE6及以下 } return xhr; }var xhr=getXhr();//2.建立连接ajax.open('G原创 2020-12-02 09:36:32 · 160 阅读 · 0 评论 -
js小案例 --数组转换对象并计数
数组转换对象并计数上代码效果上代码<!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&g原创 2020-11-16 23:16:32 · 203 阅读 · 0 评论 -
JavaScript find和findIndex的区别
JavaScript find和findIndex的区别1对Array数组操作2对复杂数组(包含对象的)操作总结1对Array数组操作find()方法const arr=[1,2,4,8,12];var va1=arr.find(value=>value>8);console.log(va1); //12arr = [1, 2, 4, 8, 12]var v2 = arr.find((value, index, arr) => { return index ==原创 2020-10-16 09:51:57 · 1083 阅读 · 0 评论 -
js 正则总结
js正则总结1正则的创建2正则的方法3字符串方法4元字符5量词:6修饰符7 数字字符验证1正则的创建var reg=new RegExp('要匹配的元素','修饰符')var reg=//;2正则的方法test() //input框里的值通过test方法去匹配一个正则,匹配成功返回true否则返回false。exec() //方法用于检索字符串中的正则表达式的匹配。3字符串方法1)search():搜索,返回第一次搜索到的元素的下标,找不到返回-12)match():匹配,返回匹配成原创 2020-10-11 19:50:34 · 241 阅读 · 0 评论 -
原生 js小案例
原生 js小案例1效果图2html3js4css1效果图点击12个月份中的任意一个,底部就会显示对应月份2html<div id="dv1"> <div id="dv2"></div> </div>3js<script type="text/javascript"> var mydv1 = document.getElementById("dv1"); var xd = document.getElements原创 2020-10-11 19:05:48 · 836 阅读 · 1 评论 -
JavaScript三种三个系统对话框
JavaScript三种三个系统对话框1alert()2confirm()3prompt()1alert()用于显示带有一条指定消息和一个确定按钮的警告框2confirm()用于显示一个带有指定消息和确定及取消按钮的对话框。语法:confirm(message)如果用户点击确定按钮,则 confirm() 返回 true。如果点击取消按钮,则 confirm() 返回 false。3prompt()用于显示可提示用户进行输入的对话框。语法:prompt(text,defaultText)原创 2020-10-05 23:38:36 · 435 阅读 · 0 评论 -
JavaScript BOM
JavaScript BOM1浏览器对象模型 (BOM)2Window 对象3Window 函数4window 时间等待与间隔函数4Location 对象5Navigator 对象6Screen 对象7History 对象8DOM对象1浏览器对象模型 (BOM)浏览器对象模型(Browser Object Model)BOM提供了独立于内容而与浏览器窗口进行交互的对象。由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是windowBOM由一系列相关的对象构成,并且每个对象都提供了很多方法原创 2020-10-05 23:32:46 · 161 阅读 · 0 评论 -
原生 js 九九乘法表
原生 js 九九乘法表1效果图2html1效果图2html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> var str = ''; for(var i = 1; i <原创 2020-10-05 23:04:23 · 292 阅读 · 0 评论 -
原生js 百度搜索小案例
原生js 百度搜索小案例1效果图2css3html4js1效果图2css <style> #box { width: 450px; margin: 200px auto; } #txt { width: 350px; } #pop { width: 350px; border: 1px solid red; } #pop ul { margin: 10px; pa原创 2020-10-05 00:37:37 · 394 阅读 · 1 评论 -
JavaScript中DOM
JavaScript中DOM1什么是DOM2DOM 节点3DOM 节点关系4获得body名5四者区别1什么是DOM文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。2DOM 节点在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。HTML 文档中的所有内容都是节点:整个文档是一个文档节点 docu原创 2020-10-04 23:59:49 · 169 阅读 · 0 评论 -
原生 js 三级联动小例子
原生 js 三级联动小例子1效果图2html3js4总结1效果图2html<body> <div id="category"></div></body>3js<script> /*使用 HTML DOM 的方式实现联动菜单*/ var categories=[ {"id":10,"name":'男装',"children":[ {"id":101,"name":'正装'}, {"id":10原创 2020-10-04 17:54:30 · 263 阅读 · 0 评论 -
原生 js 轮播图小案例内含详细注释
原生 js 轮播图小案例1效果图2html3js4css5结构目录1效果图2html<div class="all" id='box'> <div class="screen"> <!--相框--> <ul> <li><img src="images/1.jpg" width="500" height="200" /></li> <li><img src=原创 2020-10-04 17:45:08 · 258 阅读 · 0 评论 -
原生 js 类手风琴小例子
原生 js 类手风琴小例子1效果图2html3css4js5总结1效果图2html <body> <div class="panel" id="panel"> <h4 class="panel-title" id="panel-title">1 《抉择》</h4> <div class="collapse" id="One"> <p></p>原创 2020-10-04 17:29:15 · 229 阅读 · 0 评论 -
原生js 小球随键盘移动事件小案例
原生js 小球随键盘移动事件小案例1效果图2html和js3css4总结1效果图2html和js<body> <div id="ball"></div> <script> // 获取小球 var ball = document.getElementById('ball'); // 设置小球移动的步径 var step = 2; // 设置定时器标志 var run = false; // runing 计原创 2020-10-04 17:16:22 · 519 阅读 · 1 评论 -
原生js方大镜 小例子
原生js方大镜小例子1效果图2html3css4js5结构目录6图片7总结1效果图在图片区域选中 左侧出现放大区域2html<body> <div id="min_tu"> <img src="imgs/3.jpg" /> <div id="fdj"></div> </div> <div id="list"> <ul> <li><img src=原创 2020-10-04 17:05:41 · 153 阅读 · 0 评论 -
JavaScript数组
JavaScript数组1什么是JavaScript数组2调用构造函数Array()是创建数组的另外一种方法。可以用三种方式调用构造函数。3数组元素的读和写3数组长度4检测5数组元素的添加和删除6push()7pop()8join()9reverse()10sort()11concat()12slice()13 splice()14 unshift()和shift()1什么是JavaScript数组数组是值的有序集合javascript数组是无类型的;数组元素可以是任意类型,并且同一个数组的不同元素也原创 2020-10-04 00:11:30 · 462 阅读 · 0 评论 -
JavaScript中String
JavaScriptString1charAt()2charCodeAt()3fromCharCode()4replace()5substring()6substr()7split()8concat()9slice()10indexOf()11lastIndexOf()12toLowerCase()13toUpperCase()1charAt()charAt() 方法可返回指定位置的字符str.charAt(index)index必需。表示字符串中某个位置的数字,即字符在字符串中的下标注释:字符原创 2020-10-03 23:55:04 · 360 阅读 · 0 评论 -
JavaScript函数
JavaScript函数1什么时JavaScript函数2定义函数方式3函数调用4参数的分类5函数变量作用域1什么时JavaScript函数函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。简而言之:什么是函数?函数是一组可以随时随地运行的语句。函数是ECMAScript的核心作用:使程序变得更简短而清晰有利于程序维护可以提高程序开发的效率提高了代码的重用性(复用性)2定义函数方式1函数声明function add( x,y ){ return x+y;原创 2020-10-03 23:42:45 · 178 阅读 · 0 评论 -
JavaScript语句
JavaScript语句1语句的概念2function3条件语句4if else5else if6switch7for8while9do while1语句的概念表达式在javascript中是短语,那么语句就是javascript整句或命令。正如英文是用点号作结尾来分隔语句,javascript语句是以分号结束。javascript程序无非就是一系列可执行语句的集合。分号 ;分号用于分隔 JavaScript 语句。通常我们在每条可执行的语句结尾添加分号。使用分号的另一用处是在一行中编写多条原创 2020-10-03 23:31:37 · 269 阅读 · 0 评论 -
JavaScript表达式与运算符
JavaScript表达式与运算符1什么叫JavaScript表达式2JavaScript运算符与表达式3运算符的优先级4运算顺序图5比较运算符6赋值运算符7逻辑运算符(用于测定变量或值之间的逻辑)8其他运算符9void运算符的应用场合10逗号运算符(,)1什么叫JavaScript表达式将同类型的数据(如常量、变量、函数等),用运算符号按一定的规则连接起来的、有意义的式子称为表达式2JavaScript运算符与表达式1.运算符:算术运算符、赋值运算符、自减、自增表达式、逗号运算符、关系运算符、逻辑原创 2020-10-03 23:16:53 · 446 阅读 · 0 评论 -
js的数据类型
js的数据类型1什么是JavaScript变量2JavaScript变量起名注意事项3数据类型4简单数据类型与复杂数据类型的分类1什么是JavaScript变量答:变量:值可以改变的量称为变量;变量占据一段内存,通过变量名字可以调用内存中的信息。JavaScript中的变量没有类型,即弱类型语言。var a=1;var b='a';var代表声明变量(声明就是创建的意思)。var是variable的缩写a、b都是变量名(可以任意取名)必须使用字母或者下划线开始1,'a’都是变量值,1是数字原创 2020-10-03 22:46:31 · 268 阅读 · 0 评论 -
如何在HTML中使用JavaScript
如何在HTML中使用JavaScript1行内2内部嵌入3外部嵌入:1行内 <a href="https://www.baidu.com" onclick="alert('您将要跳转到百度')">百度</a>2内部嵌入script元素: 向HTML页面中插入javascript的主要方法。charset:可选。表示通过src属性指定的代码的字符集defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。相对于告诉浏览器立即下载,但延迟执行(只对外部脚本文件原创 2020-10-02 23:59:21 · 472 阅读 · 0 评论 -
js初级入门
js初级入门1Javascript与java相同吗?2Javascript很难学吗?3Javascript能做什么?4什么是javascript?5JavaScript 是什么6Javascript的组成7JavaScript语言的特点8JavaScript 的组成9学习javascript需要啥?1Javascript与java相同吗?答:javascript与java没有任何关系,他们本身就是俩种语言取成差不多的名字,主要是由于商业上的原因(完全是想要抱大腿!)。javascript是一种客户端脚原创 2020-10-02 23:49:15 · 198 阅读 · 0 评论 -
js小例子 地域列表
js小例子 地域列表1图片效果2html3js4项目结构1图片效果可以根据节点来回移动节点2html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U原创 2020-10-02 23:40:06 · 295 阅读 · 0 评论 -
js简易倒计时小案例
js简易倒计时小案例1效果图代码1效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>原创 2020-10-01 23:56:00 · 177 阅读 · 0 评论 -
js 内置对象 常用数学对象Math
js 内置对象 数学对象Math1.abs–求绝对值 参数为自然数用给函数求绝对值用 var a = -5; console.log('1.abs-- -5绝对值' + Math.abs(a)); //52.ceil–向上取值ceil 参数为小数,给函数求向上最近的整数var b = 3.14;console.log('2.ceil--3.14向上取值' + Math.ceil(b)); //43.floor–向下取值 参数为小数,给函数求向下最近的整数var b = 3.14;原创 2020-09-24 08:13:20 · 200 阅读 · 0 评论