2021年09月_杨十八的小脑瓜嗡嗡的

原创 JS事件冒泡与捕获学习笔记

冒泡和捕获机制描述冒泡从目标对象往父元素依次触发父元素的绑定事件捕获从父元素往目标对象依次捕获触发绑定事件事件冒泡捕获函数描述e.addEventListener(事件, 方法, 是否捕获或冒泡)捕获冒泡取决于true(捕获)还是false(冒泡)阻止冒泡函数描述兼容性e.stopPropagation()执行到本次冒泡不再往上冒泡IE兼容差event.cancelBubble()执行到本次冒泡

2021-09-15 20:15:09 93

事件事件对象事件对象描述兼容性function(e){}此时的e就是事件对象IE不兼容标准浏览器window.event此时event是事件对象IE兼容兼容性处理 var event=window.event|e事件对象的常见属性属性描述altKey事件发生的时候是否同时按下了Alt按键ctrlKey事件发生的时候是否同时按下了Ctrl按键clientX事件发生时鼠标指针离浏览器窗口左侧的距离，等价于xc

2021-09-15 20:12:45 75

原创浏览器元素定位笔记

浏览器元素定位名称描述document.documentElement.clientWidth元素内容区宽度加上左右内边距宽度。视图窗口document.documentElement.clientHeight元素内容区高度加上上下内边距高度。视图窗口document.body.offsetWidth获取网页文档完整宽度document.body.offsetHeight获取网页文档的完整高度ele.offsetTop元素的上外边框至包含元素的上内

2021-09-15 20:11:31 100

原创 JS 增删留言案例

HTML部分<body> <div id="box"> <input type="text" name="" id="inpu" value="" /> <button type="button">发送</button> <ul id="leave"> </ul> </div> </body>JS部分<script type="text/javascr

2021-09-13 19:18:16 144

原创 JS 获取操作删除节点

获取节点查询节点方法名方法含义document.getElementById()根据id属性查询单个标签document.getElementsByClassName()根据class属性查询多个标签(ie8)：HTMLCollectiondocument.getElementsByName()根据name属性查询多个标签：HTMLCollectiondocument.getElementsByTagName()根据tab标签名称查询多个标签：HTMLCol

2021-09-13 19:04:05 547

原创 jquery 元素筛选选择器

元素筛选选择器方法名方法含义.children()查找元素就近一级元素.find()查找当前元素下所有匹配元素.parent()查找当前元素上一级父元素.siblings()查找当前元素的所有同级元素.nextAll()查找当前元素之后的同辈元素.prevAll()查找当前元素之前的所有同辈元素.hasClass()检查当前元素是否含有某个类名如果有返回true 如果没有返回false（“父元素>子元素”）层级选择器

2021-09-13 08:55:25 112

原创 jquery 获取元素内容

获取元素内容元素内容元素文本值元素值html()text()val()获取元素内容<div id="">1111</div>console.log($('div').html())//结果为 <span>1111</span>// 与原生JS innerHtml类似获取元素文本内容<div id="">1111</div>console.log($('div').html())//

2021-09-13 08:54:14 2035

原创 Jquery 获取元素属性值

获取属性获取内置属性获取自定义属性prop( ‘value name’,‘value’)attr(‘value name’,‘value’)jquery中内置属性只能用来获取内置自定义只能用来获取内置内置属性$('.checkall ').prop('checked')//获取值$('.checkall ').prop('checked',true)//修改值自定义属性$('.checkall ').attr('indexx')//获取值$('.checkall

2021-09-13 08:52:48 8248

原创 JS 数组2-3 高级

every()查询数组中每个是否符合条件var arr = ['admin', 'admin', 'adminsss'] var flag = arr.every(function(value, index, array) { return (value.length >= 6 && value.length <= 10) }) console.log(flag) //返回false 因为有其中一个或多个不满足>=6s...

2021-09-10 13:03:19 136

原创 JS 2-2数组常用的方法学习笔记

定义数组var arr=[1,2,3]遍历数组for(var i=0;i<=all.length;i++){ console.log(all[i])}增加数组元素两种方法all.push(15)//结果 [1, 2, 3, 4, 15] "末尾添加"all.unshift(15)//结果 [15,1, 2, 3, 4] "开头添加"删除数组元素两种方法arr.pop() //末尾删除数组元素//结果 [1,2]arr.shift()//开头.

2021-09-09 20:13:51 93

原创 JS 冒泡排序

冒泡就是从小到大每次循环确定一个最大值也就是循环次数外层循环确定循环次数外部循环为什么要-1?因为判断数组长度-1次就能把最大值判断出来了内部循环为什么要同时-i并且-1?因为每次外部循环都确定了一次最大值就不用在比这个最大值减少一次比较 -1就是因为数组是0开始比length少 1所以要-1 预防(a[10]去比a[11])var a = [35,10,15,20,1,26,80,11,0,1,25] ...

