- 博客(63)
- 收藏
- 关注
RSS订阅原创 关于css层叠样式表的一些有意思的小细节
内部样式指的是只对该网页起作用，如果使用内部样式表来渲染该网站，则需要每一张网页都改动，这样不仅降低了效率，也容易出错。这两种外部叠加模式都可以大大增加效率，只要修改其中的外部样式表，就可以修改使用该样式表的网站。层叠样式表分为三种形式：内嵌样式表、内部样式表和外部样式表。所谓的内嵌样式就是写在标记里面的，只对该行起作用。优先级：内嵌样式>内部样式>外部样式>默认样式。另外写在最后面的样式能覆盖写在前面的样式。今天我们来讲一下层叠样式表的写法和优先级。
2023-04-29 21:13:28
206
原创 有关DOM查找、CSS类样式、DOM节点过滤以及Jquery中的串联
一、有关DOM查找 :children() 查找儿子辈分的元素 :find() 查找儿子辈分、孙子辈分的元素 :parent() 紧接着的上一级父级元素 :parents() 上面的多级元素，包括父级祖级元素 :next() + 同级下一个 :nextAll() ~ 同级下面所有 :prev() 同级上一个 :prevAll() 同级上所有 :siblings() 同级所有不包含本身 <div id="divs"> <span>
2022-05-29 20:18:53
336
原创 JQ选择器的使用
一、什么是选择器 近似于js原生代码中的document.getElementById();document.getElementsByTagName();document.querySelectAll()就是能通过各种方式来选取到元素。 二、基本选择器： id选择器： $("#box").css("background","red"); class选择器： $(".box").css("background","red"); 标签选择器： $("span").css("background","red
2022-05-28 19:02:25
735
原创 有关DOM加载的相关知识点
一、版本 Jquery有这几种版本：1.X.X，2.X.X，3.X.X这几种。 1.X.X兼容性比较好 2.X.X和3.X.X兼容性不太好，尤其在IE8中；并且Jquery运用了es6语法，在2和3的版本中都不好使用。 二、统一版本 在电商网站中，都使用1.7或1.8版本的都行，每个版本都有所不同，运用的方法也有所不同。 三、DOM加载事件 JS中加载是window.οnlοad=function(){}，表示当DOM树加载完毕，div里面有img，必须div和img都加载完毕后，才可以执行js代码，不然轮
2022-05-27 20:32:38
221
原创 JS实现购物车结算效果
<style> tbody tr{height:100px;} tbody tr td{text-align:center;line-height:40px;width:200px;} #count{width:10px;height:10px;border:1px solid #ccc;margin-right:2px;text-align:center;} #val{width:30px;height:10px;border:1px solid #ccc;margin-right:2px;t
2022-05-27 19:11:34
552
原创 JS实现瀑布流效果
1、页面布局情况 准备好11张宽度值相同高度不同的图片来实现瀑布流效果。 *{padding:0;margin:0;} .main .box{float:left;} .main .box .pic{border:1px solid #000;padding:15px;box-shadow:0px 2px 0px 2px #ccc;border-radius:5%;} .main .box .pic img{width:200px;} 2、页面内容情况 <div class="main">
2022-05-25 17:32:53
1198
原创 JS中tab页签切换以及无缝滚动
1、tab页签切换 <ul id="uls1"> <li>新闻现场</li> <li>最新活动</li> </ul> <div id="box"> <ul id="uls2"> <li>生活成本飞涨，不少英国人将宠物遗弃</li> <li>被弃养宠物数量激增30%</li> <li>一只宠物狗站在一处投票站外</li>
2022-05-24 10:56:01
1007
原创 Ajax的创建打开发送接收以及Json页面的格式
首先Json是一种轻量级的交换数据的一种格式，用dreamweaver可以自主创建这样一张网页，里面可以放对象的任何数据，包括数组、函数等。对象调用属性一般分两种情况，有特殊字符的：obj[“margin-left”],若没有特殊字符的就是obj.userName;在数组中，前面要加双引号： { "username":张三， "age":18, "password":123456 } Json解析成对象：Json.parse(); Json解析成字符串：Json.stringify();这在以后从数
2022-05-22 15:31:49
269
原创 函数表达式之递归函数、闭包以及有关this的指向
1.递归函数：自己调用自己，例如： function fn(num){ if(num==1){ return 1； }else return numfn(num-1)； } alert(fn(5)); 即54321=120. 闭包函数：1.函数中还有一个函数 2.for循环中还有一个函数，例如： var userName=“张三”; var obj={ userName:“李四”， run:function(){ return function(){ return this.userName; } } }
2022-04-09 15:20:00
274
原创 变量的优先级以及垃圾回收机制(JS)
1.变量的优先级 先找本层的（本作用域）再逐级向外查找，例如： var a=10; function fn(){ var a=20; console.log(a);//控制台打印20 } console.log(a);//控制台打印10 因为都是找本级的变量，所以得到该答案 提升——参数——函数——变量 提升最低，最高的是变量，例如： function fn(){ var a=10; function a(){ return"111111111"； } console.log(a);//控制台打印10 }
2022-04-08 18:28:29
468
原创 有关对象的属性和方法的一些常用信息
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2022-04-04 21:37:01
323
原创 正则表达式之自动整理手机号码格式
不多说，上代码 在使用失去焦点之后可以自动整理手机号码格式 手机号码 +(86):＜input type="text" id="usertel"/> var usertel=document.getElementById("usertel").value; var usertel1=[]; usertel.onblur=function(){ usertel1=usertel.charAt[2]+"-"; usertel1+=usertel.charAt[6]+"-"; usertel=use
2022-03-08 16:12:23
269
原创 正则表达式之与字符串的方法
这里要讲3个有关正则表达式与字符串的方法 1、search var num1=/ab (ac){3} addd/; var reg1=RegExp.$5; var se=reg1.search(num1); document.write(se); 屏幕上打印4.表示下标位置为4，reg1是c。 2、match match用于全局模式，例如： var num2=/ab ac addd a/g; var reg2=“a”; var ma=num2.match(reg2); document.write(ma);
2022-03-08 15:16:13
206
原创 正则表达式之~分组、字符类
分组、字符类可以用()来表示。 要匹配第几组，可以在前面加上一个$符号，+数字。例如： var num1=/(baidu){3} jd taobao/; var reg1=RegExp.$1; alert(reg1); num1中表示baidu匹配3次，而弹出的reg1则是匹配第一个分组baidu。 再来看下面这个例子： var num2=/(baidu){3} jd taobao/; var reg1=“baidu”; var re=num2.replace(reg1,“111111”); documen
2022-03-08 14:38:12
219
原创 正则表达式之修饰符
1、逻辑符| 例如： var num1=/com|cn/ var reg1=“com”; console.log(num1.test(reg1)); 在控制台打印出一个true;换成构造函数写法的形式就是： var num1=new RegExp(com|cn); var reg1=“com”; document.write(num1.test(reg1)); 在屏幕上打印出一个true。 2、修饰符 i、g、m. 例如以下几个代码段：来解析一段网址url: var num2=new RegExp("Ht
2022-03-07 11:38:22
456
原创 正则表达式之限定符、（重复）
重复是以^开头，以符号结尾。例如这样一个案例：varnum=/[0−9]符号结尾。 例如这样一个案例： var num=/^[0-9]符号结尾。例如这样一个案例：varnum=/[0−9]/;表示是以0-9开头和结尾的。 关于重复有这样几种情况： 1、[n]表示只能限定这几位数 var num1=/^\d[10]KaTeX parse error: Undefined control sequence: \w at position 109: …限位数 var num2=/^\̲w̲[5,]/ var re
2022-03-07 10:34:36
524
原创 正则表达式中的转义符
今天要接触到的几个转义符如下： 1、首先0-9，a-z,A-z,都要用中括号[]，来表示， var num1=/[0-9]/; var reg1=00879; alert(num1.test(reg1)); 返回true;因为00879均在0-9的数字范围之内，同理/[a-z]/、/[A-Z]/，如果把它们写在一起的话，就是/[0-9a-zA-Z]/，若不匹配则返回false。 2、[]表示除了括号内的字符，如果/[0-9]/，如果num2.test(reg2);reg2是mmAS,则匹配为true,否则为
2022-03-06 20:56:47
14461
原创 JS中的事件阻止冒泡_事件阻止默认行为
在日常当中，由于事件委托，当一个大盒子div1中镶嵌着一个小盒子div2的时候，在执行div1的时候相继会执行div2,由于事件委托，会再一次执行div1.如果光执行div2的话，那么只会执行一次div1就结束了。这个时候需要用上事件阻止冒泡这个方式，执行div2和执行div1是两码子的事情。例如： var box1=document.getElementById("box1"); box1.onclick=function(e){ var e=window.event||e; if(e.stopPro
2021-09-07 10:45:35
213
原创 JS中的事件委托及事件对象属性的各浏览器兼容
JS中的事件委托及事件对象的属性 先来讲一讲事件对象的属性 这里的浏览器分成IE以及非IE这两种情况的属性，而IE则分成IE8及8以下，和IE9和10.这里需要考虑浏览器兼容性问题。 非IE这种情况一般指在谷歌、欧朋、safari等浏览器中运行。采用： 下面展示一些 内联代码片。 <div id="box"> 这里是一个盒子 <span>111111</span> <p>2222222</p> </div> var box=docum
2021-09-06 18:51:30
254
原创 事件——删除事件处理程序
事件——删除事件处理程序 直接切入主题了，根据上节课添加事件处理程序来看，主要是把添加事件改成删除事件，把dom 0级的dom. onclick =function (){ alert (1)；//dom 0级的添加事件 }改成： dom. removeclick =function (){ alert (1)；//dom 0级的删除事件 } ...
2021-08-21 17:34:15
128
原创 JS中跨浏览器兼容的添加事件
今天来讲讲几个元素的添加事件。 先来讲一讲HTML 的添加事件，原代码是这样的：这是一个盒子，如果在HTML 中添加事件，是这样的：这是一个盒子 function danji (num 1,num 2){ alert (num 1+num 2); } 或者还可以这样表达： 这是一个盒子 function . danji (num 1,num 2){ return num 1+num 2; } 但是有一个值得注意的地方:后面执行的代码会覆盖前面的代码，例如: 这是一个盒子 functi
2021-08-17 12:04:13
293
原创 dom 的其他类事件
dom 的其他类事件： 1.onfocus 事件 2.onblur 事件 3.onresize 事件 4.onscroll 事件 5.onchange 事件
2021-08-15 19:53:36
291
原创 JS中dom的键盘事件
今天来给大家讲一讲dom 的键盘事件： 键盘事件分为这几种： onkeydown 、onkeyup 、 键盘的属性有这一种： keycode 先来说说键盘的事件： onkeydown 指的是键盘上的键按下去的一瞬间执行的代码，例如： document. onkeydown =function （）{ alert (1); } onkeyup 指的是键盘上的键弹起来的一瞬间执行的代码，例如： document. onkeyup =function (){ alert (1); } keycode 指的是按下去
2021-08-15 12:52:40
1126
原创 dom的鼠标事件集合
dom 的鼠标事件: 1.onclick 单击 2.ondblclick 双击 3.oncontextmenu 右击 4.onmouseover 移入 5.onmouseout 移出 6.onmousemove 一直在内移动 7.onmousedown 鼠标左键按下 8.onmouseup 鼠标左键弹起 基本格式: var mouse =document. getElementById ("btn "); mouse. onclick =function (){ alert (1); } 点个小星星✨再走
2021-08-10 19:21:32
181
原创 标准模式和混杂模式的可视宽高
今天来谈一谈dom 的最后一个知识点，有关标准模式和混杂模式的可视宽高。这个可视宽高分为两种，一个是文档的可视宽高，即我们所说的显示内容部分的宽和高，还有一个就是页面主体部分的宽和高，即body 部分的。下面我们来具体看一下: 标准模式的写法:document. documentElement. ...
2021-07-18 11:23:24
176
原创 dom元素的大小和元素的偏移量
今天来讲一下dom 的元素大小和元素偏移。 一共要讲这几个方面： offsetWidth, offsetHeight, offsetLeft, offsetTop 首先来看一下这个例子： 做一个定时器，每隔50秒自动增加3个像素的宽度。 var box =document. getElementById ("box "); setInterval (function (){ box. style. width =parseInt (box. offsetWidth) +3+“px ”; }，50) 这里要讲
2021-07-16 16:43:44
173
原创 字符串的用法或方法
今天来讲一讲字符串的用法，字符串的用法和数组的用法有些方面非常的相似，但也有很多不同之处，让我们一起来学习一下： charAt（） 例如：var str=“abcdef”； var str1=str.charAt（4）; alert（str1）; 下标从0开始数，数五个数，输出“e”; indexOf（） 例如：var str=“abcdefg”; var str1=str.indexOf（d）; alert（str1）; 下标从0开始数，数到“d”的位置，弹出3 lastindexOf（） 例如：var
2021-03-23 08:24:12
224
原创 JS中字符串的创建以及length的用法
今天来讲两个内容，一个是字符串的创建方式，还有一个就是有关字符串“length”的用法，先来看下字符串的创建方式吧！ 字符串的创建有两种形式： var arr=“js字符串asxcfgrty”; alert（arr）; 此时弹出该字符串，若 alert（typeof arr）; 则为string类型，因为它是一个字符串类型。 如果我们这样创建： var arr=new Array（“js字符串asxcfgrty”）; alert（arr）; 这样也是可以弹出该字符串的。 alert（typeof arr）;
2021-03-21 10:58:04
410
原创 JS中冒泡排序从小到大以及从大到小
今天来讲一讲如何用JS来实现冒泡排序，冒泡排序可以分为从小到大排序以及从大到小排序，我们分别来看一下： 从小到大排序： var arr=[4，53，145，6，9，0，23，79，255，77]; for（var i=0;i<arr.length;i++）｛ for（var j=i+1;j<arr.length;j++）｛ if（arr[i]>arr[j]）｛…// var brr=arr[i]; arr[i]=arr[j]; arr[j]=brr; ｝ ｝ document.write（
2021-03-12 22:51:37
5307
原创 Js中数组的用法或方法（二）
JS数组中的重点方法，一起来get✔ 这一节我要讲的几个常用的数组用法有：slice（）、sort（）、splice（）、toString（）、unshift（）、这五个主要的方法。不多说，开始上代码！ 1.slice（）：有两个参数，第一个表示开始位置，下标从0开始，第二个表示结束位置，下标从1开始数，例如： var arr=[1，2，3，5，8，4，7，9]； var brr=arr.slice（3，7）； alert（brr）；//第一个"3”表示第四个“5”，而第二个“7”表示第七个“7”，所以截取
2021-03-06 08:25:04
161
原创 Js中数组的用法或方法（一）
今天来讲一讲Array数组的用法（第一集）： 1-concat（） 2-join（） 3-pop（） 4-push（） 5-shift（） 1、var a1=[“张三”]; var a2=[“李四”]; alert（ a1.concat（a2））;//输出“张三，李四”用逗号分别隔开 2、var a1=[1，2，3]； alert（a1.join（“>”））;//表示用“>”符号去连接这几个数组项，输出“1======>2======>3” 3、var a1=[1，2，3]; ..
2021-03-03 11:12:37
223
原创 Js中二维以及三维数组的用法
今天来讲一讲js中二维和三维数组的运用、首先来讲一讲二维数组，当读者学会了二维，其实三维数组也是一样的道理，很简单不多说了，上代码✔ var b1=arr[“我要吃粉”,[“我要吃盖浇饭”,“要吃蒸米饭”，“要吃鸡蛋炒饭”，“要吃扬州炒饭”，“要吃竹筒饭”，“要吃荷叶饭”，“要吃黄焖鸡米饭”]]; alert（b1[0]）;//输出我要吃粉 alert（b1[1][3]）;//输出要吃扬州炒饭 释义：下标从0开始，第一组为0，第二组为1。而在第二组中列举出了很多项，也是从下标为0开始依次往后数，当数到第四个
2021-03-03 09:36:10
1596
原创 Js中类似抽奖活动案例
今天来讲一讲数组的使用以及一个类似抽奖活动的一段代码： 先来讲讲数组：是自定义变量的。 有两种定义方式：var a1=new Array（“张三”，4，5，7，“js”） var a2=arr[“张三”，2，6，8，“笨猪aaa”]； 来讲一讲一个类似抽奖活动效果的代码：有两个按钮button，一个开始按钮，一个结束按钮，还有一个存放奖品的盒子，当点击开始按钮时，盒子里面的奖品开始变换，以每隔0.05s变换一次，结束时点击结束按钮，就可获得自己所抽取的奖品了，话不多说，现在开始抽奖吧！ ...
2021-02-28 17:52:15
253
原创 JS实现轮播图效果
今天来讲一讲如何用js代码写一段轮播图效果: var index=0; var i; var pic=document.getElementsByTagName（“#box ul li”）; var jiantou=document.getElementsByTagName（“span ul li”）; setInterval（function（）｛ for（i=0;i<pic.length;i++）｛ pic[i].style.display=none; ｝ index++; pic[index].
2021-02-25 09:51:50
689
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人