JavaScript基础
- JavaScript，是一门编程语言，js是其缩写
- DOM和BOM 相当于编程语言内置的模块。
- jQuery 相当于是编程语言的第三方模块。
1. 注释
//注释内容
/*注释内容*/
2. 代码位置
- head中的javascript：
<head>
<title>Title</title>
<script type="text/javascript">
// type="text/javascript"也可以不写，不写则会使用浏览器自身所默认的方式，最好还是写
//编写javascript代码
</script>
</head>
- body中的javascript：
<body>
<h1>我的 Web 页面</h1>
<script type="text/javascript">
//编写javascript代码
</script>
</body>
- 外部的js文件里的javascript代码，导入使用：
<body>
<script src="myScript.js"></script>
<script type="text/javascript"></script>
</body>
- chrome浏览器执行javascript
在console窗口调试javascript代码 ————console.log("xxx")
3.定义方式
-
事件定义式
// 事件定义式：直接定义在事件中 <input type="button" value="按钮" onclick="javascript:alert('Hello World');"/> -
嵌入式
<script type="text/JavaScript"> function s(){ alert("Hello World!"); } </script> <input type="button" value="按钮" onclick="s();"/> -
文件调用式
<!-- HTML中的代码 --> <script type="text/JavaScript" src="demo.js"></script> <input type="button" value="按钮" onclick="s();"/> <!-- demo.js中的代码 --> function s(){ alert("Hello World!"); }
4. 数据的输出
-
弹框输出：使用 window.alert(“输出文本”)。
-
页面输出：document.write(“输出文本”);
-
使用 innerHTML 写入到 HTML 元素。
如需从 JavaScript 访问某个 HTML 元素，可以使用 document.getElementById(id) 方法。
-
控制台输出：console.log(“输出文本”);
5.代码调试
<script>
console.log("Hello World")
</script>
6. 语法
在每条可执行的语句结尾添加分号。用分号来结束语句是可选的。
6.1 常量
- const：可用来定义常量，常量也叫字面量
- 定义的时候，const必须马上赋值，不然会报错
6.2 变量
-
var： 来声明变量 JavaScript 对大小写是敏感的。
-
函数内定义变量时，缺省var，会提升为全局变量
<script type="text/javascript">
var name = "高倩";
console.log(name);
</script>
- let
7.DOM
7.1 document对象
JavaScript 通过可编程的对象模型，获得了足够的能力来创建动态的 HTML：改变HTML元素、改变HTML属性、改变CSS样式、对页面中的各类事件做出反应
每个载入浏览器的 HTML文档都会成为 document 对象
“document.属性” 或 “document.方法”
// 根据ID获取标签
var tag = document.getElementById("xx");
// 获取标签中的文本
tag.innerText
//console.log(tag.innerText)
// 修改标签中的文本
tag.innerText = "哈哈哈哈哈";
// 创建标签 <div>哈哈哈哈哈</div>
var tag = document.createElement("div");
// 标签写内容
tag.innerText = "哈哈哈哈哈";
7.2 事件的绑定
<input type="button" value="提交" onclick="getInfo()"/>
<script>
function getInfo() {
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="点击添加" onclick="addCityInfo()">
<ul id="city">
</ul>
<script type="text/javascript">
function addCityInfo() {
//创建li标签
var newTag = document.createElement("li");
newTag.innerText = "联通";
//将标签加到ul标签里面
var parentTag = document.getElementById("city");
parentTag.appendChild(newTag);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入内容" id="txtUser"/>
<input type="button" value="点击添加" onclick="addCityInfo()">
<ul id="city">
</ul>
<script type="text/javascript">
function addCityInfo() {
// 1.找到输入标签
var txtTag = document.getElementById("txtUser");
// 2.获取input框中用户输入的内容
var newString = txtTag.value;
// 判断用户输入是否为空，只有不为空才能继续。
if (newString.length > 0) {
// 3.创建标签 <li></li> 中间的文本信息就是用户输入的内容
var newTag = document.createElement("li");
newTag.innerText = newString;
// 4.标签添加到ul中
var parentTag = document.getElementById("city");
parentTag.appendChild(newTag);
// 3.将input框内容清空
txtTag.value = "";
}else{
alert("输入不能为空");
}
}
</script>
</body>
</html>
8. jQuery
8.1 寻找标签
-
直接寻找
-
ID选择器
<h1 id="txt">中国联通</h1> <h1>中国联通</h1> <h1>中国联通</h1>$("#txt") -
样式选择器
<h1 class="c1">中国联通1</h1> <h1 class="c1">中国联通2</h1> <h1 class="c2">中国联通3</h1>$(".c1") -
标签选择器
<h1 class="c1">中国联通1</h1> <div class="c1">中国联通2</h1> <h1 class="c2">中国联通3</h1>$("h1") -
层级选择器
<h1 class="c1">中国联通1</h1> <h1 class="c1"> <div class="c2"> <span></span> <a></a> </div> </h1> <h1 class="c2">中国联通3</h1> -
多选择器
<h1 class="c1">中国联通1</h1> <h1 class="c1"> <div class="c3"> <span></span> <a></a> </div> </h1> <h1 class="c2">中国联通3</h1> <ul> <li>xx</li> <li>xx</li> </ul> -
属性选择器
<input type='text' name="n1" /> <input type='text' name="n1" /> <input type='text' name="n2" />$("input[name='n1']")
-
-
间接寻找
-
找到兄弟
<div> <div>北京</div> <div id='c1'>上海</div> <div>深圳</div> <div>广州</div> </div>$("#c1").prev() // 上一个 $("#c1") $("#c1").next() // 下一个 $("#c1").next().next() // 下一个、下一个 $("#c1").siblings() // 所有的兄弟 -
找父子
<div> <div> <div>北京</div> <div id='c1'> <div>青浦区</div> <div class="p10">宝山区</div> <div>浦东新区</div> </div> <div>深圳</div> <div>广州</div> </div> <div> <div>陕西</div> <div>山西</div> <div>河北</div> <div>河南</div> </div> </div>$("#c1").parent() // 父亲 $("#c1").parent().parent() // 父亲、父亲 $("#c1").children() // 所有的儿子 $("#c1").children(".p10") // 所有的儿子中寻找class=p10 $("#c1").find(".p10") // 去所有子孙中寻找class=p10 $("#c1").find("div") // 去所有子孙中寻找class=p10
-
8.2 操作样式
- addClass
- removeClass
- hasClass
8.3 值的操作
<div id='c1'>内容</div>
$("#c1").text() // 获取文本内容
$("#c1").text("休息") // 设置文本内容
-
val( ) 是jQuery方法
.val()方法——》带参：给输入框赋值，不带参：获取输入框的值
<input type='text' id='c2' />$("#c2").val() // 获取用户输入的值 $("#c2").val("哈哈哈") // 设置值 -
value是js对象的属性
document.getElementById(“demo”).value //获取值 document.getElementById(“demo”).value=“demo” //设置值
8.4 事件的绑定
<input type="button" value="提交" onclick="getInfo()"/>
<script>
function getInfo() {
}
</script>
-
在jQuery中可以删除某个标签
<div id='c1'>内容</div> $("#c1").remove();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>百度</li>
<li>谷歌</li>
<li>搜狗</li>
</ul>
<script src="static/jquery-3.6.0.min.js"></script>
<script>
$("li").click(function () {
$(this).remove();
});
</script>
</body>
</html>
- 当页面框架加载完成之后执行代码,相对于普通方法提升了速度：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>百度</li>
<li>谷歌</li>
<li>搜狗</li>
</ul>
<script src="static/jquery-3.6.0.min.js"></script>
<script>
$(function () {
// 当页面的框架加载完成之后，自动就执行。
$("li").click(function () {
$(this).remove();
});
});
</script>
</body>
</html>
1266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
