javaScript基础05

2016-09-06 本文已影响28人廖马儿

-1.如果是不能改变标签位置，那么设置一下position:relative。

0.BOM模型：浏览器对象模型。

浏览器对象是什么，就是window对象。
Window对象会在<body>或者<frameset>每次出现时候被自动创建

1.函数

函数的定义：a.采用function 来定义。
                  b.采用匿名函数的方式（采用function作为名字）
                    var f = function () {xxx}
                  c.（了解）采用new Function()的方式，注意Function是大写。              var f = new Function("x", "y", "alert(x + y)");
函数必须通过事件来调用或者我们自己手动调用。  定义函数时候千万不要重名。

2.函数劫持：改变javascript的函数预定好的功能。

  var fun = function (){
        alert('001');
  }
  fun = function () {
        alert('002');
  }
  fun();

3.全局函数：

isNaN:判断是不是不是一个数字     Not a number   如果是true，不是数字  false是数字
parseInt()可以解析一个字符串，返回一个整数，parseFloat()可以解析一个字符串返回一个浮点数
eval:a.主要执行字符串，将结果转化为数字
       b.将json格式的字符串转为json.
escape()，编码   var a = "中国"； var b = escape(a);
一般用于URL中非ASCII字符的编码和解码.

4.数组对象：
js中的数组长度是可以变化的。
数组对象的定义方式：
a.采用new Array()的方式
var arr1 = new Array(4); // 定义一个数组arr1，初始长度为4alert(arr1[2]); // undefinedalert(arr1[100]); // 相当于定义了一个arr1[100]，但是没有赋值 var arr2 = new Array(1,2,3,4,5);
b.var arr = []; var arr2 = [1, 2, 3, 4, 5]; // 定义数组，同时初始化 var arr3 = [1, 'nihao', false, 22, "你好"];

数组的长度：arr.length.
改变数组长度的2种办法：var arr = [];,  arr.length = 100;  
或者 arr[99] = 1;   // 注意，一定要赋值，如果只写arr[99]就不行。
var arr = [1, 2, 3, 4];  
arr.length = 2;
alert(arr[2]);  // undefined  

var arr = ['1', '2', '3'];arr['1'] = ['1-1', '1-2', '1-3'];alert(arr[0][0]);  // 弹出1alert(arr['1'][0]);  // 弹出1-1

5.array的对象方法：
a.join()

 array.join();  // 默认用逗号隔开
array.join(" ");  // 用空字符串连接  
array.join("");   // 连接所有元素

b.push()  添加元素到数组
c.reverse() 反转顺序   var arr = [1, 2, 3]; arr.reverse(); // arr = [3, 2, 1]
d.shift() 删除并返回第一个元素  
   var arr = [1, 2, 3, 4];
   var arr_aft = arr.shift();  // arr_aft = 1;  arr = [2, 3, 4];
e.sort()排序  默认情况下先将能转为number类型的字符串转和number类型的比较（转为string类型比较）。转换不承担额作为一组进行比较

6.标题栏的滚动特效：

var title = document.title;
var arr = title.split("");   // 分隔为数组
var first = arr.shift();
arr.push(first);
title = arr.join("");
document.title = title;
setTimeout("init()", 1000); // 每隔1000ms 执行一次init()方法。

7.字符串对象

var string = new String("string");
str.big();  // 变大。字体大小变大。
// 随机取得一个整数
Math.ceil()   Math.floor()
var p = document.getElementById("p");
var arr = ["red", "blue", "green", "yellow", "#666666"];
var index = Math.floor(Math.random*arr.length);

8.Math对象 Math.random -- o~1

9.Date对象

var date = new Date();  // 
date.toLocaleString();  //

10.js正则表达式

创建一个正则表达式：
第一种：
var reg = /pattern/;
第二种：
var reg = RegExp('pattern');

// 测试字符串是否包含正则表达式// 测试所匹配的字符串，返回的是   booleanalert(reg.test(s));

