提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

11.28JavaScript学习

JavaScript学习
2023-09-11 14:17:15 时间

JavaScript输出
JavaScript通常用于操作HTML元素，如果要访问某个HTML元素，使用document.getElementById(id)方法，使用id属性标识HTML元素

文档输出
document.write("<p>hello<p>"):直接将<p>元素写道HTML文档输出中

JavaScript语句是发给浏览器的命令，告诉浏览器该做什么
JavaScript代码是JavaScript语句的序列，浏览器按照编写顺序依次执行每条语句
当没有事件函数时，需要将id放在script的前面，要不然会出错
<p id="myPoint">content</p>
<script>
document.getElementById("myPoint").innerHTML=Date()
</script>

JavaScript代码块
JavaScript可以分批的组合起来，代码块用{}表示，代码块的作用是一并的执行语句序列
function myFunction()
{
document.getElementById("demo").innerHTML="你好Dolly";
document.getElementById("myDIV").innerHTML="你最近怎么样?";
}

JavaScript是脚本语言，浏览器在读取代码时，逐行地执行脚本代码；对于传统编程来说，会在执行前对所有代码进行编译

JavaScript使用//进行单行注释；使用/× ×/多行注释

变量是用于存储信息的容器
JavaScript中的所有事物都是对象：字符串（String）、数字（Number）、数组（Array）、日期（Date）等等，对象是拥有属性和方法的数据


JavaScript函数，由事件驱动的可重复执行的代码
function function_name()
{
代码块
}
当某个事件发生时直接调用该函数，可由JavaScript任何位置调用
JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

调用带参数的函数，可以向其中传递值
function function_name(var1, var2)
{
代码块
}

带有返回值的函数，希望将函数返回值返回调用他的地方，通过return语句就可以实现，遇到return语句就直接返回
function function_name()
{
var a=5;
return a;
}
var b = function_name();
即使不把它存为变量，也可以使用返回值

局部JavaScript变量：在函数内部声明的变量，函数运行以后被删除
全局JavaScript变量：在函数外部声明的变量，网页上的所有脚本和函数都可以访问它，网页关闭后被删除
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明：carname = "deng"

HTML DOM文档对象模型
当网页被加载时，浏览器会创建页面的文档对象模型
DOM模型被构造为对象树
通过可编程的对象模型，js获得了足够的能力创建动态的HTML
1）改变HTML中的元素
2）改变HTML的属性
3）改变CSS的样式
4）对页面中的所有时间做出反应

查找HTML元素：要操作HTML元素，必须要找到该元素
1）通过id找到该元素
2）通过标签找到该元素
3）通过类名找到该元素

找到HTML元素最简单的方法就是通过id找到该元素
var a = document.getElementById(id)
如果找到该元素，该方法将以对象的形式返回该元素
如果没有找到，返回null

通过标签名找到HTML元素
var x = document.getElementById('main')
var y = x.getElementsByTagName('p')
首先找到id='main'的元素，再找main中所有的<p>元素

DOM改变HTML的内容
document.write()输出流写入文档中
修改HTML内容的最简单的方法就是使用innerHTML属性
document.getElementById(id).innerHTML= new HTML

改变HTML的属性
document.getElementById(id).attribute = new value
<img id='a' src='abc.png'>
<script>
document.getElementById('a'').src='xxx.jpg'
</script>

 

改变HTML的样式：document.getElementById("demo").style.color="blue";

JavaScript HTML DOM事件：对HTML事件作出反应
在事情发生时执行JavaScript代码，比如用户在HTML元素上点击时
如果用户在点击某个元素时执行代码，请向一个HTML属性添加JavaScript代码
onclick=JavaScript
HTML事件的例子
1.用户点击鼠标时
2.网页已经加载时
3.图像已经加载时
4.当鼠标移动到元素上时
5.输入字段被改变时
6.提交HTML表单时
7.触发按键时

<h1 onclick="this.innerHTML='haha!'">The first JavaScript sample</h1>
鼠标点击该元素时，文本内容发生变化
向元素分配onclick事件

onload和onunload事件：会在用户进入或离开页面触发，可用于处理cookie
onload事件可用户检测访问者的浏览器类型和浏览器版本，并基于这些信息加载浏览器的正确版本

加载浏览器时，判断浏览器cookie是否可用
<body onload="checkCookie()">
</body>

onchange事件：常结合对输入字段的验证来使用，会在域的内容改变时发生
<input name="input_name" type="text" onchange="uperrCase()"><br>

onmouseover和onmouseout事件
用于在用户的鼠标移至HTML元素上方或移出元素时触发函数
div.red_block{
background-color: aquamarine;
width: 100px;
height: 80px;
text-align: center;
margin: 2px;
padding: 2px;
align-content: center;
}

<div class="red_block" onmouseover="myOver(this)" onmouseout="myOut(this)">please click me!</div>

function myOver(obj) {
obj.innerHTML="I am very happy!"
}
function myOut(obj) {
obj.innerHTML="you leave, I am very sad..."
}

onmousedown和onmouseup以及click事件构成了点击鼠标的所有部分
点击鼠标触发onmousedown事件
释放鼠标时触发onmouseup事件
完成鼠标点击时，触发onclick事件
img.myPic{
margin: 2px;
padding: 2px;
width: 100px;
height:80px;
}
<img class="myPic" id="myImg" src="/static/img/dyx.png" onmousedown="myDown()" onmouseup="myUp()">
function myDown() {
document.getElementById("myImg").style.opacity=0.4;
}
function myUp() {
document.getElementById("myImg").style.opacity=1;
}

onfocus获得字段焦点
<input name="input_name" id="myInputId" type="text" onchange="uperrCase()" onfocus="myFocus()">
function myFocus() {
document.forms["myForm"]["input_name"].style.background="green";
}


HTML DOM元素
创建新的HTML元素：向HTML DOM添加元素，必须要创建出该元素称为元素节点，然后在一个已经存在的元素添追加该元素
<div id="div1">
<p id="p1">
This is paragram 1
</p>
<p id="p2">
This is paragram 2
</p>
</div>
//创建新的p3元素
var para = document.createElement("p3")
//往p元素添加文本，首先创建文本节点
var node = document.createTextNode("This is paragram 3")
//向p元素追加这个文本节点
para.appendChild(node)
//找到一个已有的元素
var element = document.getElementById("div1")
//在已有的元素中追加新的元素
element.appendChild(para)

删除HTML元素
var element1= document.getElementById('p1')
var element2= document.getElementById('p2')
element1.removeChild(element2)

如果能够在不引用父元素的情况下，删除某个元素就太好了
常用的解决方法：找到需要删除的子元素，然后使用其parentNode属性来找到父元素
var child = document.getElementById('p1')
child.parentNode.removeChild(child)

相关文章