JavaScript
关注
分享
扫一扫
DrCrypto
这个作者很懒，什么都没留下…
展开
-
JS字符串的常用操作函数
基础知识转义字符：\多行字符串：``模板字符串：类似C#中的变量替代写法：${name}操作函数：字符串本身是不可变的，操作后是返回新的字符串var str = "hello world" + str.length + str.toUpperCase() : 全变为大写 + str.toLowerCase() ：全变为小写 + str.indexOf(“world”) : 返回指定子原创 2017-03-25 18:39:37 · 515 阅读 · 0 评论 -
【前端】关于事件的代码片段
关于一些事件的代码片段：var button = document.getElementById('button')button.addEventListener('click', buttonClick);function buttonClick(e) { console.log("Button Clicked"); document.getElementById('header-t...原创 2018-11-16 18:55:56 · 309 阅读 · 0 评论 -
【前端】p5.js创建的Canvas存储到localStorage
// it should be stored in localStoragefunction saveMyCanvas(e) { console.log('Saving...') // saveCanvas(canvas, dishName, 'png') // this way worked! var imgCanvas = document.getElementById('canva...原创 2018-11-21 23:11:39 · 1060 阅读 · 0 评论 -
【前端】增删查操作
界面：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &a原创 2018-11-17 14:05:42 · 356 阅读 · 0 评论 -
【前端】数组元素过滤
先定义一个数组：const ages = [23, 26, 25, 22, 25, 22, 23, 22, 15];最普通的遍历输出：// forEachcompanies.forEach(function(company) { console.log(company.name);});下面正式来看过滤的方式.第一种，这是遍历时将满足条件的元素抽出来，平平无奇。// filt...原创 2018-11-17 14:51:32 · 1939 阅读 · 0 评论 -
【前端】数组数据操纵：map, filter, sort, reduce
const companies = [ { name: "Company One", category: "Finance", start: 1981, end: 2003 }, { name: "Company Two", category: "Retail", start: 1991, end: 2016 }, { name: "Company Three", category: ".原创 2018-11-17 15:32:43 · 389 阅读 · 0 评论 -
【前端】jQuery学习内容概览
主要涉及到以下6个方面：SelectorsEventsMethodsDOM操纵Effects & AnimationAjaxEND.原创 2018-11-17 16:01:47 · 202 阅读 · 0 评论 -
【前端】jQuery选择器
<!DOCTYPE html><html><head> <title>jQuery | Selectors</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <style原创 2018-11-17 16:07:03 · 211 阅读 · 0 评论 -
【前端】jQuery事件处理
<script> $(document).ready(function() { $('#btn1').click(function() { alert("Button Clicked!") }); });</script>对于放在head标签里的脚本，如果HTML文档没有加载完成会导致出现问题，可以按照上面的写法，将脚本放在document对象准备好后...原创 2018-11-17 17:08:41 · 215 阅读 · 0 评论 -
【前端】jQuery操作DOM基础
<!DOCTYPE html><html><head> <title>jQuery Crash Course | DOM Manipulation</title> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script&am原创 2018-11-17 18:54:18 · 258 阅读 · 0 评论 -
【前端】jQuery动画
<!DOCTYPE html><html><head> <title>jQuery| Effects & Animate</title> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>原创 2018-11-17 19:47:18 · 248 阅读 · 0 评论 -
【前端】Canvas通过toDataURL保存时在Mac上分辨率扩大问题
问题描述：这个问题出现在我尝试通过如下方式保存Canvas内容时:var imgCanvas = document.getElementById('canvas'); // get the canvas created by p5js var imageAsDataURL = imgCanvas.toDataURL("image/png");localStorage.setItem("na...原创 2018-11-26 15:09:39 · 3535 阅读 · 3 评论 -
【前端】创建元素并插入到现有文档
// 创建元素// divvar newDiv = document.createElement('div')// 添加类名newDiv.className = 'hello'// 添加idnewDiv.id = 'hello1'// 设置属性newDiv.setAttribute('title', 'Hello Div')// 创建Text nodevar newDi...原创 2018-11-16 16:02:52 · 642 阅读 · 0 评论 -
【前端】遍历DOM
// parentNodevar itemList = document.querySelector('#items');console.log(itemList.parentNode);itemList.parentNode.style.backgroundColor = "#f4f4f4";console.log(itemList.parentNode.parentNode);/...原创 2018-11-16 15:46:17 · 259 阅读 · 0 评论 -
【JavaScript】JS的Array的用法总结
目录Array的长度相关问题indexOf取元素下标slice操作push和pop操作unshift和shift操作sort操作reverse操作spilce操作concat函数 join函数多维数组Array的长度相关问题可以直接获取Array的长度属性：var arr = [1,2,3];var len = arr.length; // 直接计算得到3很有意思的是，Ar原创 2017-03-25 20:39:18 · 1633 阅读 · 0 评论 -
JS概述
JS概述@(JavaScript)语言核心两个重要的数据类型是： + 对象 + 数组对象：键值对集合var book = { topic:&amp;amp;quot;Javascript&amp;amp;quot;, fat:true};对象属性的访问book.topic // Way 1book[&amp;amp;quot;fat&amp;amp;quot;] // Way 2赋值即创造这个在其他语言环境中是不常见的，原创 2017-05-04 23:38:03 · 616 阅读 · 0 评论 -
【前端基础】浏览器对象
浏览器对象有6个：WindowNavigatorScreenHistoryLocation存储对象Window对象表示浏览器中打开的窗口。Navigator对象包含有关浏览器的信息。Screen包含有关客户端显示屏幕的信息。History包含用户在浏览器窗口中访问过的 URL，此外，History对象是 Window对象的一部分，可通过 window.histor...原创 2018-11-15 13:22:54 · 343 阅读 · 0 评论 -
【前端基础】DOM对象
DOM概览全称是Document Object Model，是浏览器创建的节点/元素树结构。通过JavaScript可以对DOM进行读、写、操纵。这是一种面向对象的表达方式。DOM节点分类文档节点元素节点属性节点文本节点注释节点…Document对象浏览器载入HTML文档后，HTML文档就变成了Document对象。通过该对象，我们可以对HTML页面中的所有元素进行访问...原创 2018-11-15 16:34:31 · 531 阅读 · 0 评论 -
【前端】基础总结
<!Doctype html><html><head> <title></title> <link rel="stylesheet" type="text/css" href="style.css"></head><body id原创 2018-11-15 17:22:15 · 1226 阅读 · 0 评论 -
【前端】CSS使用总结
CSS的作用用于网页布局和设计可以通过Sass/Less进行扩展三种添加CSS文件的方法Inline CSSS: 直接在html元素中添加（不推荐）Internal CSS: 使用<style>标签External CSS: 链接.css文件上面三个的顺序也是按照优先级大小排下来的，即：越靠前越是优先级高。但是我们更推荐用后面的方法。CSS选择器a { ba...原创 2018-11-18 22:54:25 · 246 阅读 · 0 评论 -
【前端】表单事件添加
HTML：&lt;form id="myForm"&gt; &lt;div class="form-group"&gt; &lt;label&gt;Site Name&lt;/label&gt; &lt;input type="text"原创 2018-11-16 11:48:39 · 516 阅读 · 0 评论 -
【前端】设置好CSS样式动态添加元素会按照样式显示
这篇就是简单记录下一个小点：设置好CSS样式先，然后动态生成元素，元素可以按照CSS样式显示，只要对应到相应的规则即可。<!DOCTYPE html><html><head> <title>Grid Layout Test</title> <style type="text/css"> .conta原创 2018-11-20 20:11:00 · 2415 阅读 · 0 评论 -
【前端】动态生成HTML以及a标签不跳转问题标记
bookmarksResults.innerHTML += '<div class="well">' + '<h3>' + name + ' <a class="btn btn-default" target="_blank" hr...原创 2018-11-16 12:05:52 · 1040 阅读 · 0 评论 -
【前端】书签应用开发总结
这是来自Learning JavaScript By Building A Boookmarker Application的笔记。首先做出来的效果是这样的：输入网站名和网站地址，点击提交，即可显示在下方：点击访问，跳转到该网站；点击删除则去掉该条目。数据存储在localStorage中，核心就是：localStorage.getItem('xxx'); // 获取localStor...原创 2018-11-16 12:40:07 · 874 阅读 · 0 评论 -
【前端基础】querySelector
// query selectorvar header = document.querySelector('#main-header');header.style.boarderBottom = "solid 4px #ccc";var input = document.querySelector('input');input.value = "Hello World"; // 直接修改...原创 2018-11-16 15:24:02 · 1086 阅读 · 0 评论 -
【前端】div添加点击事件
<!DOCTYPE html><html><head> <title>Test Div Event</title> <style> #test { background-color: red; margin-left: 100px; margin-right: 100px; padding:...原创 2018-11-27 13:03:25 · 9191 阅读 · 1 评论