11.window对象的模态窗体

window.showModelDialog("hello world!");  // 此方法对于QQ浏览器可以，但是对于chrome浏览器不行。
alert();  // 这就是一个模态窗体

12.history对象

历史对象，功能相当于我们浏览器，前进后退按钮。
存储了访问过的页面，我们可以根据这个去到达访问过的页面。
history.fowward();
history.back();
history.go(x);

13.鼠标的事件：

a.鼠标的移动事件
事件：onmousemove   鼠标的移动
b.鼠标的悬停及移出
事件：onmouseover
事件：onmouseout      
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数
c.鼠标的点击事件：
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。

14.location对象：

提供了一个到达其他页面的方式，window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面

document.write(location.href);
http://localhost:63342/demoPro/c.html
window.location.href="history对象/b.html"
跳转： function func() {    window.location = 'b.html';}
window.location.reload();  // 刷新
divnode.style.backgroundColor="red"; // 把其背景颜色变为红色

15.style->text-align:center

下面的元素就会居中，可是要注意，如果又给元素设置了position:absolute;  这个元素就不会居中。

top:-10px;  // 就会向上移动10个像素
img.style.display = "none"; // 隐藏
img.style.display = "block";  // 显示

16.一个事件中可以调用多个函数

onload="func(), func1()"

17.onload, onunload

支持onload()的js对象：
image,layer,window
支持onload()的html标签:
<body><frame><frameset><ifame><img><link><script>

onunload（） 卸载事件，用的不多

18.onfocus(),onblur() 获得焦点事件失去焦点事件

19.键盘事件：

三种事件：按下并放开onkeypress 按下：onkeypress 松开：onkeyup

<input type='text' name='' onkeypress='func(this)'>

obj.value = e.keyCode;  // 拿到键盘的ASCII码

20.<form>的提交与重置事件

<form>表单的2个事件：<form method="post" action="a.html" onsubmit="return check(this)" onreset="return func(this)">

`submit` 与 `reset`

21.<input>的选择与改变事件,onchange事件：

<input type="text" name="" onselct="fun(this)">
onchange事件，发生改变与失去焦点，才回触发这个事件。

<select onchange="changeSelect(this.value,    this.selectedIndex)">   
 <option value="china">中国</option>   
 <option value="american">美国</option>   
 <option value="japan">日本</option>
</select>

22.DOM技术：

什么是DOM？通过js，可以重构整个HTML文档,可以添加，一处，改变，或者重拍页面上的项目。<标签>在DOM中称为节点。
什么是DOM树？DOM被分为不同的部分（核心，XML，HTML）和级别（DOM Level 1/2/3）
Core DOM:定义了一套标准的针对任何结构化文档的对象
XML DOM：定义了一套标准的针对XML文档的对象
HTML DOM：定义了一套标准的针对HTML文档的对象

xml介绍：可扩展性标记语言

 <person>
        <name>张无忌</name>
        <age>23</age>
 </person>

23.DOM树

根据DOM，XML文档中的每个成分都是一个节点。
五种类型：

<ul>
<li>整个文档是一个文档节点</li>
<li>每一个XML标签是一个元素节点</li>
<li>包含在XML元素中的文本是文本节点</li>
<li>每一个XML属性是一个属性节点</li>
<li>注释是注释节点</li>
</ul>

节点的属性：`nodeName`(节点名称)   `nodeValue`(节点值)   `nodeType`(节点类型)

nodeName属性含有节点的名称：
<ul>
<li>元素节点的nodeName是标签名称</li>
<li>属性节点的nodeName是属性名称</li>
<li>文本节点的nodeName永远是#text</li>
<li>文档节点的nodeName永远是#document</li>
</ul>

nodeValue：
对于文本节点，nodeValue属性包含文本
对于属性节点，nodeValue属性包含属性值
nodeValue属性对于文档节点和元素节点是不可用的

nodeType属性可以返回节点的类型
最重要的节点类型是：
元素  1
属性  2
文本  3
注释  8
文档  9

