一、全选 全部取消 反选
全选：选择指定的所有项目。
全部取消： 取消所有选定的项目。
反选: 选择未选定的，之前已选定的则取消。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="button" value="全选" onclick="Quan()">
<input type="button" value="取消" onclick="Qu()">
<input type="button" value="反选" onclick="Fan()">
</div>
<table>
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>年龄</th>
</tr>
</thead> <tbody id="tb">
<tr>
<th><input class="c1" type="checkbox"/></th>
<th>alex</th>
<th>18</th>
</tr>
<tr>
<th><input class="c1" type="checkbox"/></th>
<th>alex</th>
<th>18</th>
</tr>
<tr>
<th><input class="c1" type="checkbox"/></th>
<th>alex</th>
<th>18</th>
</tr>
</tbody>
</table>
<script>
function Quan() {
var a = document.getElementById("tb"); //通过id 找到这个标签
var checks = a.getElementsByClassName("c1"); // 获取class属性为c1 的标签
for(i=0;i<checks.length;i++){
var checks_c = checks[i];
checks[i].checked = true; // checked 判断是否为已选定 也可设置
}
}
function Qu() {
var a = document.getElementById("tb");
var checks = a.getElementsByClassName("c1");
for(i=0;i<checks.length;i++) {
var checks_c = checks[i];
checks[i].checked = false;
}
}
function Fan() {
var a = document.getElementById("tb");
var checks = a.getElementsByClassName("c1");
for(i=0;i<checks.length;i++) {
var checks_c = checks[i];
if(checks_c.checked){
checks_c.checked = false;
}else{
checks_c.checked = true;
}
} } </script> </body>
</html>
实例
二、输入框
我们进经常会遇到一个输入框 在没有输入内容的时候 他是给我们 以灰色字体显示的 “请输入内容” 。
当我们鼠标选定的时候字符串消失，这个字符串就会消失，开始输入内荣 而我们输入的内容是黑色的字体；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.gg{
color: #dddddd;
}
.dd{
color: black;
}
</style>
</head>
<body>
<input type="text" class="gg" value="请输入内容" onfocus="Focus(this)" onblur="Blur(this)">
<script>
function Focus(ths) { // 点击触发这个函数
ths.value = ""; // 把他的value 设置成 空字符串；
ths.className = "dd"; // 改变标签的属性样式；
}
function Blur(ths) { // 鼠标移动之后 在外面点击 触发这个函数
var a = ths.value; // 获取他的value
if( a == "请输入内容" || a.trim().length == 0){ // 判断内容是否为空或者 是 请输入内容
ths.className = "gg"; // 如果是 给他设置样式
ths.value = "请输入内容" // 变为原来的 字符串；
}
}
</script>
</body>
</html>
三、对筛选标签的操作
比如当我们遇到多数 相同的标签是，需对一部分进行操作，我们就可以按照他们的属性进行筛选；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="Func()" value="点我"/>
<div id="c1">
<div class="a">123</div>
<div class="a" alex="sb">123</div>
<div class="a">123</div>
<div class="a">123</div>
<div class="a" alex="sb">123</div>
<div class="a">123</div>
<div class="a">123</div>
<div class="a" alex="sb">123</div>
</div>
<script>
function Func() {
var a = document.getElementById("c1");
var b = a.children;
for(var i=0;i<b.length;i++){
var ccc = b[i];
var ddd = ccc.getAttribute("alex"); // 获取指定标签的属性
if(ddd == "sb"){
ccc.innerText = ""; //设置文本
}else {
}
}
}
</script> </body>
</html>
实例
四、小的操作栏
我们选定的菜单他会给我们相应的内容；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
list-style: none;
padding: 0;
margin: 0;
}
ul li{
float: left;
background-color: #2459a2;
color: white;
padding: 8px 10px;
}
.clearfix:after{
display: block;
content: ".";
height: 0;
visibility: hidden;
clear: both;
}
.hide{
display: none;
}
.tab-menu .title{
background-color: #dddddd;
}
.tab-menu .title .active{
background-color: white;
color: black;
}
.tab-menu .content{
border: 1px solid #dddddd;
min-height: 150px;
} </style>
</head>
<body>
<div style="width: 400px; margin: 0 auto;">
<div class="tab-menu">
<div class="title clearfix">
<ul>
<li target="h1" class="active" onclick="Show(this);">价格趋势</li>
<li target="h2" onclick="Show(this);">市场分布</li>
<li target="h3" onclick="Show(this);">其他</li>
</ul>
</div>
<div id="content" class="content">
<div con="h1">content1</div>
<div con="h2" class="hide">content2</div>
<div con="h3" class="hide">content3</div>
</div>
</div> </div>
<script>
function Show(ths) {
var brother = ths.parentElement.children; //获取标签父类的所有孩子
console.log(brother);
var targets = ths.getAttribute("target"); // 获取指定属性的标签
ths.className = "active"; // 设置class属性
for(var i=0;i<brother.length;i++){
if(ths == brother[i]){ }else{
brother[i].removeAttribute("class"); //其他的删除class属性 }
} var contents = document.getElementById("content").children;
for(var j=0;j<contents.length;j++){
var current_content = contents[j];
var cons = current_content.getAttribute("con");
if(cons == targets){
current_content.classList.remove("hide");
}else{
current_content.className = "hide";
}
} } </script> </body>
</html>
实例
五、输入框
有时候我们还会遇到这样的输入框, 他会自动把你输入的内荣 添加到下面的列表内
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="text"/>
<input type="button" value="添加" onclick="AddElement(this)"/>
</div>
<div>
<ul id="commentList">
<li>alex</li>
<li>123</li>
</ul>
</div>
<script>
function AddElement(ths) {
var val = ths.previousElementSibling.value; //获取上一个兄弟标签元素 的 value
ths.previousElementSibling.value = ""; // 把上一个兄弟标签元素的value 设为 空字符串
var list = document.getElementById("commentList");
//第一种字符串方式对象方式
// var str = "<li>" + val + "</li>"; //字符串拼接
// list.insertAdjacentHTML("afterEnd",str); // 插入一个标签
//第二种对象方式
// var tag = document.createElement("li"); // 按照指定名字创建一个 标签
// tag.innerText = val; // 给这个标签 赋予内容
// list.appendChild(tag); // 添加一个子标签
//第三种 添加的标签里面套标签
var tag = document.createElement("li");
tag.innerText = val;
var temp = document.createComment("a");
temp.innerText = "百度";
temp.href = "www.baidu.com";
tag.appendChild(temp); // 添加一个子标签
list.insertBefore(tag,list.children[2]); // 在指定的已有标签之前插入一个新标签
}
</script>
</body>
</html>
beforeEnd // 内部最后 beforeBegin // 外部上边 afterBegin // 内部贴身 afterEnd // 外部贴身
六、自动返回最顶部页面
在我们浏览页面的是 由于页面太长 返回最顶部很不方便 所有又有了 这样的方法
在频幕的右下角设置一个点击框 点击一下自动返回最顶部页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.go-top{
position: fixed;
right: 28px;
bottom: 19px;
width: 40px;
height: 40px;
background-color: #2459a2;
color: white;
}
.hide{
display: none;
}
</style>
</head> <body onscroll="Func()"> //鼠标滑动时触发这个事件
<div id="i1" style="height: 2000px">
<h1>hello</h1>
</div>
<div id="i2" class="go-top hide">
<a onclick="GoTop();">返回顶部</a>
</div>
<script>
function Func() {
var scrollTo = document.body.scrollTop; // 获取滚动高度
var ii = document.getElementById("i2");
if(scrollTo>100){ // 如果滚动高度大于100时 让它显示出来
ii.classList.remove("hide");
}else{
ii.classList.add("hide"); //否则是影藏状态
}
}
function GoTop() {
document.body.scrollTop = 0; //滑动高度设为0
}
</script> </body>
</html>
实例
七、按照浏览内容 自动显示 属于该文的菜单；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
background-color: #dddddd;
}
.pg-header{
height: 48px;
background-color: black;
}
.w{
margin: 0 auto;
width: 980px;
}
.pg-body .menu{
position: absolute;
left: 200px;
width: 180px;
background-color: white;
float: left;
}
.pg-body .menu .active{
background-color: #425a66;
color: white;
}
.pg-body .fixed{
position: fixed;
top: 10px;
}
.pg-body .content{
position: absolute;
left: 385px;
right: 200px;
background-color: white;
float: left;
}
.pg-body .content .item{
height: 900px;
}
</style>
</head>
<body onscroll="Hua()">
<div class="pg-header">
<div class="w"> </div>
</div>
<div class="pg-body">
<div id="menu" class="menu">
<ul>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ul>
</div> <div id="content" class="content">
<div class="item">床前明月光</div>
<div class="item">疑是地上霜</div>
<div class="item">我是郭德纲</div>
</div>
</div>
<script>
function Hua() {
var a = document.body.offsetHeight; //body的高度
var b = document.getElementById("content").offsetHeight; // 自身高度
var c = document.documentElement.clientHeight; //可视范围的高度
var huaGao = document.body.scrollTop; //鼠标滚动的高度
console.log(a,b,huaGao,c);
var caiDan = document.getElementById("menu"); // 获取标签
if(huaGao>48){ //判断是否小于 48 就是最顶端的 那个黑条的高度
caiDan.classList.add("fixed"); // 如果小于 那么 添加样式 让它固定
}else{
caiDan.classList.remove("fixed"); // 否则删除这个样式
}
var items = document.getElementById("content").children; // 找到他的孩子
for(var i=0;i<items.length;i++){
var currentItems = items[i]; // 自身距离上一级的高度 加上 父级距离最顶端的高度 等于自己距离最顶端的高度
var currentItemsBodyTop = currentItems.offsetTop + currentItems.offsetParent.offsetTop;
var currentItemWindowTop = currentItemsBodyTop - huaGao; // 开始滑动时 自己距离最顶端的高度减去滑动高度等于 滑动后自己距离最顶端的高度
var currentHeight = currentItems.offsetHeight; // 自身的高度
var bottomHeight = currentItemsBodyTop + currentHeight; // 自身加自己距离最顶端的高度
if((a+b) == (huaGao+c)){
var mu = document.getElementById("menu").children[0].lastElementChild;
var lis = document.getElementById("menu").getElementsByTagName("li");
for(var m=0;m<lis.length;m++){
var current_list = lis[m];
if(current_list.getAttribute("class") == "active"){
current_list.classList.remove("active");
break
}
}
mu.classList.add("active");
return
} if(currentItemWindowTop<0 && bottomHeight>huaGao){ // 如果滑动后的高度小于0(表面自己的底部刚消失)并且自身加自己距离最顶端的高度大于滑高(说明滑高还没滑完)
var ziji = caiDan.getElementsByTagName("li")[i]; // 找到li名字的标签 索引
ziji.className = "active"; // 把他的样式设为 active
var lis = caiDan.getElementsByTagName("li"); // 找到li名字的标签
for(var j=0;j<lis.length;j++){
if(ziji == lis[j]){ // 如果是自己啥也不干 }else{
lis[j].classList.remove("active"); //其他的全部删除样式
}
}
break
}
}
}
</script>
</body>
</html>
实例
此次小例 重在懂得原理 熟练方法
python: DOM 小实例的更多相关文章
-
Python 入门小实例笔记
实例1:打印用户输入的姓名与手机号码知识点:编码,获取输入,变量,标准输出 #encoding=utf-8 import time #1.提示用户输入信息 name = input ("请输 ...
-
jquery VS Dom(小实例单选-多选-反选)
一直以来大家对jquery评价莫过于六个字 “吃得少,干的多” ,应用实例让大家看看这款牛到爆的插件能帮我们做什么,话不多说,直接加码 <!DOCTYPE html> <html l ...
-
Python Tkinter小实例——模拟掷骰子
什么是Tkinter? Tkinter 是 Python 的标准 GUI 库.Python 使用 Tkinter 可以快速的创建 GUI 应用程序. 由于 Tkinter 是内置到 python 的安 ...
-
python 函数小实例
1.判断一个数字是否为素数: import math # -----------------判断一个数是否是素数------------------ def sushu(a): i=1 for i i ...
-
JS基础(一)dom小实例
DOM的新增示例 <script language="JavaScript"> window.onload = function(){ //createDocument ...
-
python爬虫小实例
1.python爬取贴吧壁纸 1.1.获取整个页面数据 #coding=utf-8 import urllib def getHtml(url): page = urllib.urlopen(url) ...
-
Python（五）编程小实例
Python(五)编程小实例 抓取网页信息,并生成txt文件内容! Python抓取网页技能--Python抓取网页就是我们常看见的网络爬虫,我们今天所要用到的就是我们Python中自带的模块,用这些 ...
-
python+pcap+dpkt 抓包小实例
#!/usr/bin/env python # -*- coding: utf-8 -*- """ 网络数据包捕获与分析程序 """ imp ...
-
python第六天 函数 python标准库实例大全
今天学习第一模块的最后一课课程--函数: python的第一个函数: 1 def func1(): 2 print('第一个函数') 3 return 0 4 func1() 1 同时返回多种类型时, ...
随机推荐
-
c#-二分查找-算法
折半搜索,也称二分查找算法.二分搜索,是一种在有序数组中查找某一特定元素的搜索算法. A 搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束: B 如果某一特定元素大于或者小 ...
-
JavaScript对象字面量
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
-
经常被忽略的几个CSS3属性之强大应用（一、timing-function: steps() 二、animation-direction 三、timing-function: cubic-bezier()）
一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...
-
【转】【opencv】仿射变换
仿射变换 目标 在这个教程中你将学习到如何: 使用OpenCV函数 warpAffine 来实现一些简单的重映射. 使用OpenCV函数 getRotationMatrix2D 来获得一个 旋转矩阵 ...
-
Codeforces Round #232 (Div. 1) A 解题报告
A. On Number of Decompositions into Multipliers 题目连接:http://codeforces.com/contest/396/problem/A 大意: ...
-
Protege5.0.0入门学习
OWL本体的重要组成部分 Individuals:个体,代表一个领域里面的对象.可以理解成一个类的实例(instances of classes). Properties:属性,是两个个体之间的双重联 ...
-
linkin大话设计模式--桥接模式
linkin大话设计模式--桥接模式 桥接模式是一种结构化模式,他主要应对的是:由于实际的需要,某个类具有2个或者2个以上维度的变化,如果只是使用继承将无法实现功能,或者会使得设计变得相当的臃肿.我们 ...
-
BZOJ4942【noi2017】整数
题目背景 在人类智慧的山巅,有着一台字长为10485761048576 位(此数字与解题无关)的超级计算机,著名理论计算机科 学家P博士正用它进行各种研究.不幸的是,这天台风切断了电力系统,超级计算机 ...
-
JDK1.8源码(三)——java.util.HashMap
什么是哈希表? 在讨论哈希表之前,我们先大概了解下其他数据结构在新增,查找等基础操作执行性能 数组:采用一段连续的存储单元来存储数据.对于指定下标的查找,时间复杂度为O(1):通过给定值进行查找, ...
-
《Unix网络编程》读书笔记
UDP和TCP UDP(User Datagram Protocol,用户数据报协议)是一个无连接协议,不保证UDP数据报会到达其最终目的地,不保证各数据报的先后顺序跨网络后保持不变,也不保证每个数据 ...