JavaScrip循环 函数 DOM操作

最新推荐文章于 2022-05-18 20:23:47 发布
最新推荐文章于 2022-05-18 20:23:47 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： html 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cxz_dong/article/details/110879728
版权

JS的循环

for 循环

常规for 循环
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        for(var i=11;i>10;i++){ //var i=0 声明变量i  i<10条件表达式 i++ 自增，每次运算作为一次循环
            document.write(i);
            console.log(i)
        }
    </script>
</body>
</html>
for in 循环
<script>
    var string = "abcdef";
    for(var i in string){//在js当中for in循环返回的是索引
        document.write(string[i]);
        console.log(string[i])
    }
</script>

while 循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var a = 1;
        while(a < 10){ //每次执行循环体内部的内容，到条件不满足
            a++;
            console.log(a)
        }
        while(1===1){
            
        }
    </script>
</body>
</html>

嵌套循环

外层循环一次，内层循环一遍。

百家姓

起名字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var last_name = "赵钱孙李周吴郑王冯陈褚卫蒋沈韩杨";
        var first_name = ['满', '琳', '锐', '艺博', '辰硕', '鸿轩', '涵润', '涵涵', '兴', '淳曦', '雨微',];
        for(var i in last_name){
            l_name = last_name[i];
            for(var j in first_name){
                f_name = first_name[j];
                document.write("<h3>"+l_name+f_name+"</h3>")
            }
        }
    </script>
</body>
</html>

JS函数

函数是具有某种功能的代码块，就是将某个功能的代码包裹起来，然后进行命名，下次使用这个功能采用名称来调用，提高了代码的复用能力和可维护性。

函数的定义

js同样具有函数编程能力，格式如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        function say_hello() {
            var c_header = "<p style='color: red;font-size: 50px;font-weight: 900;'>";
            var content = "hello world";
            var c_fonter = "</p>";
            document.write(c_header+content+c_fonter)
        }
    </script>
</body>
</html>

function：类似python的def，是定义函数的关键字。

say_hello: 函数名，代表函数本身。

（）：参数括号，形参括号

{}：函数体

{}内部： 函数的内容，功能

一定要区分函数和函数调用。

函数是一种代码结构，但是函数的调用是在函数名称后面加（）进行调用。

函数在没有调用之前不会执行。

函数的参数

参数可以理解为在定义函数时定义，在调用函数时传递的，函数内部的局部变量。

总的来说，参数分为：

形参：定义函数的时候定义的参数，name

实参：调用函数的时候传递的参数，张三,李四

<script>
    function say_hello(name) {
        var c_header = "<p style='color: red;font-size: 50px;font-weight: 900;'>";
        var content = "hello world I am "+name;
        var c_fonter = "</p>";
        document.write(c_header+content+c_fonter)
    }

    say_hello("张三"); //调用函数
    say_hello("李四") //调用函数
</script>

1、在js当中,形参和实参的位置是对应的，但是数量不是。

2、在js的函数内部有一个内置的变量，arguments,里面包含了所有实参和函数本身。

3、js也支持和python一样的默认值参数。

function say_hello(name,age=18) {
    console.log(arguments);
    var c_header = "<p style='color: red;font-size: 50px;font-weight: 900;'>";
    var content = "hello world I am "+name+" I am "+age +" years old";
    var c_fonter = "</p>";
    document.write(c_header+content+c_fonter)
}

say_hello("张三"); //调用函数

函数返回值

js函数的返回值和python一样

function say_hello(name,age) {
    var c_header = "<p style='color: red;font-size: 50px;font-weight: 900;'>";
    var content = "hello world I am "+name+" I am "+age +" years old";
    var c_fonter = "</p>";
    var result = c_header+content+c_fonter;
    return result;
}

var value = say_hello("张三",18); //调用函数
document.write(value);
alert(value);
console.log(value)

JS的对象

