HTML+CSS+JS+JQuery基础

原创 已于 2025-01-11 16:10:10 修改 · 954 阅读 · 19 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#html #css #javascript #jquery #前端
于 2024-11-19 19:14:53 首次发布

HTML基础

1.HTML概念

​ 网页，是网站中的一个页面，通常是网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就是由网页组成的。通常我们看到的网页都是以htm或html后缀结尾的文件，俗称 HTML文件。

2.HTML能做什么

HTML使用标记标签来描述网页,展示信息给用户

  • 展现音频,视频,图片
  • 表格,列表
  • 超链接

3.HTML书写规范

  • HTML标签是以尖括号包围的关键字 例如<a> <img>
  • HTML标签通常是成对出现的，有开始就有结束
  • HTML通常都有属性，格式:属性＝‘属性值’(多个属性之间空格隔开)
    • 属性放在开标签内
    • <a href="" target=""> </a>
  • HTML标签不区分大小写,建议全小写
  • HTML标签支持合理的嵌套
  • 开闭标签之间加要展示的内容
  • 文件后缀是html,写完后使用浏览器打开
<marquee>今天有雾霾</marquee>

4.HTML基本标签

4.1结构(骨架)标签[***]

<!--  ctrl + ?快捷键       html的注释  注释的不执行，起到解释代码的作用 -->
  <!-- html标签是根标签 -->
<html>
    <!-- html中有一个子标签 是 head  网页的头标签 -->
    <head>
        <!--meta这个标签是 设置中文的编码集 -->
        <meta charset="utf-8">
        <!-- 设置导航栏中的内容 -->
        <title>哈哈</title>
    </head>
    <!-- html还有一个子标签 是body  网页正文 -->
    <body>
        嘿嘿 第一次写哦
    </body>
</html>

4.2排版标签[***]

  • 用于简单页面布局

  • 注释标签： 快捷键 ctrl + ?

  • 换行标签：< br> (单标签，没有行间距)

  • 段落标签: < p>文本文字

    • 属性：align对齐方式(left、center、right)

  • 分隔线标签：< hr/> 单标签

    • 属性：

      width 水平长度

      • 像素(px)，固定长度

      • 百分比(%)，长度随浏览器窗口变化

      size 水平粗细

      color 颜色

      align 对齐方式

劝学  
	颜真卿
-----------
三更灯火五更鸡,
正是男儿读书时.
黑发不知勤学早,
白首方悔读书迟.

	<h2>劝学</h2>
    &nbsp;&nbsp;&nbsp;&nbsp;颜真卿
    <hr width="130px" align="left">
    三更灯火五更鸡,<br>
    正是男儿读书时.<br>
    黑发不知勤学早,<br>
    白首方悔读书迟.<br>

4.3块标签(div，span)[***]

标签代码描述
div< div></ div>行级块标签，独占一行，换行
span< span></ span>行内块标签，所有内容都在同一行

4.4基本文字标签(font)

font标签处理网页中文字的显示方式

属性名代码描述
size< font size=“7”></ font>用于设置字体的大小，最小1号，最大7号
color< font color=“#f00”></ font>用于设置字体的颜色
face< font face=“宋体”></ font>用于设置字体的样式

4.5标题标签(h1)

随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行

标签代码描述
h1< h1></ h1>1号标题，最大字号
h2< h2></ h2>2号标题
h3< h3></ h3>3号标题
h4< h4></ h4>4号标题
h5< h5></ h5>5号标题
h6< h6></ h6>6号标题，最小字号

4.6 列表标签[***]

无序列表：使用一组无序的符号定义， < ul>< /ul> 中写子标签 li标签

<ul type="circle">
    <li></li>
</ul>
属性值描述用法举例
circle空心圆< ul type=“circle”>< /ul>
disc实心圆< ul type=“disc”>< /ul>
square黑色方块< ul type=“square”>< /ul>

有序列表：使用一组有序的符号定义， < ol>< /ol>

<ol type="a" start="1">
    <li></li>
</ol>
属性值描述用法举例
1数字类型< ul type=“1”>< /ul>
A大写字母类型< ul type=“A” >< /ul>
a小写字母类型< ul type=“a”>< /ul>
I大写古罗马< ul type=“I”>< /ul>
i小写古罗马< ul type=“i”>< /ul>

列表嵌套：无序列表与有序列表相互嵌套使用

4.7图片标签(img)[***]

在页面指定位置处中引入一幅图片， < img />

属性名描述
src引入图片的地址
width图片的宽度
height图片的高度
border图片的边框
align与图片对齐显示方式【left, right】
alt提示信息

路径问题:

  • ./ 当前文件夹 .
  • …/ 上一层文件夹

4.8超链接(a)[***]

  • 在页面中使用链接标签跳转到另一页面

  • 标签： < a href=“”>< /a>

  • 属性：href:跳转页面的地址(跳转到外网需要添加协议)

  • 设置跳转页面时的页面打开方式，target属性

    • _blank在新窗口中打开
    • _self在原页面中打开

4.9表格标签(table)[***]

普通表格(table,tr,td)

table标签中有子标签 tr（行） tr标签中有子标签td(列)标签

<table> <!--  表格 -->
	<tr> <!--  table row 行 -->
		<td></td> <!-- table data单元格数据 -->
	</tr>
</table>

表格的列标签(th)：内容有加粗和居中效果

<table>
	<thead>  <!-- 表头,一般用在第一行-->
		<th></th> <!-- table head-->
	</thead>
</table>

合并行：rowspan

<table>
	<tr>
		<td rowspan="合并的行数"></td>
	</tr>
</table>

合并列:colspan

<table>
	<tr>
		<td colspan="合并的列数"></td>
	</tr>
</table>

5.HTML表单标签[***]

5.1form常用属性

  • action表示动作，值为服务器的地址，把表单的数据提交到该地址上处理
  • method:请求方式：get 和post
    • get:
      • 地址栏,请求参数都在地址后拼接 path?name=张三&password=23456
      • 不安全
      • 效率高
      • get请求大小有限制，不同浏览器有不同，但是大约是4KB；一般情况用于查询数据
    • post：
      • 地址栏：请求参数单独处理。
      • 安全可靠些
      • 效率低
      • post请求大小理论上无限；一般用于插入删除修改等操作
  • enctype:表示是表单提交的类型
    • 默认值：application/x-www-form-urlencoded 普通表单
      • multipart/form-data 多部分表单(一般用于文件上传)​

5.2input元素

属性值描述代码
text单行文体框< input type=“text”/> 默认的
password密码框< input type=“password”/>
radio单选按钮< input type=“radio”/>
checkbox复选框< input type=“checkbox”/>
date日期框< input type=“date”/>
time时间框< input type=“time”/>
datetime日期和时间框< input type=“datetime”/>
email电子邮件输入< input type=“email”/>
file文件上传< input type=“file”/>
hidden隐藏域< input type=“hidden”/>
submit表单提交按钮< input type=“submit”/>
button普通按钮< input type=“button”/>
reset重置按钮< input type=“reset”/>

input标签中属性

  • value 输入框的值
  • name 输入框值的key,没有name属性,将来后台服务器没有办法接收数据

5.3select(下拉列表)

  • 单选下拉列表：< select>< /select>

  • 默认选中属性：selected=“selected”

    • ps: HTML5以后,属性名等于属性值的属性,可以简写属性即可
<select>
    <option selected="selected">内容</option>
    ...
    <option></option>
</select>
  • 多选下拉列表属性： < select></ select>
  • 多选列表：multiple=“multiple”

5.4textarea(文本域)

多行文本框： < textarea cols=“列” rows=“行”>< /textarea>

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例</title>
   
