java---前端知识补充

css的定位

相对定位：

相对定位是相对于元素原本的位置进行移动的。

使用方式：   position:relative;


绝对定位： 绝对定位是相对于整个页面而言。
    position:absolute; 
    top:200px;
    left:380px;

固定定位：
    position:fixed; /* 固定定位: 固定定位是相对于整个浏览器而已的。 
    top:380px;
    left:1000px;

js自定义对象

在javascript没有类的概念，只要有函数即可创建对象。

自定义对象的方式1： 使用无参的函数创建对象。

例子：

    function Person(){}
    var p = new Person(); //创建了一个Person对象了
    p.id = 110;
    p.name = "狗娃";

方式2：使用带参的函数创建对象。

    function Person(id,name){
        this.id = id;
        this.name = name;   
        this.say = function(){
            alert(name+"呵呵");   
        }
    }

    var p = new Person(110,"狗剩");   //创建对象


方式3： 使用Object函数创建对象

    var p = new Object();
    p.id = 110;
    p.name = "铁蛋";

方式4：使用字面量的方式创建.


    var p = {
        id:110,
        name:"狗娃",
        say:function(){
            alert(this.name+"呵呵");  
    }   
}       。

var p = {
    id:110,
    name:"狗娃",
    say:function(){
        alert(this.name+"呵呵");  
    }   
}   


document.write("编号："+ p.id+" 姓名："+ p.name);
p.say();

js数组

var arr1 = ["狗娃","狗剩","铁蛋"];
var arr2 = ["永康","才厚"];

/*
arr1 = arr1.concat(arr2); //concat把arr1与arr2的数组元素组成一个新的数组返回。
for(var index in arr1){
    document.write(arr1[index]+",");    
}


var elements = arr1.join(","); // join使用指定的分隔符把数组中的元素拼装成一个字符串返回。
document.write("数组的元素："+elements);


pop ：移除数组中的最后一个元素并返回该元素。

document.write("删除最后的一个元素并返回："+arr1.pop()+"<br/>");

arr1.push("永康"); // 将新元素添加到一个数组中，并返回数组的新长度值。

arr1.reverse(); //翻转数组的元素

document.write("删除第一个元素并返回："+arr1.shift()+"<br/>"); //移除数组中第一个元素，并且返回。


var subArr = arr1.slice(1,2); //指定数组 的开始索引值与结束索引值截取数组的元素，并且返回子数组。
document.write("子数组的元素："+subArr.join(",")+"<br/>");




arr1 = [19,1,20,5];
arr1.sort(sortNumber);  //排序，排序的时候一定要传入排序的方法。

function sortNumber(num1,num2){
    return num1-num2;
}


arr1.splice(1,1,"张三","李四","王五"); //第一个参数是开始删除元素的 索引值， 第二参数是删除元素的个数，往后的数据就是插入的元素。

*/

Array数组对象:

创建数组的方式1：
    var 变量名 = new Array();  创建一个长度为0的数组。

方式2：
    var 变量名= new Array(长度) 创建一个指定长度的数组对象。

方式3：
    var 变量名 = new Array("元素1","元素2"...);  给数组指定元素创建数组 的对象。

方式4： 
    var 变量名 = ["元素1","元素2"...];

数组要注意的细节：

1.  在javascript中数组的长度是可以发生变化的。

js Math对象

Math对象常用的方法：

ceil        向上取整
floor（）   向下取整
random()  随机数方法 //  产生的伪随机数介于 0 和 1 之间（含 0，不含 1），
round     四舍五入

js Prototype原型属性

Prototype注意的细节：

1.  prototype是函数(function)的一个必备属性(书面一点的说法是"保留属性")(只要是function,就一定有一个prototype属性)
2.  prototype的值是一个对象
3.  可以任意修改函数的prototype属性的值。
4.  一个对象会自动拥有prototype的所有成员属性和方法。   

需求：想把getMax与searchEle方法添加 到数组对象中。

Array.prototype.getMax = function(){
    var max = this[0];
    for(var index = 1; index<this.length ; index++){
        if(this[index]>max){
            max = this[index];  
        }   
    }
    return max;
}

Array.prototype.searchEle = function(target){
    for(var i = 0 ; i<this.length ; i++){
        if(target==this[i]){
            return i;   
        }   
    }
    return -1;

}

