HTML,CSS,JS

最新推荐文章于 2023-04-11 10:53:24 发布
最新推荐文章于 2023-04-11 10:53:24 发布
阅读量299 收藏
点赞数
文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63523782/article/details/128399097
版权

应用程序的分类

客户端/服务器

Client / Server CS模式

用户需要下载安装一个客户端才能使用。如通讯工具、网游、购物软件等。

特点：功能丰富，安装略微繁琐，需要更新，不同平台，软件不同

浏览器/服务器

Browser / Server BS模式

用户只需要一个流量拿起就能使用。如各种商业网站、XXX系统等。

特点：功能较独立的客户端略简单，无需下载安装，无需更新，平台无关。

为什么要学习WEB前端基础

由于JavaEE是BS模式，必须要使用浏览器渲染页面，程序都需要页面呈现数据。

所以后台开发，需要知道如何将数据显示在页面中。

学习WEB基础，就是学习开发网页。

网页是一个文件，后缀名为.html

浏览器

用于解析页面的平台。

名称
谷歌浏览器Chrome
火狐浏览器FireFox
微软IE/Edge
IOS Safira

前端自学网站

菜鸟教程

W3School

编写前端页面的工具

软件下载
HBuilderhttps://www.dcloud.io/hbuilderx.html
VSCodehttps://code.visualstudio.com/
Sublimehttp://www.sublimetext.com/

HTML

Hyper Text Markup Language 超文本标记语言

超文本：超级文本/超链接文本，超越了文本的限制，如多媒体文件、超链接等。

标记：也可以称为标签，用<>括起来的一个特定单词，整体称为标记或标签，分为单标签和双标签。

  • 单标签：<单词/>
  • 双标签：<单词></单词>

标签的类型

  • 块级元素，占页面中的一整行。block
  • 行内元素，占一行中的一部分。inline

标签的属性

标签第一个中括号中，使用 属性=“值” ，让某个标签拥有特定属性。

如<meta charset="utf-8">中，charset="utf-8"就是meta标签的属性

chartset称为属性名，utf-8称为属性值。

如果有多个属性，使用空格隔开。

如<div id="xxx" class="xxx"></div>。

网页基本结构

<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        网页主体
    </body>
</html>

创建一个文本文档，将以上内容进行保存，文档的后缀名改为.html，用浏览器就能解释运行。

HTML注释

<!-- HTML中的注释 -->

页面种显示颜色的方式

  • 颜色单词，如red、blue、green等
  • 颜色RGB。R-RED,G-GREEN,B-BLUE。rgb(255,0,0)表示红色，数字范围[0,255]，值越大，对应的颜色越深
  • 颜色的十六进制RGB。#FF0000表示红色，相当于RGB(255,0,0)

资源的路径

  • 绝对路径：资源的完整地址。如在线图片地址或带有盘符的地址

  • 相对路径：从当前页面出发，找到图片所在位置

    • 使用“…/”跳出当前目录
    • 使用"xxx/"进入xxx目录

常用标签

文字

标签名作用
h1~h6块级元素。标题。文字加粗，1最大，6最小。通常用h1~h3
p块级元素。段落。
span行内元素。
pre块级元素。预处理标签。
i行内元素。倾斜。
u行内元素。下划线。
b行内元素。加粗。
sub行内元素。文字下标。
sup行内元素。文字上标。
以上标签都是双标签

Emojo表情

用法：复制表情对应的十进制或十六进制的代码，最好使用span显示

<!--十进制 &#特定值;-->
<span>&#11088;</span>
<!--十六进制 &#x特定值; -->
<span>&#x231B;</span>

阿里巴巴矢量图库

图片img

单标签，行内元素

<img src="图片路径" alt="无法显示图片时显示的文字" title="鼠标悬停时的提示文字" width="宽度" height="高度">

列表ul/ol/li

双标签，块级元素，li是ul或ol的子标签

无序列表ul

默认每一项前用实心圆符号修饰

通过type属性修改符号

  • disc 默认，实心圆
  • circle 空心圆
  • square 正方形
  • none 去掉修饰符号
<ul>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
</ul>

有序列表ol

默认每一项前用自增数字修饰

通过type属性修改符号

  • a/A 英文字母
  • i/I 罗马符号
  • 1 默认数字
  • none 去掉修饰符号
<ol>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
</ol>

表格table

表格中的标签作用
tr表格中的行
td每行中的单元格
th特殊的单元格，表头，文字加粗居中

td可以通过

colspan=“3”属性实现跨3列

rowspan=“2”属性实现跨2行

