Web前端(4)-Javascript基础

程序员文章站 2024-03-17 11:12:04

...

Javascript与Java没有什么关系。

一：Javascript书写

1:在body内部书写
弹窗代码：alert()

<body>

<script type="text/javascript">
    alert(1234)

</script>
</body>

2:在头部书写：
之后要用到选择命令，因为执行顺序从上往下，前面的内容无法选择后面的指令要加入:window.οnlοad=function(){}
表示加载所有代码之后运行

<head>
<script>
    alert(1234)
    window.onload=function(){
    x=document.GetElementById('ID')
}
</script>
</head>

3：新建JS文件
直接写入命令:
alert(1234)

引入这个JS文件:在 body内

<script src="JS基础使用.js">
    
</script>

但是引用之后在这个标签里写入的JS命令将不产生效果。
只得再重建一个。

二：Javascript获取元素

在body写入JS

在控制台获取文件名：console.log(document.title)
在控制台获取文件头部代码：console.log(document.head)
在控制台获取文件主体代码：console.log(document.body)
通过检查点击控制台即可。

修改标题：document.title=’’
获取主体内的所有文体：console.log(document.body.innerText)
获取主体内的所有标签：console.log(document.body.innerHTML)

通过变量的形式进行覆盖：修改内容
document.body.innerText=‘1234’
等于号后面什么样文本内容就是什么样

<p>一去二三里</p>
<p>烟村四五家</p>
<p>亭台六七座</p>
<p>八九十支花</p>

<script type="text/javascript">
    console.log(document.head.innerHTML)
    document.body.innerText='110'
</script>

通过变量的形式进行覆盖：修改标签

 document.body.innerHTML=<h1>1234</h1>

1：通过id获取元素
变量名p=document.getElementById(‘id’);
进行修改：
修改内容： p.innerText=’’
修改标签：p.innerHTML=’’

2：通过标签获取内容：
格式一
变量名p=document.getElementsByTagName(‘标签名’);
控制台获取目前标签：
console.log (p )
p.innerText=’’

JS不支持一次性修改多个元素，当通过标签修改时，可以通过索引进行定位
格式二：
变量名p=document.getElementsByTagName(‘p’);
p[1].innerText=’’

3：通过class获取内容
变量名p=document.getElementsByClassName(‘class’)[1];
p.innerText=‘’

4:通过name获得内容

<input type="radio" name="sex" value="1">   男
<input type="radio" name="sex" value="0">   女
<input type="radio" name="sex" value="-1">   保密

在script内调用，同样要通过索引去找到单个元素，然后在控制台打印
变量名p=document.getElementsByName(‘sex’)[1];
console.log(p.value)

5：通过CSS选择器调用
获取第一个元素，也就是索引默认为0
变量名p=document.querySelector(’.类名’)
console.log(p.innerText)
注意，类名的格式与变量名规则是一致的。

获得全部内容：(需要加索引)
变量名p=document.querySelectorAll(‘input’)[1];
console.log(p.value)
他是一个自闭和标签

三：Javascript基础事件

首先选择元素

p=document.getElementsByTapName('p')[1];

单击事件：

p.click=function(){
alert(p.innerText)
}

双击事件：

p.ondlclick=function(){
alert(p.innerText)
}

移入事件： 可以在function进行样式修改

p.onmouceenter()=function(){
p.style.cssTEXT:'color:red;font-size:px'
}

移出事件：修改样式二

p.onmouceout()=function(){
p.style["color"]='red'
}

聚焦：

p.onfocus=function(){
p.style.cssText='border:1px solid blue'
}

失焦：

p.onblur=function(){
p.style.cssText='border:1px solid red'
}

四：Javascript修改样式
首先还是选择元素
p=document.getElementById(‘p’);

p.style.cssText=’’
p.style[“color”]=’’

控制台获得属性值：
console.log(p.getAttribute(‘id’))

设置，更改属性值：
p.setAttribute(‘class‘，‘p‘)

移出属性值：
p.removeAttribute(‘class‘）

五：Javascript基本数据类型
数字：number
字符串：string
布尔型：true，false
underfined：未赋值
空值：null （也是object的一种）
对象：object

控制台显示类型：按顺序
console.log(type of 数字)
console.log(type of ‘a’)
console.log(type of true)
console.log(type of x)
console.log(type of null)
console.log(type of [1,2,3])

Web前端(4)-Javascript基础

一：Javascript书写

二：Javascript获取元素

三：Javascript基础事件

Web前端入门基础知识（HTML+CSS+JS）

web前端——4 JavaScript代码画图（菱形）

web前端基础知识，html+css

冷饭新炒---4.javascript基础（数组）