2021-09-09 19:31:45 124

原创 JS 2-3 date对象

常用的时间对象New Date() //获取当前时间getDate()//根据本地时间返回指定日期对象中的天getHours()//根据本地时间返回指定日期对象中的小时getFullYear()//根据本地时间返回指定日期中的年份GetMonth()//根据本地时间返回指定日期对象年份 (从0开始 0就是一月)GetSeconds()//根据本地时间返回秒...

2021-09-09 09:21:47 75

原创 2-1 jquery 获取元素属性

prop获取修改多个属性$('a').prop('property')//获取值$('a').prop('property','value')//设置值 //多个属性值写法$('a').prop({ property1:value, property2:value, ........})attr获取修改多个属性$('a').attr('property')//获取值$('a').attr('property','value')//设置值 //多个属性值写法...

2021-09-08 22:17:16 190

原创 JS 倒计时案例笔记

HTML部分JS部分//获取对象var year=document.querySelector('.year')var montn=document.querySelector('.month')var day=document.querySelector('.day')var ul=document.querySelector('ul')var lis=ul.querySelectorAll('li')var p=document.querySelector('p')//单击.

2021-09-08 19:14:14 100

原创 JS 1-10 Math 常用的对象

向上取整Math.ceil()向下取整Math.floor()四舍五入Math.round(5/2)返回绝对值Math.abs()返回 0 ~ 1 之间的随机数:Math.random()返回最小值Math.min()返回最大值Math.max()返回幂次值Math.pow()返回平方根Math.sqrt()...

2021-09-08 11:55:42 65

原创 JS 简单购物车全选单选结算案例笔记

效果图HTML部分<div id="box"> <ul class="tab"> <li><input type="checkbox" name="" id="" value="" class="checkall" />全选</li> <li>商品</li> <li>单价</li> <li>数量</li> <li

2021-09-07 09:35:44 691

原创 JS this指向问题

全局函数 this指向window对象对象绑定的函数this指向对象本身//全局函数指向 window对象 function th(){ console.log(this) } th() var but=document.querySelectorAll('button') for(var i=0;i<but.length;i++){ but[i].addEventListener('click',function(){ this.style.ba.

2021-09-06 13:56:22 64

原创 1-10 jquery 手风琴

HTML部分 <ul> <li class="box"> <a href="#"> <img src="./img/c.png" alt="" class="big"> <img src="./img/c1.jpg" alt="" class="small"> </a> </li> <li> <a href="#"> &

2021-09-05 20:01:59 81

原创 1-9 jquery fadeTo不透明度

