Python 14 html 基础 - CSS &javascript &DOM

本节内容

　　CSS基础

　　javascript基础

　　DOM

前言，这边这块楼主已经很熟悉了，CSS天天用到，简单的一些javascript也是所以就挑点重点说了。然后就是dom不怎么用，但是其实也用不到，大家以后都会是用jquery来做这一块的需求，所以只要稍作了解就好了。

CSS基础

继续上一章节的css、

position

　　常用的三个：

　　　　fixed  ==>浮动的固定在某个位置

　　　　relative + absolute ==> 通常这2个一起用，用来在父标签的内部定位，相对于父标签的一个绝对定位。

顺带提一下opcity 范围是0~1、表示透明度，z-index层级顺序，幕态化时候用到

下面来看案例：

返回顶部的案例、返回顶部四个字一直漂浮在右下角、点击跳回最上面（先不用管javascript）

1     <div style="position: fixed;right: 10px;bottom: 10px;width: 40px;height: 40px;background-color: #073763" onclick="GoTop()">返回顶部</div>
2     <div style="width: 100%;height: 3000px;background-color: #6e6568"></div>
3     <script>
4         function GoTop() {
5             window.scrollTo(0,0);
6         }
7     </script>

网页悬浮案例：

1     头部固定案例
2     <div style="height: 60px;background-color: blueviolet;position:fixed;left: 0;right: 0;top: 0px;">头部</div>
3     <div style="background-color: #BEBEBE;height: 2000px;margin-top: 61px">内容正文</div>

这里我们让头部浮动起来(position:fixed)，确认它的位置(left,top)，然后让下面的正文离上面一定距离(margin-top)保证正文不被挡住。

1     relative + absolute 案例  只是相对于父类位置的相对定位，不一定在父标签内部
2     <div style="border: 1px solid seagreen;width: 400px;height: 300px;margin: 0 auto;position: relative">
3         <div style="background-color: #073763;position:absolute;bottom: 20px;right: 20px;color: white">div1</div>
4     </div>

这里我们要强调的是相对于父标签的位置并不是说，在父标签内部活动，我们可以设置他的值在负数，则标签会移动到父标签外面。

1     <div style="border: 1px solid seagreen;width: 400px;height: 300px;margin: 0 auto;position: relative">
2         <div style="background-color: #073763;position:absolute;bottom: 20px;right: -50px;color: white">div1</div>
3     </div>

幕态化弹出框

1     谈出框与后部页面  三层页面框架;z-index 大的在上面;display:none 先让弹框消失
2     <div style="z-index:10;position: fixed;width: 400px;height: 100px;background-color: white;top: 50%;left: 50%;margin-left: -200px;margin-top: -50px">
3         <input type="text" />
4     </div>
5     <div style="z-index:9;position:fixed;top: 0;bottom: 0;left: 0;right: 0;background-color: rebeccapurple;opacity: 0.3"></div>
6     <div style="background-color: yellow;height: 3000px;">内容正文</div>

首先分析一下三层结构：网页本身是第一层，然后上面盖着的一层薄暮是第二层，最后的弹出框所在的是第三层，除了本身之外的都是浮动效果，所以引入一个z-index来控制浮动的高低，z-index大的在上面。所以可以在第三层为所欲为。。加上一个事件，写一个display：none，事件响应就删除这句，幕态化效果就出来了。

幕态化还是很厉害的一个功能，css做好很炫酷，只是这边楼主是为了显示下怎么实现的，所以只是做效果。

overflow

其设置内容大概就是说，超过了本身的标签大小怎么处理的一种设置

hidden ==> 超过长度隐藏多余的内容

auto ==>超过长度会有进度条产生

案例：

1     <div style="width: 300px;height: 200px;overflow: hidden">
2         <img src="image/余文乐.jpg" />
3     </div>
4     <div style="width: 300px;height: 200px;overflow: auto">
5         <img src="image/余文乐.jpg" />
6     </div>

效果：

放个原图吧、哈哈

言归正传、不闹。。

hover

鼠标置于标签上的时候

 1 <body>
 2     <div class="page-header">
 3         <div class="w">
 4             <a class="logo">Logo</a>
 5             <a>全部</a>
 6             <a>新闻</a>
 7             <a>体育</a>
 8         </div>
 9     </div>
10     <div class="page-body">
11         <div class="w">content</div>
12     </div>
13 </body>