<table border="1" >
    <tr>
        <th></th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    <tr>
        <td rowspan="2">上午</td>
        <td>语文</td>
        <td>数学</td>
        <td>语文</td>
        <td>数学</td>
        <td>语文</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>语文</td>
        <td>数学</td>
        <td>语文</td>
        <td>数学</td>
    </tr>
    <tr>
        <td colspan="6" align="center">午休</td>
    </tr>
    <tr>
        <td rowspan="2">下午</td>
        <td>体育</td>
        <td>音乐</td>
        <td>自然</td>
        <td>科技</td>
        <td>美术</td>
    </tr>
    <tr>
        <td>音乐</td>
        <td>体育</td>
        <td>科技</td>
        <td>美术</td>
        <td>自然</td>
    </tr>
</table>

多媒体

音频audio

<audio controls autoplay loop muted >
	<source src="xxx.mp3" type="audio/mpeg">
</audio>

视频video

<video width="320" height="240" controls autoplay loop muted >
	<source src="xxx.mp4" type="video/mp4">
</video>

controls开启控制器

autoplay自动播放

loop循环

muted静音

谷歌浏览器，默认不允许自动播放非静音视频

水平线hr

<hr color="颜色" size="粗细" width="宽度">

换行br

<br>

a标签

行内元素，双标签。

超链接

可以通过a标签访问任何一个地址

<a href="资源路径" target="">点击跳转</a>

target可以控制要访问的资源在哪里打开

  • _self 默认。在当前页面打开

  • _blank 在新页面打开

  • _parent 在父页面打开

  • 指定的name名

    • 如果是锚点的name，通过“#name“访问
    • 如果是iframe的name，通过"name"访问

锚点

可以通过a标签定义锚点和访问锚点，实现当前页面的快速定位

1.设置锚点

<a name="锚点名"></a>

2.访问锚点

<a href="#指定的锚点名">点击访问锚点</a>

浮动框架iframe

<a href="xx" target="main">xx</a>
<a href="yy" target="main">yy</a>

<iframe name="main" src="页面的路径" width="宽度" height="高度">
    
</iframe>

marquee标签

<!-- 
direction="left/right/up/down"朝向。默认left
behavior=""行为。scroll默认重复  slide移动到底后停止  alternate往复
scrollamount=""移动速度。
-->
<marquee scrollamount="10" direction="right" >
   xxxx
</marquee>

CSS

Cascading Style Sheets 层叠样式表

用于控制HTML中标签样式的语言。可以精确到像素，美化修饰HTML标签。

CSS语法

样式名：样式值；

color:red;

font-size:20px;

选择器

用于选择页面中元素(标签)的工具。

id选择器

1.给标签添加id属性，对其命名

2.在style标签中通过**#id**名获取

通常用于选择某一个元素

<html>
    <head>
        <style>
            #test{
                
            }
        </style>
    </head>
    <body>
        <div id="test">
            
        </div>
    </body>
</html>

class选择器

1.给标签添加class属性，对其命名

2.在style标签中通过**.class**名获取

通常用于选择一组元素

<html>
    <head>
        <style>
            .test{
                
            }
        </style>
    </head>
    <body>
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>
    </body>
</html>

元素/html/标签选择器

直接通过标签名获取。

通常用于选择一组元素。

<html>
    <head>
        <style>
            div{
                
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

将CSS写在哪里

1.写在标签的style属性中

style=“样式:值;样式:值;”

<body style="background-color:red;">
    
</body>

2.写在<style>标签中，通过选择器获取标签后控制样式

style标签通常放在head标签中

<html>
    
    <head>
        <style>
            选择器{
                样式:值;
                样式:值;
            }
            /*获取页面中所有名为div的元素*/
            div{
                
            }
            /*获取页面中class为test的元素*/
            .test{
                
            }
            /*获取页面中id为test的元素*/
            #test{
                
            }
        </style>
    </head>
    
</html>

CSS优先级

如果某个元素同时拥有id、class以及style属性时。

优先级从高到低

style属性==>id选择器==>类选择器==>元素选择器

常用样式

尺寸

只能对块级元素设置尺寸。

如果要对行内元素设置尺寸，需要先将其改为块级元素。

样式名作用值
width设置块级元素的宽度px像素或百分比或vw
height设置块级元素的高度px像素或百分比或vh

设置为像素时，元素不会根据浏览器的窗口大小变化而变化，是固定值。

设置为百分比或vh/vw时，元素会根据浏览器的窗口大小变化二变化，都是百分比。

