WEB前端基础知识的学习
关于”WEB前端“基础知识的学习
你也许会问为什么我会学习前端呢？难道是想成为一个全栈程序员，成为别人眼中的大佬？NO NO NO. 虽然我也想成为一个全栈程序员，更想成为大佬，但是目前–2023年4月18日21点37分42秒，学习前端只是为了满足课程基本要求。下面我将分享在学习前端基础时记的笔记。（此次课程学习了HTML+CSS+JavaScript，以及jQuery和Ajax）
HTML：
网页的基本结构：
head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页
titile中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页主要内容
meta主要用于设置网页的一些元数据，元数据不是给用户看
charset 指定网页的字符集
name 指定数据的名称
content 指定的数据内容
keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用，隔开
description 用于指定网站的描述
<meta name="keywords" content="HTML5,CSS,前端">
<meta name="description" content="这是一个非常不错的网站">
<meta http-equiv="refresh" content="3;url=https://www.baidu.com"> //页面将在3秒后重定向到百度网
<title>meta</title> //title标签的内容会作为搜索结果的超链接上的文字显示
body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里
h1网页的一级标题
网页标签属性：
属性，在标签中（开始标签或自结束标签）还可以设置属性
属性是一个键值对（x=y）
属性用来设置标签中的内容如何显示
属性和标签名或其他属性应该使用空格隔开
属性不能瞎写，应该根据文档中的规定来编写
有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号引起来
<h1>这是我的<font color="red" size="6">第三个</font>网页！</h1>
语义化标签：
在网页中HTML专门用来负责网页的结构，所以在使用HTML标签时，应该关注的是标签的语义，而不是它的样式
块元素（block element）
-在网页中一般通过块元素来对页面进行布局
行内元素（inline element）
-行内元素主要用来包裹文字
-一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
-块元素中基本什么都能放
-p元素中不能放任何的块
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
比如：
标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了head和body以外的子元素
...
常见块级元素：
div、form、h1~h6、hr、p（标识段落）、table、ul等
常见内联元素：
a、b、em（加重语调）、i、span、strong（强调）等
行内块级元素（特点：不换行、能够识别宽高）：
button、img、input等
hgroup标签用来为标签分组，可以将一组相关的标题同时放入到hgroup
p标签标识页面中的一个段落
em标签用于表示语音语调的一个加重
strong表示强调，重要内容
blockquote表示一个长引用
q表示一个短引用
br表示页面中的换行
hr表示页面中出现一条水平线
...
布局标签（结构化语义标签）:
header 表示网页的头部
main 表示网页的主体部分(一个页面中只会有一个main)
footer 表示网页的底部
nav 表示网页中的导航
aside 表示和主体相关的其他内容(侧边栏)
article 表示一个独立的文章
section 表示一个独立的区块，上边的标签不能表示时使用section
div 没有语义，就用来表示一个区块，目前来说div还是我们主要的布局元素
span 行内元素，没有任何的语义，一般用于在网页中选中文字
列表：
列表（list）
1、铅笔
2、尺子
3、橡皮
在html中也可以创建列表，html列表一共有三种
1、有序列表
2、无序列表
3、定义列表
有序列表，使用ol标签来创建有序列表
使用li表示列表项
无序列表，使用ul标签来创建无序列表
使用li表示列表项
定义列表，使用dl标签来创建定义列表
使用dt来表示定义的内容
使用dd来对内容进行解释说明
列表之间可以互相嵌套
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<dl>
<dt>结构</dt>
<dd>结构用来表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
</dl>
表格：
表格标签：
表格:<table>
行:<tr>
单元格（列）:<td>
表格属性：
border:设置表格的边框
width:设置表格的宽度
height:设置表格的高度
示例：
<table border="2">
<tr>
<td>尚学堂</td>
<td>黑马</td>
<td>多易</td>
</tr>
<tr>
<td>阿里</td>
<td>京东</td>
<td>腾讯</td>
</tr>
</table>
快捷键生成表格：
table>tr*2>td*3{文本信息}
表格的合并：
水平合并：colspan--保留左边，删除右边
垂直合并：rowspan--保留上边，删除下边
<tr>
<td colspan="2">单元格6单元格7</td>
<td>单元格8</td>
<td>单元格9</td>
<td>单元格10</td>
</tr>
form表单：
表单是由容器和控件组成的，一个表单一般应该包含用户填写的信息的输入框，提交按钮等，
这些输入框，按钮叫做控件，表单就是容器，它能够容纳各种各样的控件
<form action="url" method="get | post" name="myform"></form>
action服务器地址
name表单名称
method中get和post的区别：
数据提交方式，get把提交的数据url可以看到，post看不到
get一般用于提交少量数据，post用来提交大量数据
超链接：
超链接可以让我们从一个页面跳转到另一个页面，或者是当前页面的其他的位置
使用a标签来定义超链接
属性：
href 指定跳转的目标路径
-值可以是一个外部网站的地址
-也可以写一个内部页面的地址
超链接也是一个行内元素，在a标签中可以嵌套除它自身外任何的元素
<a href="https://www.baidu.com" target="">超链接</a>
target属性：用来指定超链接打开的位置
可选值：
-self 默认值在当前页面中打开超链接
_blank 在一个新的页面中打开超链接
内联框架：
内联框架，用于向当前页面中引入一个其他的页面
src 指定要引入的网页的路径
frameborder 指定内联框架的边框
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
CSS:
网页实际是一个多层的结构，通过CSS可以分别为网页的每一层来设置样式，而最终我们能看到只是网页的最上边一层
使用CSS来设置样式的三种方式：
第一种方式：(内联样式，行内样式)
-在标签内部通过style属性来设置元素的样式
-问题：
使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素必须在每一个元素中都复制一遍
并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便
-注意：开始时绝对不要使用内联样式
<p style="color:red; font-size: 30px;">少小离家老大回，乡音无改鬓毛衰</p>
第二种方式(内部样式)：
-将样式编写到head中的style标签里
然后通过CSS的选择器来选中元素并为其设置各种样式
可以同时为多个标签设置样式，并且修改只需要修改一处即可全部应用
-内部样式表更加方便对样式进行复用
<head>
<style>
p{
color: #00FF00;
font-size: 50px;
}
</style>
</head>
<p>落霞与孤鹜齐飞，秋水共长天一色</p>
第三种方式（外部样式表） 最佳实践
-可以将css样式编写到一个外部的css文件中
然后通过link标签来引入外部的css文件
-外部样式表需要通过link标签进行引入，
意味着只要想使用这些样式的网页都可以对其进行引用
使样式可以在不同页面之间进行复用
-将样式编写到外部的css文件中，可以使用到浏览器的缓存机制
从而加快网页的加载速度，提高用户的体验
<head>
<link rel="stylesheet" href="./style.css">
</head>
选择器：
<style>
/* 全局选择器：
可以与任何元素匹配，优先级最低，一般做样式初始化 */
*{
font-size: 30px;
color: red;
}
/* 元素选择器：
所有的标签，都可以是选择器
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性” */
p{
font-size: 14px;
}
/* 类选择器：
规定用圆点.来定义，针对你想要的所有标签使用
class属性的特点：
类选择器可以被多种标签使用
类名不能以数字开头
同一个标签可以使用多个类选择器，用空格隔开 */
.oneclass{
width: 800px;
}
.content{
font-size: 30px;
}
</style>
<body>
<p>HELLO</p>
<h2 class="oneclass">你好</h2>
<h2 class="oneclass content">世界</h2>
<h3>World</h3>
</body>
<style>
/* ID选择器：
针对某一个特定的标签来使用，只能使用一次。CSS中的ID选择器以#来定义
ID是唯一的
ID不能以数字开头 */
#mytitle{
border:3px dashed green;
}
/* 合并选择器：
语法：选择器1,选择器2,...{}
作用：提取共同的样式，减少重复代码 */
p,h3{
font-size: 30px;
color: red;
}
/* 选择器的优先级：
CSS中，权重用数字衡量
元素选择器的权重为：1
类选择器的权重为：10
ID选择器的权重为：100
内联样式的权重为：1000
优先级从高到低：行内样式>ID选择器>类选择器>元素选择器 */
</style>
关系选择器：
<style>
/* 后代选择器：
定义：选择所有被E元素包含的F元素，中间用空格隔开
E F{} */
ul li{
color: red;
}
/* 子代选择器：
选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示
E>F{} */
div>p{
color: green;
}
/* 相邻兄弟选择器：
选择紧跟E元素后的F元素，选择相邻的第一个兄弟元素，用+号表示
E+F{} */
h1+p{
color: aqua;
}
/* 通用兄弟选择器：
选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开
E~F{} */
h3~p{
color: blue;
}
</style>
盒子模型：
<style>
/* 盒子模型：
Margin(外边距)-清除边框外的区域，外边距是透明的
Border(边框)-围绕在内边距和内容外的边框
Padding(内边距)-清除内容周围的区域
Content(内容)-盒子的内容，显示文本和图像 */
div{
width: 100px;
height:100px;
background-color: red;
padding: 50px;
border: 2px solid gray;
margin: 50px;
}
</style>
<style>
/* 弹性盒子模型：
弹性盒子由弹性容器（Flex container）和弹性子元素（Flex item）组成
弹性容器通过设置display属性的值为flex将其定义为弹性容器
弹性容器内包含了一个或多个弹性子元素 */
.container{
width: 500px;
height: 500px;
background-color: #555;
/* 定义为弹性容器 */
display: flex;
/*设置各个子元素摆放方式*/
flex-direction: row-reverse;
/*设置子元素水平摆放位置*/
justify-content: center;
/*设置子元素垂直摆放位置*/
align-items: center;
}
</style>
浮动以及清除浮动：
浮动的定义：
float属性定义在哪个方向浮动，任何元素都可以浮动
浮动的原理：
浮动以后使元素脱离了文档流
浮动只有左右浮动，没有上下浮动
元素向左浮动：
脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，
一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象。
<style>
.box{
width: 200px;
height: 200px;
background-color: aqua;
float: left;
}
.container{
width: 400px;
height: 400px;
background-color: blueviolet;
}
</style>
浮动副作用：
浮动元素会造成父元素高度塌陷
后续元素会受到影响
清除浮动：
当父元素出现塌陷的时候，对布局是不利的，所以我们必须清除副作用
解决方案有很多种：
父元素设置高度
受影响的元素增加clear属性
父级标签的样式添加overflow清除浮动
伪对象方式
<style>
.container{
width: 500px;
/* height: 500px; */
background-color: #888;
/* overflow: hidden;
clear: both; */
}
.container::after{
content: "";
display: block;
clear: both;
}
.box{
width: 100px;
height: 100px;
background-color: aqua;
margin: 5px;
float: left;
}
.text{
width: 100px;
height: 100px;
background-color: blueviolet;
clear: both;
}
</style>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="text"></div>
</div>
动画：
直接演示一波：
<style>
div{
width: 200px;
height: 200px;
background-color: red;
animation: myAnim 3s linear 0s infinite;
}
div:hover{
animation-play-state: paused;
}
@keyframes myAnim {
0%{
background-color: red;
}
50%{
background-color: green;
}
100%{
background-color: red;
}
}
</style>
JavaScript：
JavaScript的引入方式和CSS十分类似
<!--在内部编写javascript-->
<!-- <script>
alert("hello js");
</script> -->
<!--链接外部的js文件-->
<script src="./demo.js"></script>
输出语句：
- 使用windows.alert()写入警告框
- 使用document.write()写入HTML输出
- 使用console.log()写入浏览器控制台
变量&数据类型：
JavaScript是弱类型语言
用var关键字来声明变量
ECMAScript 6 新增了 let 关键字来定义变量
ECMAScript 6 新增了 const 关键字来定义一个只读的常量，一旦声明，就不能更改常量的值。
var:
1、作用域：全局变量
2、变量可以重复定义
let:
1、作用域：局部变量
2、变量不可以重复定义
JavaScript中分为：原始类型和引用类型
5种原始类型：
numbe：数字（整数、小数、NaN（Not a Number））
string：字符、字符串，单引号、双引号皆可
boolean：布尔
null：对象为空，null被认为是对象的占位符，使用typeof运算符会返回“Object”
undefined：当声明的变量未初始化时，该变量的默认值是undefined
引用类型，合成数据类型，复合数据类型：object（对象）
var user = {
age:18,
name:"iwen",
hunyin:flase
}
使用typeof运算符可以获取数据类型
alter(typeof age)
window窗口对象：
Window
window：获取窗口对象
获取：直接使用window，其中 window. 可以省略
window.alert("abc") --> alert("abc")
方法：
alert() 显示带有一段消息和一个确认按钮的警告框
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框 --> 点击确认会返回true，点击取消会返回false
setInterval(function,毫秒值)按照指定的周期（以毫秒计）来调用函数或计算表达式，循环执行
setTimeout(function,毫秒值)在指定的毫秒数后调用函数或计算表达式，只执行一次
数组方法：
<script>
// Array.isArray()
// Array.isArray方法返回一个布尔值，表示参数是否为数组。它可以弥补typeof运算符的不足。
var arr1 = ["尚学堂",100,true];
console.log(Array.isArray(arr1));
// push()/pop()
// push方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意：该方法会改变原数组。
// pop方法用于删除数组的最后一个长度，并返回该元素。注意：该方法会改变原数组。
var arr2 = [];
arr2.push("尚学堂"); // 1
arr2.push('itbaizhan'); // 2
arr2.push(true,{}); // 4
console.log(arr2);
var arr3 = ['尚学堂','itbaizhan','WEB前端'];
arr3.pop(); // 'WEB前端'
console.log(arr3);
// shift()/unshift()
// shift方法用于删除数组的第一个元素，并返回该元素。注意，该方法会改变数组
// unshift方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度
var arr4 = ['尚学堂','itbaizhan','WEB前端'];
arr4.shift(); // '尚学堂'
console.log(arr4);
// shift方法去清空一个数组
var item;
while (item = arr4.shift){
console.log(item);
}
console.log(arr4);
var arr5 = ['尚学堂','itbaizhan','WEB前端'];
arr5.unshift('baizhan'); // 4
console.log(arr5);
// unshift方法可以接受多个参数，这些参数都会添加到目标数组头部
arr5.unshift('测试','JavaScript');
console.log(arr5);
// join()
// join方法以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔
var arr6 = [10,20,30,40];
console.log(arr6.join()); // 10,20,30,40
console.log(arr6.join("|")); // 10|20|30|40
// concat()
// concat方法用于多个数组的合并。它将新数组的成员，添加到原数组成员的后部，然后返回一个新数组，原数组不变
var arr7 = ['hello'].concat(['world'],['!']);
console.log(arr7);
// 除了数组作为参数，concat也接受其他类型的值作为参数，添加到目标数组后部。
[1,2,3].concat(4,5,6);
// indexOf()
// indexOf方法返回给定元素在数组中第一次出现的位置，如果没有出现则返回-1
var arr8 = ['a','b','c'];
arr8.indexOf('b'); // 1
arr8.indexOf('y'); // -1
// indexOf方法还可以接受第二个参数，表示搜索的开始位置
['尚学堂','百战程序员','itbaizhan'].indexOf('尚学堂',1); // -1
</script>
函数：
<script>
// 函数是一段可以反复调用的代码块
// 函数的声明：
// function命令：function命令声明的代码区块，就是一个函数。function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面。
function add(x,y){
console.log("结果:",x+y);
}
add(1,2);
</script>
CSS操作：
<script>
// HTML元素的style属性
// 操作CSS样式最简单的方法，就是使用网页元素节点的setAttribute方法直接操作网页元素的style属性
var box = document.getElementById("box");
// box.setAttribute("style","width:200px;height:200px;background:red;")
// box.style.width = "300px";
// box.style.height = "300px";
// box.style.backgroundColor = "red";
box.style.cssText = "width:200px;height:200px;background:red;"
</script>
jQuery：
第一个例子：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个例子</title>
<script type="text/javascript" src="js/jquery-3.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("Hello jQuery")
})
//简便写法
$(function(){
alert("Hello jQuery")
})
</script>
</head>
1.(document),是jQuery中的函数名称，document是函数的参数，作用是将document对象 变成 jQuery函数库可以使用的对象。2.ready是jQuery中的函数，是准备的意思，当页面的dom对象加载成功后，会执行ready函数的内容。ready相当于js中的onLoad事件
dom对象 与 jQuery对象的互转：
<input type="button" id="btn" value="我是按钮" onclick="btnClick()">
function btnClick(){
//获取dom对象
var obj = document.getElementById("btn");
//使用dom的value属性来获取值
alert("使用dom对象的属性="+obj.value);
//把dom对象转jQuery，使用jQuery库中的函数
var $jObj = $(obj);
//调用jQuery中的函数，获取value的值
alert($jObj.val())
}
<div>
<input type="button" id="btn" value="计算平方" onclick="btnClick()"><br>
<input type="text" id="txt" value="整数">
</div>
function btnClick(){
//使用jQuery的语法，获取页面中的dom对象
//var obj = $("#txt")[0]; //从数组中获取下标为0的dom对象（jQuery对象是一个数组）
var obj = $("#txt").get(0); //从数组中获取下标为0的dom对象（jQuery对象是一个数组）
//alert(obj.value)
var num = obj.value;
obj.value = num * num;
}
事件：
1.定义元素监听事件 ：
语法：$(选择器).监听事件名称(处理函数)
说明：监听事件名称是js事件中去掉on后的内容，js中的onclick的监听事件名称是click
例如：
为页面中所有的button绑定onclick，并关联处理函数func1
$("button").click(func1)
为页面中所有的tr标签绑定onmouseover，并关联处理函数func2
$("tr").mouseover(func2)
$("#btn").click(function(){
alert("处理按钮单击")
})
2.on()绑定事件
on()方法在被选元素上添加事件处理程序。该方法给API带来很多便利，推荐使用该方法
语法：$(选择器).on(event,function)
event：事件一个或多个，多个之间空格分开
function：可选，规定当事件发生时运行的函数
$("#btn").on("click",function(){
alert("处理按钮单击")
})
基本选择器：
根据id，class属性，标签类型名定位HTML元素，转为jQuery对象，下面通过代码演示
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本选择器</title>
<style type="text/css">
div{
background: gray;
width: 200px;
height: 100px;
}
</style>
<script text="text/javascript" src="js/jquery-3.6.4.js"></script>
<script text="text/javascript">
function fun1(){
//id选择器
var obj1 = $("#one");
//使用jQuery中改变样式的函数
obj1.css("background","red");
}
function fun2(){
//class选择器
var obj2 = $(".two")
//使用jQuery中改变样式的函数
obj2.css("background","yellow");
}
function fun3(){
//class选择器
var obj3 = $("div") //数组有3个对象
//使用jQuery中改变样式的函数
obj3.css("background","blue");
}
function fun4(){
var obj4 = $("*");
obj4.css("background","green");
}
</script>
</head>
<body>
<div>
<div id="one">我是one的div</div>
<br>
<div class="two">我是样式是two的div</div>
<br>
<div>我是没有id，class的div</div>
<br>
<span>我是span标签</span>
<br>
<input type="button" value="获取id是one的dom对象" onclick="fun1()">
<br>
<input type="button" value="获取class是two的dom对象" onclick="fun2()">
<br>
<input type="button" value="获取标签是div的dom对象" onclick="fun3()">
<br>
<input type="button" value="全部选择器" onclick="fun4()">
</div>
</body>
</html>
表单选择器：
使用<input>标签的type属性值，定位dom对象的方式
语法：$(":type 属性值")
例如：$(":text")，选择的是所有的单行文本框
$(":button")，选择的是所有的按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.4.js"></script>
<script type="text/javascript">
function func1(){
//使用表单选择器 $(":type的值")
var obj = $(":text");
//获取value属性的值
alert(obj.val());
}
function func2(){
//定位radio
var obj = $(":radio"); //数组，目前是两个对象 man、woman
//循环数组
for(var i=0;i<obj.length;i++){
//从数组中获取成员，使用下标的方式
var dom = obj[i];
//使用dom对象的属性，获取value值
alert(dom.value)
}
}
</script>
</head>
<body>
<input type="text" value="我是type=text"/><br/>
<br/>
<input type="radio" value="man"/>男 <br/>
<input type="radio" value="woman"/>女 <br/>
<br/>
<input type="checkbox" value="bike"/>骑行<br/>
<input type="checkbox" value="football"/>足球<br/>
<input type="checkbox" value="music"/>音乐<br/>
<br/>
<input type="button" value="读取text的值" onclick="func1()"/>
<br>
<input type="button" value="读取radio的值" onclick="func2()"/>
</body>
</html>
基本过滤器：
1、选择第一个first，保留数组中的第一个dom对象
$("选择器:first")
2、选择最后一个last，保留数组中的最后一个dom对象
$("选择器:last")
3、选择数组中指定对象
$("选择器:eq(数组索引)")
4、选择数组中小于指定索引的所有dom对象
$("选择器:lt(指定索引)")
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
background: gray;
}
</style>
<script text="text/javascript" src="js/jquery-3.6.4.js"></script>
<script text="text/javascript">
$(function(){
$("#btn1").click(function(){
//过滤器
var obj = $("div:first")
obj.css("background","red");
})
})
</script>
</head>
<body>
<div id="one">我是div-0</div>
<div id="two">我是div-1</div>
<div>我是div-2
<div>我是div-3</div>
<div>我是div-4</div>
</div>
<div>我是div-5</div>
<br>
<span>我是span</span>
<br>
<input type="button" value="获取第一个div" id="btn1"/>
</body>
</html>
表单属性过滤器：
1、选择可用的文本框
$(":text:enabled")
2、选择不可用的文本框
$(":text:disabled")
3、复选框选中的元素
$(":checkbox:checked")
4、选择指定下拉列表的被选中元素
选择器>option:selected
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/jquery-3.6.4.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
var obj = $(":text:enabled");
obj.val("hello");
})
$("#btn2").click(function(){
var obj = $(":checkbox:checked");
for(var i=0;i<obj.length;i++){
alert(obj[i].value)
}
})
$("#btn3").click(function(){
var obj = $("select>option:selected")
alert(obj.val())
})
})
</script>
</head>
<body>
<p>文本框</p>
<input type="text" id="txt1" value="text1"><br>
<input type="text" id="txt2" value="text2" disabled="true"><br>
<input type="text" id="txt3" value="text3"><br>
<input type="text" id="txt4" value="text4" disabled><br>
<br>
<p>复选框</p>
<input type="checkbox" value="游泳">游泳<br>
<input type="checkbox" value="健身" checked>健身<br>
<input type="checkbox" value="电子游戏" checked>电子游戏<br>
<br>
<p>下拉框</p>
<select id="语言">
<option value="java" selected>java语言</option>
<option value="python">python语言</option>
<option value="c">c语言</option>
</select>
<br>
<p>功能按钮</p>
<input type="button" value="设置可用的text的value是hello" id="btn1">
<br>
<button id="btn2">显示被选中的复选框中的值</button>
<br>
<button id="btn3">显示选中下拉列表框的值</button>
</body>
</html>
函数：
1、val
操作数组中dom对象的value属性
$(选择器).val()：无参数调用形式，读取数组中第一个dom对象的value属性值
$(选择器).val(值)：有参形式调用；对数组中所有dom的value属性进行统一赋值
2、text
操作数组中所有的dom对象的【文字显示内容属性】
$(选择器).text()：无参数调用，读取数组中所有dom对象的文字显示内容，将得到的内容拼接为一个字符串返回
$(选择器).text(值)：有参数形式，对数组中所有dom对象的文字显示内容进行统一赋值
3、attr
对val、text之外的其他属性操作
$(选择器).attr("属性名"):获取dom数组第一个对象的属性值
$(选择器).attr("属性名","值"):对数组中所有dom对象的属性设为新值
4、remove
$(选择器).remove()：将数组中所有dom对象及其子对象一并删除
5、empty
$(选择器).empty():将数组中所有dom对象的子对象删除
6、append
为数组中所有dom对象添加子对象
$(选择器).append("<div>我动态添加的div</div>")
7、html
设置或返回被选元素的内容（innerHTML--html文件中写的内容）
$(选择器).html()：无参数调用，获取dom数组第一个匹配元素的内容
$(选择器).html(值)：有参数调用，用于设置dom数组中所有元素的内容
8、each
each是对数组，json 和 dom数组等的遍历，对每个元素调用一次函数
语法1：$.each( 要遍历的对象，function(index,element) {处理程序} )
语法2：jQuery对象.each( function(index,element) {处理程序} )
$：相当于java的一个类名
each：就是类中的静态方法
index：数组的下标
element：数组的对象
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
background: yellow;
}
</style>
<script type="text/javascript" src="js/jquery-3.6.4.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//使用remove：删除父和子所有的dom对象
$("select").remove();
})
$("#btn2").click(function(){
//使用empty：删除子dom对象
$("select").empty();
})
$("#btn3").click(function(){
//使用append(值)：增加dom对象
//$("#fatcher").append("<input type='button' value='我是增加的按钮'/>");
//增加一个table
$("#fatcher").append("<table border=1><tr><td>第一列</td><td>第二列</td></tr></table>");
})
$("#btn4").click(function(){
//使用html()：获取数组中第一个dom对象的文本值（innerHTML）
alert($("span").html());
})
$("#btn5").click(function(){
//使用html(值)：设置所有选中dom对象的文本值
$("span").html("我是新的<b>数据</b>");
})
$("#btn6").click(function(){
//循环普通数组
var arr = [1,2,3];
$.each(arr,function(index,element){
alert("循环变量："+index+"====数组成员"+element);
})
})
$("#btn7").click(function(){
//循环json
var json = {"name":"张三","age":21};
$.each(json,function(i,n){
alert("i是key="+i+"，n是value="+n);
})
})
$("#btn8").click(function(){
//循环json
var domArray = $(":text");
//语法1
// $.each(domArray,function(i,n){
// //n是数组中的dom对象
// alert("i="+i+"，n="+n.value);
// })
//语法2
domArray.each(function(i,n){
alert("i="+i+"，n="+n.value);
})
})
})
</script>
</head>
<body>
<input type="text" value="刘备"/>
<input type="text" value="关羽"/>
<input type="text" value="张飞"/>
<br>
<br>
<select>
<option value="老虎">老虎</option>
<option value="狮子">狮子</option>
<option value="豹子">豹子</option>
</select>
<br>
<br>
<select>
<option value="亚洲">亚洲</option>
<option value="美洲">美洲</option>
<option value="欧洲">欧洲</option>
</select>
<br>
<br>
<div id="fatcher">我是第一个div</div>
<br>
<span>我是mysql<b>数据库</b></span>
<br>
<span>我是jdbc</span>
<br>
<br>
<button id="btn1">使用remove删除父和子对象</button>
<br>
<br>
<button id="btn2">使用empty删除子对象</button>
<br>
<br>
<button id="btn3">使用append增加dom对象</button>
<br>
<br>
<button id="btn4">获取第一个dom的文本值</button>
<br>
<br>
<button id="btn5">设置span的所有dom的文本值</button>
<br>
<br>
<button id="btn6">循环普通数组</button>
<br>
<br>
<button id="btn7">循环json</button>
<br>
<br>
<button id="btn8">循环dom数组</button>
</body>
</html>
Ajax:
ajax函数：
1）$.ajax()：jQuery中实现ajax的核心函数
2）$.post()：使用post方式发送ajax请求
3）$.get()：使用get方式发送ajax请求
$.post() 和 $.get() 内部都是调用的 $.ajax()
$.ajax()函数的使用：
函数的参数表示请求的url、请求的方式、参数值、回调方法等信息。参数是一个json结构。
例如：$.ajax( { 名称1:值1, 名称2:值2...} )
例如：
$.ajax( {
async:true,
contentType:"application/json",
data:{"name":"zhangsan","age":21},
dataType:"json",
error:function(){
请求出现错误时，执行的函数
},
success:function(data){
//data 就是responseText，是jQuery处理后的数据
请求成功时，执行的函数
},
url:"www.baidu.com",
type:"get"
} )
async：布尔值，表示请求是否异步处理。默认是true
contentType：发送数据到服务器时所使用的数据类型，可以不写。例如application/json
data：规定要发送到服务器的数据，可以是：字符串、数组，多数是json
dataType：期望从服务器响应的数据类型
error()：如果请求失败要运行的函数
success(resp)：当请求成功时运行的函数，其中resp是自定义的形参名
type：规定请求的类型（GET或POST等）。默认是GET,GET/POST不区分大小写
url：规定发送请求的url
$.get() 和 $.post() 函数的使用：
$.get()方法使用 HTTP GET请求从服务器加载数据
$.post()方法使用 HTTP POST请求从服务器加载数据
语法：$.get(url,data,function(resp),dataType)
$.post(url,data,function(resp),dataType)
- 标题: WEB前端基础知识的学习
- 作者: 宣胤
- 创建于: 2023-04-19 00:21:08
- 更新于: 2023-04-24 14:09:30
- 链接: http://xuanyin02.github.io/2023/04196383.html
- 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论