JS用例

 

 

 

 

 

showBtn

:class="{getInput:showBtn}"
v-if="showBtn"

showBtn: true,

this.showBtn = false;

this.showBtn == true

 

 

 

 

 

 

 

 

 

 

 

 

 

JSON.parse('{"p": 5}', function(k, v) {
document.write(k);document.write(v);
});

js button 图片的动态替换
<Button size="small" type="ghost" @click="save" >
<span @mouseleave="leavesx" @mouseenter="entersx">
<img name="test" src="../../../../../../../static/img/anchor.png">新增
</span>
</Button>
leavesx(it) {
console.log(it);
console.log(document.getElementsByName("test")[0]);
document.getElementsByName("test")[0].setAttribute("src", "../../../../../../../static/img/jiantou.png");
},
entersx(it) {
console.log(it);
// debugger
document.getElementsByName("test")[0].style.color = "blue";
},
font-size: 16px;
vertical-align: top;
margin-right: 4px;

//prompt 弹框 截取 substr 后十位
var str = prompt("please input a string ", "1234567890");
my_label: {
if (str && str.length < 10) {
console.log(my_label);
break my_label; //!!!! break 后跟label my_label
}
str = str.substr(str.length - 10);
console.log(str);
}

屏蔽web自带鼠标右键
document.oncontextmenu = function () {
return false;
}

DOM方法
createElement()/createTextNode()/appendChild()/inertBefore

innerHTML() 全部内容的替换

createElement() 创建一个新的元素，创建元素节点
var para = document.createElement("p");
变量para现在包含着一个指向我们刚创建出来的那个p元素的引用指针。
p 已经有了一个nodeType 和 nodeName 值。
window.onload = function () {
var para = document.createElement("p");
var info = "nodeName:";
info += para.nodeName;
info += "nodeType:";
info += para.nodeType;
alert(info);

//创建的p插入已有的div
var div1 = document.getElementById("divid");
div1.appendChild(para);
}
createTextNode 创建文本节点
一个div里拼入
var demos = document.getElementById("demo");
var para = document.createElement("p");
var txt = document.createTextNode("nihao");
demos.appendChild(para);
para.appendChild(txt);

insertBefore()方法的优势在于可以对文档中任何一个元素的任何一个属性修改。把一个新元素插入到现有元素的前面
1>想插入的新元素（newElement）
2>想把这个新元素插入到哪个现有元素（targerElement）的前面
3>这两个元素的共同父元素（parentElement）
parentElement.insertBefore(newElement,targerElement);
(parentElement 不必清楚是谁，同于 target.parentNode )

insertAfter(newElement,targerElement)//before 相反

多个事件添加到window.onload 用addLoadEvent().

移除元素
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);

页面加载完毕时执行函数
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent(firstFunction);//只需如此添加就能在页面加载完之后执行
addLoadEvent(secondFunction);

// --
window.onload = firstFunction();
window.onload = secondFunction();//两个onload只有最后一个会执行
so : window.onload = funtion(
firstFunction();
secondFunction();
)

多个链接 点击某一个
javaScript 与 HTML代码分离时，加上 window.onload = fun;
functon fun(){//嵌套以下代码}
if(!document.getElementByTagName){
return false;} //向后兼容性(不支持javaScript时不执行之后的代码)
var links = document.getElementByTagName("a");
for(var i - 0;i<links.length;i++){
if(link[i].className == "popup"){
link[i].onclick = function(){
popUp(this.getAttribute("href"));
return false;
}
}
}

预留退路
不规范示例：
<a href="#" onClick="popUp("http://www.baidu.com/");return false;">eg</a>
规范示例：
（用户禁用javaScript）
eg:
<a href="http://www.baidu.com/" onClick="popUp(this.getAttribute('href'));return false;">eg</a>
or<!-- onClick="popUp(this.href); -->

BOM
window.open(url,"name","width=320;height=480")//打开文档url地址，新窗口名称，新窗口的各种属性

JavaScript 停留在面向过程的层次上（脚本语言）

node.childNodes[0] node.firstChild //两者完全等价

DOM
Document Object Model
setAttribute()方法的优势在于可以对文档中任何一个元素的任何一个属性修改。

js数组 取元素和索引
arrs.forEach(item,index,arr) {
arr[index] = ....;
}

getElementByTagName //获取的是一个数组
//查询对象属性
object.getAttribute(attributeName);

 

转载于:https://www.cnblogs.com/sx00/p/10913837.html