对象定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
    	//方法一
        var obj = new Object();
        obj.name = "张三";
        obj.age = 18;
        console.log(obj)
		//方法一
        var obj = {
            name: "张三",
            age: 18,
            say_hello: function () {
                console.log("hello world")
            }
        };
        console.log(obj);
        console.log(typeof(obj));
        obj.say_hello()
    </script>
</body>
</html>

this的使用

this参数指代是调用这个函数的对象，默认是窗口调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="say_hello(this)">按钮</button>
    <script>
        function say_hello() {
            console.log(this);
        } //定义say_hello 函数，函数返回内置this参数
        say_hello(); //直接调用say_hello 浏览器认为window窗口在调用

        var obj = new Object(); //实例化一个对象
        obj.name = "我是obj";
        obj.say = say_hello; //将say_hello函数传递给对象作为方法

        obj.say() //obj调用say_hello
    </script>
</body>
</html>

重点：

1、会定义JS的对象

2、掌握this表里具体指代对象

JS DOM操作

DOM介绍

DOM(document object model) 文档对象模型，就是在JS当中对HTML进行操作的一个对象，在代码当中体现在内置的变量document上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="#">这是个a标签</a>
    <a href="#">这是个a1标签</a>
    <img src="l.jpg">
    <script>
        console.log(document);
        console.log(document.all);
        console.log(document.images);
        console.log(document.links);
    </script>
</body>
</html>

上述的方法，给JS提供了获取HTML标签的可能，但是还是比较复杂，所以，JS的document对象也封装了一些选择器方法来获取HTML标签。

DOM选择器

ID选择器:document.getElementById

通过id获取单个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div_id">
     1
    </div>
    <div id="div_id1">
     2
    </div>
    <div id="div_id2">
     3
    </div>
    <script>
        var div_obj = document.getElementById("div_id");
        console.log(div_obj)
    </script>
</body>
</html>
class选择器:document.getElementsByClassName

通过class名称获取多个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="div_class">
     1
    </div>
    <div class="div_class">
     2
    </div>
    <div class="div_class">
     3
    </div>
    <script>
        var div_obj = document.getElementsByClassName("div_class");
        console.log(div_obj)
    </script>
</body>
</html>
标签选择器:document.getElementsByTagName

通过标签名称获取多个HTML元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
     1
    </div>
    <div>
     2
    </div>
    <div>
     3
    </div>
    <p>
     4
    </p>
    <script>
        var div_obj = document.getElementsByTagName("p");
        console.log(div_obj)
    </script>
</body>
</html>
属性选择器:document.getElementsByName

通过name属性值来获取HTML元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <input type="checkbox" name="nice"> 1
        <input type="checkbox" name="nice"> 2
        <input type="checkbox" name="nice"> 3
        <input type="checkbox" name="nice"> 4
        <br>
        <input type="checkbox" name="so_nice"> a
        <input type="checkbox" name="so_nice"> b
        <input type="checkbox" name="so_nice"> c
        <input type="checkbox" name="so_nice"> d
    </form>
    <script>
        var obj = document.getElementsByName("so_nice");
        console.log(obj)
    </script>

</body>
</html>

JS修改HTMl样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
        <li>f</li>
        <li>g</li>
        <li>h</li>
        <li>i</li>
    </ul>
    <script>
        var obj_list = document.getElementsByTagName("li");
        console.log(obj_list);
        // for(var i in obj_list){
        //     obj = obj_list[i];
        //     obj.style.listStyle = "none"
        // }

        for(var i in obj_list){
            obj = obj_list[i];
            if(i%2 == 1){
                obj.style.backgroundColor = "#F3F3F3"
            }else {
                obj.style.backgroundColor = "#777777"
            }
        }

    </script>
</body>
</html>

JS修改HTML的属性

attribute 属性

方法描述
hasAttributes判断是否有属性
hasAttribute判断是否有指定的属性
setAttribute设置属性
getAttribute获取属性值
removeAttribute删除属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .nice {
            font-size: 32px;
            font-family: "Microsoft YaHei UI Light";
            color: orange;
        }
    </style>
