本节内容
CSS基础
javascript基础
DOM
前言，这边这块楼主已经很熟悉了，CSS天天用到，简单的一些javascript也是所以就挑点重点说了。然后就是dom不怎么用，但是其实也用不到，大家以后都会是用jquery来做这一块的需求，所以只要稍作了解就好了。
CSS基础
继续上一章节的css、
position
常用的三个：
fixed ==>浮动的固定在某个位置
relative + absolute ==> 通常这2个一起用，用来在父标签的内部定位，相对于父标签的一个绝对定位。
顺带提一下opcity 范围是0~1、表示透明度，z-index层级顺序，幕态化时候用到
下面来看案例：
返回顶部的案例、返回顶部四个字一直漂浮在右下角、点击跳回最上面（先不用管javascript）
<div style="position: fixed;right: 10px;bottom: 10px;width: 40px;height: 40px;background-color: #073763" onclick="GoTop()">返回顶部</div>
<div style="width: 100%;height: 3000px;background-color: #6e6568"></div>
<script>
function GoTop() {
window.scrollTo(0,0);
}
</script>
网页悬浮案例：
头部固定案例
<div style="height: 60px;background-color: blueviolet;position:fixed;left: 0;right: 0;top: 0px;">头部</div>
<div style="background-color: #BEBEBE;height: 2000px;margin-top: 61px">内容正文</div>
这里我们让头部浮动起来(position:fixed)，确认它的位置(left,top)，然后让下面的正文离上面一定距离(margin-top)保证正文不被挡住。
relative + absolute 案例 只是相对于父类位置的相对定位，不一定在父标签内部
<div style="border: 1px solid seagreen;width: 400px;height: 300px;margin: 0 auto;position: relative">
<div style="background-color: #073763;position:absolute;bottom: 20px;right: 20px;color: white">div1</div>
</div>
这里我们要强调的是相对于父标签的位置并不是说，在父标签内部活动，我们可以设置他的值在负数，则标签会移动到父标签外面。
<div style="border: 1px solid seagreen;width: 400px;height: 300px;margin: 0 auto;position: relative">
<div style="background-color: #073763;position:absolute;bottom: 20px;right: -50px;color: white">div1</div>
</div>
幕态化弹出框
谈出框与后部页面 三层页面框架;z-index 大的在上面;display:none 先让弹框消失
<div style="z-index:10;position: fixed;width: 400px;height: 100px;background-color: white;top: 50%;left: 50%;margin-left: -200px;margin-top: -50px">
<input type="text" />
</div>
<div style="z-index:9;position:fixed;top: 0;bottom: 0;left: 0;right: 0;background-color: rebeccapurple;opacity: 0.3"></div>
<div style="background-color: yellow;height: 3000px;">内容正文</div>
首先分析一下三层结构：网页本身是第一层，然后上面盖着的一层薄暮是第二层，最后的弹出框所在的是第三层，除了本身之外的都是浮动效果，所以引入一个z-index来控制浮动的高低，z-index大的在上面。所以可以在第三层为所欲为。。加上一个事件，写一个display：none，事件响应就删除这句，幕态化效果就出来了。
幕态化还是很厉害的一个功能，css做好很炫酷，只是这边楼主是为了显示下怎么实现的，所以只是做效果。
overflow
其设置内容大概就是说，超过了本身的标签大小怎么处理的一种设置
hidden ==> 超过长度隐藏多余的内容
auto ==>超过长度会有进度条产生
案例：
<div style="width: 300px;height: 200px;overflow: hidden">
<img src="data:image/余文乐.jpg" />
</div>
<div style="width: 300px;height: 200px;overflow: auto">
<img src="data:image/余文乐.jpg" />
</div>
效果：
放个原图吧、哈哈
言归正传、不闹。。
hover
鼠标置于标签上的时候
<body>
<div class="page-header">
<div class="w">
<a class="logo">Logo</a>
<a>全部</a>
<a>新闻</a>
<a>体育</a>
</div>
</div>
<div class="page-body">
<div class="w">content</div>
</div>
</body>
style：
<style>
.page-header{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 49px;
background-color: #073763;
line-height: 48px;
}
.page-body{
margin-top: 50px;
}
.w{
width: 1000px;
margin: 0 auto;
}
.page-header a{
display: inline-block;
padding:0 15px;
color: white;
}
.page-header a:hover{
background-color: darkcyan;
}
</style>
菜单用的表较多，目前做的功能还不是很好、在hover里面写color就可以让它变颜色。
bakcground-image
背景图片；如果标签过大，背景图就会重复堆叠，无论是水平还是垂直方向；通过background-repeat来控制；位置我们通过background-position来控制。
<div>
<table style="width: 30%;margin: 100px auto;border: 1px solid deepskyblue;line-height: 40px">
<tr>
<td style="text-align: right;width: 100px;">
<div style="">username:</div>
</td>
<td>
<div style="position: relative">
<input type="text" style="width: 180px;text-align: left;height: 20px;padding-right: 20px "/>
<span style="position:absolute;background-image: url(image/user.png);height: 20px;width: 20px;display: inline-block;right: 2px;top: 12px;"></span>
</div>
</td>
</tr>
</table>
</div>
<div style="background-image:url(image/small.png); width: 23px;height: 22px;border: 1px solid darkgreen;background-repeat: no-repeat;background-position-y: -70px"></div>
效果：
Javascript
首先大家应该注意到我javascript写的位置了，基本都是写在body的最后，因为html都是从上到下的执行的、所以做这样一个假设假设你在浏览的是一个新闻页面，作为用户肯定不会考虑特效，功能等等，而是需要先看到页面，这样就没必要先走一遍javascript，算是一个小细节吧，小网页也无所谓这些吧。
像学习python一样学习javascript
首先变量申明
name = "dandy" ==> 申明全局变量
var name = "dandy" ==> 申明变量
parseInt(age) ==>转换成整型变量
parseFloat(salary) ==>转换成浮点型
先讲一点，浏览器里面的console可以随意编写javascript
字符串操作
var a = "dandy"
a.charAt(0) ==> "d"
a.concat("&taylor") ==>"dandy&taylor"
obj.length 长度 obj.trim() 移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n) 返回字符串中的第n个字符
obj.concat(value, ...) 拼接
obj.indexOf(substring,start) 子序列位置
obj.lastIndexOf(substring,start) 子序列位置
obj.substring(from, to) 根据索引获取子序列
obj.slice(start, end) 切片
obj.toLowerCase() 大写
obj.toUpperCase() 小写
obj.split(delimiter, limit) 分割
obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项，
$数字：匹配的第n个组内容；
$&：当前匹配的内容；
$`：位于匹配子串左侧的文本；
$'：位于匹配子串右侧的文本
$$：直接量$符号
列表
a = [11,22,33]
a.splice(1,1,90) ==> [11,90,33]删除指定位置并赋值。
obj.length 数组的大小 obj.push(ele) 尾部追加元素
obj.pop() 尾部获取一个元素
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素
obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替换元素
obj.splice(n,1) 指定位置删除元素
obj.slice( ) 切片
obj.reverse( ) 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串
obj.concat(val,..) 连接数组
obj.sort( ) 对数组元素进行排序
for循环抓到的是列表的index。。
javascript的代码存在形式
<!-- 方式一 -->
<script type"text/javascript" src="JS文件"></script> <!-- 方式二 -->
<script type"text/javascript">
Js代码内容
</script>
其他
1、序列化
- JSON.stringify(obj) 序列化
- JSON.parse(str) 反序列化
2、转义
- decodeURI( ) URl中未转义的字符
- decodeURIComponent( ) URI组件中的未转义字符
- encodeURI( ) URI中的转义字符
- encodeURIComponent( ) 转义URI组件中的字符
- escape( ) 对字符串转义
- unescape( ) 给转义字符串解码
- URIError 由URl的编码和解码方法抛出
3、eval
JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。
- eval()
- EvalError 执行字符串中的JavaScript代码
4、正则表达式
1、定义正则表达式
- /.../ 用于定义正则表达式
- /.../g 表示全局匹配
- /.../i 表示不区分大小写
- /.../m 表示多行匹配
JS正则匹配时本身就是支持多行，此处多行匹配只是影响正则表达式^和$，m模式也会使用^$来匹配换行的内容)
var pattern = /^Java\w*/gm;
var text = "JavaScript is more fun than \nJavaEE or JavaBeans!";
result = pattern.exec(text)
result = pattern.exec(text)
result = pattern.exec(text)
注：定义正则表达式也可以 reg= new RegExp()
语句
if
if(条件){
}else if(条件){
}else{
}
switch
switch(name){
case '1':
age = 123;
break;
case '2':
age = 456;
break;
default :
age = 777;
}
循环
var names = ["alex", "tony", "rain"];
for(var i=0;i<names.length;i++){
console.log(i);
console.log(names[i]);
}
var names = ["alex", "tony", "rain"];
for(var index in names){
console.log(index);
console.log(names[index]);
}
while(条件){
// break;
// continue;
}
基本函数：
function func(arg){
return true;
// 匿名函数
var func = function(arg){
return "tony";
} // 自执行函数
(function(arg){
console.log(arg);
})('123')
DOM
查找元素标签
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
简介查找方式
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
操作部分
内容
innerText 文本
outerText
innerHTML HTML内容
innerHTML
value 值
属性
attributes // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性 /*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/
class操作
className // 获取所有类名
classList.remove(cls) // 删除指定类
classList.add(cls)
demo
全选、反选代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cls1{
opacity: 0.5;
z-index: 9;
position: fixed;
left: 0;
right:0;
top: 0;
bottom: 0;
background-color: #6e6568;
}
.cls2{
z-index: 10;
position: fixed;
left:50%;
top:50%;
height: 200px;
width: 350px;
margin-left: -175px;
margin-top: -130px;
background-color: white;
border: 1px solid darkgray;
}
.hide{
display: none;
}
</style>
</head>
<body style="margin: 0;">
<input type="button" value="添加" onclick="showModel()"/>
<input type="button" value="全选" onclick="chooseAll()"/>
<input type="button" value="取消1" onclick="cancelAll()"/>
<input type="button" value="反选" onclick="ReverseAll()"/>
<table>
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>端口</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" /> </td>
<td>1.1.1.1</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" /> </td>
<td>2.2.2.2</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" /> </td>
<td>3.3.3.3</td>
<td>33</td>
</tr>
</tbody>
</table>
<!--遮罩层-->
<div id="i1" class="cls1 hide"></div> <!--弹出框-->
<div id="i2" class="cls2 hide">
<p><input id="texttest" type="text" name="text1" value="aaa"/></p>
<p><input type="text" name="text1"/></p>
<p><input type="button" value="确定" /></p>
<p><input type="button" value="取消" onclick="cancelShow()" /></p>
</div>
<script>
function showModel() {
document.getElementById('i1').classList.remove("hide");
document.getElementById('i2').classList.remove("hide");
}
function cancelShow() {
document.getElementById('i1').classList.add("hide");
document.getElementById('i2').classList.add("hide");
}
function chooseAll() {
tag = document.getElementById('tb').children;
for(var i=0;i<tag.length;i++)
{
obj = tag[i].children[0].children[0];
obj.checked = true
}
}
function cancelAll() {
tag = document.getElementById('tb').children;
for(var i=0;i<tag.length;i++)
{
obj = tag[i].children[0].children[0];
obj.checked = false
}
}
function ReverseAll() {
tag = document.getElementById('tb').children;
for(var i=0;i<tag.length;i++)
{
obj = tag[i].children[0].children[0];
if(obj.checked){
obj.checked =false
}
else {
obj.checked = true
}
}
}
</script>
</body>
</html>
操作标签
// 方式一
var obj = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement('afterBegin',document.createElement('p')) //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' // 方式二
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])
样式操作
var obj = document.getElementById('i1')
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";
事件
其他
console.log 输出框
alert 弹出框
confirm 确认框 // URL和刷新
location.href 获取URL
location.href = "url" 重定向
location.reload() 重新加载 // 定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器
提交表单
document.geElementById('form').submit()
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function func() {
var tag = document.getElementById("ad");
var content = tag.innerText;
var tag_1 = content.charAt(0);
var tag_2 = content.substring(1,content.length);
tag.innerText = tag_2 + tag_1
}
setInterval('func();',1000)
</script>
</head>
<body>
<div id="ad">欢迎光临！</div>
</body>
</html>
Python 15 html 基础 - CSS &javascript &DOM的更多相关文章
-
前端基础：JavaScript DOM对象
JavaScript DOM对象 通过HTML DOM,可以访问JavaScript HTML文档的所有元素. 一.HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(D ...
-
Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】
一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...
-
第十五章：Python の Web开发基础 (二) JavaScript与DOM
本課主題 JavaScript 介绍 DOM 介绍 JavaScript 介绍 JavaScript 是一门编程语言,它可以让网页动起来的,JavaScript 的变量有两种,一个是局部变量:一个是全 ...
-
Python 16 html 基础 jQuery &; Javascript研究
基础内容 DOM操作 javascript探讨 JQuery初识 DOM innerText ==>获取仅文本 innerHtml ==>获取全部内容 <div id=" ...
-
JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）
DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...
-
【基础知识】Dom基础
[学习日记]Dom基础 1. 内容:使用JavaScript操作Dom进行DHTML开发 2. 目标:能共使用JavaScript操作Dom实现常见的DHTML效果 3. DHTML= C ...
-
前端~HTML~CSS~JavaScript~JQuery~Vue
HTML CSS JavaScript DOM文档操作 jQuery实例 Vue
-
文成小盆友python-num14 － web 前端基础 html ，css, JavaScript
本部分主要内容 html - 基础 css - 基础 一.html 标签 html 文档标签树如下: head 部分 Meta(metadata information) 提供有关页面的元信息,例:页 ...
-
JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
随机推荐
-
PHP入门【一】$_SERVER
这几天要个同事写php的程序,就开始学习了PHP ,基础语法不用说了语言都是基本相通的,只是有若类型和强类型的区别(声明数据类型) 把现在看到的感觉有用的记录一下. $_SERVER['PHP_SEL ...
-
MyBatis框架——mybatis插入数据返回主键（mysql、oracle）
向数据库中插入数据时,大多数情况都会使用自增列或者UUID做为主键.主键的值都是插入之前无法知道的,但很多情况下我们在插入数据后需要使用刚刚插入数据的主键,比如向两张关联表A.B中插入数据(A的主键是 ...
-
SVN使用安装
SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生成很多不同的版本,这就需要程序员有效的管理代码,在需要的时候可以迅速,准确取出相应的版本. Subversion是什么? ...
-
[topcoder]LongLongTripDiv2
http://community.topcoder.com/stat?c=problem_statement&pm=13091 解方程,对中国孩子太简单了. #include <vect ...
-
Qt4.8 移植（超详细Configure的参数）
Qt4.8.6 configure 参数 不只是适用于Qt4.8.6,原则上适用于Qt4所有版本 Usage: configure [-h] [-prefix <dir>] [-prefi ...
-
iOS 自动布局总结
参考自以下文章: http://blog.csdn.net/ysy441088327/article/details/12558097 http://blog.csdn.net/zhouleizhao ...
-
Java集合源码分析（二）Linkedlist
前言 前面一篇我们分析了ArrayList的源码,这一篇分享的是LinkedList.我们都知道它的底层是由链表实现的,所以我们要明白什么是链表? 一.LinkedList简介 1.1.LinkedL ...
-
Mediawiki PlantUML Graphviz 图片 中文 乱码
安装Mediawiki 的 PlantUML Graphviz 插件后,生成图片时,中文成乱码问题. 环境:Ubuntu 16.04 MediaWiki 1.31.1 PHP 7.0.32-0 ...
-
获得WebBrowser中的图片数据
/// <summary> /// 获取WebBrowser指定的图片 /// </summary> /// <param name="webBrowser&q ...
-
c代码片段-注解
#include<stdio.h> /* * int ac 是命令行参数的个数 第一个参数是当前文件地址 * char * arg[] 字符指针的数组, 每一个指针指向一个具体的命令行参数 ...