正文 

当前位置： 首页 > java > java教程

python14html基础-css&javascript&dom

DandyZhang      2022-02-07     558

关键词：

本节内容

　　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>
View Code

菜单用的表较多，目前做的功能还不是很好、在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>
View Code

操作标签

 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'
查看详情  

                

hq-day14html基础


1<bodytopmargin="200"leftmargin="200"rightmargin="200"bottommargin="200">2<aname="top"></a>34<fontsize="45"color="#FF0000">今天<br/>5天气&nbsp;&nbsp;&nbsp;不错<b  查看详情  

                

14张python代码速查表，玩转数据分析&可视化&机器学习


Python基础系列推出的内容包括：Python基础、Python进阶、导入数据及JupyterNotebook。Python数据科学速查表-Python基础Python数据科学速查表-导入数据Python数据科学速查表-JupyterNotebook数据处理系列推出的内容包括：Numpy、Pandas及Sci...  查看详情  

                

java零基础小白学习免费教程day14-set&hashmap(代码片段)


day14_JAVAOOP课程目标1.【理解】Set集合的特点2.【理解】Set集合不重复的原理3.【掌握】HaseSet集合的基本使用4.【理解】LinkedHashSet的特点5.【理解】Map集合的特点6.【掌握】HashMap的使用7.【理解】LinkedHashMap的特点8.【掌握】Map集合的...  查看详情  

                

java零基础小白学习免费教程day14-set&hashmap(代码片段)


day14_JAVAOOP课程目标1.【理解】Set集合的特点2.【理解】Set集合不重复的原理3.【掌握】HaseSet集合的基本使用4.【理解】LinkedHashSet的特点5.【理解】Map集合的特点6.【掌握】HashMap的使用7.【理解】LinkedHashMap的特点8.【掌握】Map集合的...  查看详情  

                

html&css_基础02


一、实体　　#1.一些符号如“<”、“>”、“”、”©“等，不能使用其本身，需要借助实体（即转义字符），格式通常为：&(字符对应实体);　　　　如&lt、&gt、&nbsp、&copy等等。　...  查看详情  

                

html&css基础笔记


有道笔记：http://note.youdao.com/noteshare?id=a6d7eab195085655bbfce86665524e35一HTML结构标签HTML基本标签标题标签<h1>~<h6>段落<p></p>换行<br/>水平线<hr/>粗体<strong></strong>斜体<  查看详情  

                

python14html基础


内容概要　　html静态页面，标签介绍   HTML简述　　定义：　　HTML，超文本标记语言，写给浏览器的语言，目前网络上应用最广泛的语言。HTML也在不断的更新，最新版本已经出现了HTML5。在HTML5中出现了许多新特性，...  查看详情  

                

14张python代码速查表，玩转数据分析&可视化&机器学习


Python基础系列推出的内容包括：Python基础、Python进阶、导入数据及JupyterNotebook。Python数据科学速查表-Python基础Python数据科学速查表-导入数据Python数据科学速查表-JupyterNotebook数据处理系列推出的内容包括：Numpy、Pandas及Sci...  查看详情  

                

html&css_基础01


一、预备知识：#1.HTML5是W3C与WHATWG合作的结果。　  W3C指WorldWideWebConsortium，万维网联盟。　  WHATWG指WebHypertextApplicationTechnologyWorkingGroup。#2. HTML指的是超文本标记语言(Hyper Text Markup   查看详情  

                

web前端基础知识-html&css基本操作


一、HTML基本操作1.HTML概述HTML是英文HyperTextMark-upLanguage(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。...  查看详情  

                

html&css基础学习笔记1.28-给网页添加一个css样式


CSS是什么?当HTML配合CSS一起使用时，我们发现页面变得好看了很多。那么CSS到底是什么呢？ CSS指层叠样式表(CascadingStyleSheets)，它主要是用于定义HTML标签在浏览器内的显示样式，如文字大小、颜色、字体加粗等。 我们可...  查看详情  

                

python15html基础jquery&javascript研究


 基础内容　　DOM操作　　javascript探讨　　JQuery初识 DOMinnerText ==>获取仅文本innerHtml ==>获取全部内容1<divid="aaa">dandy<span>aaa</span>taylor</div>value　　inputvalue获取当前标签的值　  查看详情  

                

14张python速查表玩转数据分析&可视化&机器学习


DataCamp推出的Python数据科学速查表，已经翻译成中文啦！Python基础系列推出的内容包括：Python基础、Python进阶、导入数据及JupyterNotebook：Python数据科学速查表-Python基础Python数据科学速查表-导入数据Python数据科学速...  查看详情  

                

14张python速查表玩转数据分析&可视化&机器学习


DataCamp推出的Python数据科学速查表，已经翻译成中文啦！Python基础系列推出的内容包括：Python基础、Python进阶、导入数据及JupyterNotebook：Python数据科学速查表-Python基础Python数据科学速查表-导入数据Python数据科学速...  查看详情  

                

前端基础之javascript-day14


 写在前面上课第14天，打卡：　　　　唯心不易，坚持！参考：http://www.cnblogs.com/yuanchenqi/articles/6893904.html 前言　　一个完整的JavaScript实现是由以下3个不同部分组成的：1.核心（ECMAScript）2.文档对象模型（DOM）Documentobject...  查看详情  

                

day14---html基础


本节内容：一.HTML二、CSS三、JSHTML1、一套规则，浏览器认识的规则。2、开发者：学习Html规则开发后台程序：-写Html文件（充当模板的作用）******-数据库获取数据，然后替换到html文件的指定位置（Web框架）3、本地测试-找到文件...  查看详情  

                

1html+div+css零基础快速入门到制作企业站视频课程_13css列表&文本样式


 HTML<ul>标签 定义和用法<ul>标签定义无序列 1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>列表</title>6<style>7li{8list-style-  查看详情