Fork me on GitHub

python自动化编程-第十五天 web开发基础

目录

上节内容回顾

1. 块级标签和行内标签

2. form标签

```html
<form action='http://ssss' methed='GET'>
    <input type='text' name='q' />
    <input type='text' name='b' />
    
    <input type='submit' value='提交' />
</form>

GET:https://ssss?q=用户输入的值
    https://ssss?q=用户输入的值&b=用户输入的值
    
POST:请求头

    请求内容
```

3. display: inline, block ,inline-block

4. float:

```html
<div>
    <div style='float:left;'></div>
    <div style='clear:both;'></div>
</div>
```

5. margin: 0 auto;

div标签整个居中

6. padding:

自身发生变化

CSS补充

position

fixed =》固定在页面某个位置

  • top
  • bottom
  • left
  • right
  • 同时设置top、left和right为0 则表示此标签是一个头部标签，始终固定在顶部；但是body标签要设置margin-top，否则会覆盖内容；
    • left和right同时设置为0，则表示为块级的标签，否则为行内的标签；

relative + absolute

  • absolute =>只用absolute，最开始的时候的位置，但是轮动滑轮后，位置会变动；

  • 一般与relative配置使用

    • 单独使用relative没有任何意义
    • absolute 就会放在relative标签的某个位置
    <div style="position:relative;">
    <div style="position:absolute;top:0;left:0;"></div>
</div>

z-index 层级顺序，

设置哪个页面实在最外层，数字大的是最外层

opacity

透明度,范围 0-1， 一般0.6就够了

overflow

  • hidden 影藏
  • auto 出现滚动条
    • 如果1.jpg 图像太大的话
 <div style="height: 200px;width: 300px;overflow: auto;">
    <img src="1.jpg" />
</div>

hover:

```html
 /*当鼠标移动到当前标签上时，以下css属性才生效*/
    .pg-head .menu:hover{
        background-color: blue;
    }
```

background: url() 10px 10px no-repeat;

  • backgroud-image:url('image/4.jpg');
  • 默认， div大，图片重复放
  • backgroup-repeat:no-repeat;/repeat-x/repeat-y 不重复/横向重复/纵向重复
  • background-position-x:横向移动图片
  • background-position-y:纵向移动图片
  • background-position:10px 10px;

JavaScript

独立的语言，浏览器具有js解释器
作用：让页面动起来的

javascript存在形式：

  • 在Head中

    <script>
    // JavaScript代码
    
</script>
<!--默认就是text/javascript-->
<script type="text/javascript">
    // JavaScript代码
    
</script>

  • 文件中

    <script src="js文件路径"></script>

  • ps：JavaScript代码需要放置在标签内部的最下方

    • 为了能够先看到网页内容，而不至于无法显示网页

注释：

  • 单行注释：// 注释内容
  • 多行注释：/*注释内容*/

变量

  • python
    • name = 'alex'
  • javascript
    • name = 'alex' # 全局变量
    • var name = ‘alex' # 局部变量

写js代码：

  • html文件中编写
  • 临时，浏览器的终端 console

基本数据类型

数字

  • JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。

  • 转换：

    • parseInt(..) 将某值转换成数字，不成功则NaN
    • parseFloat(..) 将某值转换成浮点数，不成功则NaN

  • 特殊值：

    • NaN，非数字。可使用 isNaN(num) 来判断。
    • Infinity，无穷大。可使用 isFinite(num) 来判断。

字符串

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个组内容；
                                     $&：当前匹配的内容；
                                     $`：位于匹配子串左侧的文本；
                                     $'：位于匹配子串右侧的文本
                                     $$：直接量$符号

列表(数组)

  • JavaScript中的数组类似于Python中的列表
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( )         对数组元素进行排序

字典

a={'k1':'v1','k2':'v2'}

布尔类型

  • 布尔类型仅包含真假，与Python不同的是其首字母小写。
    • == 比较值相等
    • != 不等于
    • === 比较值和类型相等
    • !=== 不等于
    • || 或(or)
    • && 且（and)

条件语句

if语句

if(条件){
 
}else if(条件){
 
}else{
 
}

for循环

  1. 循环时，循环的元素是索引，（字典和数组都是循环的是索引）

    a = [11,22,33,44]
for(var item in a){
    console.log(a[item]);
}

  2. 普通循环,不支持字典

    a = [11,22,33,44]
for(var i=0;i<a.length;i++){
}

函数

function 函数名(a,b,c){
}
函数名(1,2,3)

Dom操作

1. 找到标签

获取单个元素           document.getElementById('id')
获取多个元素(列表)      document.getElementsByTagName('div)
获取多个元素(列表)      document.getElementsByClassName('c1')

直接找

document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据tag属性获取标签集合

间接找

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点
    
    
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

2. 操作标签

innerText

  • 获取标签中的文本内容

    • 标签.innerText

  • 对标签内部文本进行重新赋值

    • 标签.innerText = ""

className

  • tag.className =>直接整体做操作
  • tag.classList.add('样式名') 添加指定样式
  • tag.classList.remove('样式名') 删除指定样式

PS：

<div onclick="func();">点我</div>
<script>
    function func() {
        
    }
</script>

checkbox:（input botton的默认值）

  • 获取值 checkbox对象.checked
  • 设置值 checkbox对象.checked = true/false;

定时器

setInterval("执行的代码",间隔时间);

弹窗

alert("xxx")

posted @ 2018-07-22 16:18  耳_东  阅读(214)  评论(0)    收藏  举报