tracy-迪-CSDN博客

原创前端面试题1

HTML CSS1.1 行内元素，块级元素，行内块计元素有哪些？相互之间怎样转换？行内元素：<span>、 < img> 、<a> 、<input> 、<selecet> 、<i> <textarea>块级元素： <div> <ul> <ol> <li>...

2020-02-05 17:53:26 304

原创 jQuery

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。1、三种类似于js中window.onload的三种写法$(document).ready(function () { console.log(1); }); $(f...

2019-07-22 22:14:46 117

原创 canvas绘图

首先，设置canvas画布大小canvas.width = 1200; canvas.height = 400;将canvas转化为2d模型 getContextvar content = canvas.getContext("2d");1、绘制矩形 content.fillStyle = "red"; content.fillRect(0, 0, 300, 200); co...

2019-07-07 08:51:34 109

原创设计模式

js里面的设计模式1、工厂模式 —最终返回一个对象function work(name, sex) { //函数里面封装对象返回对象 var obj = new Object(); //设置相关属性 obj.name = name; obj.sex = sex; obj.sleep = fu...

2019-06-30 11:28:20 101

原创 js继承

继承：子类继承父类声明一个父类：属性和行为声明一个子类对象面向对象有三大特征：封装继承多态1、原型链继承（核心：将父类的实例作为子类的原型）优点：非常纯粹的继承关系，实例是子类的实例，也是父类的实例父类新增原型方法/原型属性，子类都能访问到，简单，易于实现缺点：要想为子类新增属性和方法，必须要在new Animal()这样的语句之后执行，不能放到构造器中无法实现多继...

2019-06-30 11:21:59 89

原创跨域

跨域：协议端口主机名称不同会产生跨域跨域分为两种：1、通过jsonp跨域（src跨域）jsonp的原理，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。2、 cross 跨域：php 在里面配置 header('Access-...

2019-06-21 16:09:11 106

原创 ajax请求数据

一、XMLHttpRequest对象：用于在后台与服务器交换数据。二、XMLHttpRequest对象的方法：1、abort() 停止当前请求2、getAllResponseHeaders() 把HTTP请求的所有响应首部作为键/值对返回3、getResponseHeader(“header”) 返回指定首部的串值4、open(“method”,“URL”,[asyncFlag],[“u...

2019-06-20 09:45:46 669

原创多级联动

思路1、画页面2、写脚本（1）获取全部数据；（2）input文本框里显示省：使用Option获取省，appendChild（）追加在页面上；（3）添加input文本框发生变化事件，使选择之后下面的框里显示下一级的name名称；①在大数据里拿出省的集合存到一个空的集合里（arraylist）；②遍历arraylist，遍历，每次取最后一位的子集追加在下面的框里；③点击下面框里的名称，...

2019-06-14 22:51:36 311

原创正则表达式

正则表达式：验证数据的格式两种验证方法match() 验证成功！返回的是值验证失败返回的是null —字符串用法test() 验证成功！ true 验证失败 false —正则对象的用法var str = "18789469941";str.match()//括号里面是正则表达式/*声明正则对象*/var reg = new RegExp()...

2019-06-14 22:31:08 83

原创城市选择多级联动

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>自动选择三级联动</title> <style> * { margin: 0; padd...

2019-06-13 21:39:43 382

原创原生js--钟表

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>钟表</title> <style> .block{ margin: auto; wid...

2019-05-12 21:22:22 165

原创原生js--倒计时

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>倒计时</title> <style> .block{ margin:auto; tex...

2019-05-12 09:57:34 234

原创原生js--图片的瀑布流

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>图片瀑布流1</title> <style> *{ margin:0; padding:...

2019-05-11 19:21:25 95

原创原生js--验证码

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>验证码</title> <style> .block{ margin:auto; wid...

2019-05-11 19:19:25 124

Tracy_di的博客