Skip to content

js写入html的方法

  1. 使用 document.write() 仅仅向文档输出写内容。

    如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。

  2. document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。

    innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

字符串和数组

字符串

css
var carname = "Volvo XC60";、
你可以使用索引位置来访问字符串中的每个字符:
var character = carname[7];
可以使用内置属性 length 来计算字符串的长度:
var sln = txt.length;

数组

css
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0;i<cars.length;i++){
	document.write(cars[i] + "<br>");
}

获取当前文档的 HTML 你内容:

js
var x = document.body.innerHTML;

修改当前文档的 HTML 内容:

js
document.body.innerHTML = "新的内容...";

创建 <p> 元素,并将其添加在文档中:

javascript
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()返回带有指定标签名的对象集合。
js
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循环为事件批量 绑定函数

js
    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块并不是作用域的划分标准!

html
<!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>

结果如下:

img

js中for循环中调用函数----三种方法

用this来调用,不然会报错 因为var定义的i的值在每次循环的时候并不会被锁定,而当我们点击的时候(这动作是在循环完成后进行的,此时的i代表的是元素的总个数的值)。

js
    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];
        }
    }

或者

js
			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属性值

javascript
var value = $("div").attr("class");//这里获取class属性值



var array=val.split(" ");//把class值用空格分开,通过数组获取每个值
var value = document.getElementById("div").className;

二、更改class属性值

javascript
document.getElementById("tr").className = "styleclass";//styleclass为新的属性值



document.getElementById("tr").setAttribute("class","styleclass");

三、添加一个class属性(在原有的基础上)

javascript
var obj = document.getElementById('a1');



obj.className += ' styleclass'; // 注意前面加空格,防止两个属性挨一起

四、去除一个class属性

javascript
$("tr").removeClass("styleclass");

其他:

1.判断class属性里是否有要的属性:

javascript
if(value.indexOf("styleclass") >= 0){ }

单引号&双引号

JS 中单引号和双引号无任何区别,二者均用于表示字符串字面量。

javascript
var s0 = 'dable is fish'
var s1 = "dable is fish"
console.log(s0 === s1)	// true

复制

单引号和双引号混合使用时,内层引号将被视为字符串的一部分。

javascript
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

复制

如果不使用单引号包含双引号或者双引号包含单引号,那么需要反斜杠对引号进行转义。

javascript
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开始计起

例子:

js
<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)本质是一个字符串。

如:

js
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() 方法:

js
var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}  一个对象

要实现从JS对象转换为JSON字符串,使用 JSON.stringify() 方法:

js
var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'  一个JSON格式的字符串

说句不严谨的话:JSON.parse() 就是字符串js 对象, JSON.stringify()就是 js 对象字符串,它们前提是要 json 格式才有意义。

Released under the MIT License.