style：

 1 <style>
 2         .page-header{
 3             position: fixed;
 4             top: 0;
 5             left: 0;
 6             right: 0;
 7             height: 49px;
 8             background-color: #073763;
 9             line-height: 48px;
10         }
11         .page-body{
12             margin-top: 50px;
13         }
14         .w{
15             width: 1000px;
16             margin: 0 auto;
17         }
18         .page-header a{
19             display: inline-block;
20             padding:0 15px;
21             color: white;
22         }
23         .page-header a:hover{
24             background-color: darkcyan;
25         }
26     </style>

菜单用的表较多，目前做的功能还不是很好、在hover里面写color就可以让它变颜色。

bakcground-image

背景图片；如果标签过大，背景图就会重复堆叠，无论是水平还是垂直方向；通过background-repeat来控制；位置我们通过background-position来控制。

 1     <div>
 2         <table style="width: 30%;margin: 100px auto;border: 1px solid deepskyblue;line-height: 40px">
 3             <tr>
 4                 <td style="text-align: right;width: 100px;">
 5                     <div style="">username:</div>
 6                 </td>
 7                 <td>
 8                     <div style="position: relative">
 9                         <input type="text"  style="width: 180px;text-align: left;height: 20px;padding-right: 20px "/>
10                         <span style="position:absolute;background-image: url(image/user.png);height: 20px;width: 20px;display: inline-block;right: 2px;top: 12px;"></span>
11                     </div>
12                 </td>
13             </tr>
14         </table>
15     </div>
16     <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"

 1 obj.length                           长度
 2
 3 obj.trim()                           移除空白
 4 obj.trimLeft()
 5 obj.trimRight)
 6 obj.charAt(n)                        返回字符串中的第n个字符
 7 obj.concat(value, ...)               拼接
 8 obj.indexOf(substring,start)         子序列位置
 9 obj.lastIndexOf(substring,start)     子序列位置