</head>
<body>
    
    <div class="div1">
    <form action="https:/www.baidu.com" method="get">
    <table border="0" width="500px" align="center">
       <tr>
        <td align="right"><font>name:&nbsp;&nbsp;</font></td>
        <td><input type="text" name = "user" ></td>
       </tr>
       <tr>
        <td align="right">pass:&nbsp;&nbsp;&nbsp;</td>
        <td><input type="password" name = "pwd"></td>
       </tr>
       <tr>
        <td align="right">repass:</td>
        <td><input type="password" name = "repwd"></td>
       </tr>
       <tr>
        <td align="right">gender:</td>
        <td><input type="radio" name = "sex" value="1"> 男  <input type="radio" name = "sex" value="0"> 女</td>
       </tr>
       <tr>
        <td align="right">hobby:</td>
        <td><input type= "checkbox" name = "hobby" value="1">学习
            <input type= "checkbox" name = "hobby" value="2">编程
            <input type= "checkbox" name = "hobby" value="3">工作</td>
       </tr>
       <tr>
        <td align="right">birth:&nbsp;&nbsp;</td>
        <td><input type="date" placeholder="YYYY年MM月DD日" name= "birthday"></td>
       </tr>
       <tr>
        <td align="right">salary:</td>
        <td><input type="text" name = "sal"></td>
       </tr>
       <tr>
        <td align="right">学历:&nbsp;&nbsp;&nbsp;</td>
        <td><select name="edu" multiple>
            <option value="大专">大专</option>
            <option value="本科">本科</option>
            <option value="硕士">硕士</option>
            <option value="博士">博士</option>
        </select></td>
       </tr>
       <tr>
        <td align="right">info:&nbsp;&nbsp;&nbsp;&nbsp;</td>
        <td><textarea name="info" placeholder="这家伙很懒，什么也没留下" ></textarea></td>
       </tr>
       <tr>
        <td align="right"><input type="submit"></td>
       </tr>
       
    </table>
</form>
</div>
</body>
</html>

CSS基础

1.CSS简介

  • CSS :全称：Cascading Style Sheets 层叠样式表,定义如何显示HTML元素
  • 多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的应用优先级高的，不冲突的共同作用

CSS能干什么？

  • 修饰美化html网页。
  • 外部样式表可以提高代码复用性从而提高工作效率。
  • html内容与样式表现分离，便于后期维护。

2.CSS书写规范

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

  • 选择器通常是您需要改变样式的 HTML 元素。
  • 每条声明由一个属性和一个值组成。

2.1CSS基础语法

选择器｛属性：值; 属性:值…… ｝

css_selector

<!-- 标签选择器 -->
h1{
	color:red;
    font-size:20px
}
<!-- 类选择器 -->
.btn{
    color:red
}
<!-- id选择器-->
#stu{
    color:black
}

3.CSS引入方式

3.1内嵌方式(内联方式)

<a href="#" id="a1" style="color: red;">淘宝首页</a>

image-20231113112314702

3.2内部方式

在head标签中使用style标签引入css

<style type=“text/css”> //告诉浏览器使用css解析器去解析
	div{
        color:red;
        font-size:50px
     }
</style>

image-20231113112343138

3.3外部引入

将css与html分开写，让css成为一个单独的css文件，然后在html页面标签中使用link引入

创建单独文件 div.css
内容示例：div{color:green;font-size:50px}
引用语句写在head标签内部

rel:代表当前页面与href所指定文档的关系[固定] type:文件类型，告诉浏览器使用css解析器去解析[固定] href:css文件地址

image-20231113112503635

4.选择器

4.1基本选择器【***】

基本选择器

  • 元素选择器(标签名)
  • id选择器(#)
  • 类选择器(.)

元素选择器：(标签名选择器)

  • 在head中使用style标签引入
  • 在其中声明元素选择器
 标签名{
     属性:属性值
 }

<style type="text/css">
    span{color: red;font-size: 100px}
</style>

id选择器：

  • 给需要修改样式的html元素添加id属性标识
  • 在head中使用style标签引入
  • 在其中声明id选择器
 #id{
     属性:属性值
}

创建id选择器：
	<div id="s1">hello,everyone!</div>
	<div id="s2">hello,everyone!</div>
    <div id="s3">hello,everyone!</div>
根据id选择器进行html文件修饰 
    <style type="text/css">
		#s1{color: red;font-size: 100px}
		#s2{color: green;font-size: 100px}
		#s3{color: blue;font-size: 100px}
</style>

class选择器：

  • 给需要修改样式的html元素添加class属性标识
  • 在head中使用style标签引入
  • 在其中声明class选择器
 .class名{
 	属性:属性值
	}

创建class选择器：
    <div class="s1">hello,everyone!</div>
    <div class="s2">hello,everyone!</div>
    <div class="s3">hello,everyone!</div>
根据id选择器进行html文件修饰：
    <style type="text/css">
        .s1{color: purple;font-size: 100px}
        .s2{color: pink;font-size: 100px}
        .s3{color: yellow;font-size: 100px}
    </style>

【注意：】以上基本选择器的优先级从高到低： id选择器>class选择器>元素选择器

4.2属性选择器

  • 根据元素的属性及属性值来选择元素。
  • 在head中使用style标签引入在其中声明
htm标签[属性='属性值']{
    css属性:css属性值;
 }

 html标签[属性]{
     css属性:css属性值;
 }

	<form name="login" action="#" method="get">
        <font size="3">用户名：</font>
        <input type="text" name="username" value="zhangsan"><br>
		<font size="3">密码：</font>
        <input type="password" name="password" value="123456"><br/>
        <input type="submit" value="登录">
	</form>
head中书写：
    <style type="text/css">
        input[type='text'] {
            background-color: pink;
        }
        input[type='password'] {
            background-color: yellow;
        }
        font[size] {
            color: green
        }
        a[href] {
            color: blue;
        }
	</style>

5.CSS属性

5.1文字属性

属性名取值描述
font-size数值设置字体大小（像素/百分比）
font-family默体、宋体、楷体等设置字体样式
font-stylenormal正常; italic斜体;设置斜体样式
font-weight100~900数值;bold;bolder;粗体样式

5.2文本属性

属性名取值描述
color十六进制;表示颜色的英文单词;设置文本颜色
text-indent5px缩进5像素;20%缩进父容器宽度的百分之二十;缩进元素中文本的首行
text-decorationdnone;underline;overline;blink;文本的装饰线
text-alignleft;right;center文本水平对齐方式
word-spacingnormal;固定值;像素英语单词之间的间隔,得有空格
line-heightnormal;固定值;像素设置文本的行高

5.3背景属性

