本文详细介绍了JavaScript的基础知识，包括CSS定位、JS内部和外部使用方法、变量定义、数据划分、运算符、流程控制语句、Switch语句以及事件编程的三要素。讲解了如何利用JS进行元素定位、输出内容、创建对象、定义变量、运用运算符以及实现条件判断和事件处理。此外，还提供了实例代码展示，帮助读者理解和应用。
文章目录
1.css定位
2.js使用方法1
3.js使用方法2
4.js中的定义变量与数据划分
5.js运算符
6.js流程控制语句
7.Switch语句
8.js事件编程三要素
9.js流程控制语句.事件练习
一、css定位
定位属性 position
static
relative 相对定位 针对原来的位置进行移动
fixed 固定定位（常用）
absolute 绝对定位 针对父标签（body）进行移动
sticky
position: fixed;
href="javascript:void(0) js中让超链接失效
让它js的完了点击事件 onclick固定属性
<a href="javascript:void(0)" onclick="clickImg()">
二、js的使用方法1(内部方式)
script在head中指定一个script
其中书写js代码
<script>
/* js中常用的函数*/
//1.向浏览器输出内容
document.write("123456");
//2.在浏览器控制台输出日志
console.log("123");
//3.弹出一个提示框
window.alert("1234");
//可简写为alert("1234");
</script>
三、js使用方法2(外部方式)
1.在js文件夹中单独定义js
2.在xxx.js文件用书写js代码
3.在当前页面中导入xxx.js
<script src="js/1.js">
</script>
js文件如下:
//向浏览器打印一个内容
document.write("javaee2204!");
//弹窗
alert("今天天气不错!")
//控制台
console.log("javaee2204")
四、js中的定义变量与数据划分
如何定义变量 ?
定义var（可以省略）（因为js时弱类型语言）
弱类型语言：语法结构不严谨
var可以定义任何类型
注意:
js中 查看一个变量的数据类型？使用typeof(变量名)
1.无论是整数小数都是number类型
2.无论字符还是字符串都是string类型
3.undefined未定义类型
4.Object类型，对象类型，自动提升为 object：所有js的模板
js如何创建对象
var 对象名=new js内置对象
var s = new string（"hello"）;
定义var
var a = 10;
var a = 20; //重复定义 Java不可以 后面覆盖前面
b = 3.14;//var可省略
c="hello";
d='a';
e='abc';//多个字母 浏览器理解为字符串
var f //变量未赋值
g= new Object();//new 对象 （）里可以放任何变量
五、js运算符
运算符：针对不同数据操作的
1.算数运算符
2.比较运算符
3.赋值运算符=
成立true 不成立false
true表示1 false表示0
4.逻辑运算符 &&,|| 逻辑双与 逻辑双或
逻辑双与&&同时满足
逻辑双或||
逻辑非!(在java中是错误提示)
5.三元运算符（三目）
语法格式 表达式可以是简单和复杂
（表达式？）执行true的结果：执行false的结果;
执行流程：判断是否成立，如果成立则执行true的结果
如果不成立，则执行false的结果
age=20;
// （表达式 ?）执行true的结果:执行false的结果;
document.write((age>18)?"这是一个成年人":"这是一个未成年人");
document.write("<hr/>");
//两个值
var num1=25;
var num2=40;
var max=(num1>num2)?num1:num2;
document.write("最大值是:"+max);
六、js流程控制语句
js流程控制语句分为三大类:
1.顺序结构:代码从上而下依此加载
2.选择结构语句:
1)if语句
格式一
if(表达式){ //表达式是否成立,成立才能执行
语句1;
}
例如:
if(){
alert("成立");
}else{
alert("不成立");
}
格式二 开发中使用最多
if(表达式){ //先判断表达式是否成立
语句1; //成立执行1,不成立执行2
}else{ //针对两种结果
语句2;
}
例如:
var a=30;
var b=20;
var max1 ;
if(a>b){
max1 = a ;
}else{
max1 = b ;
}
document.write("max1="+max1);
输出为:
格式三 针对多种结果
if(表达式1){ //先判断1是否成立 成立 执行1
语句1; //不成立,继续判断2 成立 执行2
}else if(表达式2){ //不成立,继续依此判断下面语句
语句2; //如果都不成立,执行else中的语句
...
...
}else{
语句n;
}
例如:
var x=10;
var y=20;
var z=5;
var temp = (x>y)?x:y;
var max3 = (temp>z)?temp:z;
document.write("max3="+max3);
document.write("<hr/>");
var max4;
if(x>y){
if(x>z){
max4 = x ;
}else{
max4 = z ;
}
}else{
if(y>z){
max4 = y ;
}else{
max4 = z;
}
}
document.write("max4="+max4);
输出为:
2)Switch语句
3.循环语句
七、Switch语句
switch(变量){
case 值1:
语句1;
break; //结束,
case 值2:
语句2;
break;
...
...
default:
语句n;
break;
}
1.先判断变量值和值1是否匹配,如果匹配,执行1,break结束
2.如果不匹配执行2,成立,结束
3.如果都不匹配,执行default,结束
default可以放在任意位置
注意:
js中case后可以是常量 变量
Java红只能是常量
<script>
var week = 8;
switch(week){
case 1:
document.write("一");
break;
case 2:
document.write("二");
break;
case 3:
document.write("三");
break;
case 4:
document.write("四");
break;
case 5:
document.write("五");
break;
case 6:
document.write("六");
break;
case 7:
document.write("七");
break;
default:
document.write("错误");
break;
}
</script>
当week=2时输出为:
当week=8时输出为:
八、js事件编程三要素
事件编程三要素
1.事件源:html标签
2.编写事件监听器:写一个函数function 函数名称(参1,参2…)----参1参2可以是空参或带参
3.绑定事件监听器:在标签中有一些onxxx属性和函数名称进行绑定
其中事件
单击 click
双击dbclick
失去焦点 blur
获取焦点 focus
...
<script>
function myClik(){
alert("点击了");
}
</script>
<body>
<input type="button" value="点击" onclick="myClik()"> <!-- 事件源-->
</body>
点击一下:
九、js流程控制语句.事件练习
3 4 5 春
6 7 8 夏
9 10 11 秋
12 1 2 冬
1.通过dom操作,获取id,获取value的值
2.编写事件监听器
3.完成判断
<script>
function getMonth(){
var inputObj=document.getElementById("month");
content = inputObj.value;
if(content==3||content==4||content==5){
alert("春")
}else if(content==6||content==7||content==8){
alert("夏")
}else if(content==9||content==10||content==11){
alert("秋")
}else if(content==12||content==1||content==2){
alert("冬")
}else{
alert('错误');
}
}
</script>
<input type="text" placeholder="请输入月份" id="month"><!-- 事件源 -->
<input type="button" value="点击查询" onclick="getMonth()">
输入1-12时显示春夏秋冬
输入错误信息时 提示错误
175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