10 obj.substring(from, to)              根据索引获取子序列
11 obj.slice(start, end)                切片
12 obj.toLowerCase()                    大写
13 obj.toUpperCase()                    小写
14 obj.split(delimiter, limit)          分割
15 obj.search(regexp)                   从头开始匹配，返回匹配成功的第一个位置(g无效)
16 obj.match(regexp)                    全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
17 obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，
18                                      $数字：匹配的第n个组内容；
19                                      $&：当前匹配的内容；
20                                      $`：位于匹配子串左侧的文本；
21                                      $‘：位于匹配子串右侧的文本
22                                      $$：直接量$符号

列表

a = [11,22,33]

a.splice(1,1,90)  ==> [11,90,33]删除指定位置并赋值。

 1 obj.length          数组的大小
 2
 3 obj.push(ele)       尾部追加元素
 4 obj.pop()           尾部获取一个元素
 5 obj.unshift(ele)    头部插入元素
 6 obj.shift()         头部移除元素
 7 obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
 8                     obj.splice(n,0,val) 指定位置插入元素
 9                     obj.splice(n,1,val) 指定位置替换元素
10                     obj.splice(n,1)     指定位置删除元素
11 obj.slice( )        切片
12 obj.reverse( )      反转
13 obj.join(sep)       将数组元素连接起来以构建一个字符串
14 obj.concat(val,..)  连接数组
15 obj.sort( )         对数组元素进行排序

for循环抓到的是列表的index。。

javascript的代码存在形式

1 <!-- 方式一 -->
2 <script type"text/javascript" src="JS文件"></script>
3
4 <!-- 方式二 -->
5 <script type"text/javascript">
6     Js代码内容
7 </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模式也会使用^$来匹配换行的内容)
1 var pattern = /^Java\w*/gm;
2 var text = "JavaScript is more fun than \nJavaEE or JavaBeans!";
3 result = pattern.exec(text)
4 result = pattern.exec(text)
5 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

查找元素标签

1 document.getElementById             根据ID获取一个标签
2 document.getElementsByName          根据name属性获取标签集合
3 document.getElementsByClassName     根据class属性获取标签集合
4 document.getElementsByTagName       根据标签名获取标签集合

简介查找方式

 1 parentNode          // 父节点
 2 childNodes          // 所有子节点
 3 firstChild          // 第一个子节点
 4 lastChild           // 最后一个子节点
 5 nextSibling         // 下一个兄弟节点
 6 previousSibling     // 上一个兄弟节点
 7
 8 parentElement           // 父节点标签元素
 9 children                // 所有子标签
10 firstElementChild       // 第一个子标签元素
11 lastElementChild        // 最后一个子标签元素
12 nextElementtSibling     // 下一个兄弟标签元素
13 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

全选、反选代码

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         .cls1{
  8             opacity: 0.5;
  9             z-index: 9;
 10             position: fixed;
 11             left: 0;
 12             right:0;
 13             top: 0;
 14             bottom: 0;
 15             background-color: #6e6568;
 16         }
 17         .cls2{
 18             z-index: 10;
 19             position: fixed;
 20             left:50%;
 21             top:50%;
 22             height: 200px;
 23             width: 350px;
 24             margin-left: -175px;
 25             margin-top: -130px;
 26             background-color: white;
 27             border: 1px solid darkgray;
 28         }
 29         .hide{
 30             display: none;
 31         }
 32     </style>
 33 </head>
 34 <body style="margin: 0;">
 35     <input type="button" value="添加" onclick="showModel()"/>
 36     <input type="button" value="全选" onclick="chooseAll()"/>
 37     <input type="button" value="取消1" onclick="cancelAll()"/>
 38     <input type="button" value="反选" onclick="ReverseAll()"/>
 39     <table>
 40         <thead>
 41             <tr>
 42                 <th>选择</th>
 43                 <th>主机名</th>
 44                 <th>端口</th>
 45             </tr>
 46         </thead>
 47         <tbody id="tb">
 48                 <tr>
 49                 <td><input type="checkbox" /> </td>
 50                 <td>1.1.1.1</td>
 51                 <td>22</td>
 52             </tr>
 53             <tr>
 54                 <td><input type="checkbox" /> </td>
 55                 <td>2.2.2.2</td>
 56                 <td>22</td>
 57             </tr>
 58             <tr>
 59                 <td><input type="checkbox" /> </td>
 60                 <td>3.3.3.3</td>
 61                 <td>33</td>
 62             </tr>
 63         </tbody>
 64     </table>
 65     <!--遮罩层-->
 66     <div id="i1" class="cls1 hide"></div>
 67
 68     <!--弹出框-->
 69     <div id="i2" class="cls2 hide">
 70         <p><input id="texttest" type="text" name="text1" value="aaa"/></p>
 71         <p><input type="text" name="text1"/></p>
 72         <p><input type="button" value="确定" /></p>
 73         <p><input type="button" value="取消" onclick="cancelShow()" /></p>
 74     </div>
 75     <script>
 76         function showModel() {
 77             document.getElementById(‘i1‘).classList.remove("hide");
 78             document.getElementById(‘i2‘).classList.remove("hide");
 79         }
 80         function cancelShow() {
 81             document.getElementById(‘i1‘).classList.add("hide");
 82             document.getElementById(‘i2‘).classList.add("hide");
 83         }
 84         function chooseAll() {
 85             tag = document.getElementById(‘tb‘).children;
 86             for(var i=0;i<tag.length;i++)
 87             {
 88                 obj = tag[i].children[0].children[0];
 89                 obj.checked = true
 90             }
 91         }
 92         function cancelAll() {
 93             tag = document.getElementById(‘tb‘).children;
 94             for(var i=0;i<tag.length;i++)
 95             {
 96                 obj = tag[i].children[0].children[0];
 97                 obj.checked = false
 98             }
 99         }
100         function ReverseAll() {
101             tag = document.getElementById(‘tb‘).children;
102             for(var i=0;i<tag.length;i++)
103             {
104                 obj = tag[i].children[0].children[0];
105                 if(obj.checked){
106                     obj.checked =false
107                 }
108                 else {
109                     obj.checked = true
110                 }
111             }
112         }
113     </script>
114 </body>
115 </html>

操作标签

 1 // 方式一
 2 var obj = "<input type=‘text‘ />";
 3 xxx.insertAdjacentHTML("beforeEnd",obj);
 4 xxx.insertAdjacentElement(‘afterBegin‘,document.createElement(‘p‘))
 5
 6 //注意：第一个参数只能是‘beforeBegin‘、 ‘afterBegin‘、 ‘beforeEnd‘、 ‘afterEnd‘
 7
 8 // 方式二
 9 var tag = document.createElement(‘a‘)
10 xxx.appendChild(tag)
11 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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         function func() {
 8             var tag = document.getElementById("ad");
 9             var content = tag.innerText;
10             var tag_1 = content.charAt(0);
11             var tag_2 = content.substring(1,content.length);
12             tag.innerText = tag_2 + tag_1
13         }
14         setInterval(‘func();‘,1000)
15     </script>
16 </head>
17 <body>
18     <div id="ad">欢迎光临！</div>
19 </body>
20 </html>
时间： 2024-11-10 11:05:58

Python 14 html 基础 - CSS &javascript &DOM的相关文章

Python 15 html 基础 jQuery &amp; Javascript研究

基础内容 DOM操作 javascript探讨 JQuery初识 DOM innerText  ==>获取仅文本 innerHtml  ==>获取全部内容 1 <div id="aaa">dandy<span>aaa</span>taylor</div> value input value 获取当前标签的值 select 获取选中的value值 selectIndex textarea 获取标签的值 tooltip:  pla

第15天 html css JavaScript dom选择器 示例左侧菜单

CSS补充: - position - background - hover - overflow - z-index - opacity 示例:输入框右边放置图标 JavaScript: 局部变量 var 基本数据类型: 数字 字符串 数组 字典 布尔值 For循环 条件语句 == != === !== || && 函数的定义: function func(){ ... }Dom 找标签 - 直接找 $('#id') $('.c1').siblings() - 简介找 操作: inner

Python 14 Html 基础

内容概要 html静态页面,标签介绍 HTML简述 定义: HTML,超文本标记语言,写给浏览器的语言,目前网络上应用最广泛的语言.HTML也在不断的更新,最新版本已经出现了HTML5.在HTML5中出现了许多新特性,也遗弃了一些旧元素.我们写好html文件后,在浏览器中打开.主流的浏览器包括IE.Firefox.Chrome.Goole等. 标签元素: HTML元素由开始标签和结束标签组成.如<p>/<p>,<h1><h1/>.虽然现在我们还不知道具体标签

DHTML 动态HTML 包含HTML CSS JavaScript dom

HTML 负责提供标签,对数据进行标记封装 CSS 负责提供样式属性,对数据进行样式定义 DOM 负责将标记文档和标签等内容解析成对象,并在 对象中定义属性和行为,就可以指挥对象做事情. JAVASCRIPT 负责网页页面的行为(该怎么动),动态效果的体现,需要程序设计语言来完成. 基本步骤 1.定义页面机构,HTML: 2.定义页面样式:CSS: 3.动态效果,对象已经被DOM解析驻留在内存: 3.1.明确事件源: 3.2.明确事件动作: 3.3.定义出来方式: 3.3.1.明确被处理的节点:

javascript DOM 操作基础知识小结

经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的. DOM添加元素,使用节点属性 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.

Javascript DOM 基础篇 01

DOM基础 DOM是什么 答:文件对象模型(Document Object Model,简称DOM),DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构!来自网络 本节了解了下面知识点: DOM节点 childNodes  nodeType 获取子节点 children parentNode 例子:点击链接,隐藏整个li offsetParent 例子:获取元素在页面上的实际位置 DOM节点(2) 首尾子节点 有兼容性问题 firstChild.firstElementChil

从零基础入门JavaScript（1）

从零基础入门JavaScript(1) 1.1  Javascript的简史 1995年的时候   由网景公司开发的,当时的名字叫livescript    为了推广自己的livescript,搭了java顺风车,改名为javascript 与此同时,     微软因此在自身的浏览器里,也推出了自己的脚本语言 jscript 1997年时候,  由ECMA(欧洲计算机制造商协会)出面,推出了一套javascript的规范,Ecmascript ,规范提出js由三部分组成 JS的组成: ECMAS

JavaScript DOM实战：创建和克隆元素

DOM来创建和克隆元素. createElement()和createTextNode() createElement()和createTextNode()做的事情正如它们的名字所说的那样.最常见的JavaScript DOM方法实战-修改文档树中已经用过它们.当时的目的是把新创建的元素添加到文档树里,使它成为某个元素的最后一个子节点. 1. //创建一个li新元素 2. var newChild=document.createElement('li'); 3. //创建一个a 新元素 4. v

JavaScript（14）jQuery（JavaScript 库）

JavaScript 框架(库) JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常很困难也很耗时.为了应对这些调整,许多的 JavaScript (helper) 库应运而生. 这些 JavaScript 库常被称为 JavaScript 框架. jQuery jQuery 是目前最受欢迎的 JavaScript 框架.它使用 CSS 选择器来访问和操作网页上的 HTML 元素(DOM 对象).jQuery 同时提供 companion UI(用户界面)和插件. jQue