目录
一、初始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 猜数字
效果图展示和代码：
代码：
Document
请输入要猜的数字：
已经猜的次数:0
结果：
<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{
//猜小了
$("#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>
2.0 表白墙
效果展示和代码
代码：
留言板
留言板
输入后点击提交, 会将信息显示下方空白处
谁:
对谁:
说什么:
<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 = ""+from+" 对 "+to+" 说: "+say+""
$(".container").append(html);
$("#from").val("");
$("#to").val("");
$("#say").val("");
}
</script>
感谢大家的支持
更多内容还在加载中...........
如有问题欢迎批评指正，祝大家生活愉快、学习顺利！！！
浙公网安备 33010602011771号