- 博客(38)
- 收藏
- 关注
RSS订阅转载 javaScript中的原型、原型链
1.对象原型对象都会有一个属性 proto 指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 proto 原型的存在。__proto__对象原型和原型对象 prototype 是等价的__proto__对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象 prototype2.constructor构造函数对象原型
2020-08-03 17:00:05
511
原创 javascript中的对象和类
1.面向对象和面向过程的区别面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。*面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。*面向过程面向对象优点性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统 更加灵活、更加易于维护缺点不易维护、不易复用、不易扩展性能比面向过程
2020-08-03 16:52:25
219
原创 es6中的模板字符串
<script> let like = `张三`; let name = `我的名字叫${like}`; console.log(name); const fn = () => { return '张三'; }; let name = `我的名字叫${fn()}`; console.log(name); </script>...
2020-08-03 16:31:03
308
原创 es6中的数组方法
1.find方法 <script> let arr = [ {id:1, age:18}, { id:2, age:19 } ] let dob = arr.find(item => item.id == 2); console.log(dob); <
2020-08-03 16:29:14
284
原创 es6语法中的let和const
11.let是什么？特点是什么？答：let用来在es6语法中声明变量，特点为，let声明的变量只在当前块中有效，声明的变量为“块元素”，也就是{}中有效。2.const是什么？特点是什么？答：const和let一样，也是只在只在当前块中有效，一般用来声明常量，可以改声明变量的值，但是不能修改它的类型。3....
2020-08-03 16:15:21
186
原创 jQuery-----canvas验证
canvas验证功能：一个简单的验证码验证，点击图片会重新随机出另一个验证码,点击提交可判断是否正确代码如下<div class="code"> <input type="text" value="" placeholder="请输入验证码（不区分大小写）" class="input-val" /> <canvas id="canvas" width="100" height="43"></canvas> <button
2020-08-03 16:04:56
299
原创 jQuery---塔罗时钟
效果图为布局和书写样式<div class="box"> <div class="seconds"></div> <div class="minute"></div> <div class="hour"></div> <p class="now"> <span class="centerTime">2020年07月22日</span>
2020-08-03 15:49:10
246
原创 用jQuery实现9宫格抽奖
1.布局<div class="box"> <div class="small s1"></div> <div class="small s2"></div> <div class="small s3"></div> <div class="small s4"></div> <div class="small s5"></div>
2020-08-03 15:44:05
1123
1
原创 jquery的一些小案例
tab栏切换进行一个简单的布局<div class="box"> <div class="box1"> <div class="child r1"></div> </div> <div class="box2"> <div class="child r2"></div> </div> <div class="box3"&
2020-08-03 15:39:36
174
原创 关于jquery的文档处理问题
1.内部插入var ele=$("<span>span</span>"); console.log(ele); $("#box").append("<span>123</span>"); $("#box").append(ele); var ele1=$("<span>span1</span>"); console.log(ele1); ele1.appendTo($("#box"));
2020-07-31 17:11:21
120
原创 jquery中的遍历、获取、合并、数组方法
1.对元素进行遍历 $("ul>li").each(function (index) { //index 元素索引 console.log($(this), index); });2.通过索引获取元素 console.log($("ul>li").get(1)); //eq //index() 方法不加参数 获取当前元素的索引 集合默认获取第一个 console.log($("ul>li").eq(1).index());
2020-07-31 17:03:12
421
原创 jQuery的事件
jquery中的事件1. 绑定事件例如给box绑定一个点击事件$(".box").on("click",function (){ console.log("on click"); }); $(".box").on("click",1,function (e){ console.log("on click", e.data); });注意：jquery中可以实现连点，就是同时给元素添加多个事件```javascript $(".box
2020-07-31 16:44:36
133
原创 jquery中筛选属性的操作
1.布局和书写一个简单的样式<ul> <li>1</li> <li>2</li> <li class="li3">3</li> <p>31</p> <p>32</p> <p>33</p> <li class="li4">4</li> <li><
2020-07-15 22:10:18
517
原创 jquery中css的操作
1.布局<div id="box"></div><div class="list"> <div class="block"></div></div>2.书写样式<style> body{ position: relative; } .list{ width: 200px; height:
2020-07-15 22:06:07
159
原创 jQuery的属性操作
jquery 里面可以进行一堆操作进行一个简单的布局和样式书写 <style> div{ border: 1px solid #000; } .box{ width: 100px; height: 100px; } .box1{ width: 200px; height: 200px;
2020-07-15 22:01:45
180
原创 关于jQuery的选择器
1.简单的布局<button class="btn">按钮</button><button class="btn">按钮</button><button class="btn" id="anniu">按钮</button><button class="btn" id="anniu2">按钮</button><button class="btn">按钮</button><b
2020-07-15 21:49:56
155
原创 jQuery的引入
1.什么是jQuery？jquery ， 是一个轻量级的js库。2.jQuery的优点有哪些?：1)写的少做的多2) 强大的元素选择器 使用的是css1-css3所有选择器3)简化了dom操作4)优化了事件机制3.jQuery的引入方式1）外部引用 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>2）内部
2020-07-15 21:45:27
1600
原创 用简单的“排他思想”实现简单的标签点击事件
1用简单的排他思想先去掉所有的样式，再给要点击的对象添加样式 <script> var btn = document.querySelectorAll('button'); //btn得到的是伪数组，里面的每一个元素 btn[i]; for(var i = 0;i < btn.length;i++){ btn[i].onclick = function(){
2020-07-13 15:59:53
414
原创 两种方式实现数据分页
1.话不多说，直接看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>数据分页算法</title> <style> * { margin: 0; padding: 0; } .box {
2020-07-13 15:57:46
380
原创 使用js和json数据实现一个简单的点餐页面
1.进行简单的布局<div class="box"> <div class="title">德克士</div> <div class="info"> <div class="logo"> <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4129609614,3657034221&fm=26&
2020-07-13 15:54:20
759
原创 关于json的数据格式
1.什么是json？/* * 后端的接口返回给前端的数据格式 json * json类型是对象型 数据型 * */2.建立单个json//建立单个json var sk = { "name":"张三", "age":"18", "sex":"男", "hobby": [ { name:"篮球"
2020-07-13 15:47:52
392
原创 用js实现拖屏滑动轮播图
1.布局<div class="box"> <ul id="banner" class="ultrans"> <li><img src="image/1.jpg" alt=""> </li> <li><img src="image/2.jpg" alt=""> </li> <li><img src="ima
2020-07-13 15:44:20
559
原创 用js实现图片的懒加载
1.布局<div class="box"> </div> <div class="imgbox"> <img data-img="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2384200885,2252030111&fm=11&gp=0.jpg" src="image/baseimg.png" alt=""> <i
2020-07-13 15:39:32
392
原创 用js实现京东放大缩小轮播图
制作一个简易版的京东放大缩小轮播图1.布局<div class="box"> <div class="child"> <img src="./image/1.jpg" style="width: 200px; height: 150px; left: 0; bottom: 0;" alt=""/> <img src="./image/2.jpg" style="width: 200px; height: 150px; le
2020-07-13 15:37:20
1012
原创 用js实现瀑布流加载图片
1.新建一个空盒子<div class="box"></div>2.书写样式<style> * { margin: 0; padding: 0; } .box { position: relative; margin: 0 auto; width: 1100px; heigh
2020-07-13 15:29:25
295
原创 用js制作一个简单的选项卡
1.进行div布局 <div class="box"> <div class="topbox"> <span class="btn">前端</span> <span class="btn">java</span> <span class="btn">python</span> <span cla
2020-07-08 11:38:13
326
原创 js中的history
**history 历史对象 console.log(history.back());//倒退 history.forward();//前进 **go 方法里面 数字代表几个路径**history.go(1);//前进一步history.go(-1);//后退一步
2020-07-08 11:28:52
259
原创 js中的bom属性
Bom 浏览器对象模型window document history locationwindow 对象/*window里面的方法或者属性写的时候可以不写window对象定义的全局变量和方法弹框alert（）提示信息框–警告框prompt（""）prompt带输入框的提示框，点击确定 该方法的返回值或者默认值返回值是字符串类型confirm（""）；提示信息提示框 返回值是 true和false//网页打开关闭方法open()打开指定的网页close() 关闭当前网页/*
2020-07-08 11:26:45
177
原创 关于JS函数的一些小案例
1.函数数组中求最大值。<body> <script> function getArrMax(arr){ var max = arr[0]; for(var i = 1;i <= arr.length;i++){ if (arr[i]>max){ max = arr[i]; }
2020-07-07 17:07:37
202
原创 用dom方法实现简单计算器
首先进行一个简单的布局，<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>计算器</title> <style> *{
2020-07-07 17:01:10
1172
原创 用dom方法实现京东放大镜功能
1.首先进行布局 <div class="box"> <div class="middle"> <img src="./image/68d0ac29ce4a326d (1).jpg" alt="#"> </div> <div class="small"> <span class="leftbtn"><</span>
2020-07-07 16:54:19
291
原创 获取dom元素的8种方法，及其案例
jsdom1.什么是dom？dom 全称是document object model 文本对象模型 简称dom元素dom 就是html元素2.注意事项获取dom元素的时候需要注意，dom元素是否初始化（是否已经存在3.获取dom的8种方法1）4种动态方法 document.getElementsByClassName()//通过class类名称获取元素，返回的是一个集合 document.getElementsByName()//通过元素的name属性获取元素，返回的
2020-07-03 11:21:04
1906
原创 关于JS闭包
1.什么是闭包？闭包是变量的一种。2.闭包的特点闭包形成私有的作用域 ，保护私有变量的机制，让私有变量存到内存里面 var add = (function (){ var count = 0;//局部变量转私有变量，让其内部的返回函数可以访问私有变量 return function(){ count++; console.log(count); } })(); //add 变量指向的 自
2020-07-03 11:14:27
166
原创 js的运算符，比较运算符，逻辑结构，循环语句和break，continue的使用
/* js运算符 算数运算符：+ - * / ++ -- 赋值运算符： = += -= *= /= %= */ var a = '10'; var b = '15'; console.log(a+b);//字符串拼接 console.log(a-b); console.log(a*b); console.log(a/b); /* ..
2020-07-02 16:16:35
174
原创 用html+css方式写出云朵效果
效果图如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="index.css"> <title>移动的云朵<
2020-07-02 12:59:29
1064
原创 JavaScript的认识及基础语法--变量，函数
JavaScript的认识及基础语法–变量，函数JAVAscript特点：1.轻量2.可插入HTML页面编程代码3.插入HTML后，可用所有浏览器执行javascript又叫ECMAscript5 ECMAscript6 ECMAscript7es5 es6 es7js是一个编程语言 web 页面上JS嵌入网页的方式1.内嵌（在head或者body里面内嵌都是可以的，要注意代码是否会报错）2.外部引入（引入外部文件 在head或者body）JS的注释单行注释：//块注释：
2020-07-02 11:46:20
193
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人