</head>
<body>
    <div zhangsan="帅">
        123
    </div>
    <script>
        // var obj = document.getElementsByTagName("div")[0];
        // console.log(obj.hasAttributes())
    </script>
    <script>
        // var obj = document.getElementsByTagName("div")[0];
        // console.log(obj.hasAttribute("zhangsan"))
    </script>
    <script>
        // var obj = document.getElementsByTagName("div")[0];
        // obj.setAttribute("zhangsan","酷");
        // obj.setAttribute("id","zhang");
        // obj.setAttribute("class","nice");
    </script>
    <script>
        // var obj = document.getElementsByTagName("div")[0];
        // var lb = obj.getAttribute("zhangsan");
        // console.log(lb)
    </script>
    <script>
        var obj = document.getElementsByTagName("div")[0];
        obj.removeAttribute("zhangsan");
    </script>

</body>
</html>

JS操作文本

方法描述
innerHTML向指定的DOM对象当中添加HTML内容
innerText向指定的DOM对象当中添加文本内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div_id">

    </div>
    <script>
        var div = document.getElementById("div_id");
        var obj = "<p style='color: red;font-size: 24px'>"+"hello world"+"</p>";
        div.innerText = obj;
        div.innerHTML = obj;
    </script>
</body>
</html>

对与同一段内容，不可以同时或者重复进行添加。

JS操作元素

方法描述
createElement创建文档对象
createTextNode创建文本节点
cloneNode克隆节点
removeChild删除节点
appendChild在元素内部追加节点
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="borderd">

    </div>
    <script>
        var borderd = document.getElementById("borderd"); //获取div
        var div = document.createElement("div"); // 创建文档对象
        div.style.color = "red"; //是在对象的样式
        var text = document.createTextNode("创建文本节点"); //创建了文本节点
        div.appendChild(text); //将文本节点添加到创建的div文档对象当中
        borderd.appendChild(div); //将div文档对象添加到了border div当中
        console.log(div)
    </script>
</body>
</html>

删除节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="borderd">
        <span id="span_id">我就是一个span</span>
    </div>
    <script>
        // var borderd = document.getElementById("borderd"); //获取div
        // var div = document.createElement("div"); // 创建文档对象
        // div.style.color = "red"; //是在对象的样式
        // var text = document.createTextNode("创建文本节点"); //创建了文本节点
        // div.appendChild(text); //将文本节点添加到创建的div文档对象当中
        // borderd.appendChild(div); //将div文档对象添加到了border div当中
        // console.log(div);
        var span = document.getElementById("span_id");
        borderd.removeChild(span) //删除子元素
    </script>
</body>
</html>

克隆节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="borderd">
        <span id="span_id">我就是一个span</span>
    </div>
    <script>
        var border = document.getElementById("borderd");

        var span = document.getElementById("span_id");
        var clone_span = span.cloneNode(true);
        clone_span.setAttribute("id","span_id1");

        border.appendChild(clone_span)
    </script>
</body>
</html>

JS事件

我们学会了如何使用js编写基本代码逻辑，比如：循环，判断

我们也学会了使用js如何获取HTML的元素

我们又学会了获取元素后修改元素的：样式，属性，文本，元素

但是，没有办法设定在什么情况下执行这件事情。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--点击按钮span文字变大-->
    <button id="button">按钮</button>
    <span id="span">这个span</span>
    <script>
        var b = document.getElementById("button");
        var s = document.getElementById("span");
        b.onclick = function () {
            s.style.fontSize = "300px"
        }
    </script>
</body>
</html>

通常会将时间和一个对象绑定，比如按钮点击，文字经过，还有可能就是键盘按下。

JS的一些事件函数

①、页面事件：

onload 页面加载事件（页面打开后执行）

onunload 页面卸载事件（页面关闭时执行）

②、鼠标事件：

onlick 单击

ondblclick 双击

onmousedown 按下

onmouseup 抬起

onmouseover 移入

onmouseout 移出

onmouseenter 移入

onmouseleave 移出

