JavaScript
Zyl_CN
这个作者很懒,什么都没留下…
展开
-
input各种筛选
1.标签上直接替换方法:JS 控制不能输入特殊字符<input type="text"class="domain"onkeyup="this.value=this.value.replace(/[^u4e00-u9fa5w]/g,'')";this.value=this.value.replace(/[^u4e00-u9fa5w]/g,'')JS 控制文本框只能输入数字...转载 2019-01-16 10:11:14 · 810 阅读 · 0 评论 -
DOM —【节点与元素的区别】
在 HTML DOM (文档对象模型)中,每个部分都是节点:文档本身是文档节点所有 HTML 元素是元素节点所有 HTML 属性是属性节点HTML 元素内的文本是文本节点 (包括回车符也是属于文本节点)注释是注释节点 Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。 NodeList 对象表示节点列表,比如 HTML 元素的子节点集合。 元素也可以拥有属性。属性是属性节点。...转载 2018-06-05 10:09:55 · 4356 阅读 · 0 评论 -
DOM —【创建元素与文本节点】
.creatElement() .creatTextNode()原创 2018-06-05 10:27:31 · 243 阅读 · 0 评论 -
DOM —【querySelector方法获取元素】
var OName=document.querySelector('.Name'); //class名获取方式var OId=document.querySelector('#id'); //id名获取方式var OType=document.querySelector('p'); //标签(元素)名获取方式注意: 该方法只会获取,匹配项中的第一个元素,如果没有找到该元...原创 2018-06-05 10:51:42 · 2904 阅读 · 0 评论 -
DOM —【通过style获取元素css属性】
var iLi=document.querySelector('li');var a=window.getComputedStyle(iLi).width||document.defaultView.getComputedStyle(iLi).width;//兼容写法,获取的是该元素的css样式(内联,外联和行内都可以获取)iLi.style.width='200px';//.style可...原创 2018-06-05 11:02:35 · 884 阅读 · 0 评论 -
DOM —【新建元素的添加方式】
insertAdjacentHTML()insertAdjacentText()insertAdjacentElement()原创 2018-06-05 12:05:58 · 252 阅读 · 0 评论 -
DOM —【操作指定元素】
对指定元素进行添加/删除/判断类的操作classList.add()classList.remove()classList.contains()原创 2018-06-05 15:25:32 · 142 阅读 · 0 评论 -
DOM —【client、offset、scroll三大系列】
client: var box=document.querySelector('.box');console.log(box.clientWidth); //获取元素的可见宽度(width+padding,不包括margin和border)只有数值,没有单位console.log(box.clientHeight); //获取元素的可见高度(width+padding,不包括m...原创 2018-06-05 15:48:50 · 526 阅读 · 0 评论 -
函数 —【测试编码URI的函数】
encodeURIComponent原创 2018-05-30 11:05:29 · 150 阅读 · 0 评论 -
函数 —【函数的创建及运行】
function fn(a,b){ //创建函数 a和b为形参 console.log(a + b); //函数体}fn(1,2) //调用函数 1和2为实参 输出为3function fn1() { console.log(123.);}fn1(); //输出为123....原创 2018-05-30 11:14:25 · 174 阅读 · 0 评论 -
函数 —【匿名函数创建及调用】
var test=function(a,b){ //创建函数 并赋予变量test; console.log(a + b); //函数体}test(1,2) //直接使用变量调用即可var test1=function() { console.log(123.);}test1(); //输出为123.(function(n...原创 2018-05-30 11:24:36 · 484 阅读 · 0 评论 -
函数 —【回调函数的创建和调用】
function test(callback){ callback(2); console.log('我是主题函数');}function callc(data){ console.log(data);}test(callc);将一个函数的调用委托给另一个函数进行执行,节省了代码的编写,优化了性能;注意:在运行test()函数的时候。代码的访问顺序是:先执行完自身的...原创 2018-05-30 11:32:11 · 405 阅读 · 0 评论 -
DOM —【对Dom属性的操作】
ele.getAttribute("XX")获取属性值ele.setAttribute("XX")替换或增加属性与值ele.removeAttribute("XX") 删除属性原创 2018-06-05 10:06:18 · 268 阅读 · 0 评论 -
DOM —【节点的操作】
appendChild()添加insertChild()指定位置添加replaceChild()指定位置替换removeChild()指定位删除cloneChild() 指定为复制原创 2018-06-04 21:02:39 · 124 阅读 · 0 评论 -
DOM —【节点的关系】
子节点:var oul=document.getElementsByTagName('ul')[0];console.log(oul.childNodes);console.log(oul.children);childNodes:是获取父元素下的所有子元素(包括回车空格在内的#text文本);而children则是只会把父元素下的所有元素节点返回,并不会返回(回车#text等)父节点:var...原创 2018-06-04 20:17:24 · 384 阅读 · 0 评论 -
正则 —【诠释】
字符类:/[^0-5]/ //表示匹配非0-5之间字符 [^..]非../\d/ //匹配任意一个数字0-9/\D/ //匹配任意非数字的字符/\s/ //匹配任意空白字符(如空格,换行符等)/\S/ //匹配任意非空白字符/\w/ //匹配任何英文字母,数字以及下划线量词:/ab?/ //表示匹配前一项b 0次或者1次/...原创 2018-06-11 20:47:50 · 122 阅读 · 0 评论 -
正则 —【正则的创建与测试】
正则的创建:var re=new RegExp('a','g');var re2=/a/g;// 通过new来创建一个正则对对象,// 其中参数1:指定了正则表达式的模式或者其他正则表达式;// 参数2:为可选模式的字符串,g全文匹配查询,i忽略大小写查询,m多行匹配查询;测试字符串中是否有指定项:var str ='abcauhfidsbg';var re=/a/g;var re2=...原创 2018-06-11 10:25:51 · 237 阅读 · 0 评论 -
事件 —【event事件】
var box =document.getElementsByClassName('box')[0];box.onmousedown=function (event) { var e=window.event||event; console.log(e.button);//鼠标点击返回点击值,左键返回0,滚轮返回1,右键返回2;}box.onclick=function (ev...原创 2018-06-05 17:06:25 · 170 阅读 · 0 评论 -
事件 —【事件的捕获与冒泡】
当你点击了一个事件的时候,系统会先从最外层进行捕获事件到此最深层的事件源,然后在从事件源冒泡到最外层的document。简单的一个例子,认清事件的执行顺序:<div class="box"> <div class="box1"></div></div>父元素和子元素都是捕获事件的时候: 结果为1,2var box =document.ge...原创 2018-06-06 17:20:40 · 196 阅读 · 0 评论 -
事件 —【事件概括】
在js中事件分为3种:一般事件、表单事件和页面事件。焦点事件:如blur、focus这一类事件不会反生冒泡。鼠标滚轮事件:如click、dblclick、mousedown、mouseout、mouseover等是当用户通过鼠标在页面执行操作时来触发的。滚轮事件:onscroll文本事件:textInput在文档中输入文本时触发键盘事件:keydown、keyup、keypress当用户通过键盘在...原创 2018-06-06 17:23:36 · 585 阅读 · 0 评论 -
事件 —【获取事件对象的信息和类型】
<div class="box"> <div class="box1"></div></div><script> var box=document.querySelector('.box'); box.onclick=function (event) { console.log(even原创 2018-06-06 17:33:30 · 771 阅读 · 0 评论 -
事件 —【事件的添加与删除】
addEventListener( “绑定类型”,函数,执行类型 )removeEventListener( “绑定类型”,函数 )原创 2018-06-06 18:05:01 · 587 阅读 · 0 评论 -
事件 —【委托事件】
var aLi=document.getElementsByTagName('li');var aUl=document.getElementsByTagName('ul')[0];for循环为每个li绑定点击事件,因为如果页面中拥有太多的对象的话,会影响速度与性能 所以我们可以用事件委托来优化我们的代码for(var i=0; i<aLi.length; i++){...原创 2018-06-07 09:52:41 · 144 阅读 · 0 评论 -
事件 —【事件集合】
onclick 鼠标点击ondblclick 鼠标双击onmousedown 按下鼠标时onmouseup 按下鼠标后抬起鼠标时onmousemove 当鼠标移动时onmouseover 当鼠标移动到某对象范围的上方onmouseout 当鼠标离开某...原创 2018-06-07 10:24:19 · 626 阅读 · 0 评论 -
事件 —【拖拽事件】
拖拽事件:拖拽前要给每个元素都添加draggable='true';才能让元素进行拖拽1、拖拽元素事件:事件对象为被拖拽元素:.ondragstart 拖拽前触发此事件,拖拽的一瞬间 .ondrag 拖拽前和拖拽结束之间连续触发 .ondragend 拖拽结束触发; 2、目标元素事件:事件对象为目标元素:.ondragenter 进入目标元素触发;相当于mouseover.ondra...原创 2018-06-07 11:46:18 · 614 阅读 · 0 评论 -
DOM —【Node类型】
Node类型一共有12种类型,其中最常用的有3种:Node.Element_Node(1)—元素节点;Node.Attribute_Node(2)—属性节点;Node.Text_Node(3)—文本节点;var oli=document.getElementsByTagName('li')[0];console.log(oli.nodeType);//可以使用.nodeType来查看属于什么节点...原创 2018-06-04 20:04:39 · 188 阅读 · 0 评论 -
函数 —【闭包函数的创建及调用】
JS中的闭包简单来说就是把外部作用域中的局部变量封闭起来,被封装起来的变量与封闭他的函数对象拥有相同的生命周期。闭包的特性:函数嵌套函数;函数内部可以引用外部的参数和变量;参数和变量不会被垃圾回收机制回收;function fn(){ var n=10; function add(){ console.log(n*2); } return add;...原创 2018-05-30 11:58:53 · 456 阅读 · 0 评论 -
函数 —【递归函数创建和调用】
要注意的是,递归函数原理就是,函数在自身的函数体内调用自身,所以要注意使用,防止进入死循环斐波那契数组案例:function test(n){ if(n==1){ return 1; } return n+test(n-1);}console.log(test(10))...原创 2018-05-30 12:08:01 · 177 阅读 · 0 评论 -
对象 —【对象的创建和获取】
// 对象的创建var myDog = { "name":"djg", "legs": 4, "tails": 1, "friends":["danni","xixi"]};// 对象属性的获取myDog.name;//获取对象myDog中的name属性的值;myDog["legs"]//获取对象myDog原创 2018-05-29 10:03:34 · 280 阅读 · 0 评论 -
字符串 —【返回指定位置的字符串】
charAt()原创 2018-05-28 09:28:07 · 2855 阅读 · 0 评论 -
数组 —【数组的创建与访问】
var myArray = ["qqq",123,"wer",88];// 一维数组的创建;var myArray = [["sss",123],["456","sg"]];// 二维数组的创建var a =myArray[1];// 一维数组的访问var a=myArray[1][0]// 二维数组的访问...原创 2018-05-27 22:14:02 · 282 阅读 · 0 评论 -
数组 —【往数组添加内容】
push() / unshift()原创 2018-05-27 22:16:16 · 1407 阅读 · 0 评论 -
数组 —【抽离(剔除)数组内容】
pop() / shift()原创 2018-05-27 22:18:23 · 264 阅读 · 0 评论 -
数组 —【遍历修改】
map()原创 2018-05-27 22:20:50 · 1415 阅读 · 0 评论 -
数组 —【遍历运算】
reduce()原创 2018-05-27 22:22:31 · 251 阅读 · 0 评论 -
数组 —【遍历筛选】
filter()原创 2018-05-27 22:23:39 · 915 阅读 · 0 评论 -
数组 —【遍历排序】
sort()原创 2018-05-27 22:24:27 · 721 阅读 · 0 评论 -
数组 —【翻转数组】
var array = [1,2,3,4,5,6,7];var newArray = [];newArray = array.reverse();结果为:newArray=[7,6,5,4,3,2,1]原创 2018-05-27 22:25:46 · 272 阅读 · 0 评论 -
数组 —【数组转化为字符串】
join()原创 2018-05-28 09:09:46 · 2221 阅读 · 0 评论 -
数组 —【合并数组】
.concat原创 2018-05-27 22:26:48 · 216 阅读 · 0 评论