属性名取值描述
background-color16进制;用于表示颜色的英语单词;设置背景色
background-imageurl(https://blog.csdn.net/%E2%80%98%E5%9B%BE%E7%89%87%E8%B7%AF%E5%BE%84%E2%80%99)设置背景图片
background-repeatrepeat-y;repeat-x;repeat;no-repeat;设置背景图的平铺方向
background-positiontop;bottom;left;right ; center;改变图像在背景中的位置
background-size像素;百分比设置图片大小

5.4列表属性

属性名取值描述
list-style-typedisc等改变列表的标识类型
list-style-imageurl(https://blog.csdn.net/%E2%80%9C%E5%9B%BE%E7%89%87%E5%9C%B0%E5%9D%80%E2%80%9D)用图像表示标识

5.5尺寸属性

width:宽度

height:高度

5.6现实属性

显示属性display ，以下是常用取值：

  • none:不显示,即隐藏了
  • block:块级显示,占一行
  • inline:行级显示,占部分

5.7定位属性

使用的是css属性position,属性值有

  • relative (相对)
  • absolute (绝对)
  • fixed (固定)
相对定位(relative)

相对定位(relative)：元素框偏移某个距离，**相对于父元素**中其正常位置(相对于自己)进行定位。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

绝对定位(absolute)

绝对定位(absolute)：元素框从文档流完全删除，并相对于最近的定位祖先元素进行定位（祖先元素需要定位）。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框。

绝对和相对定位: 最主要的区别

  • 相对定位后,原来位置还在
  • 绝对定位后,原来位置没了,其他标签元素内容会顶上
固定定位(fixed)

固定定位(fixed)：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

6.CSS盒子模型[***]

box

6.1边框属性

属性名取值描述
border-stylesolid;double;dashed;dotted等设置边框的样式
border-color16进制;用于表示颜色的英文;设置边框的颜色
border-width数值设置边框的粗
border同时设置线型,颜色,尺寸

6.2外边框属性(margin)

margin：外间距,边框和边框外层的元素的距离 (相对于父级元素定位)

属性名值描述
margintop;right;bottom;left四个方向的距离
margin-top数值上间距
margin-bottom数值下间距
margin-left数值左间距
margin-right数值右间距

6.3内边距属性(padding)

padding：内间距,元素内容和边框之间的距离((top right bottom left))

属性值取值描述
padding-left
padding-right
padding-top
padding-bottom
padding

7.浮动(float)

#d1 {
         background-color: aqua;
         float: left;
     }

JS(JavaScript)基础

1.JS介绍

  • JavaScript一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。
  • 它的解释器被称为JavaScript引擎，作为浏览器的一部分，广泛用于客户端的脚本语言，用来给HTML网页增加动态功能。

2.JS引入方式

2.1在标签内部引入(内嵌)

  <body>
    <!-- 
        onclick是html的属性,是事件属性,在这里是鼠标点击事件
        属性值内部写的是js代码
        alert() 是js的弹窗函数
     -->
    <button onclick="alert('警告!!!!')">按钮</button>
  </body>

2.2使用< script >标签引入

css写样式,需要把style标签写在head标签内

但是写js代码的script标签,可以写在html页面的任何位置,head标签内,body标签内都可,建议放在**< /body>** 后面

<!-- 引入方式2:    文件使用`<script>`标签引入js -->
    <script>
        // js的注释和Java的注释差不多！！！  ctrl + ?
        var btn = document.getElementById("btn")//  获取上面id叫btn的button对象
        /*
        function() {}  这个是固定的语法格式！！！  后面要学的

        */
        btn.onclick = function () {//点击事件
            alert("哈哈我又来了")//功能是  弹框功能
        }
    </script>

2.3js文件引入

1 创建一个后缀为.js的文件

2 文件内写js代码

3 在html文件内使用<script>标签引入该js文件

4 引入js文件的位置,在html中也是任意的

5 作为引入js文件的<script>标签,不能在其中间写js代码

<body>
    <!-- 引入js文件 -->
    <script src="test.js"></script>
  </body>

3.JavaScript基本语法

3.1变量

  • 在JavaScript中，任何变量任何类型都用var关键字来声明，var是variable【变量的意思】的缩写。
  • var是声明关键字，a是变量名，语句以分号结尾(其实可有可无)。
  • 这里值得注意的是，JavaScript中的关键字，不可以作为变量名。就像在Java中你不可以写"int int=1;"一样。
var a;

JavaScript是弱类型语言,声明时不需要设置变量的类型,赋值时就可以赋值任何类型

JS控制台输出语句 console.log()

let 局部变量,const 常量

// 3var是全局变量,let是局部变量,const常量
if(1>0){
let lll = 1;
var vvv = 1;
lll++;
vvv++;
const ccc = 1;
// ccc = 2;// 此行错误,常量不能再分配值
}
// console.log("let",lll); // 此行错误,lll是if内的局部变量,出了if不能用
console.log("vvv",vvv);

3.2基本数据类型

基本类型有五种

  • 数字(number) 既包含整数 也包含小数
  • 字符串(string) 使用 双引号或者单引号引起来的数据叫字符串
  • 布尔型(boolean) 就是true （对） 或者是false （错）
  • 未定义(undefined)
  • 空(null) 是object类型的数据
<script>     
	  var x = 1; // number类型
      var x2 = 1.1; // number类型
      var y = "JavaScript"; // string类型
      var z = true; // boolean型
      // js有个函数,typeof(),这个函数可以返回变量的类型
      console.log(typeof x);
      console.log(typeof x2);
      console.log(typeof y);
      console.log(typeof z);
      console.log(typeof i); // undefined未定义
    </script>

3.3JSON类型[***]

其实JSON类型是借鉴Java中的对象的思想.

JS中的引用类型其实就是JSON,全称是JavaScript Object Notation，叫做JavaScript对象标记，也就是说，在JavaScript中，JSON是用于标记一个对象的。

语法格式: {id:1,age:18,sex:true,name:“zs”,phone:[110,120],child:{id:1,age:18}}

  • JSON对象使用大括号,{}
  • 大括号内,是键值对,键值对使用是冒号分割.{key:value}
  • 键正常写,值得写法区分数字,字符串,布尔值,数组,对象等
    • {id:18} 数字直接写
    • {name:“张三”} 字符串需要双引号
    • {sex:true} 布尔值直接写
    • {arr:[1,2,3]} 数组使用[]
    • {obj:{}} 对象使用{}
  • 大括号内,可以同时写多个键值对,中间使用逗号隔开
    • {id:18,name:“李四”,sex:true}
<!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>
    
</body>
<script>
    //入门案例
    //第一种json数据
    var stu = {"name":"张三", "age":12, "sex":"男"};
    console.log(stu)//object类型的数据
    //因为json是存储数据的！！！  可以获取名字
    console.log(stu.name)//对象.键   stu的name是啥   .是"的"意思

    //第二种json数据  多个学生应该放在数组[]中 也是一种json数据  只不过有数组形式！！！
    var stus = [
        {"name":"张三", "age":12, "sex":"男"}, 
        {"name":"李四", "age":12, "sex":"女"}, 
        {"name":"王五", "age":14, "sex":"男"}
    ];
    //取数据
    console.log(stus[1].name)// 找到stus的第二个数据是一个对象，然后对象.键 获取值即可

    //稍微再复杂点数据
    var stu1 = {"name":"狗蛋", "age":17, "hobby": ["唱歌", "跳舞", "踢足球"]}
    console.log(stu1.hobby[1])
    //总结：碰到{}就用点  碰到[]就用下标！！！
    var stu2 = {
        "name":"xixi", 
    "age":12, 
    "info":{
        "height":156,
        "hobby":["钓鱼", "喝茶", "打太极"]
    }
  
}
console.log(stu2.info.hobby[1])


//后端返回给前端的json数据
var res = {
    "code":200,
    "msg":"请求成功",
    "data":[
        {"name":"张三", "subject":["高尔夫", "钓鱼", "挖掘机"]},
        {"name":"张三1", "subject":["高尔夫1", "钓鱼1", "挖掘机1"]},
        {"name":"张三2", "subject":["高尔夫2", "钓鱼2", "挖掘机2"]}
    ]
}
console.log(res.data)//数组
console.log(res.data[2])//对象
console.log(res.data[2].subject[2])

    
</script>
</html>

3.4数组

数组也是用来存储多个数据

  • 创建时可以是空数组,后面也可以继续赋值
  • 数组没有长度限制
  • 数组存储的类型没有限制

创建数组的语法

  • var 名字 = []
  • var 名字 = new Array()

取值赋值的语法

  • 数组名[下标]
<!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>
    
</body>
<script>
    //第一种声明方式
    var a = [];//空的数组
    var b = [1, 2,  3, 4];//数组中存放的数据类型是一致的
    var c = [1, true, "李四"];//数组中存放的额数据类型不一致！！！
    //第二种声明方式[很少用！！！]
    var arr1 = new Array();//空的数据
    var arr2 = new Array(1, true, "张三");

    //3.数组取值  通过下标来取的！！！
    console.log(b[0])
    console.log(c[2])//控制台打印的
    document.write(arr2[2]);//输出到网页上
    
</script>
</html>

3.5日期类型

创建日期对象,

日期对象提供了方法可以获得/设置日期信息

<script>
    var date = new Date();//创建日期对象  当前日期
    console.log(date)
     // 创建时间时指定毫秒值,时间从1970/01/01 00:00:00   [了解！！！]
     var date1 = new Date(1000 * 60 * 60 * 24);
     console.log(date1)
     // 以指定年月日创建日期,月份特殊!!!一月是 0。十二月是11。
     var date2 = new Date(2022, 10, 23);
     console.log(date2);//Wed Nov 23 2022 00:00:00 GMT+0800 (中国标准时间)
     //以上讲的设置日期数据
     //获取日期数据
     console.log(date.getDay());//一周的第几天
     console.log(date.getMonth() + 1);//获取月是0-11
     console.log(date.getDate());//一个月的第15天！！！
     console.log(date.getFullYear());
     console.log(date)
     var localDate = date.toLocaleDateString();//年月日
     console.log(localDate)
     var localTime = date.toLocaleTimeString();//时分秒
     console.log(localTime)
     var localString = date.toLocaleString();//年月日  时分秒
     console.log(localString)
</script>

3.6运算符

算术运算
关系运算
逻辑运算
三目运算

以上这些运算操作,与java中操作基本一样

算数运算符

名称运算符
加+
减-
乘*
除/
求余%
赋值=
加等+=
减等-=
除等/=
乘等*=
求余等%=
自增++
(++在前先+1，后执行；++在后先执行后+1)
自减–
(–在前先-1，后执行；–在后先执行后-1)

关系运算符

运算符
等于(内容相等即可)==
小于<
小于或等于<=
大于>
大于或等于>=
不等于!=
值和类型相同===
<script>     
	  // ================关系运算=================
      // > < >= <= == != ===
      // 关系运算的结果是布尔值: true / false
      console.log(1 > 0);
      console.log(1 < 0);
      console.log(1 <= 0);
      console.log(1 >= 0);
      // == 判断[值]是否相等  不看[类型]
      console.log("1 == 1   " + (1 == 1));
      console.log("1 == '1'  " + (1 == "1"));

      // === 判断[值]和[类型]是否都相等
      console.log("1 === '1'  " + (1 === "1"));
      console.log("1 === 1  " + (1 === 1));
    </script>

逻辑运算符

名称运算符描述
与&&要求表达式左右两边的表达式同为true，整体结果才为true
或||要求表达式左右两边的表达式只要有一个为true，整体结果就为true
非！将布尔值取反操作

三目运算符

<script>      
		console.log("================三目运算=================");
      // 前面的表达式如果为true,就执行冒号左边
      // 如果前面的表达式为false,就执行冒号后边
      console.log(1 > 0 ? "111" : "000");
    </script>

3.7分支

  • if
  • if-else
  • if-elseif-elseif-else
  • switch

与java一样

3.8循环

  • while
  • dowhile
  • for

与java一样

<script>

//    *
//   ***
//  *****
// *******
    for (var a = 0; a < 5; a++) {
        for (var b = 0; b < 5 - a; b++) {
            document.write("&nbsp;")
        }
        for (var c = 0; c < a * 2 + 1; c++) {
            document.write("*")
        }
        document.write("<br>")
    }
    document.write("<br>")

    // 九九乘法表
    for (var i = 0; i < 10; i++) {
        for (var j = 1; j <= i; j++) {
            document.write(j + "*" + i + "=" + j * i + "&nbsp;&nbsp;&nbsp;&nbsp;");
        }
        document.write("<br>")
    }

</script>

3.9函数[***]

函数可以理解为功能，一个函数代表一个功能

语法格式

function 函数名 (参数1，参数2，......){
 //执行代码
}
/*
1.function是固定  是一个关键字
2.函数名是自己定义的！！！
3.() 中可以放参数，也可以不放，不放的发就是一个无参的函数
4.如果方法体写了return 则是有返回值的  如果没有return就是无返回值
*/

 <script>
      // 1 无参无返回值
      function fun1() {
        console.log("无参无返回值...");
      }
      // 调用方法,方法名直接调用
      fun1();

      // 2 有参无返回值
      function fun2(a) {
        console.log("fun2执行");
        console.log(a);
      }
      // 方法有参数,调用时不传参数,方法能执行,但是变量显示未定义
      // 方法有参数,调用时实参多于形参,方法能执行,多余的参数无意义
      fun2(10, 20);

      // 3 无参有返回值
      function fun3() {
        return 200;
      }

      var result = fun3();
      console.log(result);

      // 4 有参有返回值
      // 设计方法,传入2个参数,相加后返回
      
    </script>

特殊的函数定义:匿名函数(没有函数名)

<body>
    <button onclick="alert('这就是个弹框')">点击</button>
    <button id="btn">点击1111</button>
    <button id = "btn1">点击22222</button>
</body>
<script>
    var btn = document.getElementById("btn");
	//这是一个匿名函数
    btn.onclick = function(){
        alert("噜噜噜噜")
    }
</script>

4.弹框函数

4.1警示框(alert)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<button onclick="alert('这就是个警示弹框')">点击</button>

4.2确认框(confirm)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

// 该函数有返回值,是ture/false
// 点击确定,返回true,点击取消返回fasle
  /* 确认框
    如果您希望用户验证或接受某个东西，则通常使用“确认”框。

    当确认框弹出时，用户将不得不单击“确定”或“取消”来继续进行。

    如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false。
    */
var btn1 = document.getElementById("btn1")
    btn1.onclick = function(){
        if(confirm("确认删除?")){
            console.log("确认删除")
        }else{
            console.log("取消删除")
        }
    }

4.3 输入框(prompt)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

// 会弹出对话框,输入值后点击确定返回输入框的值
// 点击取消返回的就是null
 /*
   提示框
    如果您希望用户在进入页面前输入值，通常会使用提示框。
    当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续进行。

如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL。
    */
var btn2 = document.getElementById("btn2")
    btn2.onclick = () => {
       var a=prompt("请输入:")
       console.log(a)
        return a;
    }

5.事件[***]

5.1事件介绍

事件: 就是发生在浏览器(页面)上一件事,键盘事件,鼠标事件,表单事件,加载事件等等

5.2事件绑定

事件要想发生,就得将事件和标签先绑定(确定哪个标签发生什么事情,又有什么响应)

一个完整的事件有三部分

  • 事件源(标签),哪里发出的事.
  • 什么事(事件)
  • 响应(动作效果)

事件绑定,其实就是事件和标签绑定

  • 方式1: 事件源,事件,响应在一起(都写在标签内)
  • 方式2: 事件源,事件在一起(写标签内),响应抽取函数(写script)
  • 方式3: 事件和响应全部抽取(标签是单独标签,事件和响应写在js中)
<body>
    <!-- 事件绑定 方式1: 事件源,事件,响应在一起 -->
    <button onclick="alert('嘿嘿')">按钮1</button>   
    <button id="btn1" onclick="fun1()">按钮2</button>
    <button id= btn2>按钮3</button>
    
</body>
    <script>
    //方式2: 事件源,事件在一起,响应抽取函数
       function fun1(){
            alert("按钮222222")
        }
    //方式3【重要】: 事件和响应全部抽取
    var btn = document.getElementById("btn2")
    btn.onclick = () =>{
        alert("阿斯达")
    }
   </script>

5.3不同事件的演示

事件名称描述
onchangeHTML 元素内容改变
onblur输入框失去焦点
onfocus输入框获得焦点
onclick用户点击 （单击）HTML 元素
ondblclick用户双击HTML元素
onmouseover用户将鼠标移入一个HTML元素中
onmousemove用户在一个HTML元素上移动鼠标
onmouseout用户从一个HTML元素上移开鼠标
onkeydown用户按下键盘按键
onkeyup键盘弹起
onkeypress按压键盘
onload浏览器已完成页面的加载
onsubmit表单提交
5.3.1鼠标事件
    <script>
      var box = document.getElementById("box");
      // 鼠标移动,只要鼠标动,就会触发函数
      box.onmousemove = function () {
        console.log("鼠标移动");
      };

      // 鼠标移入,移入进一次,触发一次
      box.onmouseover = function () {
        console.log("鼠标移入");
      };

      // 鼠标离开
      box.onmouseout = function () {
        console.log("鼠标离开");
      };
    </script>
5.3.2 键盘事件
   <script>
      var i = document.getElementById("i");
      // 事件触发后,函数有对应的事件对象
      // 键盘按下
      i.onkeydown = function (event) {
        // console.log("键盘按下");
        // event是事件对象,内部包含事件的所有信息
        // console.log(event);
        // 可以获得这次键盘事件的代号,13是回车键
        if (event.keyCode == 13) {
          console.log("提交表单");
        }
      };
      // 键盘弹起
      i.onkeyup = function () {
        // console.log("键盘弹起");
      };
      // 键盘按压(与按下效果一样)
      i.onkeypress = function () {
        // console.log("键盘按压");
      };
    </script>
5.3.3表单事件[***]

是指表单中能用上的一系列事件

  • onblur 失去焦点
  • onfocus 获得焦点
  • onchange 内容改变
  • onsubmit 表单提交
<!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>
    <form action="https://www.baidu.com/" onsubmit=" return tijiao()" target="_blank">
       111 <input type="text" id="i1"> <br>
       222 <input type="text" id="i2">
       籍贯<select id="jiguan" name="jigaun">
        <option>河南</option>
        <option>河北</option>
        <option>北京</option>
      </select>
      <input type="submit" name="" id="">
    </form>
</body>
<script>
    function tijiao(){
        if(i1.value == 1 && i2.value == 2){
            return true;
        }return false;
    }
    var jiguan = document.getElementById("jiguan")
    jiguan.onchange = () =>{
        alert("已经改变籍贯")
    }
    var i1 = document.getElementById("i1")
    i1.onfocus = function(){
        console.log("获取焦点");
        
        i1.style.outline = "none"
        i1.style.borderColor = "red"
    }
    i1.onblur = function(){
        console.log("失去焦点");
        i1.style.borderColor = "pink"
    }
    var i2 = document.getElementById("i2")
    i2.onmouseover = function(){
        console.log("鼠标进入");
        
        i2.style.outline = "none"
        i2.style.borderColor = "green"
    }
    i2.onmouseout = function(){
        console.log("鼠标离开");
        
        i2.style.borderColor = "red"
    }
</script>
</html>
5.3.4加载事件(window.onload)[***]

浏览器加载页面,是瀑布式加载,即从上之下依次加载执行.
如果JS代码在上方,就有可能出现有部分下方html代码加载不到导致js操作出错

  • 加载事件是指等页面加载完后才会触发的事件
<!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>
    <script>
        function f1(){
                alert("直接加载。。。。")
            }
       
        window.onload = function(){
            var btn1 = document.getElementById("btn1")
            btn1.onclick = () =>{
            alert("必须在onload中才能使用")
         }
        }
       
    </script>
    <button onclick="f1()">按钮</button>
    <button id="btn1">按钮1111</button>
</body>
</html>

6.DOM操作

6.1概述

  • 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

  • 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

  • HTML DOM 模型被构造为对象的树：

DOM HTML 树

有了DOM树,就可以通过树来查找节点(元素),找到元素就可以对元素进行操作(修改,删除,添加),还可以操作元素的样式

  • JavaScript 能够改变页面中的所有 HTML 元素。

  • JavaScript 能够改变页面中的所有 HTML 属性。

  • JavaScript 能够改变页面中的所有 CSS 样式。

  • JavaScript 能够对页面中的所有事件做出反应。

6.2查找元素

查找元素(标签)有很多方式

  • 通过id查找元素
    • document.getElementById(“id属性值”);
    • 如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
    • 如果未找到该元素，则 x 将包含 null。
  • 通过标签名查找元素
    • 方法：getElementsByTagName(“合法的元素名”);
    • 如果找到,返回的是数组
  • 通过class查找元素
    • 方法：getElementsByClassName(“class属性的值”)
    • 如果找到,返回的是数组

6.3元素内容的查找和设置

元素内容,是指标签开闭之间的内容.

<p>这就是内容</p>
<p><span>这就是内容</span></p>

查找和设置使用的是相同的属性

  • innerHTML 获得或设置标签的内容
  • innerText 获得或设置标签的内容
<!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>
    <div id= "box" style="width: 200px; height: 200px; background-color: red;"></div>
    <button id = "btn1">按钮1</button>
    <button id = "btn2">按钮2</button>
    <br>
    <input id="input-1"><span id="tip"></span>
</body>
    <script>
        var box = document.getElementById("box")
        var btn1 = document.getElementById("btn1")
        btn1.onclick = function(){
            box.style.backgroundColor = "green"
        }
        var btn2 = document.getElementById("btn2")
        btn2.onclick = function(){
            box.style.width = "500px"
            box.style.height = "500px"
        }
        //输入框失去焦点获得数据,只有输入的admin边框变绿,后面提示绿色OK,否则边框变红,后面给出红色ERROR
        var i1 = document.getElementById("input-1")
        var tip = document.getElementById("tip")
        i1.onblur = function(){
            var val=i1.value;
            if(val == "admin"){
                 i1.style.outline = "none"
                i1.style.borderColor = "green"
                tip.innerText = "OK"
                tip.style.color = "green"
            }else{
                i1.style.borderColor = "red"
                tip.innerHTML = "ERROR"
                tip.style.color = "red"
            }
        }
    </script>
</html>

6.5元素属性的查找和设置

元素属性,是指开标签内的属性,通过dom对象直接调用操作.比如

  • domObj.id
  • domObj.name
  • domObj.value
  • …
  <body>
    <input id="i1" class="c1" type="text" value="默认值" />
    <button id="btn1">点击获得属性值</button>
    <button id="btn2">点击设置属性值</button>
    <script>
      var btn1 = document.getElementById("btn1");
      var i1 = document.getElementById("i1");

      btn1.onclick = function () {
        // 获得属性值
        console.log(i1.id); // 获得id属性值
        console.log(i1.class); // 没有获得class属性
        console.log(i1.type); // 获得type属性值
        console.log(i1.value); // 获得value属性值【重要】
      };

      btn2.onclick = function () {
        // 设置属性值
        i1.type = "password";
        i1.value = "123456";  // 【重要】
      };
    </script>
  </body>

6.5元素css样式的查找和设置

元素css样式的查找和设置,是指标签中style的属性值的获得和设置

  • 获得属性值
    • 元素对象.style.属性
  • 设置属性值
    • 元素对象.style.属性 = “”
   <input id="input-1"><span id="tip"></span>
      
    // 练习: 输入框失去焦点获得数据,只有输入的admin边框变绿,后面提示绿色OK,否则边框变红,后面给出红色ERROR
     <script>
        var input = document.getElementById("input-1");
        var tip = document.getElementById("tip");
        input.onblur = function () {
            var val = input.value;//获得输入框的值
            if(val == "admin") {
                input.style.borderColor = "green"
                tip.innerText = "OK";
                tip.style.color = "green";
            } else {
                input.style.borderColor = "red"
                tip.innerText = "ERROR";
                tip.style.color = "red";
            }
        }
    </script>

JQuery

1.jQuery概述

原生js获得dom对象: var i = document.getElementById(“i1”)

原生js获得输入框的值: i1.value

原生js设置输入框的值: i1.value = “zzz”

JQuery获得dom对象: var i = $(“#i1”)

jQuery获得输入框的值: i1.val()

jQuery设置输入框的值: i1.val(“zzz”)

jQuery是一个快速、简洁的JavaScript代码库。jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript操作方式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

1.1.jQuery特点

  • 具有独特的链式调用语法。
  • 支持高效灵活的CSS选择器。
  • 拥有丰富的插件。
  • 兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

2.jQuery的引入

2.1 直接使用

从 jQuery.com 官网或从GitHub下载合适版本（本课程使用2.1.0版本），放入项目的合适目录中，在页面中直接引用。

有两个版本的 jQuery 可供下载：

  • xxx.min.js 这种是Production version - 用于生产实际的网站中，已被精简和压缩。
  • xxx.js 这种 Development version - 用于测试和开发（未压缩，便于可读）。

jQuery 库是一个 JavaScript 文件，使用 HTML 的 < script src=“”>< /script> 标签引用

<head>
	<script src="jquery-2.1.0.js"></script>
    <!-- <script src="jquery-2.1.0.min.js"></script> -->
</head>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-2.1.0.min.js"></script>
</head>
<body>
    <div id="box" style="width: 200px; height: 200px; background-color: red;">狗蛋</div>
    <button id="btn">点击</button>
</body>
<script>
    var btn = $("#btn");//找到id为btn的按钮元素
    var box = $("#box");//找到id为box的div元素
    btn.click(function(){//给按钮添加点击事件
       box.css({"background-color":"blue","width":"300px","height":"300px"});//改变div的背景色为蓝色
    });
  
</script>
</html>

2.2 CDN引用JQuery

2.2.1 什么是CDN？

CDN的全称是Content Delivery Network，即内容分发网络 , 使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

常用CDN的JQuery引入

<script src = "https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.本地引入jQuery -->
    <!-- <script src="jquery-2.1.0.min.js"></script> -->
     <!-- 2.从网络上下载jQuery -->
      <!-- 但是必须连接网络 -->
      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>
<body>
    <div id="box" style="width: 200px; height: 200px; background-color: red;">狗蛋</div>
    <button id="btn">点击</button>
</body>
<script>
    var btn = $("#btn");//找到id为btn的按钮元素
    var box = $("#box");//找到id为box的div元素
    btn.click(function(){//给按钮添加点击事件
       box.css({"background-color":"blue","width":"300px","height":"300px"});//改变div的背景色为蓝色
    });
  
</script>
</html>

3.选择器[***]

学习JQuery,主要学习DOM操作,事件处理,动画效果,AJAX交互

其他JS语法,例如:基本数据类型,运算,分支循环,数组,日期,JSON等等基础语法一样使用.

选择器就是js中dom查找的简化

document.getElementById() --> $("#id")
document.getElementsByTagName() --> $("div")
document.getElementsByClassName() --> $(".c1")
  • 标签选择器
  • id选择器
  • 类选择器

3.1元素选择器

  • 元素选择器：jQuery 元素选择器基于元素名选取元素。

  • 示例：在页面中选取所有

    元素 

<body>
    <div>狗蛋</div>
    <div>猫咪</div>
    <span id="mySpan">小狗</span>
    <footer class="dog">haha</footer>
    <footer class="dog">hehe</footer>

    
</body>
<script>
    // 选择器
    // 1. 标签选择器
    console.log($("div")); // 输出两个div元素
    // 2. ID选择器
    console.log($("#mySpan")); // 输出id为mySpan的span元素
    // 3. 类选择器
    console.log($(".dog")); // 输出所有class为dog的元素
</script>

3.2 id 选择器

  • id选择器：jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

  • 页面中元素的 id 应该是唯一的，所以要在页面中选取唯一的元素需要通过 #id 选择器。通过 id 选取元素语法如下：

<body>
    <div>狗蛋</div>
    <div>猫咪</div>
    <span id="mySpan">小狗</span>
    <footer class="dog">haha</footer>
    <footer class="dog">hehe</footer>

    
</body>
<script>
    // 选择器
    // 1. 标签选择器
    console.log($("div")); // 输出两个div元素
    // 2. ID选择器
    console.log($("#mySpan")); // 输出id为mySpan的span元素
    // 3. 类选择器
    console.log($(".dog")); // 输出所有class为dog的元素
</script>

3.3 类选择器

  • class选择器：jQuery 类选择器可以通过指定的 class 查找元素。

  • 语法如下：

<body>
    <div>狗蛋</div>
    <div>猫咪</div>
    <span id="mySpan">小狗</span>
    <footer class="dog">haha</footer>
    <footer class="dog">hehe</footer>

    
</body>
<script>
    // 选择器
    // 1. 标签选择器
    console.log($("div")); // 输出两个div元素
    // 2. ID选择器
    console.log($("#mySpan")); // 输出id为mySpan的span元素
    // 3. 类选择器
    console.log($(".dog")); // 输出所有class为dog的元素
</script>

4.事件[***]

js中 btn.onclick = function () {}

jquery中的事件,就是将之前js中事件属性去掉on,并这些事件封装函数

4.1 常见事件

鼠标事件键盘事件表单事件文档/窗口事件
clickkeypresssubmitload
dblclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleaveblurunload

4.2 事件语法

js中
js对象.on事件 = function(){}

jq中
jq对象.事件(function(){}) 或者 jq对象.事件(()=>{})
  • jQuery 事件方法语法：

  • jq对象.事件方法(回调函数),例如

  • $(“#i1”).click(function(){})

  • $(“#i1”).click(() => {})

    • $(“#i1”)事件源
    • click 事件
    • () => {} 事件响应

4.3 鼠标事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div id="box" style="width: 200px; height: 200px; background-color: red;"></div>
</body>
<script>
    $("#box").mouseenter(function () {
        console.log("鼠标移入");
    });
    $("#box").mouseleave(function () {
        console.log("鼠标移出");
    });
    $("#box").mousemove(function (event) {
        console.log("鼠标移动");
        console.log("鼠标位置：" + event.pageX + "," + event.pageY);
    });   
    $("#box").click(function () {
        console.log("鼠标点击");
    }); 
    $("#box").dblclick(() => {
        console.log("鼠标双击");
    }); 
</script>
</html>

4.4 键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <input type="text">
</body>
<script>        
    $("input").focus(function(){
        console.log("focus");
    }).blur(function(){
        console.log("blur");
    }).keypress(function(event){
        console.log(event.which);   
        }).keydown
        (function(event){
            console.log(event.which);
        }).keyup(function(event){
            console.log(event.which);
        });
</script>
</html>

4.5 表单事件[***]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <form action="01jquery入门.html" >
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <br>     
        submit   <input type="submit" value="Submit">
    </form>
</body>
<script>
    $("#name").focus(function(){
        //css() 方法用于设置或返回被选元素的样式属性。
        $(this).css("background-color","yellow");
    }).blur(function(){
        $(this).css("background-color","white");
    });
    $("form").submit(function(event){
       return confirm("Are you sure?");
    });
</script>
</html>

4.6 加载事件

  • 加载事件,当页面加载完再触发的事件
  • js时加载事件是onload
  • 在jquery中ready来加载事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--  -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        // $(function() 加载完成后执行函数
        // $(document).ready(function(){
        //     $("#container").click(function(){
        //     $(this).css("background-color", "green");
        //     });
        // })
        // 也可以使用下面这种方式
        $(function(){
            $("#container").click(function(){
            $(this).css("background-color", "green");
            });  
        })
    </script>
</head>
<body>
   <div id="container" style="width: 200px; height: 200px; background-color: red;"></div>
</body>
</html>

5.DOM[***]

5.1 获取设置标签内容

js中 是属性

  • obj.innerHTML
  • innerText
  • value

jQuery中 都是方法

  • jq对象.html(内容)
  • jq对象.text(内容)
  • jq对象.val(内容)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
   
</head>
<body>
    <div>
        <h1>人到洛阳花似锦,骗我一辈子不还.</h1>
    </div>
    <button id="btn">点击获取标签内容</button>
    <hr>
    <input id="input-1" />
    <button id="btn-5">点击获得input中的value</button>
    <button id="btn-6">点击设置input中的value</button>
</body>
<script>
    $("#btn").click(function(){
        //获取标签内容 html()  和js的innerHTML一样
        // var html = $("div").html();//innerHTML获取标签内容
        // alert(html);
        // var text = $("div").text(); //text()获取标签内容 和js的innerText一样
        // alert(text);
        //设置标签内容
        $("div").text("<h3>天下无双，攻城略地，谁与争锋?</h3>");

    });
    $("#btn-5").click(function(){
        //获取input标签中的value js   对象.value  但是现在jquery已经封装好了 是方法val()
       var val= $("#input-1").val();
       alert(val);
    });
    $("#btn-6").click(function(){        
        //设置input标签中的value
        $("#input-1").val("hello world!");        
    }); 
</script>
<!-- 总结学了几个方法:  1.html()  获取标签内容 2.text()  获取标签内容 3.val()  获取input标签中的value 4.val()  设置input标签中的value -->
</html>

5.2 获取设置标签属性

js中

dom.属性 = 值

var a = dom.属性;

属性(attribute)操作

  • attr(name) 获得指定名字的属性
  • attr(name,value) 给指定属性设置值
  • attr(properties) 给多个属性设置值
    • properties其实是json对象
    • {key:value,key:value}
  • removeAttr(name) 移除指定属性的值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <input id="input-1" type="text" />
    <button id="btn-1">获得type的属性值</button>
    <button id="btn-2">设置type的属性值password</button>
    <button id="btn-3">设置type的多个属性值</button>
    <button id="btn-4">移除属性</button>
</body>
<script>
    $("#btn-1").click(function(){
        var type = $("#input-1").attr("type");//通过attr方法获取属性值，参数是属性名
        alert(type);
    });
    $("#btn-2").click(function(){
        $("#input-1").attr("type", "password");//通过attr方法设置属性值，参数是属性名和属性值
    });
    $("#btn-3").click(function(){
        $("#input-1").attr({"name":"username", "value":"123456", "type":"email"});//通过attr方法设置多个属性值，参数是对象，对象中的属性名和属性值
    });
    $("#btn-4").click(function(){
        $("#input-1").removeAttr("type");//通过removeAttr方法移除属性值，参数是属性名
    });
</script>
</html>

5.3 获取设置标签样式

JQuery操作样式有两种方案

  • 给标签设置class类
  • 给标签的style设置css属性

5.3.1 设置class类

通过给标签设置/删除class类来改变样式

  • addClass(class)
  • removeClass(class)
  • toggleClass(class)
 <head>
    <title>获得设置class类</title>
    <style>
      .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div id="box" class="box1">块</div>
    <button id="btn-1">设置box2样式类</button>
    <button id="btn-2">移除box2样式类</button>
    <button id="btn-3">切换样式</button>
    <script src="./js/jquery-2.1.0.js"></script>
    <script>
      $("#btn-1").click(() => {
        $("#box").addClass("box2");
      });

      $("#btn-2").click(() => {
        $("#box").removeClass("box2");
      });

      $("#btn-3").click(() => {
        // 切换box2
        // 当前有box2样式,那我就移除
        // 当前没有box2样式,那我就添加
        $("#box").toggleClass("box2");
      });
    </script>
  </body>

5.3.2 设置获得css属性

设置获得css属性

  • css(属性) 获得指定css属性值
  • css(属性,值) 设置指定属性和值
  • css(properties) 设置多个属性
  <body>
    <div id="box" style="background-color: red">块</div>
    <button id="btn-1">点击获得属性</button>
    <button id="btn-2">点击设置1个属性</button>
    <button id="btn-3">点击设置多个属性</button>
    <script src="./js/jquery-2.1.0.js"></script>
    <script>
      $("#btn-1").click(() => {
        // 获得指定css属性值
        console.log($("#box").css("background-color"));
      });
      $("#btn-2").click(() => {
        // 设置指定css属性值
        $("#box").css("background-color", "green");
      });
      $("#btn-3").click(() => {
        // 同时设置多个css属性
        $("#box").css({
          backgroundColor: "yellow",
          width: "200px",
          height: "200px",
        });
      });
    </script>
  </body>

6. 正则表达式

正则表达式(Regular expression)

js中的正则表达式对象 RegExp

  • 正则表达式是描述字符模式的对象。
  • 正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。
  • 语法：
    • var patt=new RegExp(pattern,modifiers);
    • var patt=/pattern/modifiers;

RegExp 对象方法

方法描述
compile编译正则表达式。
exec检索字符串中指定的值。返回找到的值，并确定其位置。
test检索字符串中指定的值。返回 true 或 false。

正则表达式的使用

  • test方法：搜索字符串指定的值，根据结果并返回真或假
  • exec() 方法：检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-2.1.0.min.js"></script>
</head>
<body>
    <table align="center">
        <tr>
            <td>用户名(中文)</td>
            <td><input type="text" id="name1"><span id="s1"></span></td>
        </tr>
        <tr>
            <td>用户名(英文)</td>
            <td><input type="text" id="name2"><span id="s2"></span></td>
        </tr>
        <tr>
            <td>密码(不能使用特殊字符)</td>
            <td><input type="password" id="password"><span id="s3"></span></td>
        </tr>
        <tr>
            <td>手机号</td>
            <td><input type="text" id="phone"><span id="s4"></span></td>
        </tr>
        <td>邮箱</td>
        <td><input type="text" id="email"><span id="s5"></span></td>
    </table>
</body>
<script>
    $("#name1").blur(function(){
        var name1 = $("#name1").val();
        var patt = /^[\u4e00-\u9fa5]+$/;
        if(!patt.test(name1)){
            $("#s1").html("必须为中文!");
            $("#s1").css("color","red");
        }else{
            $("#s1").html("");
            $("#s1").css("color","");
        }
    });
    $("#name2").blur(()=>{
        var name2 = $("#name2").val();
        var patt = /^[a-zA-Z]+$/;
        if(patt.test(name2)){
            $("#s2").html("");
            $("#s2").css("color","");
        }else{
            $("#s2").html("必须为英文!");
            $("#s2").css("color","red");
        }
    });
    $("#password").blur(function(){
        var pwd = $("#password").val();
        var patt =/^[^@#￥%]+$/;
        if(!patt.test(pwd)){
            $("#s3").html("不能使用特殊字符@#$%等!");
            $("#s3").css("color","red");
        }else{
            $("#s3").html("");
            $("#s3").css("color","");
        }
    });
    $("#phone").blur(function(){
        var phone = $("#phone").val();
        var patt = /^1[34578]\d{9}$/;
        if(!patt.test(phone)){
            $("#s4").html("手机号必须是数字,且11位!");
            $("#s4").css("color","red");
        }else{
            $("#s4").html("");
            $("#s4").css("color","");
        }
    })
    $("#email").blur(function(){
        var email = $("#email").val();
        var patt= /^[a-zA-Z0-9_]+@[a-zA-Z0-9_]+\.[a-zA-Z0-9_]+$/;
        if(!patt.test(email)){
            $("#s5").html("邮箱必须是xxx@xxx.xxx的格式!");
            $("#s5").css("color","red");
        }else{
            $("#s5").html("");
            $("#s5").css("color","");
        }
    });
</script>
</html>
【笔记】jQuery学习
不二D荧林仕的博客
10-15 2428
十分详细的jQuery的学习笔记，包含部分案例的知识点
HTML---JQurey的基本使用
zhoutong2323的博客
01-09 1935
jQuery是一个JavaScript库，并提供了一个简洁而强大的API，使开发人员能够更容易地操作HTML元素、处理事件和执行动画。它使用CSS选择器来选择HTML元素，并提供了大量的方法来修改和操作这些元素。jQuery还提供了大量的插件，使开发人员能够轻松地扩展其功能。这些插件包括图表、表单验证、日期选择器等等。
HTML网页中导入jquery并执行代码
weixin_42169734的博客
01-25 1783
【代码】HTML网页中导入jquery并执行代码。
HTML中的jquery
wssjiayou的博客
08-29 1933
HTML中的jquery
JQuery(二)---【使用JQuery对HTML、CSS进行操作】
zheshiyangyang的博客
04-07 2270
上面四种改变元素的方法，都有回调函数。删除元素和内容，一般可以使用以下两个。我们来看一个例子，用来区分“我们仍然使用上面所说的：“下面我们创建两个CSS类(添加内容，也可以在“
web前端基础html,css,js,jquery
weixin_57619565的博客
08-04 2272
目录 1 前端技术： 1.1 学习方法 1.1.1 前端要怎么学？ 1.1.2 前端技术栈 1.2 HBuilderX 1.2.1 介绍 1.2.2 安装 1.2.3 主题 1.2.4 字体 1.2.5 去掉px转rem提示 1.2.6
【前端基础】HTML + CSS + JavaScript 快速入门（三）：JS 与 jQuery 实战
最新发布
寻星探路的测试技术博客！！！
02-17 1175
JavaScript (简称 JS)是世界上最流行的编程语言之一。它是一种运行在客户端（浏览器）上的脚本语言。HTML: 决定网页的结构（身体）。CSS: 决定网页的样式（衣服）。JavaScript: 决定网页的交互行为（动作，如点击、输入、弹窗）。注意：JavaScript 和 Java 是两种完全不同的语言，只是名字雷同（就像雷锋和雷峰塔）。HTML搭建了页面的骨架。CSS赋予了页面美观的外表和布局。注入了灵魂，让页面可以响应用户的操作。
网页基础（HTML、CSS、JavaScript、jQuery）
weixin_55245206的博客
02-03 595
超文本标记语言（HyperText Markup Language）浏览器能够识别和解析的语言，通过标签的形式构建页面结构和填充内容-- 文档类型声明，便于浏览器正确解析标签及渲染样式 -->-- HTML文档开始的标志 -->-- 文档类型声明，便于浏览器正确解析标签及渲染样式 --> <!-- HTML文档开始的标志 --> < html > <!-- 头部设置，可在head中设置网页标题，网页选项卡图标，引入外部的资源文件，设置网页相关信息等 --> < head > <!
表严肃：前端语言基础HTML+CSS+JS，JQuery
ChangeW fafa的博客
05-19 667
课程链接HTML CSS HTML 一张网页一个html：内部是页面 body：放可见的显示元素（head存其他） head：为网页储存必要信息，不会显示，为了给浏览器-搜索引擎使用。 head-title：显示页面之上的页面标志标签：搜索引擎把title作为结果。（-style，-meta等） body-h1：概括整个页面的主题：只有一个。(h2-h6可多个)；h标签可以嵌套子元素子标签。 p：段落标签： （1）内部（一个或多个）换行会自动转为一个标签； （2）多个p标签，多个段落； （3）p标签内部也
jQuery HTML
许小珊的博客
11-21 669
 第1部分：jQuery HTML 1.获取内容和属性 --　　获取内容： text()：设置或获取所选元素的文本内容 html()：设置或获取所选元素的内容(包括HTML标记) val()：设置或获取表单字段的值 --　　获取属性： attr()：设置或获取属性值 　　ps1：以上函数不传入参数时是获取；传入参数时是设置。 　　ps2：以上函数均有最后一个参数设置为回
前端基础（jQuery）
weixin_46287157的博客
04-18 1264
HTML指的是。标记就是标签如，标签大多数都是成对出现的。HTML基本结构如下 1.1 常用标签（表格、表单、按钮等） 函数 作用 举例 结果 注释 h1~h6 标题 div div标签 通常作为块使用（页面布局） p 段落 所有连续的空格或空行都会被算作一个空格 pre 段落 输入多少空格或行就是多少 a 链接 链接 image或img 图片 图片图片 br 换行 换行 hr 分割线，定义水平线 b 粗体
介绍HTML、JavaScript、CSS、jQuery都是什么
qq_33537164的博客
04-08 755
HTML 的全称为：HyperText Mark-up Language, 指的是超文本标记语言。标记：就是标签, , 比如: 、等，标签大多数都是成对出现的。因为网页中还可以图片、视频、音频等内容(超越文本限制)它还可以在网页中跳转到另一个网页，与世界各地主机的网页链接(超链接文本)​ css(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言。
HTML 中的 jQuery 事件处理与 Ajax 异步请求
m0_62413155的博客
03-30 1962
本文将详细介绍如何使用 jQuery 处理 HTML 中的各种事件，如点击、鼠标移入移出等，还介绍了如何使用 jQuery 发送 Ajax 请求，与服务器进行数据交互，处理 JSON/XML 数据等，帮助您更好地理解和运用 jQuery 在 HTML 中的强大功能。
前端基础之jQuery
qq_53350943的博客
04-07 4091
jQuery是一个封装JS的框架。 使用jQuery可以更方便的编写JS脚本实现的功能。 jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX（重要
jQuery--内容操作（html()、text()、val()）详解
吴声子夜歌的博客
10-01 2307
样式操作 在jQuery中，提供了html()和text()方法用于操作页面元素的内容，val()方法用于操作表单元素的值。以上方法的使用方式基本相同，当方法没有提供参数时，表示获取匹配元素的内容或值；当方法携带参数时，表示对匹配元素的内容或值进行修改。 1. html()方法： html()方法用于获取第一个匹配元素的HTML，内容或修改匹配元素的HTML内容，方方法仅对XHTML文档有效，不能...
html+jQuery前端开发代码demo ---并夕夕商城
自救 唯有自强
11-20 1375
文章目录一、结果预览代码：欢迎页面二、代码结构 一、结果预览 代码： https://download.csdn.net/download/GBS20200720/45483826 欢迎页面 二、代码结构 对前端开发的一些理解 安卓开发 vue html 前端开发个人觉得都是这样的框子 ： 页面元素 + 样式 + 向后端发送请求 html开发页面元素 样式 jQuery发送请求，与前端页面元素关联 ...
JQuery的简单使用
qq_74092815的博客
04-24 1840
JQuery常见使用方法。
html5+Css3+JavaScript+jQuery：HTML5篇
weixin_46048259的博客
10-22 1437
html5+Css3+JavaScript+jQuery：HTML5篇
jquery $.post 超时_jQuery
weixin_39895181的博客
11-09 915
一．安装jQuery1、下载Jquery的js文件 2、在需要使用jquery的文件中引入js文件 $"符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象。 通过该对象可以获取 jQuery 对象，调用 jQuery 提供的方法等。 注：只有 jQuery 对象才能调用 jQuery 提供的方法。二．DOM对象与Jquery包装集包装集1.报错Uncaught ...
jQuery html的使用
hooocc的博客
02-05 768
设置标签的html内容，之前的内容会清除（只会显示。:追加html内容 （会显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Alu:

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值