onmousemove 移动

oncontextmenu 右键单击

③、键盘事件：

onkeyup 抬起

onkeydown 按下

onkeypress 按下+抬起

④、其他事件（一般用于表单）：

onsubmit 表单提交事件（一般用于表单验证）

onchange 改变 （一般用于下拉列表）

onblur 失去焦点

onfocus 获取焦点

cxz_dong
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript DOM编程艺术(中文第2版)
09-26
2.1 准备工作 2.2 语法 2.2.1 语句 2.2.2 注释 2.2.3 变量 2.2.4 数据类型 2.2.5 数组 2.2.6 对象 2.3 操作 2.4 条件语句 2.4.1 比较操作符 2.4.2 逻辑操作符 2.5 循环语句 2.5.1 while循环 2.5.2 for循环 2.6 函数 ...
js 循环dom中的节点 直到找到节点里的文本内容（递归）
qq_42174597的博客
02-08 874
js 循环dom中的节点 直到找到节点里的文本内容（递归方法）
js遍历DOM(文档对象模型)对象
漓涂
08-18 2596
&lt;div&gt; &lt;span&gt;第一个&lt;/span&gt; &lt;span&gt;第二个&lt;/span&gt; &lt;span&gt;第三个&lt;/span&gt; &lt;/div&gt; &lt;span&gt;第四个&lt;/span&gt; &lt;/body&gt;
js 基础学习 遍历DOM
qq_40890601的博客
07-23 910
DOM这块知识很重要，做个总结吧！ DOM 表示文档对象模型，每个HTML标签都是一个对象，标签内的文本也是对象，所有这些对象都可以使用 js 来访问和修改。 js 共有12 种节点类型 通常用到的有四种： document — DOM 的“入口点”。 元素节点 — HTML 标签，树构建块。 文本节点 — 包含文本。 注释 — 有时我们可以将一些信息放入其中，它不会显示，但 JS 可以从 DOM 中读取它。 自动修正 如果浏览器遇到格式不正确的HTML，它会在形成DOM的时候修正它。 例如，顶级标签永
JavaScript（DOM的使用一）
mycsdn_first的博客
05-18 663
本文章写的是刚入门的JavaScript的DOM的一部分。
JavaScriptDOM操作节点遍历的四种方法
weixin_43635751的博客
02-18 1745
节点遍历方法第一种，使用第二套DOMAPI 关系 遍历 // 元素节点的遍历方法 第一种 // var box = document.getElementById("box"); // for(var i=0,len = box.children.length;i<len;i++){ // console.lo...
javascript函数的解释
02-26
javascript函数的解释，解释了具体函数的功能，一、函数JavaScript函数集合 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:...
JavaScript+DOM编程艺术
03-04
本书在简洁明快地讲述JavaScript和DOM的基本 知识之后,通过几个实例演示了大师级的网页开发技术,并透彻阐述了。。。 (由于文件大小的关系，分成三部分上传，请注意下载) 第1章 JavaScript简史 　1.1　JavaScript的...
Javascript 类型转换、封闭函数及常见内置对象操作示例
12-13
1、ECMAscript javascript的语法（变量、函数、循环语句等语法） 2、DOM 文档对象模型 操作html和css的方法 3、BOM 浏览器对象模型 操作浏览器的一些方法 类型转换 1、直接转换 parseInt() 与 parseFloat() alert&#...
减少访问DOM的次数提升javascript性能
12-10
访问DOM元素是有代价的，修改DOM元素则更为昂贵，因为它会导致浏览器重新计算页面的几何变化。 当然，最坏的情况是在循环中访问修改元素，尤其是... } } [removed] 这个函数循环修改页面元素的内容。这段代码的问题在于
DOM遍历
weixin_34024034的博客
02-10 160
前面的话 　　DOM遍历模块定义了用于辅助完成顺序遍历DOM结构的类型：Nodeiterator和TreeWalker，它们能够基于给定的起点对DOM结构执行深度优先(depth-first)的遍历操作。本文将详细介绍DOM遍历 　　[注意]IE8-浏览器不支持   定义 　　DOM遍历是深度优先的DOM结构遍历，遍历以给定节点为根，不可能向上超出DOM树的根节点。以下面的HTML页面为...
html5 函数遍历,JS中循环与函数以及常用DOM操作实例演示
weixin_28987547的博客
06-30 392
一、循环循环是只要满足条件就将不断执行重复的语句，循环可以减少代码的冗余性。1.while()循环while() 循环入口判断型：先判断条件再执行。constarr=[1,2,3,4,5];console.log("数组长度:"+arr.length);//arr.length 返回数组的长度let i=0;//循环变量初始化let sum=0;//求和while(iconsole.log(arr...
循环时的dom操作
weixin_33802505的博客
03-11 146
<body> <div id="resText"></div> <div id="reshtml"></div> <script src="js/jquery.js"></script> <script type="text/java...
JavaScript DOM编程艺术学习心得系列 ——（五）JavaScript语法之循环语句、函数、对象
annwyna的博客
08-09 175
1. 循环语句 if 语句或许是最重要、最有用的条件语句了，他的唯一不足是无法完成重复性的操作。if 语句里，花括号中的代码块只能执行一次，如果你想多次执行，那就需要用到循环语句了。 循环语句可以让我们反复多次地执行同一段代码。循环语句有几种不同的类型，但他们的工作原理几乎一样：只要给定的条件能够得到满足，包含在循环语句中的代码就将一直重复的执行，当给定条件的求值结果不再是 true 时，循环也就结束了。 1.1 while 循环 while 循环与 if 语句非常相似，它们的语法几乎完全一样，唯一的区别就
html中如何循环数组渲染dom,列表渲染 之 v-for遍历数组和对象(利用key属性实现高效更新)...
weixin_42513209的博客
06-19 1879
(1) 遍历数组和对象Document列表{{list[0]}}{{list[1]}}{{list[2]}}{{list[3]}}遍历数组{{item}}{{index}}-{{item}}遍历对象{{item}}{{key}}：{{item}}{{index}}：{{key}}：{{item}}var vm = new Vue({el:"#app",data:{list:["火龙果","龙眼",...
JS-DOM操作经典循环排他思想
世界和我们都不该止步于此
04-14 651
在JS的基础学习中，最经典的案例之一就是排他思想了，大家应该都玩过这个排他思想 本质就是双重for循环的的嵌套，实现排他的思想 我们今天利用案例来解释以下循环排他思想： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
原生js循环展示dom_JS DOM 操作 与 虚拟 DOM
weixin_39952190的博客
10-16 1446
一、DOM 操作相比普通 JS 操作DOM 操作慢，这个概念最初来自于《高性能 JavaScript》这本书，但文中没有给出任何数据和对比。快慢这种描述是个相对值，而非绝对值。今天用代码实际操作得出数据比较一下，DOM 操作到底慢不慢？相对于什么慢？<主要对比 JavaScript push 方法和 JavaScript DOM 操作const 当用原生 JavaScript DOM 操作插...
循环添加DOM元素
赳赳万里鲲
12-13 2462
const rankingList = this.state.mingxiData.map(v=&gt;{ return &lt;div key={v.userId} id={v.userId}&gt; &lt;div className="mingxi-content-list"&gt; &lt;div className="min...
DOM的一些案例
weixin_51010474的博客
04-21 133
1、百度换肤效果 2、表格隔行变色效果 3、表单全选和取消全选 4、tab栏切换制作 5、动态生成表格 6、跟随鼠标的天使 7、模拟京东按键输入内容案例
微信小程序for循环被点击dom修改样式
最新发布
05-10
首先，在 WXML 中使用 `wx:for` 循环渲染出需要的 DOM 元素，例如： ```html {{item}} ``` 其中，`items` 是需要渲染的数组，`activeIndex` 是当前选中的元素的索引，`handleTap` 是点击事件的回调函数。 然后...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值