本节内容

　　CSS基础

　　javascript基础

　　DOM

 

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

 

CSS基础

继续上一章节的css、

position

　　常用的三个：

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

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

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

下面来看案例：

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

1     
     
      返回顶部
     
2     
     
3     

 

网页悬浮案例：

1     头部固定案例2     
     
      头部
     
3     
     
      内容正文
     

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

1     relative + absolute 案例  只是相对于父类位置的相对定位，不一定在父标签内部2     
     
      3         
      
       div1
      
4     
     

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

1     
     
      2         
      
       div1
      
3     
     

 

幕态化弹出框

1     谈出框与后部页面  三层页面框架;z-index 大的在上面;display:none 先让弹框消失2     
     
      3         
      4     
     
5     
     
6     
     
      内容正文
     

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

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

 

overflow

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

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

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

案例：

1     
     
      2         
      3     
     
4     
     
      5         
      6     
     

效果：

 

 放个原图吧、哈哈

 

 言归正传、不闹。。

 

hover

鼠标置于标签上的时候

1  2     
     
       3         
      
        4             
       Logo 5             
       全部 6             
       新闻 7             
       体育 8         
      
 9     
     
10     
     
      11         
      
       content
      
12     
     
13 

style：

1 

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

 

bakcground-image

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

1     
     
       2         
      
        3             
          4                 
 7                 
13             
14         
       
        
         
 5                     
          
           username:
          
 6                 
         
 8                     
          
            9 
           10 
           11 
          
12                 
        
       
      
15     
     
16     
     

效果：

 

 

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 3   4 
     5 

 

其他

 

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

基本函数：

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   文本outerTextinnerHTML   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   2   3   4     
        5       6      33  34  35      36      37      38      39     
      
        40         
         41             
          42                 
 43                 
 44                 
 45             
 46         
 47         
         48                 
          49                 
 50                 
 51                 
 52             
 53             
          54                 
 55                 
 56                 
 57             
 58             
          59                 
 60                 
 61                 
 62             
 63         
 64     
       
        
         
选择
         
主机名
         
端口
        
       
       
        
         
 
         
1.1.1.1
         
22
        
        
         
 
         
2.2.2.2
         
22
        
        
         
 
         
3.3.3.3
         
33
        
       
      
 65     
       66     
      
 67  68     
       69     
      
        70         
       
 71         
       
 72         
       
 73         
       
 74     
      
 75     114 115 

操作标签

1 // 方式一 2 var obj = ""; 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               获取URLlocation.href = "url"       重定向location.reload()           重新加载  // 定时器setInterval                 多次定时器clearInterval               清除多次定时器setTimeout                  单次定时器clearTimeout                清除单次定时器

提交表单

document.geElementById('form').submit()

demo

1  2  3  4     
      5      6     16 17 18     
     
      欢迎光临！
     
19 20