Web前端之JavaScript

最新推荐文章于 2022-09-22 00:55:29 发布

我叫袁小陌

最新推荐文章于 2022-09-22 00:55:29 发布

阅读量150

点赞数

分类专栏：前端学习文章标签： JavaScript 前端

本文链接：https://blog.csdn.net/qq_28450045/article/details/87915475

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript(简称JS)开发: 是一门脚本语言,由浏览器来解释执行,不需要经过编译

JS声明变量:   var  变量的名字;

JS声明函数: function 函数的名称(参数的名字){}

JS开发的步骤:
    1. 确定事件
    2. 事件要触发函数,所以我们是要声明函数
    3. 函数里面通常是去做一些交互才操作,  弹框, 修改页面内容,动态去添加一些东西

JS中常用的事件

onclick	当用户点击鼠标时，执行脚本。
onload / onunload	事件会在用户进入或离开页面时被触发。
onchange	事件常结合对输入字段的验证来使用。
onmouseover / onmouseout	事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
onmousedown / onmouseup	首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
onfocus / onblur	当元素获得 / 失去焦点时运行的脚本。
onkeyup	当用户释放按键时触发。

JS中的方法

<script>
function  test(){
    /*按照指定的周期（以毫秒计）来调用函数或计算表达式。*/
    timerID = setInterval("test()",2000);

    /*setTimeout()在指定的毫秒数后调用函数或计算表达式(只执行一次)。
    clearInterval() 取消由 setInterval() 设置的 timeout。
    clearTimeout()  取消由 setTimeout() 方法设置的 timeout。*/

    /*显示带有一段消息和一个确认按钮的警告框。*/
    alert(message); }

    /*元素不会被显示*/
    img.style.display="none";
    /*此元素将显示为块级元素，此元素前后会带有换行符。*/
    img.style.display="block";  


function checkAll(){
        //获得当前第一个checkbox的状态
	var check1 = document.getElementById("check1");
	//得到当前checked状态
	var checked = check1.checked;
	//获得所有分类项的checkbox
        var checks = document.getElementsByName("checkone");
        for(var i = 0; i < checks.length; i++)
            {
                //修改每一个checkbox的状态
                var checkone = checks[i];
                checkone.checked = checked;
            }
	}


</script>

HTML中的DOM操作

什么是DOM: Document Object Model : 管理我们的文档增删改查规则

一些常用的 HTML DOM 方法：
  getElementById(id) - 获取带有指定 id 的节点（元素）
  appendChild(node) - 插入新的子节点（元素）
  removeChild(node) - 删除子节点（元素）

  一些常用的 HTML DOM 属性：
  innerHTML - 节点（元素）的文本值
  parentNode - 节点（元素）的父节点
  childNodes - 节点（元素）的子节点
  attributes - 节点（元素）的属性节点

查找节点：
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。

增加节点：
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
insertBefore() 在指定的子节点前面插入新的子节点。
appendChild() 把新的子节点添加到指定节点。

删除节点：
removeChild() 删除子节点。
replaceChild() 替换子节点。

修改节点：
setAttribute() 修改属性
setAttributeNode() 修改属性节点

/*举个例子*/
<head>
	<script>
			
	/*动态添加 :   <p>文本</p> */
	function dianwo(){
		var div = document.getElementById("div1");
		//创建元素节点
		var p = document.createElement("p");  // <p></p>
		//创建文本节点
		var textNode = document.createTextNode("文本内容");//  文本内容
				
		//将p 和文本内容关联起来
		p.appendChild(textNode);  //  <p>文本</p> 
				
		//将P添加到目标div中
		div.appendChild(p);
	}
			
        </script>
</head>
<body>
	<input type="button" value="点我,添加P" onclick="dianwo()" />
	<!--一会动态的往这个Div中添加节点-->
	<div id="div1"> </div>
</body>

我叫袁小陌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端之JavaScript

JavaScript(简称JS)开发: 是一门脚本语言,由浏览器来解释执行,不需要经过编译JS声明变量: var 变量的名字;JS声明函数: function 函数的名称(参数的名字){}JS开发的步骤: 1. 确定事件 2. 事件要触发函数,所以我们是要声明函数 3. 函数里面通常是去做一些交互才操作, 弹框, 修改页面内容,动态去添加一些东西JS中常用的事件...
复制链接

扫一扫