html/css/js/jq
Posted xuejye
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html/css/js/jq相关的知识，希望对你有一定的参考价值。
//快递单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body
.total
width:1000px;
height:800px;
background-color:gray;
margin:auto;
/*color:white;*/
/*float:left;*/
/*font-size:50px;*/
/*text-align:center;
position:absolute;*/
.title
width:80%;
height: 10%;
font-size:50px;
color: white;
padding:5% 45% 0%;
/*position:relative;*/
.information
margin:0% 10%;
/*padding:0% 10%;*/
width:800px;
height:300px;
.but
margin:0% 50%;
width:100px;
height: 100px;
input
width:800px;
</style>
</head>
<body>
<div class = "total">
<div class = "title">
快递单
</div>
<div class="information">
<table border ="1" width="100%" height="100%">
<tr>
<td>
<div>
<fieldset>
<legend>基本信息</legend>
姓名：<input type ="test" /></br>
电话：<input type ="test"/></br>
地址：<input type ="test"/></br>
</fieldset>
</div>
</td>
</tr>
</table>
</div>
<div class="but">
<button color ="white" >
提交
</button>
</div>
</div>
</body>
</html>
//当当
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.special
background-color: azure;
width:200px;
height:50px;
float: right;
margin-right:5%;
margin-top=20px;
.title
background-color: orangered;
margin:0% 5%;
width:90%;
height:50px;
.header
width=10%;
margin:left;
margin-left:5% ;
.total
background-color : gray;
background-image: url(img/banner.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width:90%;
height:170px;
margin:0% 5%;
.extend
margin:50px 5%;
background-color: white;
width:90%;
height:250px;
.extend1
background-image: url(img/book-01.jpg);
background-repeat: no-repeat;
width:25%;
height:250px;
float:left;
margin-left: 5%;
.extend2
background-color: white;
width:25%;
height:250px;
float:left;
margin-left: 0%;
.extend3
background-color: white;
width:35%;
height:250px;
float:left;
margin-left:5%;
.extend31
background-image: url(img/book-02.jpg);
width:100%;
height:50%;
/*float: left;
margin-left: 0%;
margin:0%;*/
background-repeat: no-repeat;
.extend1img
background-image: url(img/bookNo1.gif);
width:13%;
height:20%;
float:left;
margin-left:7%;
background-repeat: no-repeat;
.extend32
background-image: url(img/book-03.jpg);
width:100%;
height:50%;
/*float: left;
margin-left: 0%;*/
/*margin-top:60%;*/
background-repeat: no-repeat;
.extend31text
background-color: white;
width:50%;
height:100%;
float: right;
margin-right:15%;
margin-top: -10%;
.extend32text
background-color: white;
width:50%;
height:100%;
float:right;
margin-right: 15%;
margin-top: -10%;
/*margin-top: ;*/
.extend31img
background-image: url(img/bookNo2.gif);
width:10%;
height:30%;
background-repeat: no-repeat;
.extend32img
background-image: url(img/bookNo3.gif);
width:10%;
height:30%;
background-repeat: no-repeat;
.link
width:10%;
height:50px;
color: white;
float:left;
margin-left: 0px;
text-align: center;
margin-top:12px;
</style>
<div class = "header">
<img src="img/logo.jpg" alr="logo"/>
<div class="special" >
</div>
</div>
</head>
<body>
<div class= "title">
<div class = "link">
童装
</div>
<div class = "link">
童装
</div>
<div class = "link">
童装
</div>
<div class = "link">
童装
</div>
<div class = "link">
童装
</div>
<div class = "link">
童装
</div>
<div class = "link">
童装
</div>
<div class = "link">
童装
</div>
<div class = "link">
童装
</div>
<div class = "link">
童装
</div>
</div>
<div class = "total">
<!--<img src="img/banner.png" width="100%" height="100%">-->
</div>
<div class=extend>
<div class ="extend1">
<div class="extend1img">
</div>
</div>
<div class ="extend2">
<p style="color: blue">如何用css背景图片拉伸 以及100% 满屏显示呢？这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。
比如一个容器（body,div,span）中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。
</p>
</div>
<div class ="extend3">
<div class="extend31">
<div class="extend31img">
</div>
<div class="extend31text">
<p style="color: blue">
如何用css背景图片拉伸 以及100% 满屏显示呢？这个问题听起来似乎
</p>
</div>
</div>
<div class="extend32">
<div class="extend32img">
</div>
<div class="extend32text">
<p style="color: blue">
如何用css背景图片拉伸 以及100% 满屏显示呢？ </p>
</div>
</div>
</div>
</div>
</body>
</html>
//动态表格
<!DOCTYPE html>
<html>
<head>
<meta htt-equiv="content-type" content="text/html" charset="UTF-8"/>
</head>
<title></title>
<body>
<center>
ID:<input type="text" id="id"/>
NAME:<input type="text" id="name"/>
PRICE:<input type="text" id="price" />
</center>
<hr size="3px">
<table align="center" border ="1px" cellspacing ="0px" cellpadding = "5px" width = "800px ">
<thead>
<tr>
<td>
<input type = "checkbox" onclick = "sel(this)" />全选
</td>
<td>ID</td>
<td>NAME</td>
<td>PRICE</td>
<td>OPRATION</td>
</tr>
</thead>
<tbody id = "tb">
<tr>
<td>
<input type ="checkbox" name="tbBox" />
</td>
<td>1</td>
<td>apple</td>
<td>5</td>
<td>
<a href="javascript:void(0)" onclick = "delRow(this)"/>delete</a>
</td>
</tr>
<tr>
<td>
<input type ="checkbox" name="tbBox" />
</td>
<td>1</td>
<td>apple</td>
<td>5</td>
<td>
<a href="javascript:void(0)" onclick = "delRow(this)"/>delete</a>
</td>
</tr>
<tr>
<td>
<input type ="checkbox" name="tbBox" />
</td>
<td>1</td>
<td>apple</td>
<td>5</td>
<td>
<a href="javascript:void(0)" onclick = "delRow(this)"/>delete</a>
</td>
</tr>
</tbody>
</table>
<center>
<input type = "button" value="add" onclick="addRow()" />
<input type = "button" value="delete checked" onclick="delSelect()" />
<input type = "button" value="~" onclick="reverseSelect()" />
</center>
<script type = "text/javascript">
function addRow()
var idV=document.getElementById("id").value;
var nameV=document.getElementById("name").value;
var priceV=document.getElementById("price").value;
var td1=document.createElement("td");
td1.innerHTML='<input type="checkbox" name = "tbBox"/>'
var td2=document.createElement("td");
td2.innerText=idV;
var td3=document.createElement("td");
td3.innerText=nameV;
var td4=document.createElement("td");
td4.innerText=priceV;
var td5=document.createElement("td");
td5.innerHTML='<a href="javascript:void(0)" onclick = "delRow(this)">delete</a>'
var tr=document.createElement("tr");
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
var tbody = document.getElementById("tb")
tbody.appendChild(tr)
function sel(checkedAll)
var boxs = document.getElementsByName("tbBox")
if(checkedAll.checked)
for(var i = 0;i<boxs.length;i++)
boxs[i].checked=true;
else
for(var i = 0;i<boxs.length;i++)
boxs[i].checked=!boxs[i].checked
function delSelect()
var boxs = document.getElementsByName("tbBox");
var tbody=document.getElementById("tb");
for(var i = 0;i<boxs.length;i++)
if(boxs[i].checked)
var row=boxs[i].parentNode.parentNode;
tbody.removeChild(row)
i--;
function reverseSelect()
var boxs = document.getElementsByName("tbBox");
for(var i = 0 ;i < boxs.length; i++)
boxs[i].checked = !boxs[i].checked
function delRow(row_td_a)
var tbody=document.getElementById("tb");
var row =row_td_a.parentNode.parentNode;
tbody.removeChild(row);
</script>
</body>
</html>
表单：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
</head>
<body>
<form action = "http://taobao.com" method="post">
用户名<input type="text" placeholder="手机邮箱qq"/> <br />
密码 <input type = "password" placeholder="密码" /> <br />
确认密码<input type = "password" placeholder="与密码输入一致" /> <br />
<input type= "submit" />
</form>
</body>
<script type="text/javascript" src="jquery-1.8.3.js" ></script>
<script type="text/javascript">
$(function()
var userflag = false ;
$(":text").focus(function()
$(this).attr("placeholder","")
)
$(":text").blur(function()
if($(this).val()=="")
$(this).attr("placeholder","手机邮箱qq")
else
var value = $(this).val()
if(value.indexOf('@')!=-1&&value.indexOf('@')<value.indexOf('.'))
$(":text").next().remove()
$(":text").after("<span style= 'color:green;'>√<br/></span>")
userflag=true;
else
$(":text").next().remove()
$(":text").after("<span style= 'color:red;'>×<br/></span>")
userflag=false;
)
$("form").submit(function()
if(!userflag)
return false;
else
if($(":password:eq(0)").val()==$(":password:eq(1)").val())
return true;
else
return false;
)
)
</script>
</html>
动态表格：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body
font-size: 150%
td
text-align: center
</style>
</head>
<body>
Name:
<input type="text" id="name" style="margin-right:20px" /> Price:
<input type="text" id="price" />
<input type="button" value="add" style="margin-left:20px" />
<hr size="2" />
<p> </p>
<table border="1" bordercolor="blue" cellspacing="0" width="70%" align="center">
<tr bgcolor="lightblue" align="center">
<td><b> </b></td>
<td><b> Id </b></td>
<td><b> Name </b></td>
<td><b> Price </b></td>
<td><b> Count </b></td>
<td><b> Total_Price </b></td>
<td><b> Delete </b> </td>
</tr>
<tbody id="tbody" align="center">
<tr>
<td> <input type="checkbox" /> </td>
<td>1</td>
<td>Iphone6</td>
<td>5000</td>
<td><input type="button" value="-" /><input type="text" size="2" value="1" /><input type="button" value="+" /></td>
<td>5000</td>
<td> <input type="button" value="delete" /> </td>
</tr>
<tr>
<td> <input type="checkbox" /> </td>
<td>2</td>
<td>IPad</td>
<td>2000</td>
<td><input type="button" value="-" /><input type="text" size="2" value="1" /><input type="button" value="+" /></td>
<td>2000</td>
<td> <input type="button" value="delete" /> </td>
</tr>
<tr>
<td> <input type="checkbox" /> </td>
<td>3</td>
<td>Apple</td>
<td>7</td>
<td><input type="button" value="-" /><input type="text" size="2" value="1" /><input type="button" value="+" /></td>
<td>7</td>
<td> <input type="button" value="delete" /> </td>
</tr>
</tbody>
</table>
<div style="text-align:center">
<input type="button" value="select all" style="margin-right:20px" />
<input type="button" value="delete all select" style="margin-right:20px" />
<input type="button" value="反选" style="margin-right:20px" />
</div>
</body>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function()
//只有JQ对象才能调用JQ方法
/*添加*/
$(":button[value=add]").click(function()
//alert(parseInt($("#tbody tr:last td:eq(1)").text()));
// alert(parseInt($("#tbody tr:last td:eq(1)").text()));
if(isNaN(parseInt($("#tbody tr:last td:eq(1)").text())))
var idV = 1;
else
// alert(parseInt($("#tbody tr:last td:eq(1)").text()));
var idV = parseInt($("#tbody tr:last td:eq(1)").text())+1;
var nameV = $("#name").val();
var priceV = $("#price").val();
var td1 = "<td><input type='checkbox'/></td>"
var td2 = "<td>"+idV+"</td>"
var td3 = "<td>"+nameV + "</td>"
var td4 = "<td>"+priceV + "</td>"
var td5 = "<td><input type='button' value='-' /><input type='text' size='2' value='1' /><input type='button' value='+' /></td>"
var td6 = "<td>"+priceV + "</td>"
var td7 = "<td> <input type='button' value='delete' /> </td>"
$("#tbody").append("<tr></tr>")
//$("tbody tr:last").append(td1).append(td2)
$("tbody tr:last").append(td1).append(td2).append(td3).append(td4).append(td5).append(td6).append(td7)
)
$("div :button :last").click(function()
$(":checkbox").each(function(index)//打印9*9
if($(this).prop("checked"))
$(this).prop("checked",false)
else
$(this).prop("checked",true)
)
)
$(":button[value='+'] ").live('click',function()
var num=$(this).prev().val();
$(this).prev().val(parseInt(num)+1);
num=$(this).prev().val();
var parent=$(this).parent();
var nummid=parent.prev().text();
parent.next().text(parseInt(nummid)*parseInt(num));
)
$(":button[value='-'] ").live('click',function()
var num=$(this).next().val();
$(this).next().val(parseInt(num)-1);
num=$(this).next().val();
if(parseInt(num)==0)
var parent=$(this).parent().parent();
parent.remove();
$(":checkbox").each(function(index)
var now = $(this).parent().next();
now.text(parseInt(index)+parseInt("1"));
);
var parent=$(this).parent();
var nummid=parent.prev().text();
parent.next().text(parseInt(nummid)*parseInt(num));
)
$(":button[value=delete] ").live('click',function()
var parent=$(this).parent().parent();
parent.remove();
$(":checkbox").each(function(index)
var now = $(this).parent().next();
now.text(parseInt(index)+parseInt("1"));
);
)
$(":button[value='select all'] ").click(function()
$(":checkbox").each(function()
$(this).prop("checked",true);
)
)
$(":button[value='delete all select']").click(function()
$(":checkbox").each(function()
if($(this).prop("checked"))
var parent=$(this).parent().parent();
parent.remove();
)
)
$(":text:gt(1)").focus(function()
)
$(":text:gt(1)").blur(function()
var num=$(this).val();
if(parseInt(num)>0)
var parent=$(this).parent();
var nummid=parent.prev().text();
parent.next().text(parseInt(nummid)*parseInt(num));
// alert(parseInt(nummid)*parseInt(num));
else
var parent=$(this).parent().parent();
parent.remove();
)
)
</script>
</html>
以上是关于html/css/js/jq的主要内容，如果未能解决你的问题，请参考以下文章