![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端开发
mannuandeyangguang
记录学习的点点滴滴
展开
-
原生js实现JSONP
介绍JSONP是JSON with Padding(填充式JSON或参数式JSON)的简写,是一种非常常用的跨域请求方式。主要原理是利用了script标签可以跨域请求的特性,由其src属性发送请求到服务器,服务器返回JavaScript代码,浏览器接受响应,然后就直接执行了,这和通过script标签引用外部文件的原理是一样的。JSONP由两部分组成:回调函数和数据,回调函数是当...原创 2019-06-29 21:41:57 · 3945 阅读 · 1 评论 -
子元素过滤选择器
选择器 描述 返回 示例 :nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素(index从1算起) 集合元素 :eq(index)只匹配一个元素,而:nth-child将为每一个父元素匹配子元素,并且:nth-child(index)的index是从1开始的,而:eq(index)是从0...原创 2019-06-21 11:10:26 · 647 阅读 · 0 评论 -
属性过滤选择器
选择器 描述 返回 示例 [attribute] 选取拥有此属性的元素 集合元素 $(‘div[id]’)选取拥有属性id的元素 [attribute=value] 选取属性的值为value的元素 集合元素 $(‘div[title=test]’)选取属性title为“test”的<div>元素 [attribute!=...原创 2019-06-21 10:48:25 · 969 阅读 · 0 评论 -
可见性过滤选择器
选择器 描述 返回 示例 :hidden 选取所有不可见的元素 集合元素 $(":hidden")选取所有不可见的元素。包括<input type="hidden"/>,<div style="display:none;">和<div style="visibility:hidden;">等元素。如果只想选取<inp...原创 2019-06-21 10:26:07 · 425 阅读 · 0 评论 -
内容过滤选择器
选择器 描述 返回 示例 :contains(text) 选取含有文本内容为“text”的元素 集合元素 $('div:contains('我')')选取含有文本“我”的<div>元素 :empty 选取不包含子元素或者文本的空元素 集合元素 $('div:empty')选取不包含子元素(包括文本元素)的<div>...原创 2019-06-21 10:17:10 · 444 阅读 · 0 评论 -
基本过滤选择器
选择器 描述 返回 示例 :first 选取第一个元素 单个元素 $('div:first')选取所有<div>元素中第一个<div>元素 :last 选取最后一个元素 单个元素 $('div:last')选取所有<div>元素最后一个<div>元素 :not(selector) ...原创 2019-06-21 10:07:50 · 498 阅读 · 1 评论 -
层次选择器的4种选择器列表
选择器 描述 返回 示例 $("ancestor descendant") 选取ancestor元素里的所有descendant(后代)元素 集合元素span $("div span")选取<div>里的所有的<span>元素 $("parent > child") 选取parent元素下的child(子)元素,与$(...原创 2019-06-21 09:16:52 · 7137 阅读 · 0 评论 -
jQuery基本选择器
选择器 描述 返回 示例 #id 根据给定的id匹配一个元素 单个元素 $("#test")选取id为test的元素 .class 根据给定的类名匹配元素 集合元素 $(".test")选取所有class为test的元素 element 根据给定的元素名匹配元素 集合元素 $("p")选取所有的<p>元...原创 2019-06-21 09:02:54 · 511 阅读 · 0 评论 -
webpack安装教程
cnpm install -g webpackcnpm install -g webpack-clicnpm install -g webpack-dev-server原创 2019-06-10 21:54:53 · 115 阅读 · 0 评论 -
npm快速国内源
淘宝镜像(cnpm) - 淘宝NPM 镜像,用法和npm一模一样只是把npm改为cnpm原创 2019-06-10 21:52:20 · 3419 阅读 · 1 评论 -
jquery要点
jQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个jQuery对象上的一组动作,可以直接连写而无需重复获取对象。这一特点是jQuery的代码无比优雅。 百度CDN:https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.jswindow.onload与$(document).ready()的对比(p6) window...原创 2019-06-19 17:06:44 · 145 阅读 · 0 评论 -
DOM操作技术
DOM操作最大的两个麻烦就是:操作效率问题、浏览器兼容问题动态脚本通过修改DOM动态添加的脚本的两种模式:插入外部文件,插入JavaScript代码 插入外部文件 var script = document.createElement('script');script.src = 'client.js';document.body.appendChild(script);...原创 2019-05-29 22:54:44 · 236 阅读 · 0 评论 -
javascript的Comment、CDATASection、DocumentType、DocumentFragment、Attr类型
Comment类型nodeType为8,nodeName为#comment,nodeValue为注释内容; Comment类型拥有除splitText()之外的所有的属性和方法; 创建注释节点只需要传入注释内容即可 document.createComment('Hi'); 一般浏览器不会识别位于</html>后面的注释; 在IE8中,注释节点被...原创 2019-05-29 22:35:57 · 297 阅读 · 0 评论 -
javascript Text类型
nodeType为3, nodeName为#text; 不支持子节点; 可以包含转义的HTML字符; 文本节点的值可以通过nodeValue属性或data属性访问; <!DOCTYPE html><html> <body> <div id="123" style="height: 20px;">123</di...原创 2019-05-29 20:35:30 · 1933 阅读 · 0 评论 -
javascript操作文本节点的方法
appendText(text); deleteData(offset, count); insertData(offset, count); replaceData(offset, count, text); splitText(offset); substringData(offset, count);原创 2019-05-29 20:31:09 · 932 阅读 · 0 评论 -
javascript Element类型
Element节点是Element类型的实例; Element节点的nodeName与tagName属性元素的标签名的大写;nodeValue为null; <!DOCTYPE html><html> <body> <div id="123">123</div> </body> &...原创 2019-05-29 16:05:24 · 802 阅读 · 0 评论 -
JavaScript-事件对象
触发某个事件时会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。事件的元素 事件的类型 其它与事件相关的信息所有浏览器都支持event对象,但存在差异。event对象在标准的现代浏览器中会作为参数传入到事件的事件处理函数。DOM中的事件对象属性/方法 类型 读写 说明 bubbles Boolean 只读 表明事件是否...原创 2019-06-01 14:28:18 · 451 阅读 · 0 评论 -
表单对象属性过滤选择器
选择器 描述 返回 示例 :enabled 选取所有可用的元素 集合元素 $('#form1:enabled');选取id为"form1"的表单内的所有可用元素 :disabled 选取所有不可用的元素 集合元素 $("#form2:disabled")选取id为"form2"的表单内的所有不可用的元素 :checked 选取...原创 2019-06-21 11:20:44 · 638 阅读 · 0 评论 -
表单选择器
选择器 描述 返回 示例 :input 选取所有的<input>、<textarea>、<select>和<button>元素 集合元素 $(":input")选取所有<input>、<textarea>、<select>和<button>元素 ...原创 2019-06-21 13:43:32 · 124 阅读 · 0 评论 -
webpack如何设置是否自动开启浏览器
当我们执行npm run dev命令的时候,我们想要自动开启浏览器,那么只需要在webpack-dev-server后面加上"--open"参数,具体在package.json文件里面设置,配置文件内容如下:{ "name": "webpack-demo1", "version": "1.0.0", "main": "main.js", "scripts": { ...原创 2019-06-11 22:56:41 · 4161 阅读 · 0 评论 -
验证Promise是同步的
前言Promise是ES6提出的解决异步编程导致陷入回调的地狱问题。例子1 console.log(1); var a=new Promise(function(resolve, reject){ console.log(2); resolve(); }); console.log(2); var b = new ...转载 2019-06-28 22:05:48 · 413 阅读 · 0 评论 -
原生js、jQuery和Vue.js的Ajax的详细对比
原生jsajax('get', 'http://127.0.0.1:3000/get', function(response){ alert(JSON.parse(response)['message']); });ajax('post', 'http://127.0.0.1:3000/post', function (response) { ...原创 2019-06-28 21:35:46 · 2290 阅读 · 0 评论 -
关于Ajax的jQuery、Vue.js、原生js的各个版本的实现对比
目录前言1、原生js实现2、原生js实现——Promise版本3、jQuery实现4、Vue.js实现总结前言下面对于各个版本的Ajax代码,想要实际测试它们,可以把它命名为server2.html,然后放在当前目录views目录下面。具体的教程可以看测试Ajax的Nodejs服务端代码1、原生js实现<!DOCTYPE html>...原创 2019-06-28 20:38:26 · 723 阅读 · 0 评论 -
测试Ajax的Nodejs服务端代码
前言由于使用Ajax必须要有一个服务端来接收消息,为了方便我使用Nodejs来搭建服务端。同时,为了兼顾实践跨域的方法,我在这里搭建了两个服务端。其中,一个服务端用来响应Ajax请求,另外一个服务端用作加载页面。这样就产生了跨域的问题,我采用的是cors的解决方案,具体的实现,请看sever1的代码。前期准备工作安装nodejs,可以参看我的这篇教程 选择koa2作为服务端 安...原创 2019-06-28 17:49:10 · 325 阅读 · 0 评论 -
javascript创建对象的10种模式
第1种:对象字面量//对象字面量(速度快,推荐使用)var animal ={property: "都要呼吸", getProperty: function(){return this.property;}};var person ={feature: "直立行走", getFeature: function(){return this.feature;}};第2种:Objec...原创 2019-06-24 21:36:00 · 331 阅读 · 0 评论 -
javascript继承的6种方式
第一种:原型链继承:function Animal(){this.property="都要呼吸";}Animal.prototype.getProperty = new function(){return this.property;}function Person(){this.feature="直立行走";}Person.prototype = new Animal();Pers...原创 2019-06-24 20:07:48 · 169 阅读 · 0 评论 -
关于Content-Type几种值的区别及用法
1、Content-Type 的值类型:1.1 application/json:消息主体是序列化后的 JSON 字符串1.2 application/x-www-form-urlencoded:数据被编码为名称/值对。这是标准的编码格式1.3 multipart/form-data: 需要在表单中进行文件上传时,就需要使用该格式。常见的媒体格式是上传文件之时使用的1.4 text...转载 2019-06-26 22:44:53 · 1291 阅读 · 0 评论 -
网站优化 14条--雅虎十四条优化原则
相信互联网已经越来越成为人们生活中不可或缺的一部分。Ajax,flex等等富客户端的应用使得人们越加“幸福”地体验着许多原先只能在C/S实 现的功 能。比如Google机会已经把最基本的office应用都搬到了互联网上。当然便利的同时毫无疑问的也使页面的速度越来越慢。自己是做前端开发...转载 2019-06-26 10:22:31 · 158 阅读 · 0 评论 -
css书写常见错误
每个属性之间用分号";"隔开;原创 2019-06-22 15:13:59 · 249 阅读 · 0 评论 -
CSS三种引入方式:内联、页级、外联
1.内联CSS 内联CSS也可称为行内CSS或者行级CSS,它直接在标签内部引入,显著的优点是十分的便捷、高效;但是同时也造成了不能够重用样式的缺点,如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用,可以查找代码中bug。<body><div style="width: 65px;height: 20px;border: 1px solid;">...原创 2019-06-25 20:59:45 · 1633 阅读 · 0 评论 -
vue常见错误汇总
new Vue(), V要大写 .vue文件中的<template></template>中不可以出现空行 vue模板中的el指向的是id,所以为了标识id,在前面要加上"#"原创 2019-06-22 10:33:31 · 1066 阅读 · 0 评论 -
JavaScript debugger 语句
实例开启 debugger ,代码在执行到第三行前终止。var x = 15 * 5;debugger;document.getElementbyId("demo").innerHTML = x;定义和用法debugger 语句用于停止执行 JavaScript,并调用 (如果可用) 调试函数。使用 debugger 语句类似于在代码中设置断点。通常,你可以通过按...原创 2019-06-25 16:41:26 · 308 阅读 · 0 评论 -
parent(),parents()与closest()的区别
方法 描述 示例 parent() 获得集合中每个匹配元素的父级元素 $('.item-1').parent().css('background-color', 'red'); parent()方法从指定类型的直接父节点开始查找。parent()返回一个元素节点。 parents() 获得集合中每个匹配元素的祖先元素 $('.item-1').paren...原创 2019-06-22 09:27:26 · 1977 阅读 · 0 评论 -
val()方法的选中功能
<select id="single"><option>选择1号</option><option>选择2号</option><option>选择3号</option></select><select id="multiple" multiple="multiple" style="he...原创 2019-06-22 09:27:53 · 377 阅读 · 0 评论 -
attr()和addClass()的区别
方法 addClass() attr() 用途 追加样式 设置样式 对同一个网页元素操作 <p>test</p> 第1次使用方法 $("p").addClass("high"); $("p").attr("class", "high"); 第1次结果 <p class="high">test<...原创 2019-06-22 09:28:13 · 838 阅读 · 0 评论 -
jQuery插入节点的方法
方法 描述 示例 append() 向每个匹配的元素内部追加内容 HTML代码: <p>我想说:</p> jQuery代码: $("p").append("<b>你好</b>"); 结果: <p>我想说:<b>你好</b></p>...原创 2019-06-21 19:59:30 · 6609 阅读 · 0 评论 -
getElementById()的注意事项
传入参数对应的ID的元素不存在,返回null; 传入参数大小写需与实际元素id特性严格匹配; 多个元素的id特性相同,方法返回文档中第一次出现的那个;...原创 2019-05-29 11:13:42 · 641 阅读 · 0 评论 -
JavaScript客户端检测
应对各个厂商、各个版本的浏览器对特性支持度的差异,常采取的策略”最小公分母“策略 客户端检测技术,突破和规避种种局限不到万不得已不要使用客户端检测;先设计最通用的方案,然后使用特定于浏览器的技术增强该方案。常用的客户端检测技术包括:目录能力检测怪癖检测用户代理检测能力检测最常用最方便,只关注能力,不关注浏览器品牌和版本; 两个原则 先检测达成目的的最常用特性...原创 2019-06-01 10:57:50 · 339 阅读 · 0 评论 -
javascript闭包详解
闭包的两个知识点: 变量搜索方向:在javascript中,函数可以创造函数作用域。在函数作用域里面可以看到外面的变量,而函数的外面无法访问到函数里面的变量。因此,在作用域里面的变量搜索方向是:自内向外。比如,下面这段代码就验证了这个搜索方向: var a = 1;var func1 = function(){ var b = 2; var func2 = fu...原创 2019-05-27 10:45:04 · 141 阅读 · 0 评论 -
DOM扩展-选择符API
选择符API允许直接使用CSS选择器来选取页面元素,众多库推进了选择符API的标准化。选择符API性能因为原生,所以性能必定强于各个库同类型的查询操作。querySelector() Selector API Level 1; 接收一个css选择符(可复杂),返回匹配的第一个元素或返回null; 传入不支持的选择符会抛出错误; 能调用querySel...原创 2019-05-30 10:58:36 · 105 阅读 · 0 评论