web小知识点——持续更新

最新推荐文章于 2024-08-11 03:30:02 发布

NightCharm

最新推荐文章于 2024-08-11 03:30:02 发布

阅读量771

点赞数

分类专栏： web 基础整理文章标签： js html

本文链接：https://blog.csdn.net/NightCharm/article/details/53792445

版权

web 基础整理专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS修改tr的边框

如果直接修改tr的border属性是没有反应的

需要在table中加一句话

 table{
      border-collapse: collapse;
   }

JS获取DOM节点

childNodes; //得到s的全部子节点
parentNode; //得到s的父节点
nextSbiling; //获得s的下一个兄弟节点
previousSbiling; //得到s的上一个兄弟节点
firstChild; //获得s的第一个子节点
lastChile; //获得s的最后一个子节点

JS通过DOM创建节点

	var p_1 =document.createElement("p"); // 创建一个节点
		p_1.innerHTML = "我是用js创建的节点p";
		document.body.appendChild(p_1,document.body);//在节点后添加节点

JS通过DOM创建Table的行及列

	function add2(){
		var myTable = document.getElementById("mytable");
		var newRows = myTable.insertRow(1); //在第2行插入新行 这里（）中的数从0开始 0代表第一行
		var col1 = newRows.insertCell(0);//创建列
		col1.innerHTML = "我是创建的第一列"
		var col2 = newRows.insertCell(1);
		col2.innerHTML = "我是创建的第二列";
		}

<table id="mytable">
	<tr>
    	<td>1</td>
        <td>2</td>
    </tr>
    <input type="button" value="添加新行" οnclick="add2()"/>
</table>

JS通过DOM删除Table的行及列

	function remove2(){
		var myTable = document.getElementById("mytable");
		myTable.deleteRow(1); //删除第二行
		}	
	function removeCell(){
		var myTable = document.getElementById("mytable");
		myTable.rows[1].cells[0].innerHTML = "";
		}

JS——String to Int

parseInt();

alert(1+parseInt("2"));

JS常用的三种弹出方式

① alert——弹出警告

②confirm——弹出包含确定and取消按钮的弹出框返回值为Boolean 可直接判断使用

③prompt——弹出一个可输入的弹窗第一个参数为弹出框上显示的内容第二个参数为输入的值

alert("Hello Wored");

if(confirm("你想点什么？")){
		alert("你点击了确定");
	}else{
		alert("你点击了取消");
	}

window.οnlοad=function(){
	var content = prompt("你想说点什么？","");
	document.body.innerHTML = content;
	}

window.onload事件是当窗体加载时执行

JS——倒计时例子

setInterval （"",""）第一个参数是执行的方法第二个参数是执行时间

var i=10;
	window.οnlοad=function(){
		setInterval(function(){
			document.body.innerHTML = i;
			
			if(i>0){
				i--;
			}
			},1000);	
	}

~~document,body.innerHTML 和 document.write 是有区别的前者会更改页面中的值后者是不停的向页面中写入~~

../****.html

或者使用绝对路径

CSS伪类（a:hover……）

①:hover 当鼠标悬浮在元素上方时，向元素添加样式
②:link 向未被访问的连接添加样式
③:visited 向已被访问的连接添加样式
④:active 向已被激活的元素添加样式

CSS超链接样式

text-decoration 属性是否有下划线

常用于清除超链接的下划线

a{
		text-decoration:none;
		color:#454545;}

Span的巧用

Span 可以用来标记内容做特殊样式处理

.conter_foot ul li span{
	color:#ababaa;
	font-size:10px;
	float:right;}

<div class="conter_foot">
    <ul>
        <li>2012年考研英语备考冲刺指导班即将开班<span>2010-12-21</span></li>
        <li>剑桥少儿英语等级考试大攻略 最新培训班热招！<span>2010-12-21</span></li>
        <li>2012全新推荐：英语教师专业培训课程热招！<span>2010-12-21</span></li>
    </ul>
</div>

JS使用正则表达式

代码为判断邮箱

 var filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
		 if (filter.test(mail))
		  return true;
		 else {
		 return false;}

另一种写法

 function Checks(){
		var patt1 = new RegExp(document.getElementById("text2").value);
		
		if(patt1.test(document.getElementById("text1").value)){
			document.getElementById("show").innerHTML = "匹配正确";
		}else{
			document.getElementById("show").innerHTML = "匹配错误";
		};
	}

<body>
    <form>
    	<table>
        	<tr>
            	<td>输入匹配内容</td>
                <td><input type="text" id="text1" /></td>
            </tr>
            <tr>
            	<td>输入正则表达</td>
                <td><input type="text" id="text2" /></td>
            </tr>
            <tr>
                <td colspan="2"><input type="button" οnclick="Checks()" value="确定"/></td>
            </tr>
            <tr>
            	<td>结果</td>
                <td><div id="show"></div></td>
            </tr>
            
    	</table>
    </form>
  
</body>

Css单行文字居中

水平居中 aline=‘center’

垂直居中将height和line-height 的值设置相同

Css多行文本垂直居中

.wrapper{  
    height:400px;  
    display:table;  
}  
.content{  
    vertical-align:middle;  
    display:table-cell;  
    border:1pxsolid#FF0099;  
    background-color:#FFCCFF;  
    width:760px;  
}

<div class="wrapper">
     <div class="content">content age</div>
</div>

css3 画一个心型

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{
			margin: 0 auto;
			padding:0;
		}
		.left{
			height: 20px;
			width: 10px;
			background-color: red;
			border-radius:10px 10px 0 0; 

			transform: rotate(-45deg);
		}
		.right{
			height: 20px;
			width: 10px;
			background-color: red;
			border-radius:10px 10px 0 0; 

			transform: rotate(45deg) translate(-9px,-19px);
			
			}
	</style>
		
	<script type="text/javascript">
		
	</script>
</head>
<body>
	<div class="left"></div>
	<div class="right"></div>
</body>
</html>