- 博客(36)
- 收藏
- 关注
RSS订阅原创 jQuery 的 stop（）和 delay（）方法
stop（）：1.立即停止当前动画, 继续执行后续的动画$(“div”).stop();$(“div”).stop(false);$(“div”).stop(false, false);2.立即停止当前和后续所有的动画$(“div”).stop(true);$(“div”).stop(true, false);3.立即完成当前的, 继续执行后续动画$(“div”).stop(false, true);4.立即完成当前的, 并且停止后续所有的$(“div”).stop(true, tru
2020-08-27 16:27:03
298
原创 本地存储数据格式
本地存储里面只能存储字符串的数据格式 把我们的数组对象转换为字符串格式JSON.stringify()<script> let todolist = [{title: '123',done: false}]; localStorage.setItem("todo", JSON.stringify(todolist)); //"todo"为要创建或更新的键名，第二个参数为要创建或更新的键名对应的值</script> .
2020-08-26 12:03:07
580
原创 jQuery 多库共存
如果$ 符号冲突 我们就使用 jQueryjQuery.each();让jquery 释放对$ 控制权 让用自己决定 (自定义)<body> <div></div> <span></span></body><script> //封装函数$ $(function() { function $(ele) { return.
2020-08-24 17:05:36
226
原创 jquery 事件处理on
1.on可以绑定1个或者多个事件处理程序<div></div><script>$("div").on({ mouseenter: function() { $(this).css("background", "skyblue"); }, click: function() { $(this).
2020-08-24 12:08:09
149
原创 jQuery遍历元素
each() 方法遍历元素<script> var arr = ["red", "green", "blue"]; $("div").each(function(i, domEle) { console.log(i); console.log(domEle); $(domEle).css("color", arr[i]); sum += parseInt($(domEle).text()); }) console.
2020-08-22 20:39:47
227
原创 jQuery设置类样式的方法
<script> // 操作样式之css方法 $(function() { console.log($("div").css("width")); // $("div").css("width", "300px"); // $("div").css("width", 300); // 属性名一定要加引号 $("div").css({
2020-08-22 20:17:27
290
原创 jQuery 克隆元素
$(“ul li”).eq(0).clone().appendTo(“ul”);把ul里的第1个元素克隆插入到ul的尾部；
2020-08-22 20:13:06
352
原创 jQuery 筛选方法
parent()$(" li ").parent()， 查找父级；children()$(" ul “).children(” li “)，相当于 $(” ul>li ")，最近子级；find()
2020-08-21 12:01:56
163
原创 attr 和 prop 方法修改元素的属性节点
attr 方法 $("span").attr("class"); $("span").attr("abc", "123");作用:获取或者设置属性节点的值，可以传递一个参数, 也可以传递两个参数，如果传递一个参数, 代表获取属性节点的值；如果传递两个参数, 代表设置属性节点的值。注意点：如果设置的属性节点不存在, 那么系统会自动新增。$(“span”).removeAttr(“class abc”);移除多个属性节点则在其之间加空格即可。prop 方法 $("span").prop
2020-08-20 19:41:30
264
原创 移动端 拖拽元素
** （1） 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置（2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子（3） 离开手指 touchend:**e.targetTouches[0].pageX 、e.targetTouches[0].pageY这两个为手指移动时 在页面上的坐标；<script> var div = document.querySelector('div'); var startX
2020-08-19 21:34:08
223
原创 九宫格抽奖 项目总结
let arr =[0,1,2,4,7,6,5,3];rewards[arr[j]].style.border='5px solid #b33939';给每个元素框标号，实现顺时针变化；let total = parseInt(Math.random() * 10) + 13;//动画执行次数Math.random()生成一个随机小数；let time = setInterval(function(){}, 200);设置计时器，每隔200ms 执行一次function；完整的js代码：
2020-08-19 12:08:45
187
原创 offset 、client 、scroll 三大系列总结
offset 系列let father = document.querySelector(’.father’);let son = document.querySelector(’.son’);1.可以得到元素的偏移位置 , 返回的不带单位的数值console.log(father.offsetTop);console.log(father.offsetLeft);它以带有定位的父亲为准 如果么有父亲或者父亲没有定位 则以 body 为准。console.log(son.offsetLeft
2020-08-19 10:32:46
133
原创 鼠标事件对象 MouseEvent 标题重复率高
<script> document.addEventListener('click', function(e) { 1. client 鼠标在可视区的x和y坐标 console.log(e.clientX); console.log(e.clientY); 2. page 鼠标在页面文档的x和y坐标(常用) console.log(
2020-08-18 12:00:49
70
原创 this 指向问题 标题重复率高。。。
this 指向问题 ：一般情况下this的最终指向的是那个调用它的对象1.全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）<script> console.log(this); function fn() { console.log(this); } window.fn(); window.setTimeout(function() {
2020-08-17 17:11:00
89
原创 setInterval（）和 setTimeout（） 计时事件
用法：let time = setInterval(function(){}，ms)第一个参数： 一个函数第二个参数：一个周期的时间（单位是毫秒ms）执行时调用的是 function（），时间间隔为一个周期。
2020-08-15 19:28:06
200
原创 注册事件两种的方法
传统方式注册事件后面注册的事件会覆盖之前的。<script> let btns = document.querySelector('button'); btn.onclick = function() { alert('123'); } btn.onclick = function() { alert('456'); }</script>.
2020-08-14 20:41:23
253
原创 DOM的重点核心
DOM(文档对象模型)获取的DOM元素是一个对象。包括 文档、元素、节点。针对于元素的操作主要有 ：创建、增、删、改、查、属性操作、实践操作。1.创建元素：1.document.writedocument.write(“标签的代码及内容”);例：document.write ("<p>123123</p>");2.innerHTML对象.innerHTML=“标签及代码”;例：element.innerHTML = "htmlString";3.crea
2020-08-14 19:44:46
126
原创 使用 for ... in遍历对象属性
for in 最常用的地方应该是用于调试，可以更方便的去检查对象属性例’:被调用时迭代传入对象的所有可枚举属性,然后返回一个所有属性名和其对应值的字符串<script>var obj = {a:1, b:2, c:3}; for (var k in obj){ console.log("obj." + k + " = " + obj[k]); }</script>每次获取都会打印出一个值：// Output:// “obj.a = 1”/
2020-08-14 15:36:23
365
1
原创 复选框需要全部选中，才令全选框被选中
<script> let j_cbAll = document.getElementById("j_cbAll"); let j_tbs = document.getElementById("j_tb").getElementsByTagName("input"); j_cbAll.onclick= function(){ // console.log(this.checked); for(let i=0;
2020-08-13 22:02:26
262
原创 操作元素，修改样式，属性，内容的基本步骤
获取元素注册事件 & 处理程序 <script> var div = document.querySelector('div');//获取元素 //注册事件 & 处理程序 div.onclick = function() { // div.style里面的属性 采取驼峰命名法 this.style.backgroundCo..
2020-08-13 16:58:41
257
原创 实现按钮控制图片的播放
<body> <div id = "box"> <table> <tr> <td><button id="last">上一张</button></td> <td><button id="next">下一张</button></td> </tr><br/>
2020-08-13 14:47:36
207
原创 JavaScript 预解析 又是重复率过高
1.浏览器在执行JS代码的时候会分成两部分操作：预解析以及逐行执行代码，也就是说浏览器不会直接执行代码, 而是加工处理之后再执行。2.预解析规则:1.将变量声明和函数声明提升到当前作用域最前面2.将剩余代码按照书写顺序依次放到后面3.注意点通过let定义的变量不会被提升(不会被预解析)例：<script> //解析前： var a = 666; test(); function test() {
2020-08-12 22:18:48
115
原创 变量的作用域 啊啊啊啊啊标题重复率过高
变量在作用域链查找规则1.先在当前找, 找到就使用当前作用域找到的;2.如果当前作用域中没有找到, 就去上一级作用域中查找;3.以此类推直到0级为止, 如果0级作用域还没找到, 就报错.// 全局作用域 / 0级作用域 var num = 123; function demo() { 1级作用域 var num = 456; function test() {
2020-08-12 22:13:41
62
原创 JavaScript 数组的查改增删及其常用方法
1.获取数组中索引为1的那个数据 (查)console.log(arr[1]);2.将索引为1的数据修改为m (改)arr[1] = “m”;将索引为1的数据修改为d, 索引为2的修改为earr[1] = “d”;arr[2] = “e”;或arr.splice(1, 2, “d”, “e”);参数1: 从什么位置开始参数2: 需要替换多少个元素参数3开始: 新的内容3.在数组最后添加数据 (增)arr.push(“d”);push方法可以在数组的最后新增一条数据, 并且会将
2020-08-11 16:08:33
320
原创 判断 a === b 的语句时的注意点
=== 不仅会判断取值是否相等, 并且还会判断数据类型是否相等 <script> // 注意点: prompt返回值是字符串类型 let str = prompt("请输入一个1~7整数"); // 将字符串类型转成数值类型， // +/-底层本质上就是调用了Number函数。 let day = +str; if (1 === day){
2020-08-11 11:37:51
188
原创 四种数据类型转换字符串类型的 三种方法
1.Number类型2.Boolean类型3.undefined类型4.null类型在JavaScript中如果想将以上的四种基本数据类型转换为字符串类型, 常用的方法有三种1.对于Number类型和Boolean类型来说, 可以通过 变量名称.toString()的方式来转换2.可以通过String(常量or变量);转换为字符串3.还可以通过 变量or常量 + “” / 变量or常量 + ''转换为字符串第一种方法： let str = value.toString(); 注
2020-08-10 21:57:00
9200
原创 javascript变量定义
使用var定义一个变量时，var num = 111；若第二次定义这个变量，var num = 123；第二次定义会覆盖第一次的数据。在控制台中并不会报错。但会影响我们所定义的程序，不方便查找bug。<script> var num = 111; var num = 123; console.log(num); </script> 使用let定义变量则会出现报错，查找的bug的位置。<script&
2020-08-10 20:54:57
74
原创 type=submit表单提交
type=submit 是发送表单(1)Submit将表单提交(form.submit())作为其onclick后的默认事件，Button并非如此(2)表单提交时，所有具有name属性的html输入元素(包括input标签、button标签、select标签等)都将作为键值对提交，除了Submit对象。Submit对象只有在自己被单击后的提交中才会作为键值对被提交。οnclick="form1.action='a.jsp';form1.submit();" 这样就实现了submit的功能了。
2020-08-08 22:23:57
2462
原创 Email的验证源码
<script> function validate_form(thisform) { with(thisform) { if(validate_email(email,"email must be filled out.")==false) { email.focus; } else { alert("validate successful."); } } } func
2020-08-08 17:24:00
283
原创 indexOf 的 使用啊啊啊标题重复率过高
示例： apos = value.indexOf("@"); dotpos = value.lastIndexOf(".");获取@的位置值；获取最后一个“.”的位置值。
2020-08-08 17:11:54
51
原创 动态菜单栏的设置
设置动态菜单栏的重点在于 hover的使用上，ul:hover{} // ul会显示出想要的效果，而并非所以父子元素都实现。<style type="text/css"> ul{padding:0;margin: 0;} #nav {line-height: 30px;list-style-type: none;} #nav li {float: left;width:150px;text-align: center; background: #AAAAAA}
2020-08-07 17:26:11
402
1
原创 an alt attribute must be present on＜img＞elements解决方案
<img class="x" src="images/eg_mouse.jpg" alt="mouse"/>alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。img 标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。...
2020-08-07 09:47:24
10944
1
原创 float:left的应用
float:left（左浮动）使指定元素脱离普通的文档流而产生的特别的布局特性。并且FLOAT必需应用在块级元素之上。<style type="text/css"> body {font-family: arial, 宋体, serif;font-size:18px;} ul{padding:0;margin: 0;} #nav {line-height: 30px;list-style-type: none;background: #AEAEAE;} #nav li {fl
2020-08-06 22:49:36
2389
原创 em 和 px , pt字体单位的区别
<style type="text/css"> p.p1{text-align: center;color: #FF0004;} p.p2{letter-spacing: 1em;text-decoration: underline;text-indent: 4em;line-height: 20pt;} p.p3{letter-spacing: 0.625em;word-spacing:1em;text-transform: capitalize;} </style> ``
2020-08-06 12:11:52
412
原创 HTML在框架1调用网页，于框架2中显示网页
主网页：设置为上下结构，下部分为左右结构。<frameset rows="20%, 80%"> <frame src="汇总-top.html" name="top"> <frameset cols="25%, 75%"> <frame src="汇总-left.html" name="left"> <frame src="汇总-right.html" name="right"> </frameset></fram
2020-08-05 20:03:30
486
原创 div层布局解释
标签可定义文档中的分区或节，可以把文档分割为独立的、不同的部分。示例：<body><div id="all" style="border:red 1px solid; position:absolute; left:29px; top:12px; width:165px; height:104px;">div层布局示例</div></body>定义页面所以内容；边界：红色 1px实
2020-08-05 13:42:32
327
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人