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 同时返回多种类型时, ...
随机推荐
- Linux下如何不停止服务,清空nohup.out文件
tips:最近发现有不少人在百度这个问题,当初如易我也是初学者,随便从网上搜了一下,就转过来了,不过为了避免搜索结果同质化,为大家提供更翔实的参考,我将nohup.out相关知识整理汇总如下: 1.n ...
- Coursera-Getting and Cleaning Data-week4-R语言中的正则表达式以及文本处理
博客总目录:http://www.cnblogs.com/weibaar/p/4507801.html Thursday, January 29, 2015 补上第四周笔记,以及本次课程总结. 第四周 ...
- Programming with Objective-C ----------Encapsulating Data
Most Properties Are Backed by Instance Variables By default, a readwrite property will be backed by ...
- 一段freemarker高级分页效果的代码
<a onclick="page(1)">首页</a> [#if currpage != 1] [#assign last=currpage - 1] &l ...
- 【荐2】Total Commander 7.57 配置选项 个性化设置备份，，，开启时如何自动最大化？？？（二）
最近安装了下新版的“Total Commander 7.56”,发现它的默认设置是如此的不好用,现把对其个性化设置备份如下(符合大部分用户的操作习惯): 默认打开Total Commander 7.5 ...
- PHP错误处理函数set_error_handler()的用法
定义和用法 set_error_handler() 函数设置用户自定义的错误处理函数. 该函数用于创建运行时期间的用户自己的错误处理方法. 该函数会返回旧的错误处理程序,若失败,则返回 null. 语 ...
- Shell入门教程：命令替换 $() 和 ``
所谓命令替换,是把命令执行后的标准输出放入变量中.这是一个十分有威力的功能.例如说, 想查看工作目录中所有的文件名,可执行ls命令,但如何把这些文件名存入变量中,供往后的程序代码再利用呢? 使用命令替 ...
- php之JavaScript
JS对于大小写敏感 作用:增加跟html页面的交互性. 应用:验证表单.创建cookies(可插入html页面的编程代码)js插入页面后可由所有现代的浏览器执行.应用于<body>< ...
- 下拉列表 select-option ; select-optgroup-option
HTML中的下拉列表: <select> <option value ="1">Volvo</option> <option value ...
- 曲线救国：IIS7集成模式下如何获取网站的URL
如果我们在Global中的Application_Start事件中访问HttpContext.Current.Request对象,如: protected void Application_Start ...