python: DOM 小实例
一、全选 全部取消 反选
全选：选择指定的所有项目。
全部取消： 取消所有选定的项目。
反选: 选择未选定的，之前已选定的则取消。
<!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 同时返回多种类型时, ...
随机推荐
- ViewHolder的改进写法
先看看ViewHolder通用写法 ViewHolder holder = null; if(convertView == null){ ...
- 明晨HOSTS编辑器mcHostsEdtor与火狐HostAdmin配合使用
在开发过程中,需要经常切换环境开发.测试.Stage和正式环境,甚为麻烦. 后来找到了HOST切换工具mcHostsEdtor工具快速切换host,但浏览器比如有HOST缓存,后来同事推荐FireFo ...
- UI第十一节——UIActivityIndicatorView
- (void)viewDidLoad { [super viewDidLoad]; // 创建一个UIActivityIndicatorView,大小是固定的 UIActi ...
- CentOS6.3 编译安装LAMP(4)：编译安装 PHP5.3.27
所需源码包: /usr/local/src/PHP-5.3.27/libmcrypt-2.5.8.tar.gz /usr/local/src/PHP-5.3.27/mhash-0.9.9.9.tar. ...
- linux source
清华TUNA镜像源https://mirrors.tuna.tsinghua.edu.cn/ 中科大USTC镜像源 https://mirrors.ustc.edu.cn/ ali http://mi ...
- [k]优雅的css
1.图片文字列表 (2016-01-25) 1.1 实现效果图如下: 1.2 代码: html:( 代码十分优雅哦! ) <ul> <li class="step1&quo ...
- jstl fortokens 分割字符串
forTokens标签: forTokens标签用来截取字符串: 属性: * var :定义变量 * items :切分字符串 * begin :从哪开始 * end :到哪结束 * step :步长 ...
- iOS 4种开发者身份的官方说明
https://developer.apple.com/support/compare-memberships/cn/ 为了防止链接失效,截图如下:
- sql server 中不同服务器上的数据库中表怎么互导数据
--创建一个链接 EXEC sp_addlinkedserver 'OtherServerDb','','SQLOLEDB','192.168.12.101' --第一个参数是给远程的服务器起的别名 ...
- Qt文件路径分隔符
QDir::toNativeSeparators()QDir::separator()