demo1:修改页面元素
全选反选,并计算总价
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function allCheck(all){
var allChecks=document.querySelectorAll("#all_pro_div>input");
console.log("checkboxNum:%d",allChecks.length);
for(var i=0;i<allChecks.length;i++){
allChecks[i].checked=all.checked;
}
}
function sumPrice(){
var allChecks=document.querySelectorAll("#all_pro_div>input:checked");
console.log("checkboxNum:%d",allChecks.length);
var sum=0;
for(var i=0;i<allChecks.length;i++){
sum+=parseInt(allChecks[i].value);
}
// var sumSpan=document.querySelector("#sum_price_span");
document.querySelector("#sum_price_span").innerText=sum+"元";
}
</script>
</head>
<body>
<input type="checkbox" id="allCheck" name="all" onclick="allCheck(this);sumPrice();">全选
<div id="all_pro_div">
<input type="checkbox" name="all" value="1">1<br/>
<input type="checkbox" name="all" value="2">2<br/>
</div>
总价:<span id="sum_price_span"></span>
</body>
</html>
demo2:增添删除页面元素
城市联动多选框
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function addValue(){
var city=[["顺义","海淀","朝阳","东城"],["石家庄","唐山","廊坊","保定"]];
var left=document.querySelector("#left");
var right=document.querySelector("#right");
var options=left.querySelectorAll("option");
var cityOptions=right.querySelectorAll("option");
for(var i=0;i<cityOptions.length;i++){
right.removeChild(cityOptions[i]);
}
console.log("optionsNum:%d",options.length);
for(var i=0;i<options.length;i++){
if(options[i].selected){
var pv=parseInt(options[i].value);
for(var j=0;j<4;j++){
var newOp=document.createElement("option");
newOp.innerText=city[pv][j];
right.appendChild(newOp);
}
}
}
}
</script>
</head>
<body>
<select id="left" multiple>
<option value="0">北京</option>
<option value="1">河北</option>
</select>
<input type="button" value="-->" onclick="addValue();">
<select id="right" multiple>
</select>
</body>
</html>
debug过程:
标签
表单
<input type="checkbox"
<input type="button">button的value属性才显示
滑动/下拉列表
<select multiple>
<option value="1">牛奶</option>
</select>
Multiple为展开的列表
选项选中属性option.selected
选择器
整个文件则document.querySelectorAll("");
已找到上层对象可left.querySelectorAll
Id# class. 标签无
层次>,伪类:
取input的值allChecked[i].value
#all_pro_div > input:checked
InnerText为标签属性,非方法
document.querySelector("#sum_price_span").innerText=
层次选择器
E > F 子选择器
属性选择器
伪类:
CSS 伪类用于向某些选择器添加特殊的效果
锚伪类
所有CSS伪类/元素
http://www.runoob.com/css/css-pseudo-classes.html
在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。
a:link
{color: #FF0000} /* 未访问的链接 */
a:visited
{color: #00FF00} /* 已访问的链接 */
a:hover
{color: #FF00FF} /* 鼠标移动到链接上 */
a:active
{color: #0000FF}
属性 |
描述 |
CSS |
向被激活的元素添加样式。 |
1 |
|
向拥有键盘输入焦点的元素添加样式。 |
2 |
|
当鼠标悬浮在元素上方时,向元素添加样式。 |
1 |
|
向未被访问的链接添加样式。 |
1 |
|
向已被访问的链接添加样式。 |
1 |
|
向元素的第一个子元素添加样式。 |
2 |
|
向带有指定 lang 属性的元素添加样式。 |
动态创建元素
function addDiv() { // 创建一个新的div // createElement中传入要创建的页面元素的标签名称 var newDiv = document.createElement("div"); // 添加这个div的属性和内容 newDiv.style.border = "1px solid green" ; newDiv.style.width = "400px"; newDiv.innerText = "新创建的div" ; // 把创建好的div放入到某个页面元素中 // 取得all_div var allDiv = document.querySelector("#all_div"); allDiv.appendChild(newDiv); } |
声明二维数组
var Array = [["0-1","0-2"],["1-1","1-2"],["2-1","2-2"]]
打印调试信息
console.log("**:%d",**);