js-知识集锦

Posted 2020-09-03 Marydon

CreateTime--2016年9月22日14:37:51
Author:Marydon
js小知识点集锦
1.

JSON.stringify(Obj);//将Object对象转换成json格式的string类型字符串

2.===与==
　　1、对于string,number等基础类型之间的比较，==和===是有区别的
　　　　1）不同类型间比较，

　　　　　　== 比较的是：判断两边转化成同一类型后的值是否相等，
　　　　　　===如果类型不同，其结果就是不等
　　　　2）同类型比较，直接进行“值”比较，两者结果一样
　　2、对于Array,Object等高级类型之间的比较，==和===是没有区别的
　　　　进行“指针地址”比较
　　3、基础类型与高级类型的比较，==和===是有区别的
　　　　1）对于==，将高级转化为基础类型，进行“值”比较
　　　　2）因为类型不同，===结果为false
3.函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！
　　Js代码

function f1(){
    n=999;
}
f1();//需要调用，不能省略
alert(n); // 999

(function() {
    var Obj2 = {};
    var name = "方法二"; //或Obj2.name = "方法二"
    Obj2.method1 = function() {
        console.log("方法二进行测试");
        return name;
    }
    window.GlobalObj2 = Obj2;
})();
var name = GlobalObj2.method1();//获取的是返回值name
var method = GlobalObj2.method1;//获取的是对象GlobalObj2的method1()方法

UpdateTime--2016年10月16日15:50:02
4.js获取后台数据
　　前提：js代码必须写在本页面中，外部引用的js文件不用使用下面的方法

//方法一
var test = ‘${model}‘;
//方法二    
var test = ‘<%=request.getAttribute("model")%>‘;

　　js里面可以嵌套jstl标签
UpdateTime--2016年10月31日10:06:12
5.

event.keyCode;//获取键的编码 火狐不支持
<script>
    var globalFunction = new GlobalFunction();
    function GlobalFunction () {
        this.listenKeyCode = function listenKeyCode () {
            if (event.keyCode == 13) {//event.keyCode = 9;//tab键
                console.log("您按的是回车键");
            }
        }
    }
</script>
<input type="text" name = "text1" onkeydown = "globalFunction.listenKeyCode()">
注：火狐用的是event.which

UpdateTime--2017年1月15日20:33:03
6.innerhtml,outerHTML与innerText
示例：

<div id="test">
    测试<br/>
    <input type="text"/>
    <input type="button"/>
    <div>innerHTML与outerHTML的区别</div>
</div>

　　innerHTML--取的是标签体内的所有内容
　　如：

window.onload = function() {
    document.getElementById("test").innerHTML;
    //显示的所有内容
    /*测试<br/>
    <input type="text"/>
    <input type="button"/>
    <div>innerHTML与outerHTML的区别</div>*/
}

用法：
　　1.取值

var html = document.getElementById("test").innerHTML;

　　2.赋值（覆盖掉原来的内容）

document.getElementById("test").innerHTML = "这里是替换后的内容";

　　如：

document.getElementById("test").innerHTML = "<font color=‘red‘>${model.data.forgid}</font>";

　　3.给当前标签体内添加或追加子标签或内容；

　　如：

document.getElementById("test").innerHTML += "<font color=‘red‘>${model.data.forgid}</font>";

outerHTML--根据标签本身的引用来获取标签自身的html标签（即：标签体本身+标签体里面的内容）

window.onload = function() {
    document.getElementById("test").outerHTML;
    //显示的是该标签体
    /*<div id="test">
            测试<br/>
            <input type="text"/>
            <input type="button"/>
            <div>innerHTML与outerHTML的区别</div>
        </div>*/
}

用法：

　　1.取值

var html = document.getElementById("test").outerHTML;

　　2.给指定元素的后面添加同级元素或内容；

　　如：

document.getElementById("test").outerHTML += "<font color=‘red‘>${model.data.forgid}</font>";

/**
 * 不兼容outerHTML的解决办法
 */