24.DOM导航

`parentNode`, `childNodes`, `firstChild`, `lastChild`, `nextChild`, `previousSibling`(上一个兄弟节点), `nextSibling`（下一个兄弟节点）

  var root = document.documentElement; // 获得root节点

25.DOM节点的属性操作

BOM和HTML DOM的关系图。

![C`5F}]N9IUMG[3Y{)SS3I2.png

DOM是BOM的一部分（从DOM结构来看）。

拿到属性：
// 拿到文本框对象var txt = document.getElementById("txt");// 拿到属性节点var attrs = txt.attributes;

<input type="text" name="name" id="txt"><script>    // 拿到文本框对象    var txt = document.getElementById("txt");    // 拿到属性节点    var attrs = txt.attributes;    // 拿到name属性的值    //alert(attrs[0].nodeValue);    alert(attrs.length);    for(var i = 0; i < attrs.length; i++){        alert(attrs[i].nodeName +

":" + attrs[i].nodeValue); }

第二种拿到属性，方便点：
document.getElementById("txt");    // 拿到属性节点       
var attrs = txt.attributes;  
var nameAttr = attrs.name;
alert(nameAttr.nodeValue);

26.拿取标签节点的方法

Document对象：
<ol>
<li>getElementById() 通过id</li>
<li>getElementsByName() 通过name的值取得，有限制，比如div就不行</li>
<li>getElementsByTagName()标签的名字</li>
</ol>

替换节点：

bjNode.parentNode.replaceChild(bjNode, gameNode);// 替换子节点

节点的克隆：

var node_3 = node.cloneNode(true);  // 克隆节点是否包含原节点的所有属性和子节点

以后替换节点就先克隆，再复制

27.比如img的height属性，可以不写单位。
img.style.height需要写单位。

28.<table节点>

29.循环注意事项：

for (var i = 0; i < hobbys_arr.length; i ++) {}
要注意var i = 0; // 经常写成var i;

30.js的面向对象

js中的模拟类

// 定义类并创建类的实例对象
function Person (){    
        var name = "张三"; // 属性，在函数中：用var定义}// 创建对象    
        var person = new Person();
        person.weight = 130;alert(person.weight);  // 能弹出来
        var p1 = new Person();
        alert(p1.weight);   // 弹不出来，因为weight没有定义


定义私有属性：
    1.在函数中：用var定义
    2.在函数外：用对象.属性名定义
定义公有属性：
    1.在函数中：用this.属性名定义
    2.在函数外：函数名.prototype.属性吗 = 默认值；

定义私有方法：

    1.在函数中：采用var 方法名 = function() {} 定义
    2.在函数外：采用对象名.prototype.方法名 = finction(){}定义

var person = new Person();
person.privateM = function (){    
    var a = 1;    
    alert(++a);
}
person.privateM();  // 外部定义私有方法，只有这个对象才能使用

定义公有方法：

    1.在函数中：采用this.方法名=function(){}定义
    2.在函数外：采用 函数名.prototype.方法名=function(){}定义

静态属性好静态方法：

注意：定义静态属性和方法都用函数名来定义。
         调用的时候只能用函数名来调用，不能用对象调用。
Person.names = "张三";   // 这里要注意，要调用name的话，不能取有属性名称有冲突的字符串
Person.show = function(){    
        alert("我是静态方法");
}
alert(Person.names);
Person.show();

如何创建js对象：
1)采用 new 函数名();
2)采用 new Object();
   var obj = new Object();
   obj.name = "Web";
3)采用json格式定义
  
  var json = {"a":"china", "b":"american", "c":"japan"}
  alert(typeof(json));
  alert(json.a); alert(json["a"]); // 2种拿取的办法（推荐第2种）
        
  for(var a in json) {
      alert(a);  // 打印的会是a, b, c 注意
  }

  eval()函数可以把一个字符串转换为一个json对象

javaScript基础05

猜你喜欢

热点阅读