JS面向对象
<script> function num(val) { return val * 8 } function Index(name, age) { this.name = name; this.age = age; } Index.prototype = { constructor: Index } Index.prototype.test = function () { console.log(num(this.age)); } Index.prototype.testB = function () { console.log(num(this.name)); } var a = new Index('kang', 22) a.test() a.testB() </script>
js面向对象推荐写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var Index = function (name, age) { this.name = name; this.age = age; } Index.prototype = { constructor: Index, num: function (val) { return val + 28 }, testA: function () { console.log(this.num(this.age)); }, testB: function () { console.log(this.num(this.name)); }, testC: (function () { console.log(111); })() } var a = new Index('kang', 252) a.testA() a.testB() </script> </body> </html>
自调用函数
<script> !function (a, b) { console.log(a + b) }(1, 2); (function (c, d) { console.log(c + d) })(3, 4) // 你甚至可以在function前面加一元操作符号 !function () { /* code */ } (); ~function () { /* code */ } (); -function () { /* code */ } (); +function () { /* code */ } (); </script>
jq $.get('a.json') 读取json $.grep()过滤json
<script> $.get('xx.json', function (res) { // 过滤数据 var res = $.grep(res, function (n) { return n.value.length == 2 // 过滤条件 }) }, 'json') </script>
模板引擎 arttemplate
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> https://github.com/aui/art-template/blob/master/lib/template-web.js <script id="test" type="text/html"> <h1>{{title}}</h1> <ul> {{each list as value i}} <li>索 {{i + 1}} ：{{value}}</li> {{/each}} </ul> </script> <div id="content"></div> <script src="template-web.js"></script> <script> var data = { title: '标签123', list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] }; var html = template('test', data); document.getElementById('content').innerHTML = html; </script> </body> </html>
sha1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 加密前的明文为：000714804762308511eb58071dde449179a3a2745fc9f1e77 加密后的结果为： fae96b30c78e386f32df9d286905bf87b92e1a3d --> <script src="https://cdn.bootcss.com/crypto-js/3.1.9/crypto-js.min.js"></script> <script> var val = '000714804762308511eb58071dde449179a3a2745fc9f1e77' var res = CryptoJS.SHA1(val) alert(res) // 正确 console.log(res); // 控制台输入出错 document.write(res); // 正确 </script> </body> </html>
jq表单提交，reset不刷新数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 表单重置阻止刷新页面 <form id="form1"> <select name="" id=""> <option value="">---请选择---</option> <option value="">s</option> <option value="">s333</option> </select> <button>btn</button> <input type="text" placeholder="abc"> </form> <script src="jquery.min.js"></script> <script> $("button").click(function () { return test() // 返回函数 }) function test() { $("form")[0].reset(); return false // 返回 false } </script> </body> </html>
js变量作用域 在test()函数内先声明变量b，再执行 输出，为 undefined,再为b赋值3
var b = 10; function test() { console.log(b); // undefined var b = 3; } test()
事件委托，减少事件
<body> 页面的事件处理程序（点击事件等）太多会影响页面性能，每个函数是对象，占内存，性能差，必须事先指定所有事件处理程序而导致DOM访问次数， 延迟整个页面的交互就绪时间。 使用事件委托， <div class="a"> <div class="b">bbb</div> <div class="c">bbb</div> <div class="d">bbb</div> </div> <script> // 事件委托，减少事件 document.getElementsByClassName('a')[0].addEventListener('click', function (e) { var name = e.target.className; switch (name) { case 'b': console.log('bbb'); break; case 'c': console.log('ccc'); break; case 'd': console.log('ddd'); break; default: console.log('eee'); } }) </script>
表单elements属性 chrome safari支持的H5表单属性 autocomplete autofocus multiple 表单过滤 剪贴板事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form id="form1"> <input type="text" name="username"> <select id="" multiple name="num">多选效果 <option value="111">中国</option> <option value="2">2</option> </select> </form> <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script> // 表单有 elements属性，包含表单所有字段，如 Input textarea等 var form = document.getElementById('form1'); // document.forms[0] 表单获取方式二 // form.elements[0]; // 取得表单第一个字段 //form.elements['username']; // 通过name属性来取得input字段 // form.elements.length; // 所有字段的长度 // 避免表单多次提交 // 通过submit事件来禁用提交按钮 form.addEventListener('submit', function () { btn.disabled = true; }) // option 值 console.log(form.elements["num"].options[0].text) // 中国 console.log(form.elements["num"].options[0].value) // 111 </script> <input type="text" autofocus > // 手机端chrome safari 支持的有 autocomplete autofocus multiple placeholder 少用吧 14.2.2 过滤输入 input屏蔽字符编码 P443 操作剪贴板 P444 opera 不支持前贴板事件 14.2.3自动切换焦点 </body> </html>
原生拖放dragstart、历史状态管理 history.pushState() 函数错误处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 【1】原生拖放事件 ie4就支持了 H5把拖放事件规范化 dragstart drag dragend 当元素被手动到一个有效的放置目标上时，下列事件会依次发生： dragenter dragover dragleave或drop 【2】历史状态管理 不刷新页面跳转 history.pushState() replaceState() // ie11才支持 pushState()创造的每一个假的 url，在web服务器上必须有一个真的url存在，否则一刷新，会报错 <a href="1.html">1111111</a> // history.pushState() 【3】错误处理 关注函数和引发函数执行失败的因素，抛出自定义的错误方便查看 // 感觉没人使用 <script> function test(arr){ if(!(arr instanceof Array)){ // 判断参数是数组 throw new Error('val must be an arr'); } // ... } function concat(str1,str2,str3) { var res = str1 + str2; if (typeof str3 == 'string') { // if(str3) 判断不严谨 str3要是string类型才处理 res += str3; } return res; } function getQueryString(url) { if(typeof url == 'string'){ // 判断参数是 string // ... } } function addQueryStringArg(url, name, val) { if(url.indexOf("?") == -1){ url+='?'; }else { url+="&" } url+= encodeURIComponent(name)+'='+encodeURIComponent(val) } var url = 'http://www.baidu.com'; var newUrl = addQueryStringArg(url,'redir','http://www.xxx.com') // http://www.baidu.com?redir=http%3A%2F%2Fwww.xxx.com </script> 【4】把错误记录到服务器 17.2.7 不需要吧？ </body> </html>
百度地图2.0 自定义图标、调整位置
http://lbsyun.baidu.com/jsdemo.htm?a#c1_16 var myIcon = new BMap.Icon(iconUrl, new BMap.Size(20, 23),{ // 图标宽高 anchor:new BMap.Size(10,23) // 自定义图标调整位置 第一个值为图标宽度的一半 }) var marker = new BMap.Marker(new BMap.Point(Longitude, Latitude), {icon: myIcon}); // 创建标注
jq判断元素是否含有某样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> li { list-style: none; } ul { height: 30px; } ul li { line-height: 30px; height: 30px; display: none; } ul.on { height: auto; } ul.on li { display: block; } ul.on .btn { transform: rotate(180deg); -ms-transform: rotate(180deg); /* IE 9 */ -moz-transform: rotate(180deg); /* Firefox */ -webkit-transform: rotate(180deg); /* Safari 和 Chrome */ -o-transform: rotate(180deg); /* Opera */ } .btn:hover { cursor: pointer; } </style> </head> <body> jq判断元素是否含有某样式 $("#xx").attr('class').indexOf('newClass')>0 ? 'yes': 'no' <ul id="ulList" class="aaa"> // 必须有一个样式，才能判断是否有其他样式 <li>12341</li> <li>12342</li> <li>12343</li> <li>12344</li> <li>12345</li> <li>12346</li> <img src="arrow.png" alt="" class="btn"> </ul> <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script> $("ul li").eq(0).show(); $(".btn").click(function () { $("#ulList").toggleClass('on') if ($("ul").attr('class').indexOf('on') > 0) { // 如果ul没有aaa 等任何一个样式，则该判断无效 console.log(11); } else { console.log(22); } }) </script> </body> </html>
图片、背景图放大缩小
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width:300px;height:300px; /*url图片途径*/ background:url(swipe_error.jpg) no-repeat center; border:5px solid #0099CC; -webkit-transition:0.5s; background-size:500px 500px; } .box:hover{ background-size:600px 600px; } </style> </head> <body> <!-- css 动画 --> <div class="box"></div> <script> $(document).on('mouseover mouseout', '.xxx', function (e) { if (e.type == 'mouseover') { $(this).stop().animate({ backgroundSize: '130%' // 背景图片放大缩小 /* // 图片放大缩小 * width:'130%', * height:'130%', * marginLeft:'-15%', * marginTop:'-15%' * */ }) } else if (e.type == 'mouseout') { $(this).stop().animate({ backgroundSize: '100%' }) } }) </script> </body> </html>
懒加载 jquery.lazyload.min.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .my-lazy{ /* 默认的占位图 */ background:url('swipe_error.jpg') no-repeat center; } </style> </head> <body> <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script src="jquery.lazyload.min.js"></script> <div style="height:1000px;width:1000px;border: 1px solid green;"></div> <div class="lazy my-lazy" data-original="swipe_error.jpg" style="width:1920px;height:390px;"></div> <script> $("div.lazy").lazyload() // 背景图懒加载， 先加载占位图,当滚动到该页面时加载对应背景图 </script> https://www.w3cways.com/1765.html 插件下载，教程 http://blog.csdn.net/love_gaohz/article/details/46463623 图片懒加载、背景图懒加载 </body> </html>
上下移动表格行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .danger{ color: red; } </style> </head> <body> <table class="table" id="test_table"> <thead> <tr> <th>时间</th> <th>详情</th> <th>操作</th> </tr> </thead> <tbody> <tr cid="7.0.0-2014-04-29_11-02-24_123" class="list_line"> <td> 2014-04-29 11:02:24 </td> <td> 详情 </td> <td> <span class="move_btn glyphicon glyphicon-arrow-up" move_act="up">1</span> <span class="move_btn glyphicon glyphicon-arrow-down" move_act="down">2</span> </td> </tr> <tr cid="7.0.0-2014-04-29_11-02-24_915" class="list_line"> <td> 2014-04-28 10:00:00 </td> <td> 详情 </td> <td> <span class="move_btn glyphicon glyphicon-arrow-up" move_act="up">1</span> <span class="move_btn glyphicon glyphicon-arrow-down" move_act="down">2</span> </td> </tr> </tbody> </table> </body> </html> <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.move_btn').click(function(){ var move_act = $(this).attr('move_act'); $('#test_table tbody tr').removeClass('danger'); if(move_act == 'up'){ $(this).parent().parent('tr').addClass('danger') .prev().before($(this).parent().parent('tr')); } else if(move_act == 'down'){ $(this).parent().parent('tr').addClass('danger') .next().after($(this).parent().parent('tr')); } setTimeout("$('#test_table tbody tr').removeClass('danger');", 2000); }); }); </script>
请求头option
假如我在http://localhost:8081/访问使用json-server在http://localhost:3000/模拟的API，这应该算是跨域吧，使用POST是时，在控制台就会出现“2次”请求，第一次为OPTIONS请求，第二次才是POST请求。我查了下这叫做Preflighted Requests(预检请求)，当发生跨域请求时，fetch会先发送一个OPTIONS请求，来确认服务器是否允许接受请求。服务器同意后，才会发送真正的请求。
只要是带自定义header的跨域请求，在发送真实请求前都会先发送OPTIONS请求，浏览器根据OPTIONS请求返回的结果来决定是否继续发送真实的请求进行跨域资源访问。
手机自适应方案
!function (doc, win) { // 自调用函数并传参 var docEl = doc.documentElement, // 得到当前页面所有的 html代码 resizeEvt = "orientationchange" in window ? "orientationchange" : "resize", // pc端结果永远为 resize？可能要在手机上才能看到效果 手机横竖屏事件 orientation方向 // 微信内置浏览器，手机横竖屏无效果， UC浏览器有横竖屏效果， 微信结果为 resize recalc = function (num) { document.write(num); var width = docEl.clientWidth; // 得到客户区宽度，即内容+padding ，即手机/pc屏幕的宽度 375等 width = width > 750 ? 750 : width; console.log(width); width && (docEl.style.fontSize = 100 * (width / 375) + "px") // 设置 html的字体大小 如果width为假，则后面不会执行 }; if (doc.addEventListener) { // 怎么验证这些事件什么时候触发呢？ PC/手机都会执行3个事件 document.write(resizeEvt); win.addEventListener(resizeEvt, recalc(1), !1); // 监听手机横竖屏事件 doc.addEventListener("DOMContentLoaded", recalc(2), !1); // 在形成完整的DOM树之后就会触发，不理会图像、JS文件、css文件是否已经下载完毕,用户可以早点与页面进行交互 ie9+支持，window.load()则是全部加载完毕触发 recalc(3) // 进入页面调用一次 } }(document, window);
var a = ''; a && document.write('abc') // 等同于 if(a){...} if(a){ document.write('abc') }
js滚动监听
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <style> .a { width: 200px; height: 300px; border: 1px solid green; } .active { background: red; } </style> <nav> <ul style="position: fixed;top:10px;left:20px;"> <li><a href="#About">About</a></li> <li><a href="#Skill">Skill</a></li> <li><a href="#Experience">Experience</a></li> <li><a href="#More">More</a></li> <li><a href="#Contact">Contact</a></li> </ul> </nav> <div style="height:100px;"></div> <div class="a" id="About" style="height: 200px;"> about </div> <div class="a" id="Skill" style="height: 300px;"> skill </div> <div class="a" id="Experience" style="height: 400px;"> expre </div> <div class="a" id="More" style="height:500px;"> more </div> <div class="a" id="Contact" style="height:600px;"> concact </div> <div style="height:1000px;">00</div> <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script> var a = $('a[href]', 'nav'); a.click(function () { var href = $(this).attr('href'); var o = $(href).offset(); $(window).scrollTop(o.top, 1000); //增加个动画效果 }); var b = $(".a") $(window).on('scroll', function () { b.removeClass('active'); for (var i = 0; i < b.length; i++) { var $b = b.eq(i), st = $(window).scrollTop(); var top = $b.offset().top; if (st >= top && st <= $b.height() + top) // top >= st >= top + height { console.log(i); $b.addClass('active'); //此处已经获得了哪个a break; } } }); </script> </body> </html>
扫一扫
9659
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