结构<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>JS $(function(){ $('ul li').hover(function(){ $(thi.

2021-09-05 17:27:59 123

原创 jquery 1-8 淡入淡出

HTML部分<body> <button type="button">淡出</button> <button type="button">淡入</button> <button type="button">切换</button> <div></div> </body>JS部分<script type="text/javascript"> $

2021-09-05 17:03:27 70

原创 jquery 1-7停止排队

当一个对象反复触发动画时候会不断的累计执行次数这时候就需要阻止上一次动画$('.nav>li').hover(function() { $(this).children('ul').stop().slideToggle(1000) }) })stop() 写在前面写在后面会直接停止...

2021-09-05 16:51:48 60

原创 1-6 jquery 显示隐藏

显示$('button').eq(0).click(function() { $('#box').show(1000, function() { console.log(1) }) })隐藏$('button').eq(1).click(function() { $('#box').hide(1000, function() { console.log(2) }) })切换显示隐藏$('button'.

2021-09-05 14:32:32 77

原创 jquery 1-6 jquery 排他思想增删类名

CSS代码 .item { display: none; } .disb{ display: block; }JS代码 $(function() { $('ul li').mouseover(function(){ var index=$(this).index() //获取下标方便对应元素显示隐藏 // tab栏切换排他思想 $(this).css({

2021-09-05 12:45:23 208

原创 jquery 1-5 类名添加删除

$(function(){ $('#box').click(function(){ $(this).addClass('back') //添加类名 $(this).removeClass('back') //删除类名 $(this).toggleClass("back"); //如果有则删除如果无则添加 } ) })注意:如果元素为ID添加class类时需要考虑样式优先级手动提高...

2021-09-04 20:42:01 269

原创 jquery 1-4 CSS样式笔记

$(function(){ $('div').click(function(){ $(this).css('width')//只写一个值时候是获取属性值 $(this).css('width','10px')//写两个时候是修改属性值 console.log($(this).css('width')) })})注意:如果属性值是数字比如100px 直接写100也是可以的...

2021-09-04 20:15:59 81

原创 jquery和JS排他思想

<body> <button></button> <button></button> <button></button> <button></button> </body> <script type="text/javascript"> $(function() { $('button').click(function() { .

2021-09-04 16:53:51 140

原创 jquery 1-3 扩展

//获取元素 $('ul:odd').css('background', '#e3e3e3') //获取就近子元素 $('.nav').children('p') //获取父元素下所有匹配元素 $('.nav').find('p') //获取子元素的父元素 $('.navp').parent() //获取元素的兄弟元素不判断标签只要有同级标签就算兄弟 $('p').siblings() // console.log($...

2021-09-04 16:07:56 82

原创 jQuery 1-3 筛选选择器笔记

<body> <div>111</div> <div>111</div> <div>222</div> <div>333</div> </body> <script type="text/javascript"> $('div:eq(2)').css('color','#fff')//下标 $('div:first').css('color'.

2021-09-04 13:18:35 172

原创 jQuery 1-2隐式迭代

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/jQuery.js" type="text/javascript" charset="utf-8"></script> </head> <style type="text/css"> div{ .

2021-09-04 13:08:58 92

原创 Jquery 1-1 笔记

jQuery获取以 $()来进行获取没有JS的一些方法jQuery获取到的对象是一个伪数组Dom对象和jquery转换 //JS原生 var a=document.querySelector('#a1') //转换jQuery对象 console.log($(a)) //转换DOM对象 $(a).get() //转换为DOM对象 $(a)[0].style...

2021-09-04 12:41:36 75

原创简单的购物车案例

2021-09-04 10:36:59 73

原创 2-2 函数返回值

在函数中可以使用return来设置函数的返回值，return后面的值将会作为函数的执行结果返回，需要定义一个变量来接收函数的返回值。return后面的值可以是任意类型对象或函数等都可以作为返回值 function sum(a,b,c){ var sumall=a+b+c return sumall //返回值 sumall } //定义一个值保存返回的值 var retusum=sum(1,2,3) console...

2021-09-03 15:28:55 135

原创 2-1 JavaScript 函数

function 函数调用 function cli(){ console.log(123) } //调用时候需要函数名+() //不调用是不执行的 //可以再函数内通过函数名调用另一个方法减少代码量形参和实参 function cli(i,ss){ console.log(i,ss) //我是实参 } ..

2021-09-03 11:09:46 90

原创 1-10JS对象与for in 笔记

var sall={ name:'张三', age:18, cm:172, } //k 可以理解为形参 sall代表要循环的对象 for(var k in sall){ console.log(k) //k此时代表属性名 sall[k]代表属性名对应的属性值 console.log(k,sall[k]) }sall.age 对象名>属性名得到属性值...

2021-09-03 10:44:44 99

原创 1-9 循环生成对象更改样式

var di=document.querySelector('div') for(var i=1;i<=100;i++){ di.innerHTML+='<h3>'+i+'</h3>' } //获取创建的对象伪数组 var h3=document.querySelectorAll('h3') //计算累加第几个开始计算 for(var i=0;i<=100;i+=5){ h3[i].sty...

2021-09-03 09:30:13 60

原创 JS判断函数奇偶性

奇数 var jis=null; for (var i = 1; i <= 99; i++) { if(i%2!=0){ jis+=i console.log(jis) } }偶数 var sum = null; for (var i = 1; i <= 99; i++) { if(i%2===0){ sum += i console.log(sum) } }...

2021-09-03 09:26:30 299

原创 -- 获取元素几种方法

获取对象方式ID获取对象方式父元素.getelementById('ID名')注：返回值是一个对象标签名获取对象方式父元素.getElementsByTagName('标签名')注: 标签名获取对象方式会返回一个数组...

2021-09-01 20:36:03 124

原创 1-3 isNaN()

isNaN的作用是判断值是否为非数字；isNaN()函数在接到一个值后,会尝试将这个值转换为数值如果是数字返回false 反之则为true扩展：正常理解有点别扭可以取反可以用取反运算（!isNaN()）如果是数字返回true 如果不是数字返回为false...

2021-09-01 19:01:56 222

原创 1-6 JS前置自增和后置自增

var aa = aa2 = 10 console.log(10 + ++aa) //发现表达式 10 + ++aa //开始运算10+(10+1) //++aa 值为10 //继续运算 10+11 //输出结果 21 console.log(10 + aa2++) //发现表达式 10+aa2++ //开始运算 10+10++ //console.log(2...

2021-09-01 15:45:53 343

原创 1.2 JS数据类型转换

声明变量 var n1 = 1; var nn1 = 1.1 var n2 = '2' var n5 = 'sas21' var n6 = '121sss'转换为数值 // 转换数值 var num = Number(n1) console.log('转换前' + n1, typeof(n1), '转换后' + num, typeof(num)) //转换前1 number 转换后1 number var n...

2021-09-01 11:43:09 95

空空如也

空空如也