Python 15 html 基础 - CSS &javascript &DOM

本节内容

　　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(条件){

    }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.掌 ...

随机推荐

跨域技术（JSONP与CROS）
JSONP 我们发现,Web页面上调用js文件时不受是否跨域的影响,凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>.<img>.&l ...
php中加密和解密
项目要和第三方进行接口对接,所以数据的安全很重要.第一次自己设计并实现,学习记录下网上查了很多资料,真的很深奥对称加密: 双方共用一个约定好的密钥进行数据的加密和解密,但是当密匙丢失,数据将有泄露 ...
CEdit编辑框字体和背景设置
CEdit编辑框字体和背景设置注意事项:当CEdit为“disable”时,设置编辑框的字体和背景会没有效果.解决方案:将CEdit的Style设置为“readonly”,这样设置就能生效了,同时也能 ...
Mysql的SQL语句常用基本命令
SQL语句分类:DDL,DML,DQL,DCL. 1.数据库操作: 创建数据库:create database 数据库名 charater set gbk; 删除数据库:drop database 数 ...
流畅的python--python数据模型
python最好的品质之一就是一致性.初步接触python可能会len(collection)而不是collection.len()觉得不适应,这是通常所说的“python风格”(Pythonic)的 ...
在linux下面解压用的zxpf是什么意思,它跟zxvf有啥区别
在linux下面解压用的zxpf是什么意思,它跟zxvf有啥区别 linux 命令中tar后跟的zxvf是什么意思:.tar.gz是一个压缩包 .tar只是打包而没有压缩 z:表示 tar 包是被 ...
理解I/O：随机和顺序
转自:https://blog.csdn.net/BaiWfg2/article/details/52885287 原文:http://www.violin-memory.com/blog/under ...
java类的编译、加载和执行
一.java类的编译流程这里主要讲的是从java文件到class文件下图是java类编译的详细步骤: 1.词法分析:将java源代码的字符流转变为标记(Token)的集合,Token是编译过程中的 ...
python+selenium 模拟登陆，自动下单
目前写的实在太粗糙,留着,以后来写上
es6之箭头函数
=> 箭头函数是ES6增加的函数表达式.将function关键字和函数名都删掉,并使用“=>”连接参数列表和函数体(低版本浏览器不支持) 箭头函数看上去只是语法的变动,其实也影响了this ...

Python 15 html 基础 - CSS &javascript &DOM

Python 15 html 基础 - CSS &javascript &DOM的更多相关文章

随机推荐

热门专题