js写入html的方法
使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。
document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
字符串和数组
字符串
var carname = "Volvo XC60";、
你可以使用索引位置来访问字符串中的每个字符:
var character = carname[7];
可以使用内置属性 length 来计算字符串的长度:
var sln = txt.length;
数组
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0;i<cars.length;i++){
document.write(cars[i] + "<br>");
}
获取当前文档的 HTML 你内容:
var x = document.body.innerHTML;
修改当前文档的 HTML 内容:
document.body.innerHTML = "新的内容...";
创建 <p>
元素,并将其添加在文档中:
var x = document.createElement("P"); // 创建 <p> 元素
var t = document.createTextNode("这是新增的段落。"); // 创建文本节点
x.appendChild(t); // 文本添加到 <p> 元素中
document.body.appendChild(x); // 将 <p> 添加到 <body> 中
HTML DOM Document 对象
document.getElementsByClassName() | 返回文档中所有指定类名的元素集合,作为 NodeList 对象。 |
---|---|
document.getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |
document.getElementsByName() | 返回带有指定名称的对象集合。 |
document.getElementsByTagName() | 返回带有指定标签名的对象集合。 |
var lists = document.getElementsByTagName("ul")[0];
因为标签在body中指不定有几个,所以需要在后面指定数组的索引
lists.removeChild(lists.childNodes[1]);
var lists = document.getElementById("myList");
因为id只有一个 所以不用指定索引
移除子元素
lists.removeChild(lists.childNodes[0]);
变量
var 声明是全局作用域或函数作用域,而 let 和 const 是块作用域。
var 变量可以在其范围内更新和重新声明; let 变量可以被更新但不能重新声明;
const 变量既不能更新也不能重新声明。 它们都被提升到其作用域的顶端。
js可以通过for循环为事件批量 绑定函数
for (var i = 0; i < btns.length; i++) {
console.log(i);
// var i = 3;
btns[i].index = i;
btns[i].onmouseover = function() {
//在这里为每一个btns的onmouseover绑定了函数,
bann_img.src = imgs[this.index];
}
}
作用域
Javascript的变量的作用域(scope)是根据方法块来划分的(function的{ }来划分)!切记,是function块,而for、while、if块并不是作用域的划分标准!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
function test1() {
for (var i = 0; i < 3; i++) {
}
alert(i);
}
</script>
</head>
<body>
<input type="button" value="click1" οnclick="test1()"/>
</body>
</html><span style="color:#ff0000;">
</span>
结果如下:
js中for循环中调用函数----三种方法
用this来调用,不然会报错 因为var定义的i的值在每次循环的时候并不会被锁定,而当我们点击的时候(这动作是在循环完成后进行的,此时的i代表的是元素的总个数的值)。
for (var i = 0; i < btns.length; i++) {
console.log(i);
// var i = 3;
btns[i].x = i;
btns[i].onmouseover = function() {
bann_img.src = imgs[this.x];
}
}
或者
for(var i=0;i<lists.length;i++){
lists[i].onmouseover = function () {
console.log(i)/*循环完成后才会被调用*/
this.style.backgroundColor = 'yellow';
};
lists[i].onmouseout = function () {
this.style.backgroundColor= '';
};
}
js修改html中class属性
一、获取class属性值
javascriptvar value = $("div").attr("class");//这里获取class属性值 var array=val.split(" ");//把class值用空格分开,通过数组获取每个值 var value = document.getElementById("div").className;
二、更改class属性值
javascriptdocument.getElementById("tr").className = "styleclass";//styleclass为新的属性值 document.getElementById("tr").setAttribute("class","styleclass");
三、添加一个class属性(在原有的基础上)
javascriptvar obj = document.getElementById('a1'); obj.className += ' styleclass'; // 注意前面加空格,防止两个属性挨一起
四、去除一个class属性
javascript$("tr").removeClass("styleclass");
其他:
1.判断class属性里是否有要的属性:
javascriptif(value.indexOf("styleclass") >= 0){ }
单引号&双引号
JS 中单引号和双引号无任何区别,二者均用于表示字符串字面量。
var s0 = 'dable is fish'
var s1 = "dable is fish"
console.log(s0 === s1) // true
复制
单引号和双引号混合使用时,内层引号将被视为字符串的一部分。
var s0 = 'dable is "fish"'
var s1 = "dable is 'fish'"
console.log(s0) // dable is "fish"
console.log(s1) // dable is 'fish'
console.log(s0 === s1) // false
复制
如果不使用单引号包含双引号或者双引号包含单引号,那么需要反斜杠对引号进行转义。
var s0 = 'dable is \'fish\''
var s1 = "dable is \"fish\""
console.log(s0) // dable is 'fish'
console.log(s1) // dable is "fish"
console.log(s0 === s1) // false
js字符串截取函数slice()、substring()、substr()
slice() 第一个参数代表开始位置,第二个参数代表结束位置的下一个位置,截取出来的字符串的长度为第二个参数与第一个参数之间的差;若参数值为负数,则将该值加上字符串长度后转为正值;若第一个参数等于大于第二个参数,则返回空字符串.
substring() 第一个参数代表开始位置,第二个参数代表结束位置的下一个位置;若参数值为负数,则将该值转为0;两个参数中,取较小值作为开始位置,截取出来的字符串的长度为较大值与较小值之间的差.
substr() 第一个参数代表开始位置,第二个参数代表截取的长度
PS:字符串都从0开始计起
例子:
<script type="text/javascript"> var stmp = "rcinn.cn"; //使用一个参数 alert(stmp.slice(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn" alert(stmp.substring(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn"
//使用两个参数
alert(stmp.slice(1,5))//从第2个字符开始,到第5个字符;返回"cinn"
alert(stmp.substring(1,5));//从第2个字符开始,到第5个字符;返回"cinn"
//如果只用一个参数并且为0的话,那么返回整个参数
alert(stmp.slice(0));//返回整个字符串
alert(stmp.substring(0));//返回整个字符串
//返回第一个字符
alert(stmp.slice(0,1));//返回"r"
alert(stmp.substring(0,1));//返回"r"
//在上面的例子中我们可以看出slice()和substring()的用法是相同的
//返回的值也是一样的,但当参数为负数时,他们的返回值却不一样,看下面的例子
alert(stmp.slice(2,-5));//返回"i"
alert(stmp.substring(2,-5));//返回"rc"
//从上面两个例子可以看出slice(2,-5)实际上是slice(2,3)
//负5加上字符串长度8转换成正3(若第一位数字等于或大于第二位数字,则返回空字符串);
//而substring(2,-5)实际上是substring(2,0),负数转换为0,substring总是把较小的数作为起始位置。
alert(stmp.substring(1,5))//从第2个字符开始,到第5个字符;返回"cinn"
alert(stmp.substr(1,5));//从第2个字符开始,截取5个字符;返回"cinn."
</script>
JSON 与 JS 对象的关系
很多人搞不清楚 JSON 和 JS 对象的关系,甚至连谁是谁都不清楚。
**其实,可以这么理解:**JSON 是 JS 对象的字符串表示法。它使用文本表示一个 JS 对象的信息,(JSON)本质是一个字符串。
如:
var obj = {a: 'Hello', b: 'World'}; //这是一个js对象,注意js对象的键名也是可以使用引号包裹的,这里的键名就不用引号包含
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串,本质是一个字符串
JSON(格式字符串) 和 JS 对象(也可以叫JSON对象 或 JSON 格式的对象)互转(JSON.parse 和 JSON.stringify)。
要实现从JSON字符串转换为JS对象,使用 JSON.parse() 方法:
var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'} 一个对象
要实现从JS对象转换为JSON字符串,使用 JSON.stringify() 方法:
var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}' 一个JSON格式的字符串
说句不严谨的话:JSON.parse() 就是字符串转 js 对象, JSON.stringify()就是 js 对象转字符串,它们前提是要 json 格式才有意义。