css和javascript 重要性(js和css基础知识总结)
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
复制代码
.aa{
background-image: url(arrow.png)no-repeat right center;
background-image:url(nav-bar.jpg);
background-repeat:no-repeat;
background-position:right center;
}
复制代码
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');
})
复制代码
首先声明一下:
<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; 总是显示纵向滚动条
复制代码
.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" />
复制代码
$("#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的好处是对搜索引擎比较友好,需要处理的文件在服务器端完成的,
不会加重访问者的浏览器负担。
复制代码
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
复制代码
能用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);
});
});
复制代码
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();
})
复制代码
$(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急速浏览器内核基于谷歌的
复制代码
button,input type=button按钮在IE和w3c,firefox浏览器区别:
1、当在IE浏览器下面时,button标签按钮,input标签type属性为button的按钮是一样的功能,不会对表单进行任何操作。
2、但是在W3C浏览器,如Firefox下就需要注意了,button标签按钮会提交表单,而input标签type属性为button不会对表单进行任何操作。
为button按钮增加一个type=”button”属性。
复制代码
<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;
}
复制代码
$('#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页面里的元素
复制代码
$('.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父级页面元素
复制代码
$('.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
: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()方法在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的滚动条
复制代码
<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({
type: "post",
data:
contentType:
url:
beforeSend: function () {
if(){
}else{
};
},
success: function (data) {
alert("保存失败");
},
error: function (data) {
alert("保存成功");
}
});
复制代码
$.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);
}
}
});
复制代码
jquery
$("a[id=search]").attr("data-search")
原生js
document.querySelector("a[id=search]").getAttribute("data-search") //根据当前元素的属性获取该元素其他属性的值
document.querySelector("a[id=search]").text //根据当前属性获取该元素的值
document.querySelector("a[id=search]").innerText //根据当前属性获取该元素的值
复制代码
JSON.stringify(userList)
复制代码
layer.msg('分配成功',{time: 1000},function () {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
})
复制代码
window.location.reload();//刷新当前页面
window.parent.location.reload();//刷新父级页面
复制代码
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 recursion
var name = "Bhargav"
var output = "";
for(let i=0; i<name.length; i ) {
output = output name[i];
console.log(output);
}
作者:山水有轻音链接:https://juejin.im/post/6873003814065012750
,
免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com