• 网站导航

js基础知识总结(js基础代码大全)

更新时间:2021-09-18 16:41:01 来源:  网络
近期可能很多人都在关注js基础知识总结相关的内容,今日小编也是在网上找了很多关于 js基础知识总结 相关信息并整理如下,希望对大家有所帮助:


1.em字体设置

body {font-size:100%;}h1 {font-size:3.75em;}h2 {font-size:2.5em;}p {font-size:0.875em;}复制代码2.背景图标居右

.aa{ background-image: url(arrow.png)no-repeat right center; background-image:url(nav-bar.jpg); background-repeat:no-repeat; background-position:right center;}复制代码3.文本框超出部分显示省略号:

overflow: hidden;text-overflow: ellipsis;white-space: nowrap; 复制代码


我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年我花了一个月整理了一份最适合2020年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。

一蒙版出现禁止页面滚动

1 window.onscroll=function(){ document.body.scrollTop = 0};2 $('html,body').animate({scrollTop:'0'},100);$(".tan").bind('touchmove',function(e){ //禁止弹出框出来时进行滑动 e.preventDefault();});3 document.body.style.overflow='hidden';若键盘点击的话,就要加上:var move=function(e){ e.preventDefault && e.preventDefault(); e.returnValue=false; e.stopPropagation && e.stopPropagation(); return false;}var keyFunc=function(e){ if(37<=e.keyCode && e.keyCode<=40){ return move(e); }}document.body.onkeydown=keyFunc;复制代码二、按钮点击事件

var button=$(':button');button.on('click',function(){ button.css('background-color','white'); $(this).css('background-color','#FB3336');})复制代码三、安卓手机里,h5页面没有充满body导致左右滑动的问题

首先声明一下:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>然后html,body {width:100%;height:100%;overflow-x:hidden;}复制代码四、关于页面左右滚动的问题

1.<body scoll=no> 全禁止2.<body style="overflow:scroll;overflow-y:hidden"> 禁止纵向滚动条3.<body style="overflow:scroll;overflow-x:hidden"> 禁止纵向滚动条4.overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容5.overflow: auto; 在需要时内容会自动添加滚动条6.overflow: scroll; 总是显示滚动条7.overflow-x: hidden; 禁止横向的滚动条8.overflow-y: scroll; 总是显示纵向滚动条复制代码五、 content && header之间的亮条怎么消除

.mui-bar-nav{ -webkit-box-shadow: none; box-shadow: none;}复制代码六、删除选项

$(".shanchu").click(function(){ $(this).parent().remove()})复制代码七、表单提交按钮时,鼠标放在上面显示小手的方法:

需要对元素属性的css的cursor进行设置1、default 默认光标(通常是一个箭头)2、auto 默认。浏览器设置的光标。 3、crosshair 光标呈现为十字线。 4、pointer 光标呈现为指示链接的指针(一只手) 5、move 此光标指示某对象可被移动。 6、e-resize 此光标指示矩形框的边缘可被向右(东)移动。 7、ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。 8、nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。 9、n-resize 此光标指示矩形框的边缘可被向上(北)移动。 10、se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。 11、sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。 12、s-resize 此光标指示矩形框的边缘可被向下移动(南)。 13、w-resize 此光标指示矩形框的边缘可被向左移动(西)。 14、text 此光标指示文本。 15、wait 此光标指示程序正忙(通常是一只表或沙漏)。 16、help 此光标指示可用的帮助(通常是一个问号或一个气球)。 要实现鼠标移上去显示手形、需要在你的提交按钮上增加css cursor属性,并将它的值设置为pointer;如下:<input type="submit" name="submit" value="发布留言" class="subimt" onclick="display_alert()" style="cursor:pointer" />复制代码八、怎么清除table里面tbody的内容

$("#test tbody").html("");复制代码九、动态获取表格的行数

var bv=$("#tabd tr").length-1;$("#sp4").html(bv); //动态的获取注数复制代码十、多个按钮点击变色,再点击还原

$(".jixuan input[type=button]").toggle(function(){ $(this).css("background-color","yellow"); $(this).css("cursor","pointer") },function(){ $(this).css("background-color","white"); $(this).css("cursor","pointer");}) 复制代码十一、单选按钮顾名思义用于单选的场合,例如,性别,职业的选择等,语法如下:

<input type="radio" name="gender" value="男" checked />常用属性迅美科技整理如下:1.type="radio"type属性设置为radio,表示产生单一选择的按钮,让用户单击选择;2.name="gender"radio组件的名称,name属性值相同的radio组件会视为同一组radio组件,而同一组内只能有一个radio组件被选择;3.value="男"radio组件的值,当表单被提交时,已选择的radio组件的value值,就会被发送进行下一步处理, radio组件的value属性设置的值 无法从外观上看出,所以必须在radio组件旁边添加文字,此处的文字只是让用户了解此组件的意思.4.checked设置radio组件为已选择,同一组radio组件的name性情值必须要相同复制代码十二、网页中,公共头部和侧边栏的引用

1、<?php include("header.html");?>2、使用ssi技术页面生成shtml文件,只用在头部文件位置加入<!--#include file="header.htm" -->,然后修改的时候只要修改header.htm文件就可以了。使用shtml的好处是对搜索引擎比较友好,需要处理的文件在服务器端完成的,不会加重访问者的浏览器负担。复制代码十三、锚点链接上下定位偏移解决1、JS解决的方法

if (window.location.hash.indexOf('#') >= 0) { $('html,body').animate({ scrollTop: ($(window.location.hash).offset().top - 50) + "px" }, 300);}; //主要修复评论定位不准确BUG$('#comments a[href^=#][href!=#]').click(function() { var target = document.getElementById(this.hash.slice(1)); if (!target) return; var targetOffset = $(target).offset().top - 50; $('html,body').animate({ scrollTop: targetOffset }, 300); return false;}); //主要修复评论定位不准确BUG复制代码2、解决办法

能用css自然不想用js解决,因为在加载方面,css总是先加载,并且速度很快。typecho的评论HTML结构是这样的:<li id="comment-277" class="comment-body comment-child comment-level-odd comment-even comment-by-author">我们给comment-body加上css.comment-body { position: relative; padding-top: 50px; margin-top: -50px;}/*修复评论跳转定位问题*/完美兼容chrome和Firefox,其他浏览器未测试。复制代码十四、蒙版弹出禁止蒙版后面的内容滚动

.ovfHiden{overflow: hidden;height: 100%;}$('.bzh .l1 a').click(function(){ $(".baok").show(); $(".baod").show(); $('html,body').addClass('ovfHiden');});$('.baod .img1').click(function(){$('html,body').removeClass('ovfHiden'); $(".baok").hide(); $(".baod").hide();});复制代码十五、获取复选框点击的次数

$("#compute").click(function(){ $('input').live('click',function(){ //alert($('input:checked').length); $("#show").html($('input:checked').length); });});复制代码十六、Tab选项卡切换

1.js

$('footer ul li').click(function(){ var index = $(this).index(); $(this).attr('class',"content").siblings('ul li').attr('class','ss'); $('.content').eq(index).show(200).siblings('.content').hide(); });$('.ka ul li').click(function(){ var index = $(this).index(); $(this).attr('class',"zi").siblings('ul li').attr('class','ll'); $(this).parent().next().find(".zi").hide(). eq(index).show();});复制代码

2.html

<div class="carindex-cnt"> <ul class="nav"> <li>续保方案</li> <li>热销方案</li> <li>自定义方案</li> </ul> <div class="tabcontent"> <div class="zi"> <p class="altp">此方案为您上一年的投保记录</p> <ul class="xiur"> <li> <label for="saveType2">交强险</label> <div class="right-cnt"> <input type="text" class="coverage" disabled="disabled" value="不投保"/> <ul class="datas" style="display: none;"> <li ref="1">投保</li> <li ref="2">不投保</li> </ul> </div> </li> <li> <label for="saveType2">商业险</label> <div class="right-cnt"> <input type="text" class="coverage" disabled="disabled" value="不投保"/> <ul class="datas" style="display: none;"> <li ref="1">投保</li> <li ref="2">不投保</li> </ul> </div> </li> </ul> <p class="title">商业主险</p> <ul class="xiur"> <li> <span>车辆损失险</span> <label for="abatement0" class="labels"> <input class="mui-checkbox checkbox-green" type="checkbox" name="abatement" > </label> <div class="right-cnt"> <input type="text" class="coverage" disabled="disabled" value="不投保"/> <ul class="datas" style="display: none;"> <li ref="1">投保</li> <li ref="2">不投保</li> </ul> </div> </li> </ul> </div> <div class="zi" style="display: none"> <ul class="xiur"> <li> <label for="saveType2">交强险</label> <div class="right-cnt"> <input type="text" class="coverage" disabled="disabled" value="不投保"/> <ul class="datas" style="display: none;"> <li ref="1">投保</li> <li ref="2">不投保</li> </ul> </div> </li> <li> <label for="saveType2">商业险</label> <div class="right-cnt"> <input type="text" class="coverage" disabled="disabled" value="不投保"/> <ul class="datas" style="display: none;"> <li ref="1">投保</li> <li ref="2">不投保</li> </ul> </div> </li> </ul> </div> </div></div> 复制代码

3.js

$('.nav li').click(function () { var index = $(this).index(); $(this).parent().next().find(".zi").hide().eq(index).show();})复制代码十七、form表为空时,提交按钮禁用

$(function(){ $('.main button').click(function(){ if(($('.ip1').val() !="") && ($('.ip2').val() !="")){ $('.main button').css('background','#ff8100'); $('.main button').attr('disabled', true); }else{ $('.main button').css('background','#D0D0D0'); $('.main button').attr('disabled', false); } })})复制代码十八、上拉事件和下拉事件

$(window).scroll(function(){ var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度 var scrollHeight =$(document).height(); //当前页面的总高度 var windowHeight = $(this).height(); //当前可视的页面高度 if(scrollTop + windowHeight >= scrollHeight){ //距离顶部+当前高度 >=文档总高度 即代表滑动到底部 alert("上拉加载,要在这调用啥方法?"); }else if(scrollTop<=0){ //滚动条距离顶部的高度小于等于0 alert("下拉刷新,要在这调用啥方法?"); }}); ——>移动端$(function(){ $(window).scroll(function() { var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height(); var positionValue = (scrollTop + windowHeight) - scrollHeight; if (positionValue == 0) { //do something } }); }); 复制代码十九、左滑和右滑事件

var obj;var startx;var starty;var overx;var overy; for(var i=1;i<=$("li").length;i++){ //为每个li标签添加事件 obj = document.getElementById(i); //获取this元素 evenlistener(obj); //调用evenlistener函数并将dom元素传入,为该元素绑定事件}function evenlistener(obj){ obj.addEventListener('touchstart', function(event) { //touchstart事件,当鼠标点击屏幕时触发 startx = event.touches[0].clientX; //获取当前点击位置x坐标 starty = event.touches[0].clientY; //获取当前点击位置y坐标 $(".sdf").text("x:"+startx+",y:"+starty+"") //赋值到页面显示 } , false); //false参数,设置事件处理机制的优先顺序,具体不多说,true优先false obj.addEventListener('touchmove', function(event) { //touchmove事件,当鼠标在屏幕移动时触发 overx = event.touches[0].clientX; //获取当前点击位置x坐标 overy = event.touches[0].clientY; //获取当前点击位置y坐标 var $this = $(this); //将dom对象转化为jq对象,由于项目用到jquery,直接使用其animate方法 if(startx-overx>10){ //左滑动判断,当左滑动的距离大于开始的距离10进入 $($this).animate({marginLeft:"-55px"},150); //实现左滑动效果 }else if(overx-startx>10){ //右滑动判断,当右滑动的距离大于开始的距离10进入 $($this).animate({marginLeft:"0px"},150); //恢复 }} , false); obj.addEventListener('touchend', function(event) { //touchend事件,当鼠标离开屏幕时触发,项目中无用到,举例 $(".sf").text("x:"+overx+",y:"+overy+"") } , false);}复制代码二十、各大浏览器的判断

var Sys = {};var ua = navigator.userAgent.toLowerCase();var s;(s = ua.match(/rv:([d.]+)) like gecko/)) ? Sys.ie = s[1] :(s = ua.match(/msie ([d.]+)/)) ? Sys.ie = s[1] :(s = ua.match(/firefox/([d.]+)/)) ? Sys.firefox = s[1] :(s = ua.match(/chrome/([d.]+)/)) ? Sys.chrome = s[1] :(s = ua.match(/opera.([d.]+)/)) ? Sys.opera = s[1] :(s = ua.match(/version/([d.]+).*safari/)) ? Sys.safari = s[1] : 0;if (Sys.ie){ $("*").css({fontFamily:"微软雅黑"});};if (window.ActiveXObject){Sys.ie = ua.match(/msie ([d.]+)/)[1];if (Sys.ie<=9){ alert('你目前的IE版本为'+Sys.ie+'版本太低,请升级!'); location.href="http://windows.microsoft.com/zh-CN/internet-explorer/downloads/ie"; }}var UA=navigator.userAgent;if(is360se = UA.toLowerCase().indexOf('360se')>-1 ){}else{ $("*").css({fontFamily:"微软雅黑"});}360浏览器基于IE内核的,360急速浏览器内核基于谷歌的复制代码二十一、form表单中点击button按钮刷新问题

button,input type=button按钮在IE和w3c,firefox浏览器区别: 1、当在IE浏览器下面时,button标签按钮,input标签type属性为button的按钮是一样的功能,不会对表单进行任何操作。 2、但是在W3C浏览器,如Firefox下就需要注意了,button标签按钮会提交表单,而input标签type属性为button不会对表单进行任何操作。为button按钮增加一个type=”button”属性。复制代码二十二、textrare文字输入提示:

<textarea name="" id="sign" maxlength=30 onKeyUp="keypress1()"></textarea><div class="tish"><span id="number">0</span><span>/30</span></div>function keypress1() //text输入长度处理 { var text1=document.getElementById("sign").value; var len=text1.length; var show=len; document.getElementById("number").innerText=show; } 复制代码二十三、iframe操作1:父页面操作iframe子页面

$('#ifrme').load(function(){$('#ifrme').contents().find('.baod .img1').click(function(){ $(.ifrme').contents().find('.baod').hide(); $('.baok',window.parent.document).hide(); $('html,body',window.parent.document).removeClass('ovfHiden'); });})* .ifrme父页面的ID为iframe的父级 .baod .img1是iframe页面里的元素复制代码2:子页面操作父页面

$('.baod .bt1').click(function(){ $('.baod').hide(); $('.edit',window.parent.document).hide(); $(".baok", window.parent.document).hide(); $('html,body',window.parent.document).removeClass('ovfHiden');});*.baod .bt1子页面里的元素window.parent.document父级窗口.edit父级页面元素复制代码二十四、toggle开关切换图标或是元素的隐藏

$('.other .pg').click(function(){ $(this).toggleClass ("pots"); $('.below').slideToggle(300);})* .other .pg元素名称pots 点击元素要切换的图标(以background()形式的图标).below要进行toggle的内容复制代码二十五、弹框居中

$(".btnDel").click(function() { //$(".box-mask").css({"display":"block"}); $(".box-mask").fadeIn(500); center($(".box")); //载入弹出窗口上的按钮事件 checkEvent($(this).parent(), $(".btnSure"), $(".btnCancel")); }); *center 弹框名称function center(obj) { //obj这个参数是弹出框的整个对象 var screenWidth = $(window).width(), screenHeigth = $(window).height(); //获取屏幕宽高 var scollTop = $(document).scrollTop(); //当前窗口距离页面顶部的距离 var objLeft = (screenWidth - obj.width()) / 2; ///弹出框距离左侧距离 var objTop = (screenHeigth - obj.height()) / 2 + scollTop; ///弹出框距离顶部的距离 obj.css({ left:objLeft + "px", top:objTop + "px" }); obj.fadeIn(500); //弹出框淡入 isOpen = 1; //弹出框打开后这个变量置1 说明弹出框是打开装填 //当窗口大小发生改变时 $(window).resize(function() { //只有isOpen状态下才执行 if (isOpen == 1) { //重新获取数据 screenWidth = $(window).width(); screenHeigth = $(window).height(); var scollTop = $(document).scrollTop(); objLeft = (screenWidth - obj.width()) / 2; var objTop = (screenHeigth - obj.height()) / 2 + scollTop; obj.css({ left:objLeft + "px", top:objTop + "px" }); obj.fadeIn(500); } }); //当滚动条发生改变的时候 $(window).scroll(function() { if (isOpen == 1) { //重新获取数据 screenWidth = $(window).width(); screenHeigth = $(window).height(); var scollTop = $(document).scrollTop(); objLeft = (screenWidth - obj.width()) / 2; var objTop = (screenHeigth - obj.height()) / 2 + scollTop; obj.css({ left:objLeft + "px", top:objTop + "px" }); obj.fadeIn(500); } }); 复制代码二十六、css和js进行奇偶选择器

css

:nth-child(odd){background-color:#FFE4C4;}奇数行:nth-child(even){background-color:#F0F0F0;}偶数行复制代码

js

$("table tr:nth-child(even)").css("background-color","#FFE4C4"); //设置偶数行的背景色$("table tr:nth-child(odd)").css("background-color","#F0F0F0"); //设置奇数行的背景色复制代码二十七、jQuery中live()使用报错,TypeError: $(...).live is not a function

jquery中的live()方法在jquery1.9及以上的版本中已被废弃了,如果使用,会抛出TypeError: $(...).live is not a function错误。解决方法:之前的用法:.live(events, function) 新方法:.on(eventType, selector, function)若selector不需要,可传入null例子1:之前:$('#mainmenu a').live('click', function)之后:$('#mainmenu').on('click', 'a', function)例子2:之前:$('.myButton').live('click', function)之后(应使用距离myButton最近的节点):$('#parentElement').on('click', ‘.myButton’, function)若不知最近的节点,可使用如下的方法:$('body').on('click', ‘.myButton’, function)复制代码二十八、iframe滚动条问题

iframe嵌入的滚动条可以用iframe里面页面的大小覆盖掉iframe的滚动条复制代码二十九、点击图片下载(不用新窗口打开)

<a class="downs" style="display:'+display+'" onclick="downimg(''+list[i].skuTieTu+'')">下载</a>复制代码

js方法

/*** 图片单独下载*/function downimg(skuTieTu){ console.log(skuTieTu) let src = skuTieTu; var canvas = document.createElement('canvas'); var img = document.createElement('img'); img.onload = function(e) { canvas.width = img.width; canvas.height = img.height; var context = canvas.getContext('2d'); context.drawImage(img, 0, 0, img.width, img.height); canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height); canvas.toBlob((blob)=>{ let link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = 'zzsp'; link.click(); }, "image/jpeg");}img.setAttribute("crossOrigin",'Anonymous');img.src = src;复制代码三十、ajax里面条件判断

$.ajax({ type: "post", data: contentType: url: beforeSend: function () { if(){ }else{ }; }, success: function (data) { alert("保存失败"); }, error: function (data) { alert("保存成功"); }});复制代码三十一、ajax里面在数据请求之前加layui.load()时,请求状态必须是异步的才行( async: true)

$.ajax({ type:"post", url: API, data: { 'a':'project.kujiale.plan.YongliaoUser' }, dataType: "json", async: true, beforeSend: function () { layer.load(1); }, success: function(data) { var item =data.data; list = item if(data.code==0){ layer.closeAll(); var url = '/module/designplan/searchplan/searchlist.jsp'; layer.open({ type: 2, title: "搜索方案", shadeClose: true, shade: 0.8, area: ['700px','500px'], content: [url] }); }else{ layer.msg(data.msg); } }});复制代码三十二、js根据元素的属性获取到改元素其他属性的值

jquery$("a[id=search]").attr("data-search")原生jsdocument.querySelector("a[id=search]").getAttribute("data-search") //根据当前元素的属性获取该元素其他属性的值document.querySelector("a[id=search]").text //根据当前属性获取该元素的值document.querySelector("a[id=search]").innerText //根据当前属性获取该元素的值 复制代码三十三、数组对象提交时转化问题

JSON.stringify(userList)复制代码三十四、layui使用1、关闭弹窗

layer.msg('分配成功',{time: 1000},function () { var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index);})复制代码2、关闭弹窗,刷新页面

window.location.reload();//刷新当前页面window.parent.location.reload();//刷新父级页面复制代码三十五、js创建下载方式

download(data.data);function downpdf(data){ var link = document.createElement('a'); link.href = data; link.target = '_blank'; link.click(); delete link;}复制代码三十六、高阶函数

const isYoung = age => age < 25;const message = msg => "He is "+ msg;function isPersonOld(age, isYoung, message) { const returnMessage = isYoung(age)?message("young"):message("old"); return returnMessage;}// passing functions as an arguments console.log(isPersonOld(13,isYoung,message))// He is young复制代码递归

递归是一种函数在满足一定条件之前调用自身的技术。只要可能,最好使用递归而不是循环。你必须注意这一点,浏览器不能处理太多递归和抛出错误。下面是一个演示递归的例子,在这个递归中,打印一个类似于楼梯的名称。我们也可以使用for循环,但只要可能,我们更喜欢递归。复制代码

function printMyName(name, count) { if(count <= name.length) { console.log(name.substring(0,count)); printMyName(name, ++count); }}console.log(printMyName("Bhargav", 1));/* B Bh Bha Bhar Bharg Bharga Bhargav*/// withotu recursionvar name = "Bhargav"var output = "";for(let i=0; i<name.length; i++) { output = output + name[i]; console.log(output);}


作者:山水有轻音
链接:https://juejin.im/post/6873003814065012750



js基础知识总结(js基础代码大全)

以上就是关于js基础知识总结 相关问题啦,如需了解更多关于js基础知识总结问题,关注我们的下次更新哦