当前位置：首页 > news >正文

前端3.0

news 2025/9/28 5:30:56

一、初始JavaScript

1.0 js是什么

2.0 js和html和css之间的关系

二、基础语法

1.0 引入方式

2.0基础语法

(1)变量

(2)基本数据类型

(3)运算符

(4)数组

3.0 对象

4.0 函数

二、初识JQuery

1.0 jquery是什么

2.0 jquery语法

(1)基础语法

(2)jQuery选择器

(3)jQuery事件

三、代码案例

1.0 猜数字

2.0 表白墙

一、初始JavaScript

1.0 js是什么

脚本语言使得浏览器和网页互动

Java和JavaScript的关系就相当雷锋和雷锋塔一样

2.0 js和html和css之间的关系

html是骨架（网页的结构） css是网页的表现（表皮） js是网页的灵魂（行为）

二、基础语法

1.0 引入方式

2.0基础语法

(1)变量

var声明变量 var name=“zhangsan”； const常量声明后不能改变 let 声明变量

console.log 打印日志 typeOf 打印类型

(2)基本数据类型

(3)运算符

js中的运算符和Java中用法基本相同

==比较值 ===比较值和类型 !=值和类型的比较

(4)数组

let array = new Array(); let array = [ ] let = array [10 , 'a' , "String" , true ];

js的数组不要求元素是相同类型

array.splice 删除

3.0 对象

定义 let student = { } ；

let student = {"name"="zhangsan" "age"=16 }；

读 console.log(student.age) ; 修改 student.name="lisi"; 打印 console.log(student);

添加：student.height=100; 空对象赋值

创建对象的方法有三种但是了解一下就直接大括号创建对象就可以了

4.0 函数

定义：函数就是方法

function sum() { } 直接就是function 方法名小括号大括号

js中的函数需要调用才会执行 sum（10，20）；数字字符串--->字符串

二、初识JQuery

1.0 jquery是什么

JQ是一个快速简洁且功能丰富的js框架提高了开发效率，使开发人员能方便的处理各种交互行为

jQuery CDN 这个是jqurey的官方网站

存下来放到本地外网用不上

统一放到js目录里面

2.0 jquery语法

通过选取对HTML元素并对选取的元素执行某些操作

(1)基础语法

$(selector).action( )函数 selector选择器用来查询和查找html元素 action是操作

例：$(document 整个文档 ).function() {alert("页面加载完成")}

(2)jQuery选择器

(3)jQuery事件

js要构建动态页面就要感知到用户的行为

用户对于页面的一些操作，都会在浏览器中产生一个个事件，被JS获取到从而进行更复杂的交互操作

事件的网站：网上搜索 jquery事件菜鸟教程等等网站里面会有汇总和总结

(4)获取/返回CSS属性

css方法设置或者返回被选元素的一个或多个样式属性

三、代码案例

script 一般写在页面最下方先让页面显示出来最后加载交互

1.0 猜数字

效果图展示和代码：

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button id="reset">重新开始一局游戏</button><br /><span>请输入要猜的数字：</span><input type="text"  id="guessNum"><button id="guess">猜</button></br><span>已经猜的次数:</span><span id="count">0</span></br><span>结果：</span><span id="result"></span><script src="js\jquery-git.slim.js"></script><script>//生成一个数字  let count = 0;let number = Math.floor(Math.random()*100)+1;//一到100的数字console.log(number);$("#guess").click(function(){count ++;let guessNum = $("#guessNum").val();$("#count").text(count);if(number<guessNum){//猜大了$("#result").text("猜大了");$("#result").css("color","red");}else if(number > guessNum){//猜小了$("#result").text("猜小了");$("#result").css("color","red");}else{//猜小了$("#result").text("猜对了");$("#result").css("color","green");}      });$("#reset").click(function(){number = Math.floor(Math.random()*100)+1;console=log(number);count=0;$("#result").text("");$("#count").text("count");$("guessNum").val("");});</script>
</body>
</htm>

2.0 表白墙

效果展示和代码

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>留言板</title><style>.container {width: 350px;height: 300px;margin: 0 auto;/* border: 1px black solid; */text-align: center;}.grey {color: grey;}.container .row {width: 350px;height: 40px;display: flex;justify-content: space-between;align-items: center;}.container .row input {width: 260px;height: 30px;}#submit {width: 350px;height: 40px;background-color: orange;color: white;border: none;margin: 10px;border-radius: 5px;font-size: 20px;}</style>
</head><body><div class="container"><h1>留言板</h1><p class="grey">输入后点击提交, 会将信息显示下方空白处</p><div class="row"><span>谁:</span> <input type="text" name="" id="from"></div><div class="row"><span>对谁:</span> <input type="text" name="" id="to"></div><div class="row"><span>说什么:</span> <input type="text" name="" id="say"></div><input type="button" value="提交" id="submit" onclick="submit()"></div><script src="js/jquery-3.7.1.min.js"></script><script>function submit(){let from = $("#from").val();let to = $("#to").val();let say = $("#say").val();if(from==="" || to === "" || say === ""){return;}let html = "<div>"+from+" 对 "+to+" 说: "+say+"</div>"$(".container").append(html);$("#from").val("");$("#to").val("");$("#say").val("");}</script>
</body></html>

感谢大家的支持