//var arr = new Array(12,4,17,9);
var arr = [12,4,17,9];
var max = arr.getMax();
var index = arr.searchEle(9);
document.write("最大值："+ max+"<br/>");
document.write("索引值："+ index+"<br/>");

avascript

window 代表了一个新开的窗口

location 代表了地址栏对象。

screen 代表了整个屏幕的对象

window

open()   打开一个新的窗口。
resizeTo() 将窗口的大小更改为指定的宽度和高度值。
moveBy()  相对于原来的窗口移动指定的x、y值。 
moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置 
setInterval() 每经过指定毫秒值后就会执行指定的代码。
clearInterval() 根据一个任务的ID取消的定时任务。
setTimeout() 经过指定毫秒值后执行指定 的代码一次。

注意： 使用window对象的任何属性与方法都可以省略window对象不写的。

常用的事件

鼠标点击相关：

    onclick 在用户用鼠标左键单击对象时触发。 
    ondblclick 当用户双击对象时触发。 
    onmousedown 当用户用任何鼠标按钮单击对象时触发。 
    onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。 

鼠标移动相关：

    onmouseout  当用户将鼠标指针移出对象边界时触发。 
    onmousemove 当用户将鼠标划过对象时触发。 

焦点相关的：

    onblur 在对象失去输入焦点时触发。 
    onfocus 当对象获得焦点时触发。

其他：

    onchange 当对象或选中区的内容改变时触发。 
    onload 在浏览器完成对象的装载后立即触发。 
    onsubmit 当表单将要被提交时触发。

地址栏对象(Location)

href : 设置以及获取地址栏的对象

reload() 刷新当前的页面

Screen(屏幕)对象

availHeight 获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。     
availWidth  获取系统屏幕的工作区域宽度，排除 Windows 任务栏。   
height      获取屏幕的垂直分辨率。 
width       获取屏幕的水平分辨率。

通过html元素的标签属性找节点

document.getElementById("html元素的id") 
    document.getElementsByTagName("标签名") 
    document.getElementsByName("html元素的name")

通过关系(父子关系、兄弟关系)找标签

parentNode  获取当前元素的父节点。
    childNodes  获取当前元素的所有下一级子元素。
    firstChild  获取当前节点的第一个子节点。
    lastChild   获取当前节点的最后一个子节点。
    nextSibling     获取当前节点的下一个节点。（兄节点）
    previousSibling 获取当前节点的上一个节点。（弟节点）

创建字节入插入节点、设置节点的属性。

document.createElement("标签名")       创建新元素节点
elt.setAttribute("属性名", "属性值")  设置属性
elt.appendChild(e)添加元素到elt中最后的位置
//setAttribute:设置节点的属性
    inputNode.setAttribute("type","button");
    inputNode.setAttribute("value","按钮"+num);

elt.insertBefore(newNode, oldNode);         添加到elt中，child之前。
注意： elt必须是oldNode的直接父节点。

elt.removeChild(child)                  删除指定的子节点

注意： elt必须是child的直接父节点。

验证码。

//产生一个四位的验证码。
function createCode(){
    var datas = ['A','B','何','敏','凡','江','1','9']; // 0-7  长度8
    var code = "";
    for(var i = 0 ; i<4; i++){
        //随机产生四个索引值
        var index =  Math.floor(Math.random()*datas.length); // random 0.0-1.0（不包括1.0）
        code+=datas[index];
    }   

    var spanNode = document.getElementById("code");
    spanNode.innerHTML = code;
    spanNode.style.fontSize ="24px";
    spanNode.style.color = "red";
    spanNode.style.backgroundColor="gray";
    spanNode.style.textDecoration = "line-through";
}

正则表达式

正则表达式的创建方式：
“”

方式1：
    /正则表达式/模式

方式2：
    new RegExp("正则表达式",模式);

正则表达式对象常用的方法：
test() 使用正则对象去匹配字符串 如果匹配成功返回ture，否则返回false.
exec() 根据正则表达式去查找字符串符合规则的内容。

模式：
g （全文查找出现的所有 pattern）
i （忽略大小写）

var str = "hello123";
var reg = /^[A-Z0-9]+$/i;
alert("匹配吗？"+reg.test(str));    

查找出三个字符组成的单词。

*/
var str =”da jia hao hao xue xi a”;
var reg = /\b[a-z]{3}\b/gi;
var line =”“;
while((line = reg.exec(str))!=null){
document.write(line+”
”)
}