192.168.3.33

最新推荐文章于 2022-09-17 17:26:45 发布

yeyesea

最新推荐文章于 2022-09-17 17:26:45 发布

阅读量1.1k

点赞数

文章标签： javascript html5 jquery css3

本文链接：https://blog.csdn.net/qq_41758919/article/details/119997638

版权

192.168.3.33

25101A

Ctrl S

<br/>换行

<hr color=red width=" " size="" align=""/>横线

<p></p>段落

<strong></strong>加粗

<em></em>倾斜

<ins></ins>下划线

<del></del>删除线

<div></div>大盒

<span></span>小盒

外部链接内部链接空白链接下载链接

锚点<a href="#two">第二集</a>

<h3 id="two">第二集介绍</h3>

注释<！－－我是注释－－> 快捷键Ctrl+/

 空格

<小于号

>大于号

表格标签<table>

<tr> </tr>行

<td> </td>普通单元格

<th> </th>表头单元格加粗居中

表格属性(写到<table里>）

align

valign=" top/ middle /bottom "

border 1或" "

cellpadding 文字到边框的距离

cellspacing 单元格和单元格的距离

width

background

表格结构标签

colspan="合并单元格数"横向合并

rowspan="合并单元格数"纵向合并

无序列表

</ul>

有序列表

</ol>

自定义列表

<dl>

</dl>

表单标签<form action="url地址" method="get/post" name="表单域名称"></form>

<cite></cite>引用

</optgroup>

</optgroup>

</select>

<head>

</head>

<mark>泰罗</mark>高亮

标签选择器

类选择器 .yang. class="yang"

id选择器

通配选择器 *{}

<style>

color:purple;

font-family:"微软雅黑";

font-size:20px;

font-weight:400/700;

font-style:italic;

color:#cc00ff;

color:rgb(0,255,0);

text-align

text-decoration:"none/overline/line-through/underline"

text-indent:10px/2em

text-transform:uppercase/lowercase/capitalize;

line-height:26px

</style>

CSS三种样式表

内部样式

行内样式

外部样式 <link rel="stylesheet" href="style.css">

</datelist>

块元素:调高宽，占一行

行内元素:不可调高宽，公用一行

转块 display:block

转行内 display: inline

转行内块 display:inline-block

#h1 a:hover{background-color:orange;}

line-height=a高

<div>中的css设置

background-color:red;

background-image:url();背景图片

bancground-repeat:no repeat/repeat-x

background-position:right top;/160px 10px(精确)(混合使用也可 20px center)

背景图片压背景颜色

background-attachment:scroll/fixed;

background:rgba(0,0,0,0.3)

CSS三大特性

层叠性:解决冲突问题

继承性:子类标签属性继承父类(text- font- line-)

优先级:继承0 元素1 类10 id 100 行内1000

! important ∞

ul li 2

.nav li 11

权重会叠加但不会进位

盒子模型

边框

border-width:5px;

border-style:solid/dashed/dotted;

border-color:pink;

border-top-color:red;

border-radius:10px;四个值左上/右上/右下/左下

表格边框折叠td,th{border-collapse:collapsed;}

<video /audio

src=" " controls="controls"

autoplay="autoplay" loop ="loop" width:400px height :250px poster="imge">

< /video/audio>

margin-left:20px/auto;元素与元素间的距离

<style>

@font-face{

font-family:maobizi;

src:url();

}

</style>

box-shadow:10px 10px 10px 10px rgba(0,0,0,0.3)

tr:nth-child(odd){background-color:skyblue;}

input[type=password]{background-color:red;}

a:active

h1:before/after{content:'hello'}

h1::first-letter/first-line{color:red;}

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

text-shadow:20px 20px 2px yellow;

li:nth-child(odd/even/n/1){background-color:blue;}

定位

position:relative/absolute/fixed/sticky

left/top/right/bottom/:10px 子绝父相

.yang{z-index:1;}

border-radius:400px 400px 400px 400px /200px 200px 200px 200px;

border-style:solid;

border-image-source:url();

border-image-slice:33%;

border-image-width:80px;

border-image-outset:80px;

border-image-repeat:repeat;

缺一不可

background-image:linear-gradient(90deg,red 50%,blue 50%,yellow);

background-image:linear-gardient(45deg,red,blue)

display:none/block

visibility:hidden/visible

overflow:visible/hidden/scroll/auto

浮动父级清除浮动overflow:hidden

字体图标

盒子三角

鼠标样式

cursor:default/pointer/move/text/not-allowed

input{outline:none;}

textarea{ resize:none;}

行内元素垂直对齐文本方式

vertical-align:top/middle/baseline/bottom

第二行省略

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

margin:0;

padding:0;

<nav>

<aside>

a:link

a:visited

box-sizing:border-box;

img{filter:blur(10px);}

width:calc(100% - 200px);

transition:width 0.5s ease 1s,height 0.5s ease 1s;

js语法

prompt(' 请输入您的年龄');

alert('计算结果为');

console('我是程序员能看到的');

</script>

on click="alert('吃俺老孙一棒')"

八进制0 10

十六进制0x 10

\b空格

console.log(str.length);

alert('欢迎你'+myname+'同学');

console.log(typeof b);

String(3)数字转字符

parseInt('12 ')

parseFloat(' 12 ')

boolean(3)

===

与逻辑中断1真输出2 1假输出1

或逻辑中断 1真输出1 1假输出2

arr.join(' ')

document.write()

str.length

function test01(){}

arr.length=10

arr=brr

function maxarr(arr){}

arguments伪数组

变量提升函数提升

var obj ={

name:'张三丰',

age:18,

sex:'男',

sayhi:function(){}

}

obj.name

obj['name']

var obj=new object();/{}

obj.name='张三丰';

obj.age=18;

obj.sayhi=function(){};

function Star(name,age,sex){

this.name=name;

this.age=age;

this.sex=sex;

}

var ldh=new Star('刘德华'，18，'男');

for (var k in obj){

console.log(k);

console.log(obj[k]);

}

Math.max(1,2,9)

Math.abs(-2)

Math.sqrt()

Math.pow(2,3)

Math.ceil()

Math.floor()

Math.round()

Math.random()

随机闭区间整数

Math.floor(Math.random()*(max-min+1)+min)左闭右闭

var time=new Date()当前时间

date.getHours()

date.getMinutes()

date.getSeconds()

date.getDay()需要写在前面

date.getFullYear()

date.getMonth()

date.getDate()

date.setFullyear(2090)

date.setMonth()

Date.now()

+new Date(2021,5,24,10,20,30)

+new Date('2021-5-23 11:00:00');

var star=Date.now();

var end=+new Date('2021-5-24 13:00:00');

var sum=(end-star)/1000;

var d=parseInt(sum/60/60/24);

d=d<10?'0'+d:d;

var h=parseInt(sum/60/60%24);

h=h<10?'0'+h:h;

var m=parseInt(sum/60%60);

m=m<10?'0'+m:m;

var s=parseInt(sum%60);

s=s<10?'0'+s:s;

var sy='剩余'+d+'天'+ h+'小时'+m+'分'+s+'秒';

console.log(sy);

console.log(arr instanceof Array)

console.log(Array.isArray(arr));

arr.push(4,5)本质变

arr.unshift(4,5)本质变增

arr.pop()本质变

arr.shift()本质变

arr.reverse()本质变

arr.splice(下标，删数，增文)下标增删改本质变

arr.sort(function(a,b){return a-b/b-a;})本质变

arr.indexOf('春',2)查询

arr.lastIndexOf('春'，)

arr.join('-')变一下又变回

str.split('')变一下又变回

str.toUpperCase()变一下又变回

str.replace('建设'，'消灭')变一下又变回

str.indexOf('hello')

str.substr(2,3)切片

str.substr(2)

Math.max.apply(null,brr)

var hz1=document.getElementById('hz1')

console.dir(hz1)

var li=document.getElementByTagName('li')

console.log(li[0])

console.log(hz1.getElementByTagName('span'))

getElementByTagName('p')[0];

document.getElementByClassName('box')

document.querySelector('.box')/('#hh1')/('li')

document.querySelectorAll('.box')

document.getElementByName('xz')

document.body

document.documentElement

btn.οnclick=function(e){alert('hello');}

onmouseover

onmouseout

element.innerText 盒子双标签

element.innerHtml

img.src=''

img.title=''

document.write(""+i)

w1.value=w2.value 文本框

mtc.style.margininLeft='0px'

btn.disabled=true

input.type='text';

body.className='night'

xgg.style.margininLeft=wz+'px'

input.οnfοcus=function(){}

input.οnblur=function(){}

.className='first bd'

backgroundcolor=' '+a[xb]+' '

var fun1=function(){

}不会执行，没调用

var t=setInterval(fun1,1000);

clearInterval(t)

t=setInterval(fun1,1000)

console.log(div[0].getAttribute('id'));

div[0].setAttribute('xuhao',999)

直接在行内写自定义属性是不行的

要写在script l[0].shu='0'

data-shu

ul.parentNode

ul.childNode

ul.childNode[0]

ul.childNode[0].nodeType

ul.children

ul.children[0]

ul.lastElementChild

div.nextSibling

div.nextElementSibling

div.previousSibling

div.previousElementSibling

var li=document.createElement('li')

ul.appendChild(li)

ul.insertBefore(ym,gj);

ul.removeChild(ul.children[0]);

textarea.value 双标签中特殊一个

li.innerHTML=plk.value+"<a href='javascript:;'>删除</a>" 对机器不友好

var lili=ul.children[0].clone.Node(1/0)

window.οnlοad=function(){}

btn[1].addEventListener('click',fun1，true)捕获/az冒泡

function fun1(e){

alert('22');

btn[1].removeElementListener('click',fun1)

e.target.style.backgroundcolor='pink'

}

li[1].οnclick=null;

e.target

e.type

e.preventDefault()

e.stopPropagation()

事件委托

p.addEventListener('contextmenu',function(e){

e.preventDefault();

})

p.addEventListener('selectstart',function(e){

e.preventDefault();

})

console.log(e.clientX/Y)

console.log(e.pageX/Y)

console.log(e.screenX/Y)

wk.style.left=e.pageX+'px';

document.addElementEvent('keydown/keypress/keyup',function funzong(e){

console.log(e.keycode)

console.log(e.key)

})

background-size:cover/contain

max-width

min-width

续

mhead

mbody

mgrid

mlis

mtab

min

opacity:0

window.num

window.fun1()

window.alert()

window.prompt()

window.setTimeOut(fun1,1000)

window.setInterval(fun1,1000)

window.οnlοad=function(){}

window.addEventListener('load',function(){})

window.addEventListener('resize',function(){})

window.innWidth

window.location.href 整个URL

window.location.search 参数

window.location.host 域名

window.location.port 端口号

window.location.pathname 路径

window.location.hash 片段

window.location.assign('http://wcom')有历史

window.location.replace('http://wcom')无历史

window.location.reload()刷新 true强制刷新

Ctrl+F5

var chuanru=window.location.search.substr(1);

chuanru=chuanru.replace(/&/g,'=');

var arr=chuanru.split('=');

if ((navigator.userAgent.match(

/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|webOS|Symbian|Windows Phone)/i))){

console.log('移动端');

// window.location.href='';

}

