1. html中引入js
- 直接在html中添加
<head>
<script>
// js here......
</script>
</head>
- 引用js文件路径
<head>
<script src = "xxx.js" ></script>
</head>
// 因为js代码加载需要时间所以建议将引用放在body最后，原因是html是从上往下加载的
<body>
<script src = "xxx.js"></script>
</body>
2. 数组创建的三种方式
var array = new Array(4);
array(0) = "one";
array(1) = "two";
var array = new Array("one","two");
var array = ["one","two"];
3. 对象创建的种方式
var lennon = new Object();
lennon.name = "xiaoming";
var lennon = {name:"xiaoming"};
4. js操作DOM树
- 获取元素(还有许多～)
var xxx = document.getElementById("xxx");
var liArray = document.getElementByTagName("li");
var classArray = document.getElementByClassName("xxx");
//获取父元素节点
xxx.getParentNode;
- 更改元素属性
getAttribute("");
setAttribute("","");
- node 节点
nodeType 属性(值是 int ) : 子节点类型
元素节点 1
属性节点 2
文本节点 3
nodeName属性(值是 String) ：子节点的名称
nodeValue 属性: 设置获取文本节点的值
- javaScript 伪协议
伪协议不同于因特网上所真实存在的协议，如http://，https://，ftp://，
而是为关联应用程序而使用的.如:tencent://(关联QQ)，data:(用base64编码来在浏览器端输出二进制文件)，还有就是javascript:
我们可以在浏览地址栏里输入"javascript:alert('JS!');"，点转到后会发现，实际上是把javascript:后面的代码当JavaScript来执行，并将结果值返回给当前页面。
<a href="javascript:;" name="price">150元-300元</a>
下面我们主要是聊聊不想要<a>标签跳转到实际页面的几种方法。
<a href="#"></a> <!-- 点击这个链接后，会让页面跳到页面顶部，在location.href后面增加#号。 -->
<a href="#none"></a> <!--点击这个链接后， 如果页面里面有id为none的元素，会执行锚点机制跳转到这个元素上缘-->
<a href="###"></a> <!--不跳转，可以阻止默认的跳转行为，但是这个在后端代码中容易识别成注释，后面的代码不显示，之前遇到过这种坑，之后再没用过-->
<!-- 下面几种基于伪协议 -->
<a href="javascript:"></a>
<a href="javascript:;"></a>
<a href="javascript:void(0)"></a>
<a href="javascript :void(0);"></a>
- js 与 html 分离，js中添加事件处理函数
// onload 加载完成回掉函数
// onClick 鼠标点击和回车键都会触发
// onKeypress 键盘按键监听
window.onload = function (){
var addClickNode = document.getElementById("clickNode");
addClickNode.onClick = function(){
showPic(this);
return false;
}
};
- js与css的结合
var placehold = document.getElemendsByid("placehold");
var source = placehold.src;
// var source = placehold.getAttribute("src");
placehold.src = source;
// placehold.setAttribute("src",source);
- write(插入字符串) 和 innerHTML (插入html)
1.write是DOM方法,向文档写入HTML表达式或JavaScript代码，可列出多个参数，参数被顺序添加到文档中 ；innerHTML是DOM属性,设置或返回调用元素开始结束标签之间的HTML元素。
2.两者都可向页面输出内容,innerHTML比document.write更灵活。
3. 当文档加载时调用document.write直接向页面输出内容，文档加载结束后调用document.write输出内容会重写整个页面
4. innerHTML 一旦被使用，则会将他全部的内容替换，根本无法区分插入还是替换一段html
5. DOM方法
- createElemet:创建文档碎片～
var node = document.createElement("nodeName");
- createTextNode： 创建文本节点
var txt = document.createTextNode("这是一段文本");
- appendChild: 添加子节点(属性节点，文本节点，元素节点)
var parent = document.getElementById("parent");
parent.appendChild(node) ;
- insertBefore: 把一个新元素插入到现有元素之前
parentEment.insertBefore(newElement,targetElement);
元素节点的父元素必须死元素节点，属性节点和文本节点的自元素不允许是元素节点
- 自己实现一个insertAfter:把一个元素插到现有元素之后
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling)
}
}
- 自己实现一个 lastChildrenElement: 获取最后一个元素节点
// * 通配符
function lastChildElement(element) {
var elementArray = element.getElementsByTagName('*');
if (elementArray.length<1) return;
return elementArray.pop();
}
- js 设置和更新 css
var para = document.getElementById("element");
para.style.color = "black";
para.style.font = "2em 'times',serif";
网友评论