动态js,动态js文件

发布时间:2022-11-24

本文目录一览:

  1. 网页的动态JS在哪找?
  2. 通过js动态创建标签,并设置属性方法
  3. 怎么动态生成js变量
  4. js如何动态添加数组?
  5. 前端动态加载JS

网页的动态JS在哪找?

可以在开发者工具当中找。 打开开发者工具,然后选择网络(network),在下面的列表就可以看到动态加载的js文件了。如果文件比较多,可以选js进行筛选。 如果不是js文件,是在页面当中的js,可以在开发者工具的元素(elements)面板里面找到文档当中的js。

通过js动态创建标签,并设置属性方法

当我们在写jsp页面时,往往会遇到这种情况:从后台获取的数据个数不确定,此时在前端写jsp页面时也就不确定怎么设计了。这个时候就需要通过js动态创建标签:

  1. 创建某个标签:如下在body中创建一个div的事例;
function fun() {
    var frameDiv = document.createElement("div"); // 创建一个标签
    var bodyFa = document.getElementById("bodyid"); // 通过id号获取frameDiv的父类(也就是上一级的节点)
    bodyFa.appendChild(frameDiv); // 把创建的节点frameDiv添加到父类body中;
}
<body id="bodyid">
    <!-- 在此添加div标签 -->
</body>
  1. 添加属性:给创建的标签添加相应的属性:
frameDiv.setAttribute("id", "divid"); // 给创建的div设置id值;
frameDiv.className = "divclass"; // 给创建的div设置class;
// 给某个标签添加显示的值;
var h = document.createElement("h1");
h.innerHTML = data[i].name;
var p = document.createElement("p");
p.innerHTML = "要显示的值";
  1. 创建的标签添加事件: a. 不带参数:
frameDiv.onmousedown = fun; // 函数名fun后面一定不能带括号,否则会在创建标签的时候执行函数,而不是鼠标按下时执行;

b. 有参数:

frameDiv.onmousedown = function () {
    fun(this);
}

c. 要调用的函数:

function fun() {
    alert("鼠标按下");
}
  1. 如果担心创建的标签没有被覆盖则可以替换:
var divFlag = document.getElementById("divFlag");
var divMain = document.createElement("div");
if (divFlag != null) {
    body.replaceChild(divMain, divFlag); // 把原来的替换掉
}
divMain.setAttribute("id", "divFlag");

以上这篇通过js动态创建标签,并设置属性方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。 您可能感兴趣的文章:

  • JS实现给对象动态添加属性的方法
  • JS中动态创建元素的三种方法总结(推荐)
  • js动态创建标签示例代码
  • 使用变量动态设置js的属性名

怎么动态生成js变量

动态生成全局变量:

// 简单的用字符串作为变量名
window['hello'] = "hello, world";
alert(hello); 
// 批量定义
for (var i = 0; i < 10; i++) {
    var varname = "var" + i;
    window[varname] = "value" + i;
}
alert(var0);
alert(var9);

解释:所有的全局变量都存在window变量里。window是个js本身定义的变量,类型为object。 访问全局变量var0 相当于访问window.var0,也相当于window["var0"]。 局部变量最好用object吧:

function test() {
    var vars = {}; // 简单的字符串作为变量名
    vars['hello'] = "hello, world!";
    alert(vars.hello); 
    // 批量定义
    for (var i = 0; i < 10; i++) {
        var varname = "var" + i;
        vars[varname] = "value" + i;
    }
    alert(vars.var0);
    alert(vars.var9);
}

js如何动态添加数组?

js动态添加数组可以按下面的步骤:

1. 在数组的开头添加新元素 - unshift()

源代码:

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to add elements to the array.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.unshift("Lemon","Pineapple");
    var x=document.getElementById("demo");
    x.innerHTML=fruits;
}
</script>
</body>
</html>

注意: unshift() 方法在 Internet Explorer 8 及更早版本中不能正常工作,值会被插入,但返回值将是 undefined。 测试结果:

Lemon,Pineapple,Banana,Orange,Apple,Mango

2. 在数组的第2位置添加一个元素 - splice()

源代码:

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to add elements to the array.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.splice(2,0,"Lemon","Kiwi");
    var x=document.getElementById("demo");
    x.innerHTML=fruits;
}
</script>
</body>
</html>

测试结果:

Banana,Orange,Lemon,Kiwi,Apple,Mango

3. 在数组的末尾添加新的元素 - push()

源代码:

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to add a new element to the array.</p>
<button onclick="myFunction()">Try it</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction() {
    fruits.push("Kiwi");
    var x=document.getElementById("demo");
    x.innerHTML=fruits;
}
</script>
</body>
</html>

测试结果:

Banana,Orange,Apple,Mango,Kiwi

前端动态加载JS

最近机顶盒遇到一种特殊场景需要按需加载js,所以特此记录动态加载JS的方法。 这个方法加载的是本地的js,如果要加载非本地js的话,应该要加上 crossorigin 头。