if(!document.body.outerHTML && typeof(HTMLElement) != "undefined") {
    HTMLElement.prototype.__defineGetter__("outerHTML", function() {
        var a = this.attributes,
            str = "<" + this.tagName,
            i = 0;
        for(; i < a.length; i++)
            if(a[i].specified)
                str += " " + a[i].name + ‘="‘ + a[i].value + ‘"‘;
        if(!this.canHaveChildren)
            return str + " />";
        return str + ">" + this.innerHTML + "</" + this.tagName + ">";
    });
    HTMLElement.prototype.__defineSetter__("outerHTML", function(s) {
        var r = this.ownerDocument.createRange();
        r.setStartBefore(this);
        var df = r.createContextualFragment(s);
        this.parentNode.replaceChild(df, this);
        return s;
    });
    HTMLElement.prototype.__defineGetter__("canHaveChildren", function() {
        return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());
    });
}

innerText--取的是标签体内的所有文本内容
　　如：

window.onload = function() {
    document.getElementById("test").innerText;
    //显示所有的文本内容
    /*测试
    innerHTML与innerText的区别*/
}

　　用法：同innerHTML

innerText与innerHTML的区别
　　区别1：
　　　　取值（上面例子）
　　区别2：赋值

$get("FORGNAME_SPAN").innerText= "『<font color=red>" + json.FORGNAME + "</font>』下属医疗机构相关信息";

　　显示结果:

　　　　『<font color=red>中华人民共和国</font>』下属医疗机构相关信息　　

$get("FORGNAME_SPAN").innerHTML= "『<font color=red>" + json.FORGNAME + "</font>』下属医疗机构相关信息";

　　显示结果:

　　　　『中华人民共和国』下属医疗机构相关信息

7.document.write()与document.out()
　　document.write()会将body标签的内容替换掉；
　　document.out()则只有在jsp页面才能使用，不属于js的范畴
8.appendChild()与insertBefore()

//新建一个div元素节点
var div=document.createElement("div");
div.innerText = "helloworld";
//把div元素节点添加到body元素节点中成为其子节点，但是放在body的现有子节点的最后
document.body.appendChild(div);
//插入到最前面
document.body.insertBefore(div, document.body.firstElementChild);

9.document.createElement();//动态创建元素

var dialog = document.createElement(‘div‘);
var img = document.createElement(‘img‘);
var btn = document.createElement(‘input‘);
var content = document.createElement(‘span‘);

10.动态添加样式

　　通用属性用"."，自定义属性用"setAttribute(‘customizeName‘,‘value‘)"

// 添加class
dialog.className = ‘dialog‘;
//添加id
dialog.id = ‘top‘;
// 属性
img.src = ‘close.gif‘;
// 样式
btn.style.paddingRight = ‘10px‘;
// 文本
span.innerHTML = ‘您真的要GG吗？‘;
// 在容器元素中放入其他元素
dialog.appendChild(img);
dialog.appendChild(btn);
dialog.appendChild(span);

注：

　　a.8,9,10有连接关系;
　　b.添加class属性调的是"className"
11.event事件
　　window.event代表着事件对象的状态。只有在事件发生时生效。如鼠标、键盘等事件被触发时这个对象才存在。window.event这只在IE下是这样的。他并不是标准。也就是说其他浏览器并不支持。在W3C标准支持的浏览器下事件对向是引发事件函数的第一个参数，参数名随意

//获取event对象
//方法一
var theEvent = window.event || arguments.callee.caller.arguments[0];
//方法二
将event作为参数来传递:
function eventListener(evt){
    var theEvent = window.event || evt;
}

<input id="test" type="text" oncopy="javascript:eventListener(event);"/>

//捕获当前事件作用的对象
var srcElement = theEvent.srcElement? theEvent.srcElement : theEvent.target;

综上：

/**
 * 监听事件，捕获当前事件作用的对象并对该对象执行操作
 * @param {Object} obj
 */
function eventListener(evt){ 
    //推荐使用
    var theEvent = window.event || arguments.callee.caller.arguments[0] || evt;
    var srcElement = theEvent.srcElement? theEvent.srcElement : theEvent.target;
    alert(srcElement.value);
}

<input id="test" type="text" oncopy="javascript:eventListener(123)"/>

注意：

　　火狐获取事件的方法是：arguments.callee.caller.arguments[0]