如果元素需要根据实际窗口变化，宽度建议使用百分比，高度建议使用vh。

背景background

样式名作用值
background-color背景色颜色的单词、十进制RGB、十六进制RGB
background-image背景图url(图片路径)
background-repeat背景重复默认重复。
no-repeat不重复
repeat-x表示x轴重复
repeat-y表示y轴重复
background-size背景尺寸默认加载原图。
100%表示完整显示图片。
cover表示覆盖元素。
如body的背景如果设置为cover，随着页面高度变大，背景也会变大，100%则会完整显示图片。
background-position背景位置可以同时设置x轴和y轴的距离。
如10px 20px表示向右移动10px，向下移动20px
也可以通过background-position-x或-y只移动具体轴
通过使用right left top bottom center设置指定方向
background-attachment背景固定方式fixed表示固定背景，scroll或默认表示跟随滚动条移动
background背景属性简写可以同时设置图片路径、是否重复和图片位置，无关顺序。如
background:url(图片地址) no-repeat right top
表示图片不重复位于容器右上角
background渐变函数linear-gradient(to left, #7a28c1, #a17fe0, #59C173)

边框border

边框会"套"在元素外层，元素原本大小不变，但所占区域会变为原本大小+边框宽度

样式作用值
border-style边框线型solid单线，double双线，dotted点线，dashed虚线
border-width边框宽度像素
border-color边框颜色颜色的三种写法
border同时设置边框线型、宽度和颜色1px solid red
border-方向-样式某个方向的style或width或color。方向可以是left、right、top、bottomborder-bottom-color:red
border-方向同时设置指定方向边框线型、宽度和颜色border-right:1px solid red;
border-上下-左右-radius设置某个方向为圆角
border-radius同时设置四个角为圆角。如果正方形，值设置为边长的一半变为圆形
outline轮廓。input文本框获得焦点时，会自动显示一个轮廓，通过将该属性设置为none去除轮廓
border-collapse合并相邻边框。通常用于表格设置边框时，将其值改为collapse，表示合并相邻td边框。collapse

字体font

样式名作用值
font-size字体大小像素。默认16px，最小12px
font-family字体字型默认微软雅黑
font-weight字体粗细lighter细，bolder粗

文本text

样式作用值
color文本颜色颜色的三种写法
text-align文本对齐方式默认left，right右对齐，center居中
line-height行高像素。如果希望文字“垂直居中”，设置行高为所在容器的高度。
letter-spacing字符间距像素。
text-indent首行缩进像素。如果缩进2个字，默认设置为32px
text-shandow文本阴影颜色 水平位置 垂直位置 模糊程度。如gray 4px 4px 3px 表示向右下角移动4px，模糊3px
text-decoration文本修饰under-line下划线，over-line上划线，line-through删除线。通常将a标签设置该样式为none表示去掉默认的下划线
word-break英文换行方式默认以单词为单位换行，不会拆分单词。break-all表示以字母为单位换行，会拆分单词。

列表list

样式名作用值
list-style-type列表符号通常用none去掉。
list-style-image使用图片替换列表符号url(图片路径)
list-style-position列表符号位置默认outside表示符号和文本分离。inside表示符号和文本绑定。

伪类

表示某个元素的某种状态。

用于对某些元素在不同的情况下呈现不同的效果。

如a标签在访问前、悬停时、访问时、访问后的四个状态对应四个伪类

a标签伪类作用
a:link未访问时
a:hover鼠标悬停
a:active鼠标按住
a:visited访问后

以上的:hover可以适用于很多标签，如div:hover。

但其余伪类只适用于a标签。

鼠标样式cursor

值效果
pointer光标呈现为指示链接的指针（一只手）
crosshair光标呈现为十字线。
move此光标指示某对象可被移动。
text此光标指示文本。
wait此光标指示程序正忙（通常是一只表或沙漏）。
help此光标指示可用的帮助（通常是一个问号或一个气球）。
progress载入

显示方式display

值
block将元素设置为块级元素，能设置尺寸，独占一行
inline将元素设置为行内元素，不能设置尺寸，占一行中的一部分，尺寸由内容决定
inline-block将元素设置为行内块，能设置尺寸，占一行中的一部分
none不显示，不保留自身位置，后续元素会顶替其位置

浮动float

让某个元素脱离原本的位置，朝某个方向对齐。

值作用
left向左浮动
right向右浮动
none清除浮动

float:left和display:inline-block的区别

相同点：都能让多个独占一行的块级元素位于同一行

display:inline-block

多个元素最终会位于同一行内，保留该行位置，元素以下线对齐，保留元素间的缝隙，后续元素是新的一行。

float:left

多个元素脱离自身的位置向指定方向贴合，不保留该行位置，元素向上线对齐，不保留元素间的缝隙，后续元素会顶替之前元素的位置

jQuery

jQuery是一个轻量级的javascript函数库，封装了很多javascript中的内容。jQuery的本质依然是javacript(一个.js文件)。

作用

jQuery的宗旨：”write less,do more"，意味写更少的代码，做更多的事情。

  • 用于获取文档中的元素，对元素进行操作

  • 更强大的选择器

  • 支持链式写法

  • 封装了ajax，更方便使用

    …

使用

1.下载jQuery.js文件，导入到项目中

  • 官网下载https://jQuery.com/download/

    • 通过右键另存为下载

  • 使用HBuilder中自带的创建

    • 新建项目，在js文件夹下右键新建.js文件，选择jQuery，修改名称

2.在页面中导入jQuery.js文件

<script src="jQuery.js文件路径"></script>

3.在页面中加入另一个script标签，在该标签中写jQuery代码

  • 通常将jQuery代码写在文档就绪函数中，表示在页面所有内容加载成功后开始执行
    • 文档就绪函数类似于js中的onload事件
<script src="jQuery.js文件路径"></script>
<script>
	//文档就绪函数
    jQuery(document).ready(function(){
        //jQuery代码
    });
    //简化版文档就绪函数
    $(function(){
        //jQuery代码
    });
</script>

jQuery对象和js对象(dom对象)

在js中，使用document.getElementXXX获取到的是dom对象。

dom对象只能使用如.style、.innerText等属性修改样式或内容，不能使用jQuery对象中的属性或函数。

在jQuery中，使用jQuery选择器获取到的是jQuery对象。

jQuery对象只能使用jQuery中的属性或函数，不能使用dom对象中的属性或函数。

通常在jQuery对象命名时，使用$符号作为前缀，方便区分jQuery对象和dom对象。

两者之间转换

jQuery对象转换为dom对象
  • jQuery对象[0]
  • jQuery对象.get(0)
dom对象转换为jQuery

$(dom对象)

<html>

    <body>
        <h1 id="test"></h1>
    </body>

    <script src="jQuery.js"></script>
    <script>
        $(function(){
            //通过js的方式获取的对象，称为dom对象，只能使用dom对象操作节点的属性和方法
            var test= document.getElementById("test");
            test.innerText="修改文本"；
            //通过jQuery的选择器获取的对象，称为jQuery对象，只能使用jQuery对象操作节点的属性和方法
            //$("#test").innerText="xxx"//无效
            $("#test").text("修改文本");

            //将jQuery对象转换为dom对象
            $("#test")[0].innerText="修改文本";
			//将dom对象转换为jQuery对象
            $(test).text("修改文本");
        });
    </script>
</html>

$符号冲突问题

在页面中引入jQuery.js后，$符号相当于"jQuery"这个单词，有特殊的含义。

如果一个页面中，会引入多个js函数库，并且这些函数库都会用到 符号时，就会造成 符号时，就会造成 符号时，就会造成符号冲突。

jQuery提供了一个**noConflict()**函数用于释放对$的使用权。

//直接调用该方法，释放对$的使用权，之后只能使用默认的"jQuery"
$.noConflict();
//$("#md")//这时会无效
jQuery("#md")//只能这样使用

//调用该方法，使用变量接收，释放对$的使用权，用指定的变量名代替$
var jq=$.noConflict();
jq("#md")//将jq当做$使用

jQuery中的选择器

基本选择器

基本选择器
$(“#id名”)id选择器，根据id名获取某个节点
$(“.class名”)class选择器，根据class名获取某些节点
$(“标签名”)元素选择器，根据标签名获取某些节点
$(“#id名，.class名，标签名”)群组选择器，根据指定的选择器获取所有满足的节点
$(“a.test”)获取class名为test的a标签
$(“a#test”)获取id名为test的a标签
$(“*”)获取所有节点

层次选择器

层次选择器
$(“#test空格*”)得到id为test节点中的所有子节点。
$(“#test空格div”)得到id为test节点中的所有div子节点。
$(“#test>*”)得到id为test节点中的第一层所有子节点。
$(“#test>.test”)得到id为test节点中的第一层class为test的子节点
$(“#test+p”)得到id为test节点后紧邻的第一个p节点
$(“#test~p”)得到id为test节点后同级的p节点

注意

  • $(“p .test”)表示得到p标签下的class为test的标签。有空格

    <p>
	<div class="test"></div>
	<p class="test"></p>
</p>
//可以得到p标签中的两个

  • $(“p.test”)表示饿到class为test的p标签。无空格

    <p>
	<div class="test"></div>
	<p class="test"></p>//只能得到这一个
</p>

过滤选择器

普通过滤

$(“选择器:特定单词”)

普通过滤
$(“tr:odd”)奇数索引。得到索引为1,3,5…的tr标签，按自然顺序为偶数
$(“tr:even”)偶数索引。得到索引为0,2,4…的tr标签，按自然顺序为奇数
$(“tr:first”)得到所有tr标签中的第一个
$(“tr:last”)得到所有tr标签中的最后一个
$(“tr:eq(索引)”)得到指定索引的tr
$(“tr:gt(索引)”)得到大于指定索引的tr
$(“tr:lt(索引)”)得到小于指定索引的tr
$(“li:nth-child(3n+1)”)
$(“#test p:first-child”)
$(“#test p:last-child”)
$(“div:not(.test)”)得到class不为test的div
$(“div:not(:eq(3))”)得到索引不为3的div

表单元素过滤

表单元素过滤
$(“:input”)得到所有表单元素，包含input、select、textarea
$(“:text”)得到文本框
$(“:password”)得到密码框
$(“:radio”)得到单选按钮
$(“:checkbox”)得到复选框
$(“:checked”)得到被选中的表单元素，包含radio、checkbox、select
$(“:checkbox:checked”)得到被选中的复选框
$(“:selected”)得到被选中的下拉菜单选项
( " : r e s e t " ) / (":reset")/ (":reset")/(“:submit”)得到重置/提交按钮

属性过滤选择器

属性过滤
$(“a[href]”)得到所有包含href属性的a标签
$(“a:not([href])”)得到所有不包含href属性的a标签
$(“div[属性=值]”)得到指定属性和值的div
$(“div[属性!=值]”)得到指定属性不等于指定值的div
$(“div[属性^=值]”)得到以指定值开头的指定属性的div
( " d i v [ 属性 ("div[属性 ("div[属性=值]")得到以指定值结尾的指定属性的div
$(“div[属性*=值]”)得到包含指定值的指定属性的div
$("div[属性1=值][属性2=值]")得到既包含指定值的属性1且包含指定值的属性2的div

内容(文本)过滤选择器

内容过滤选择器
$(“p:contains(文字)”)得到带有指定文字的p标签
$(“p:not(:contains(文字))”)得到不带有指定文字的p标签
$(“p:empty”)得到没有任何文本的p标签

操作节点

获取、设置节点内容

函数
节点.text()获取节点中的文本。相当于js中的var text=x.innerText；
节点.text(“内容”)设置节点中的文本。相当于js中的x.innerText=“内容”；
节点.html()获取节点中的内容。相当于js中的var text=x.innerHTML；
节点.html(“内容”)设置节点中的内容。相当于js中的x.innerHTML=“内容”；
节点.val()获取某节点中的value属性值。相当于js中的var val=x.value;
节点.val(“内容”)设置某节点中的value属性值。相当于js中的x.value=“内容”;

获取、设置节点样式

函数名
节点.css(“样式名”)获取某个节点的某个样式值
节点.css(“样式名”,“值”)设置某个节点的某个样式
节点.css({样式名:“值”,样式名:“值”…})同时设置多个样式
节点.css(“样式名”,“值”).css(“样式名”,“值”)同时设置多个样式

获取、设置节点属性

函数名
节点.attr(“属性名”)获取某个属性的值
节点.attr(“属性名”,“值”)设置某个属性的值
节点.removeAttr(“属性名”)移除指定属性
节点.addClass(“class名”)给某个节点追加class值
节点.removeClass(“class名”)移除某个节点的某个class值
节点.toggleClass(“class名”)添加或移除某个class值。如果没有则添加，有则移除。
节点.hasClass(“class名”)判断是否存在某个class值

创建节点

$(“完整标签”)

如

//js写法
var h1=document.createElement("h1");
h1.innerText="创建出的h1";
//jquery写法
var $h1=$("<h1>创建出的h1</h1>");

//以上两种方式创建出的节点都是处于游离态，需要添加到已有的某个节点上

添加节点

添加子节点
父节点.append(子节点)将子节点添加到父节点中的最后
子节点.appendTo(父节点)将子节点添加到父节点中的最后
父节点.prepend(子节点)将子节点添加到父节点中的最前
子节点.prependTo(父节点)将子节点添加到父节点中的最前
添加兄弟节点
原始节点.before(新节点)添加新节点到原始节点之前
新节点.insertBefore(原始节点)添加新节点到原始节点之前
原始节点.after(新节点)添加新节点到原始节点之后
新节点.insertAfter(原始节点)添加新节点到原始节点之后

移除节点

移除节点
某节点.remove()移除某节点
某节点.empty()移除某节点中的子节点

复制节点

复制节点
某节点.clone()复制某节点，不复制节点的事件
某节点.clone(true)复制某节点，复制节点的事件

修饰节点

替换节点
旧节点.replaceWith(新节点)用新节点替换旧节点
新节点.replaceAll(旧节点)用心节点替换旧节点
包裹节点
原节点.wrap(指定节点)使用指定节点包裹原节点，如果原节点是集合，会逐一包裹
原节点.wrapAll(指定节点)使用指定节点包裹原节点，如果原节点是集合，会整个用一个节点包裹
父节点.wrapInner(指定节点)使用指定节点对父节点中的所有子节点整个包裹

通过节点获取节点

函数名
某节点.next()得到某节点的下一个节点
某节点.prev()得到某节点的上一个节点
某节点.nextAll(参数)得到某节点之后的所有或指定节点。参数为标签名的字符串，如nextAll(“a”)表示得到后续所有a标签
某节点.prevAll(参数)得到某节点之前的所有或指定节点
某节点.siblings(参数)得到某节点同级所有或指定节点
父节点.children(参数)得到某父节点的所有或指定子节点
节点集合.first()得到节点集合中的第一个子节点
节点集合.last()得到节点集合中的最后一个子节点
子节点.parent()得到某节点的父节点
某节点.index()得到节点所在集合的索引

预设动画

函数名
show()同时将宽度和高度从0变为原始值，最终display:block
hide()同时将宽度和高度从原始值变为0，最终display:none
toggle()切换show/hide
fadeIn()将不透明度从0变为1，淡入，最终display:block
fadeOut()将不透明度从1变为0，淡出，最终display:none
fadeToggle()切换fadeIn/fadeOut
slideUp()将高度从原始值变为0，最终display:none
slideDown()将高度从0变为原始值，最终display:block
slideToggle()切换slideUp/slideDown
以上所有函数都可以给两个参数。第一个参数为动画执行所需毫秒，第二个参数为动画执行结束后的回调函数，表示在动画执行后执行。
$("#md").click(function(){
    //如果希望在动画执行后执行，不能这样写
    /*
    $(this).fadeOut(500);
    alert("消失后弹出");
    */
    //正确写法
    $(this).fadeOut(500,function(){
        alert("消失后弹出");
    })
});

自定义动画

启用自定义动画

  • 使用animate()函数，该函数有四个参数分别为样式组、所需事件、动画函数、回调函数
  • animate()函数支持链式写法
  • 只支持数值型样式。如尺寸、位置等。字符串型样式不支持，如颜色等
节点.animate({
    "样式":"值",
    "样式":"值"
},2000,linear,function(){
    //动画执行结束后执行
}).animate(...)

停止动画

停止当前动画

节点.stop();

停止所有动画

节点.stop(true);

事件

绑定事件

  • js中的事件绑定方式为：

    //dom节点.on事件=function(){}
document.getElementById("md").οnclick=function(){
    
}

  • jquery中的事件绑定方式为：

    //jquery节点.事件(function(){});
$("#md").click(function(){
    
});
或
//jquery节点.bind("事件名",function(){})
$("#md").bind("click",function(){
    
})
事件函数作用
click()单击
hover()鼠标悬停/离开。该事件可以传入两个函数，分别表示悬停时触发第一个函数，离开时触发第二个函数。如果只有一个函数，悬停离开均触发这一个函数。
focus()获得焦点
blur()失去焦点
change()改变。适用于各种能发生变化的节点，如文本框、单选、复选、下拉等
mouseup/down/over/move/enter/leave/out()鼠标相关
submit()表单提交
…将js中的事件名去掉on变为函数

前端框架

设计者提供给用户该框架的css文件和js文件。

用户只需导入css文件和js文件后，通过对应的class值呈现相应的样式和效果。

任何前端框架都有对应的开发文档API，只需参考其使用使用说明即可。

BootStrap

由Twitter推出的一套前端框架。其最大的特点是"栅格化系统"。

使用

1.下载核心文件

官网https://v3.bootcss.com/

2.将解压后的整个文件夹复制到项目中

3.新建一个页面，引入3个文件

  • bootstrap.min.css文件
  • jquery.js文件
  • bootstrap.min.js文件

引入js时，一定要先引入jquery，再引入bootstrap.min.js。因为bootstrap依赖于jquery.

Layui

由国内开发者设计的一款基于jquery的前端框架。

官网现已下架，但Layui依然可以使用。

镜像网站https://layuion.com/

使用

1.下载layui核心文件

2.解压后导入项目

3.在页面中加入2个文件

  • layui.css文件
  • layui.js文件

JSON

JavaScript Object Notation JS对象简谱

是一种数据交换格式，可以理解为保存数据、交换数据的一种格式。

JSON数据通常以键值对的形式保存。

键:值

键的类型为字符串，值的类型可以是普通类型、对象或数组。

值的数据类型

值的数据类型符号示例
字符串“”“name”:“wanghai”
数值直接写数字“age”:20
逻辑值true/false“married”:false
空null“car”:null
对象{}“pet”:{“petName”:“小汪”,“petAge”:2}
数组[]“family”:[{“relation”:“父亲”,“name”:“xxx”},{“relation”:“弟弟”,“name”:“xxx”}]

举例

使用Json格式如保存一个人的信息

属性：姓名、年龄、性别、宠物、婚姻状况、房产、家庭成员

{
    "name": "张明",
    "age": 20,
    "sex": "男",
    "pet": {
        "petName": "刀乐",
        "petType": "猫"
    },
    "married": true,
    "house": null,
    "family": [{
        "name": "赵鑫",
        "relation": "配偶"
    },{
        "name": "张明亮",
        "relation": "父亲"
    }]
}

在HTML中读取JSO文件

  • $.getJSON(“json文件路径”,回调函数)
  • $.ajax({url:“访问的资源路径”,success:function(){访问成功后的回调函数}})
霂瓊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js中获取元素选择器的几种方式
爬楼梯的前端小白的博客
08-20 3993
目录 getElementById()根据id名获取 getElementsByTagName()根据标签名获取 首先拆分一下命名便于理解： get获取 element对象 by通过 注：括号参数里要求字符串 所以需要加引号 getElementById()根据id名获取 <body> <div id="time">2021-08-21</div> <script> var timer = ...
获取标签id
风轻云淡
11-24 1250
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;获取标签id&lt;/title&gt; &lt;script type="text/javascript" src="js/jquery-3.1.1.min.j
html标签中注册码,如何在html标签中获取id
weixin_35340730的博客
06-22 587
我试图在Twitter上进行屏幕抓取，我正在使用Jsoup库，这是该页面的html代码示例：我首先尝试做的是获取网页中li标签的所有ID，然后在循环中使用它们以获取每个li标签内的文本。我想要的结果是：id1 = stream-item-tweet-692459333712347137id2 = stream-item-tweet-692489785978523648id3 = stream-it...
HTML,CSS
m0_58342797的博客
08-08 999
前端
从一段html中获取id,javascript – 如何通过jQuery从id获取html
weixin_31495827的博客
06-03 423
好像你错过了id选择器#.您正试图从选择器获取html：ladder_nav_tabs.find(first_ladder_element_inset_id).html();这不会起作用,因为id选择器需要#.像这样：ladder_nav_tabs.find("#" + first_ladder_element_inset_id).html();请尝试以下操作来修复您的代码：btn.on('cli...
html css js 融合 demon
10-03
总结起来，“html css js 融合 demon”就是探讨如何高效地利用HTML构建网页结构，通过CSS进行美化和布局，以及使用JavaScript增加交互性。理解这三个技术的相互关系和协同工作，对于任何Web开发者来说都是至关重要的...
html css js全套学习笔记＋举例
04-16
HTML、CSS和JavaScript是构建网页和交互式用户体验的三大核心技术，是前端开发的基础。下面将对这三者进行详尽的介绍。 HTML（HyperText Markup Language）是网页内容的结构化语言，它定义了网页的基本元素和布局。...
html css js 旅游网页
06-23
【标题】"html css js 旅游网页" 涉及的知识点主要集中在前端开发领域，尤其是HTML、CSS和JavaScript这三大核心技术。这三个技术是构建任何交互式网页的基础，特别是对于展示餐饮旅游信息的网站，它们的重要性更为...
html css js学习.zip
12-30
html css js学习html css js学习html css js学习html css js学习 html css js学习html css js学习html css js学习html css js学习 html css js学习html css js学习html css js学习html css js学习 html css js学习...
html css js 学习.zip
12-30
html css js 学习html css js 学习html css js 学习html css js 学习 html css js 学习html css js 学习html css js 学习html css js 学习 html css js 学习html css js 学习html css js 学习html css js 学习 html ...
python中html 中怎么获取script 中的某个值
weixin_42883164的博客
04-11 1281
在html中获取script中的某个值，采用正则表达式提取变量值
【正则表达式】获取html代码文本内所有＜script＞标签内容
HYY的博客
02-11 5492
之前要对学生提交的html代码进行检查，在获取了学生提交的html代码文本后，需要使用正则去截取内部的script标签内容做进一步的检查。看上去不难，但是实际操作起来有一定的坑，最大的问题是学生可能在标签内部写的代码里也出现了“假设得到html文本如下（不是代码），我们要得到全部的script标签内容并提取出来。里面有字符xxx的情况，所以我们还需要放开对里面字符的限制。但是，这样会带来新的问题，所有的字符都被囊括进去，无法匹配到所有的标签。在实际应用中，我们得到这些标签内容后可以进一步刨去两个首尾标签。
css选择器（id选择器)
D3312366995的博客
06-26 6834
id选择器是给有特定id的html元素进行样式设置。html元素通过id属性来设置id选择器，在css中要用 "#" +id名来定义。
js 通过获取id设置style实现div显示隐藏
热门推荐
幼儿园大班扛把子
08-06 1万+
方法一： 对标签定义一个css样式： document.getElementById("idname").style.display="none";   方法二： 对标签定义多个css样式： var a = document.getElementById("idname"); with(a.style){ color = red; font-size = 12px; ........
使用 id 属性来设定元素的样式
weixin_44879787的博客
06-20 2582
使用 id 属性来设定元素的样式 通过 id 属性，你可以做一些很酷的事情，例如，就像 class 一样，你可以使用 CSS 来设置他们的样式，可是， id 不可以重用，只应用于一个元素上。同时，在CSS里，id 的优先级要高于 class ，如果一个元素同时应用了 class 和 id，并设置样式有冲突，会优先应用 id 的样式。 选择id为cat-photo-element的元素，并设置它的背景样式为green，可以在你的style标签里这样写： #cat-photo-element { backg
html中style样式调用之id、class、style顺序
alsdiuhfeircn的博客
05-24 9683
在写css样式的时候我们要注意的有顺序问题，更重要的时候style，class与id之间的优先级问题，在页面初次完工未经改变，或者页面复杂程度很小的时候，搞不清楚这三者之间的优先级问题，似乎并没有什么大的问题，但是一旦随着页面的更改完善，以及页面元素的错综复杂度增加，问题就显而易见了。 　　先来说说顺序的问题吧，比如说我们在整体的样式前面定义了一些连接的颜色之类的a{color:#F00}属性，但...
js的id和name和css的id和class的一点感想
pcxfeng的博客
03-30 260
刚学接触js和css，id，name，class，几个属性的用法分不清。现在对此有点想法在此记录下。id不管在js和css中都是独一无二的标记，name是在js中应用，且可以重复，class在css中应用也可重复且用#表示。...
css dom名称,获取元素id或者CSS选择器 / 获取节点
weixin_33139275的博客
08-03 1973
获取元素id或者CSS选择器:1. document.getElementById("idName");a.通过指定id获取元素b.返回第一个符合条件的元素c.如果获取一个不存在的元素，则返回nulld.只有document下有存在getElementById，id是当前页面总唯一的2. parent.querySelector("CSS 选择器");document.querySelector(...
html css JavaScript
最新发布
06-24
HTML (HyperText Markup Language)、CSS (Cascading Style Sheets) 和 JavaScript 是三种基础的 web 开发技术，它们共同构建了网页的内容、样式和交互。 1. **HTML**：它是超文本标记语言，用于描述网页的结构。HTML 中包含各种标签（如`<p>`表示段落，`<img>`表示图片），用来定义文档的标题、段落、链接、列表等内容。HTML是静态的，不涉及网页的动态功能。 2. **CSS**：层叠样式表，负责给 HTML 元素添加样式和布局。CSS 控制元素的颜色、字体、大小、位置、边框等视觉属性，使得网页更美观、易读和响应式。通过选择器来选取并应用样式到特定的 HTML 元素。 3. **JavaScript**：这是一门脚本语言，主要用于为网页添加交互功能。JavaScript 可以改变 HTML 内容、处理用户输入、操作浏览器对象（如窗口、文档），甚至与服务器进行通信。它广泛应用于动画效果、表单验证、AJAX异步请求等场景。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值