else{

console.log('PC端');

// window.location.href='';

}

window.history.back()

window.history.forward()

window.history.go(1/-1)

son.offsetTop 距离父元素

son.offsetLeft

son.offsetWidth border+padding+content

son.offsetHeight

son.clientTop 上边框值

son.clientLeft 左边框值

son.clientWidth padding+content

son.clientHeight

son.scrollTop

son.scrollLeft

son.scrollWidth

son.scrollHeight

son.addEventListener('scroll',function(){})

window.pageYoffset

window.pageXoffset

(function(){})()

son.addEventListener('mouseover',function(){})

son.addEventListener('mouseenter',function(){})

son.addEventListener('mouseleave',function(){})

window.sessionStorage.setItem('uname','软院')

window.sessionStorage.getItem('uname')

window.sessionStorage.removeItem('uname')

window.sessionStorage.clear()

animate(obj,100,callback)

window.localStorage.setItem('uname','软院')

window.localStorage.getItem('uname')

window.localStorage.removeItem('uname')

window.localStorage.clear()

remember.addEventListener('change',function(){})

var myspan=document.querySelector('span')

$(myspan).hide()

$(myspan)[0].innerHtml鸡肋

$('div').hide()鸡肋

$(document).ready(function(){}) 后处理

$('div');

$('#l1');

