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 同时返回多种类型时, ...
随机推荐
- myeclipse 第一步
今天查myeclipse的一个不常用快捷键的时候,意外发现了一个学习myeclipse开端的博文(别问我是怎么查到这篇博文的....两个字:顺手),感觉比较详细,特意记下来, 别人的分享博客: htt ...
- R语言-用R眼看琅琊榜小说的正确姿势
博客总目录:http://www.cnblogs.com/weibaar/p/4507801.html 目录: 零:写在前面的一些废话 一.R眼看琅琊榜的基本原理 1.导入数据 2.筛选数据 3.多条 ...
- [Python] 网络爬虫和正则表达式学习总结
以前在学校做科研都是直接利用网上共享的一些数据,就像我们经常说的dataset.beachmark等等.但是,对于实际的工业需求来说,爬取网络的数据是必须的并且是首要的.最近在国内一家互联网公司实习, ...
- [Linux & SVN] SVN介绍及Linux下SVN命令收录
1. SVN是什么? SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制服务已从CVS迁移 ...
- PHP连接mysql数据库，并将取出的数据以json的格式输出
<?php error_reporting(E_ALL || ~E_NOTICE); header("Access-Control-Allow-Origin:*");//此处 ...
- C#夯实基础系列之const与readonly
一.const与readonly的争议 你一定写过const,也一定用过readonly,但说起两者的区别,并说出何时用const,何时用readonly,你是否能清晰有条理地说出个一二三 ...
- MQTT（二）推送
MQTT V3.1----publish解读 - leeying - 博客园 http://www.cnblogs.com/leeying/p/3791341.html MQTT - 聂永的博客 - ...
- NTC 热敏电阻温度计算公式
Rt = R *EXP(B*(1/T1-1/T2))这里T1和T2指的是K度即开尔文温度,K度=273.15(绝对温度)+摄氏度:其中T2=(273.15+25)Rt 是热敏电阻在T1温度下的阻值: ...
- java 数组中插入新的元素
class Demo1 { public static void main(String[] args) { /* 5. 有如下歌曲数组 String[] musics = new String[]{ ...
- socket通信之eofexception
方案一: 用read()将不会抛出异常.因为read是block方式的. readInt()抛出异常的原因(我遇到的)是对方在该端口没有消息发送. 方案二: socket的端口被阻塞了 ,也就是我们需 ...