- 博客(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
308
原创 jQuery基础笔记（4）
事件委托*将多个子元素（li）的事件监听委托给父辈元素（ul）处理*监听回调是加载父辈元素上的*当操作任何一个子元素（li）时，事件会冒泡到父辈元素上（ul）*父辈元素不会直接处理事件，而是根据event.target得到发生事件的子元素（li），通过这个子元素调用事件回调函数事件委托的双方：*委托方：li*被委托方：ul使用事件委托的好处：*添加新的子元素，自动会有事件响应处理*减少事件监听的数量：n==>1jQuery的事件委托API:*设置事件委托：$(parentSel
2021-02-09 15:31:25
155
原创 微信小程序获取用户信息
为了提高用户对小程序安全的可信度，一般要在用户的操作下获取用户信息，而不是在用户刚一进入小程序小程序就自动获取了用户信息获取前的简洁页面获取后的简洁界面"获取用户信息"按钮（有open-type="getUserInfo"属性）点击会弹出一个窗口，询问用户允许还是拒绝获取用户信息，并通过给按钮绑定事件（bindgetuserinfo=“haddleGetUserInfo”）获取用户是否允许，若允许，则进行wx.getUserInfo()获取用户信息，将获取的新的信息更（setData）换掉data
2021-01-14 17:06:59
890
原创 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
317
原创 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
3248
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
174
原创 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
717
原创 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
171
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
205
原创 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
1730
转载 弹性布局（display:flex；）属性详解
参考：https://www.cnblogs.com/hellocd/p/10443237.htmlFlexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式：
2020-11-02 20:59:24
4622
原创 正则表达式语法（配例题：让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
654
转载 搞清clientHeight、offsetHeight、scrollHeight、scrollTop
网页可见区域高：document.body.clientHeight网页正文全文高：document.body.scrollHeight网页可见区域高（包括边线的高）：document.body.offsetHeight网页被卷去的高：document.body.scrollTop1.clientHeight和offsetHeight属性和元素的滚动、位置没有关系它代表元素的高度，其中：clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度。对于行内
2020-10-24 16:19:01
186
原创 鼠标事件中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
522
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人