- 博客(15)
- 收藏
- 关注
RSS订阅转载 JS性能优化之创建文档碎片(document.createDocumentFragment）
讲这个方法之前，我们应该先了解下插入节点时浏览器会做什么。 在浏览器中，我们一旦把节点添加到document.body（或者其他节点）中，页面就会更新并反映出这个变化，对于少量的更新，一条条循环插入也会运行很好，也是我们常用的方法。代码如下： for(var i=0;i<5;i++) { var op = document.createElement("span"); var oText = document.createTextNode(i); op.appen
2021-02-09 18:56:04
391
原创 jQuery基础笔记（4）
事件委托 *将多个子元素（li）的事件监听委托给父辈元素（ul）处理 *监听回调是加载父辈元素上的 *当操作任何一个子元素（li）时，事件会冒泡到父辈元素上（ul） *父辈元素不会直接处理事件，而是根据event.target得到发生事件的子元素（li），通过这个子元素调用事件回调函数 事件委托的双方： *委托方：li *被委托方：ul 使用事件委托的好处： *添加新的子元素，自动会有事件响应处理 *减少事件监听的数量：n==>1 jQuery的事件委托API: *设置事件委托：$(parentSel
2021-02-09 15:31:25
219
原创 微信小程序获取用户信息
为了提高用户对小程序安全的可信度，一般要在用户的操作下获取用户信息，而不是在用户刚一进入小程序小程序就自动获取了用户信息 获取前的简洁页面 获取后的简洁界面 "获取用户信息"按钮（有open-type="getUserInfo"属性）点击会弹出一个窗口，询问用户允许还是拒绝获取用户信息，并通过给按钮绑定事件（bindgetuserinfo=“haddleGetUserInfo”）获取用户是否允许，若允许，则进行wx.getUserInfo()获取用户信息，将获取的新的信息更（setData）换掉data
2021-01-14 17:06:59
985
原创 jQuery无缝轮播，左右按钮滑入显示滑出隐藏
案例： html 代码 <!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"> <link rel="st
2020-11-14 14:39:55
376
原创 javascript实现搜索筛选功能
案例样式即功能 HTML代码： <!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-11-11 17:24:25
3596
7
原创 jQuery基础笔记（3）
一. 工具方法（以$…或jquery…这种方式调用方法） $.type():判断参数的类型； 原生js判断数据类型：1. arr instanceof Array;(不能准确判断是Array还是Object) 2. arr. constructor==Arraay;（对于判断iframe里的元素，不能准确判断是Array还是Object，例如$('iframe')[0].contentWindow.arr.constructor==Array） 3. Object.prototype.toString.c
2020-11-07 21:11:06
218
原创 this指向误区
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> <div>div</di
2020-11-06 20:29:07
776
原创 jQuery基础笔记（2）
一.关于事件 e.preventDefault();阻止默认事件 e.stopPropagation();阻止冒泡事件 return false;即阻止默认事件又阻止冒泡事件； .blur(function(){}):失去焦点事件； .val():类比js的value，获取value值； .each(index,elem):类比js的forEach(),用于遍历jquery对象； .end():回退操作；例如：$('li').eq(0).class({color:'red'}).end().eq(5).c
2020-11-05 17:04:45
220
1
原创 jQuery基础笔记（1）
jquery基础知识： $( ):里面可以写css选择器，原声dom，jquery对象 ，null/undefined，函数function，selector/content等 jquery特有的选择规则（选出的是jquery对象） $(‘ul>li:first’);//第一个子标签 $(‘ul>li:eq(2)’);//下表为2的元素 $(‘ul>li:odd’);//下表为奇数的元素； $(‘ul>li:even’);//下表为偶数的元素； filter(’.box/
2020-11-04 16:17:46
262
原创 trim()作用
==trim()==的作用是去掉字符串两端的多余的空格，注意，==是两端的空格，==且无论两端的空格有多少个都会去掉，当然 中间的那些空格不会被去掉，如：String s = " a s f g “;String s1 = s.trim();那么s1就是"a s f g”，。trim()不仅可以去掉空格，还能去掉其他一些多余的符号，这些符号分别是：\t \n \v \f \r \x0085 \x00a0 ? \u2028 \u2029翻译过来分别是：水平制表符，换行符，垂直制表
2020-11-03 09:22:21
1985
转载 弹性布局（display:flex；）属性详解
参考：https://www.cnblogs.com/hellocd/p/10443237.html Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式：
2020-11-02 20:59:24
4784
原创 正则表达式语法（配例题：让100000000变成100.000.000）
var str="100000000"; var reg="/(?=(\B)(\d{3})+$)/g"; console.log(str.replace(reg,".")); 正则表达式语法： +： 代表前面的字符必须至少出现一次（1次或多次）。 *：代表前面的字符可以不出现，也可以出现一次或者多次（0次、或1次、或多次）。 ?：代表前面的字符最多只可以出现一次（0次、或1次）；或指明一个非贪婪限定符。要匹配 ? 字符，请使用 ?。* 和 + 限定符都是贪婪的，因为它们会尽可能多的匹配文字，只有在它们的后
2020-11-02 20:04:28
803
转载 搞清clientHeight、offsetHeight、scrollHeight、scrollTop
网页可见区域高：document.body.clientHeight 网页正文全文高：document.body.scrollHeight 网页可见区域高（包括边线的高）：document.body.offsetHeight 网页被卷去的高：document.body.scrollTop 1.clientHeight和offsetHeight属性和元素的滚动、位置没有关系它代表元素的高度，其中： clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度。对于行内
2020-10-24 16:19:01
284
原创 鼠标事件中clientX、offsetX、screenX、pageX、x的区别
鼠标事件中clientX、offsetX、screenX、pageX、x的区别: 一、clientX、clientY 点击位置距离当前body可视区域的x，y坐标(所在的窗口) 二、pageX、pageY 对于整个页面来说，包括了被卷去的body部分的长度 三、screenX、screenY 点击位置距离当前电脑屏幕的x，y坐标 四、offsetX、offsetY 相对于带有定位的父盒子的x，y坐标 五、x、y 和screenX、screenY一样 如图： ...
2020-10-24 13:20:00
630
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人