$('.nav');

$('ul li');

$('div').css('background','green');

$('ul li').css('background','red');

$('ol li:first').css('background','yellow');

$('ol li:last').css('background','orange');

$('ol li:eq(1)').css('background','black');

$('ol li:even').css('background','purple');

$('ol li:odd').css('background','pink');

$('.nav li').mouseover(function(){

$(this).children('ul').show();

})

$('.nav li').mouseout(function(){

$(this).children('ul').hide();

})

$('ul li:eq(1)').siblings('li').css('background','pink');

$('ol li:eq(2)').prevAll().css('background','pink');

$('ol li:eq(2)').nextAll().css('background','blue');

console.log($('ul').hasClass('yang'));

$('ol li').eq(3).css('background','black');

$(function(){

$('button').click(function(){

$(this).siblings('button').css('background',' ');

$(this).css('background','red');

})

$(this).index()

$(this).css('background','red').siblings('button').

css('background','green');

$('div').eq(0).css('width')

$('div').eq(0).css('width','300px');

$('div').eq(0).css({

width:'30px',

height:'50px',

background:'green'

})

$('div').eq(0).addClass('current');

$('div').eq(0).removeClass('current');

$('div').eq(0).toggleClass('current');

$('button').eq(1).click(function(){

$('div').eq(0).stop().hide/show/toggle/slideDown/slideUp/slideToggle/fadeIn/fadeOut/fadeToggle(3000,'swing/linear',function(){

console.log('隐藏了');

});

})

$('button').eq(9).click(function(){

$('div').eq(0).stop().fadeTo(3000,0.3,'swing',function(){

console.log('淡透明');

})

$('div').eq(0).stop().animate({

left:'200px',

top:'100px',

opacity:0.4,

width:'100px'

},3000,'swing',function(){

console.log('animate');

}

)

$('.nav>li').hover(function(){

$(this).children('ul').slideDown();

},function(){

$(this).children('ul').slideUp();

});

$('.nav>li').hover(function(){

$(this).children('ul').stop().slideToggle();

})

$('a').eq(0).prop('href','http://www.baidu.com')

$('a').eq(0).attr('index','haha');

$('a').eq(0).data('xmm','djb');

$('a').eq(0).prop('href')

$('a').eq(0).attr('index')

$('a').eq(0).data('xmm')

$('div').eq(1).html()

$('div').eq(1).html('lalal')

$('input').eq(0).val()

$('input').eq(0).val('我是一个将军')

$('div').each(function(index,domEle){

console.log(index);

$(domEle).css('color',color[index]);

})

$.each(color,function(i,ele){

console.log(ele);

})

$.each({

name:'andy',

age:18

},function(i,ele){

console.log(ele);

})

var li=$('<li>我是后添加上的小li</li>');

var li0=$('<li>我是添加上最前面的小li</li>');

$('ul').eq(0).append(li);

$('ul').eq(0).prepend(li0);

$('ul').eq(0).before('<div>我是前面的div</div>');

$('ul').eq(0).after('<div>我是后面的div</div>');

$('ul').eq(0).remove();

$('ul').eq(0).empty();

$(ul).eq(0).html('');

a=$('div').eq(0).width()/height();//content

a=$('div').eq(0).innerWidth()/innerHeight();//有padding

a=$('div').eq(0).outerWidth()/outerHeight();//有border

a=$('div').eq(0).outerWidth(true)/outerHeight(true);//有margin

a=$('#son').offset().top;

a=$('#son').offset().left;

a=$('#son').position().top;

a=$('#son').position().left;

a=$('#son').scrollTop();

a=$('son').scrollLeft();

$('#son').scroll(function(){})

yeyesea

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