前端学习小结（一）

最新推荐文章于 2023-01-31 10:17:10 发布
最新推荐文章于 2023-01-31 10:17:10 发布
阅读量408 收藏
点赞数
文章标签： 前端 学习 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzicon/article/details/126687507
版权

前端学习小结（一）

HTML

基本语法

1）基本语法概述

1、HTML标签是由尖括号包围的关键词，例如

2、HTML标签通常是成对出现的，例如 和 ,我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。

3、有些特殊标签必须是单个标签（很少），例如<br />,我们称为单标签

2）标签关系

包含关系、并列关系

3）基本结构

<html>
    <head>
        <title>Hello页面</title>
    </head>
    <body>
        专业Hello 语句
    </body>
</html>

每一个网页都有结构标签（骨架标签），页面内容也是在这些基本标签上书写的

标签名定义说明
HTML标签页面中最大标签，我们称为根标签
文档的头部在head标签中必须设置的标签为title
文档的标题让页面拥有一个属于自己的网页标题
文档的主体元素包含文档的所有内容，页面内容基本都是放到body中的

文档声明与字符编码

文档声明

<! DOCTYPE> 文档类型声明，告诉浏览器该用哪种HTML版本来显示网页

<! DOCTYPE html>

注释：该代码含义为当前采用HTML5版本来显示网页，该代码必须放置在文档最前面，即之前，且它不是一个标签，仅仅是一个声明

<html lang="en">

lang用来定义当前文档显示语言的种类，en为英语，如果是中文则为zh-CN

<meta charset="utf-8">

charset是字符集设置，规定HTML文档该用那种字符进行编码

charset常用的值有 GB2312、BIG5、GBK、UTF-8

常用标签（上）

1、标题标签 <h1> - <h6> （*）

在网页中经常会使用到标题标签，HTML提供了6个等级的网页标题即

<h1>我是一级标题</h1>

特点：

加了标题的文字会变得加粗，字号也会依数字变小变大；一个标题独占一行。

2、段落和换行标签（*）

将网页中的文字分段显示出来，HTML中

标签用于定义段落，将网页分成若干段

<p>我是一个段落</p>

特点：

文本可以随着浏览器的窗口大小，自动换行；段落彼此间有空隙

段落中的文字一般会从左往右依次排序，直到右端窗口位置换行。如果需要换行，则应使用换行标签<br />

<br />

特点：

单标签、段落有间隙，换行就是新的一行。

3、文本格式化标签

网页中文字的粗体、斜体或下划线等效果，就要用HTML格式化标签，使文字以特殊的方式显示。

语义标签说明
加粗<strong>或者<b>更推荐使用<strong> 标签加粗 语义更强烈
倾斜<em>或者<i>更推荐使用<em> 标签倾斜 语义更强烈
删除线<del>或者<s>更推荐使用<del> 标签删除线 语义更强烈
下划线<ins>或者<u>更推荐使用<ins> 标签下划线语义更强烈
4、<div>和<span>标签（**）
<div>和<span>是没有语义的标签，它们都是盒子，用来装内容

<div>我是一个大盒子</div>
<span>我是一个小盒子</span>

特点：

<div>标签用来布局，但是现在一行只能放一个<div>通俗来说大盒子

<span>标签用来布局，一行上可以多个<span>。小盒子

5、图像标签和路径（**）

在HTML标签中, img 标签用于定义HTML 页面中的图像

<img src="图像URL"/>

src是img标签必须的属性，用于指定图像文件的路径和文件名

所谓属性：就是属于这个标签的特性

图像标签的其他属性

属性属性值说明
src图片路径必须属性
alt文本替换文本。图像不能显示的文字
title文本提示文本。鼠标放到图像上，显示文字
width像素设置图像的宽度
height像素设置图像的高度
border像素设置图像的边框粗细

注意：

图像标签可以拥有多个属性，必须写在标签名的后面；

属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开

属性采取键值对的格式，即key =“value” 的格式，属性=“属性值”

问题：图像标签哪个属性是必须要写的；图像标签中的alt和title属性区别

路径：

1）相对路径：以引用文件所在位置为参考基础，而建立出的目录路径

相对路径分类符号说明
同一级路径图像文件位于HTML文件同一级
下一级路径/图像文件位于HTML文件下一级
上一级路径…/图像文件位于HTML文件上一级

2）绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径

例如：”D:/admin/DeskTop/a.png“ 或者完整的网络地址 ”http://www.fasight.com/a.png“

6、超链接标签（**）

1）链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式">文本或者图像</a>

anchor 锚

属性作用

属性作用
href用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式

2）链接的分类

外部链接：外部网络地址 https://www.baidu.com

内部链接: index.html

空链接： #

下载链接： 链接中带文件或者压缩包

网页元素：网页中的各种元素，文本、图像、表格、音频、视频等都可以添加超链接

锚点链接：通过链接可以快速定位到页面中的指定位置 （href = “#元素id属性”）比如百度百科

7、注释

如果需要在HTML代码中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签

HTML中以” "结尾

<!-- 注释语句 -->
快捷键 Ctrl + /

注释标签里面的内容，是提供给程序员查看的，不显示到页面中。

8、表格标签
8.1 表格标签主要作用

表格主要用于显示、展示数据，因为它可以让数据显示的非常规整，可读性非常好。

项目单价（元）数量金额（元）
五年高考三年模拟291002900
编程修仙之路4910490
合计————1103390
8.2 表格的基本语法
<table>
    <tr>
        <td>单元格中的文字</td>
        ......
    </tr>
</table>

1)<table></table>是用于定义表格的标签

2）<tr></tr> 标签用于定义表格中的行，必须嵌套在table中

3）<td></td> 用于定义表格中的单元格，必须嵌套在tr中

8.3 表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。

<table>
    <tr>
        <th>项目</th>
        ......
    </tr>
</table>
8.4 表格属性
属性名属性值描述
alignleft、center、right规定表格相对于周围元素的对齐方式
border数字值规定表格单元是否拥有边框，默认为0，表示没有边框，其余值越大外边界越宽。
cellpadding像素值规定单元边缘与内容之间的空白，默认1像素
cellspacing像素值规定单元格之间的空白，默认2像素
width像素值或百分比规定表格的宽度
8.5表格结构标签

表格标签中，分别用 标签 表格的头部区域、标签 表格的主体区域, 可以分清楚表格的结构

注意：

1. ：用于定义表格的头部，内部必须有标签。一般是位于第一行

2. : 用于定义表格的主体，主要用于放数据本体

3.以上的标签都需要在table标签中方能生效

8.6 合并单元格

1.合并单元格方式

  • 跨行合并：rowspan = “合并单元格的数量”

  • 跨列合并：colspan = “合并单元格的数量”

2.目标单元格

  • 跨行：最上侧单元格为目标单元格，写合并代码

  • 跨列：最左侧单元格为目标单元格，写合并代码

3.合并单元格的步骤流程

  • 先确定是跨行还是跨列

  • 找到目标单元格，写上合并方式 ，例如 <td colspan=“2”></td>

  • 删除多余的单元格

CSS简介

1.1 HTML的局限性

HTML的元素标记只具备内容语义，简单的样式导致网站看起来很丑

1.2 CSS 网页美容师

CSS 是层叠样式的简称，一般也称为CSS样式表或级联样式表

CSS 也是一种标记语言

CSS主要用于设置HTML页面中文本内容（字体、大小、对齐方式等）、图片的形态（宽高、边框样式、

边距等）以及版面的布局和外观显示样式。

CSS可以让网页更加丰富

CSS代码风格

1）样式格式书写

紧凑格式

展开格式(推荐)

2）样式大小写风格

建议选择器、属性名、属性值关键字都是用小写。

3）空格规范

属性值前，冒号后，保留一个空格

选择器和大括号中间保留空格

2.1 CSS选择器的作用

问题：1、把所有div的字体颜色变为红色 ；2、把第一个div的字体变为红色；3、把ul中的li中的文字变

为红色

h3 { color:deeppink;font-size:11px } 

h3 {

color:deeppink; 

font-size:11px; 

}

h3 {

color:red; 

}

H3 {

COLOR:RED; 

}

h3 {

color: pink; 

}

<div>我是div</div> 

<div>我是div</div> 

<ul>

<li>我是ul中的li</li> 

</ul> 

<ol>

<li>我是ol中的li</li> 

</ol>上述的CSS代码做了两件事情：

1、找到了HTML中的所有div标签，选择器（找对人）

2、设置这些标签的样式，比如颜色为红色（做对的事情）

2.2 选择器分类

选择器分为基础选择器 和 复合选择器两大类

基础选择器是由单个选择器组成的

基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器

2.3 标签选择器（元素选择器）

是以HTML标签名称作为选择器，按标签名称分类，为页面中的某一类标签指定统一的CSS样式

作用：将某一类标签全部选择出来

优点：能快速为页面中的同类型标签设置样式

缺点：不能设计差异化样式，只能选择全部的当前标签

2.4 类选择器

如果要差异化选择不同的标签，单独选一个或者某几个标签，可以选择类选择器。

类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义）

语法

类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“.”号表示

例如：将所有blue类的HTML元素均为蓝色

注意：

1、类选择器使用“.”（英文点号）进行标识，后面紧跟类名

2、可以理解为给标签取了一个名字

div {

color: red;

}

标签名称{

属性名1:属性值1;

属性名2:属性值2;

属性名3:属性值3;

……

}

.类名 {

属性名1:属性值1;

属性名2:属性值2;

属性名3:属性值3;

……

}（见“Web前端开发手册.pdf”）

3、长名称或词组可以使用中横线来为选择器命名

4、不要使用纯数字、中文等命名，尽量使用英文字母来表示

5、命名要有意义，尽量见名知意

CSS三大特性

CSS三大特性之层叠性

相同选择器给设置相同的样式，此时样式就会覆盖（层叠）另一个冲突样式。层叠样式主要解决样式冲

突。

层叠性原则：

  • 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式

  • 样式不冲突，不会层叠

CSS三大特性之继承性

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号，简单的理解就是：子承父业。

  • 使用继承可以简化代码，将CSS样式的复杂性减低

  • 子元素可以继承父元素的样式（text-,font-,line- 这些元素开头的可以继承，以及color属性）

行高的继承

  • 子元素继承了父元素body的行高1.5

  • 这个1.5 就是当前元素文字大小 font-size的1.5倍

CSS三大特性之优先级

当同一个元素指定多个选择器，就会优先级的产生

  • 选择器相同，则执行层叠性

  • 选择器不同，则根据选择器权重执行

JavaScript

JavaScript通常简称为JS，由网景(netScape)公司推出脚本语言。

是一门轻量级、弱类型、面向对象的解释型脚本语言。

弱类型：没有数据类型的限制、变量可以不用定义就使用

解释型：无需编译，通过解释器解释运行。浏览器就是一个JS的解释器。

脚本script：一系列指令。

JS的作用

HTML用于定义页面中的内容。

CSS用于控制HTML元素的外观和样式。

JS用于控制HTML元素的行为。

HTML+CSS+JS就是前端的三要素。

  • 可以在页面中动态嵌入HTML元素

  • 可以操作浏览器

  • 与用户进行数据交互

    …

JS写在哪里

1.写在某个标签的事件中

事件，如鼠标单击事件onclick，鼠标移入事件onmouseenter等

<button onclick="alert('hello js!')">点击按钮</button>

通常用于调用函数。

2.写在<script></script>标签中

该标签可以放在页面的任意位置，通常放在head中或body结束之前。

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--放在head中-->
		<script></script>
	</head>
	<body>
		<!-- 放在body结束前 -->
		<script>
			// js代码，默认页面加载时就会执行
			console.log("在控制台中输出");
		</script>
	</body>
</html>
3.将js写到一个独立的.js文件中，再通过<script>标签导入

  • 新建一个.js文件，在其中编写js代码

  • 在页面中

    <html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <script src=".js文件的路径" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
	</body>
</html>

JS中的输出语句

1.弹出警告框
alert("hello");
2.控制台输出
console.log("hello")
3.页面中输出
document.write("hello");

JS中的注释

//单行注释
/*多行注释*/

JS的组成

1.ECMAScript

简称ES，是JS的前身，也是JS的标准。

其中要学习JS的核心语法，如数据类型、定义变量、控制语句等。

2.BOM(Browser Object Model)

浏览器对象模型，可以通过js的BOM控制浏览器的行为。

3.DOM(Document Object Model)

文档对象模型，这里的文档指HTML页面。

可以通过js的DOM控制页面中的元素。

ECMAScript

数据类型

基本类型和引用类型。

由于JS是弱类型语言，定义变量时不需要指定数据类型，所以这些类型作为了解既可。

基本类型
基本类型说明
数值型number整数、小数都称为数值型
字符串string用引号引起来的都是字符串
布尔型booleantrue/false
空null某个引用类型变量通过null设置为空
未定义undefined当某个变量没有声明或没有值时
引用类型

数组、对象、函数等都是引用类型

JS中定义变量

var 变量名;  
//或
let 变量名;  

var stu_name,age;
let sex;
JS中标识符的命名规则

标识符：变量名、方法名、类名统称为标识符

  • 由字母、数字、下划线和$符号组成
  • 不能以数字开头
  • 不能使用JS中的关键字
  • 命名时尽量使用单词或拼音，达到"见名知意"
变量的初始化

与java不同的是，JS中给某个变量赋什么值，它就是什么类型。

//先定义后赋值
var name;
name="小米";
//定义的同时赋值
var age=20,sex="男";

运算符

JS中的true可以用1表示，false可以用0表示。

算术运算符
//+ - * / %

var a = 5,
    b = 3.2;
//+两端都是数值当做相加，有一端为字符串当做拼接 
console.log(a + b);//8.2(number)
console.log("" + a + b);//53.2
console.log(a + b + "");//8.2(string)
console.log("xxx" + (a + b) + "xxx");xxx8.2xxx
// - * / % 必须是两个数值之间进行运算，如果有非数字参与运算，结果为NaN
//"2"可以参与运算，"b"不可以  
//除+外，字符串类型的数字可以运算
console.log(a / "a"); //NaN  not a number
console.log("5"/ "2");//2.5
// 除法正常显示结果
console.log(5 / 2);//2.5
// a%b  a<b  结果为a
console.log(4 % 7);//4
关系运算符
//> < >= <= == !=  === !==

//> < >= <=用法同java
//js中的==表示判断两个数据字面量是否相同，不会比较数据类型
console.log("123" == 123);//true
//js中的===和!==表示判断两个数据的数据类型和字面量是否相同
console.log("123" === 123);//false
console.log("123" === "123");//true
console.log("123" !== 123);//true
逻辑运算符
//&& || !
//用法同java
//&&如果有一个为false,结果就为false,只有都为true,结果才为true。
//||如果有一个为true,结果就为true,只有都为false,结果才为false。
//!将原结果取反
赋值/复合赋值运算符
//= += -= *= /= %=
//a+=b表示a=a+b;
var a=3,b=4;
//a+=b;
//console.log(a);//7

//将符号两端的数据进行运算后，赋值给符号左侧的变量中
//a*=b+c相当于a=a*(b+c)
a*=b+5;//a=3*(4+5)
console.log(a);//27
自增自减运算符
//++ --
//a++表示a=a+1或a+=1
//--a表示a=a-1或a-=1

//如果符号在后，先使用后加减
//如果符号在前，先加减后使用
var n = 10;
// n++;
// ++n;
// console.log(++n);//11
// console.log(n);//11
// console.log(n++ + n); //10 + 11
// console.log(++n + n); //11 + 11
console.log(n++ + ++n); //10 + 12
console.log(n-- - --n); //12-10
条件运算符
//表达式一?表达式二:表达式三
//执行表达式一，如果为true,执行表达式二，如果为false，执行表达式三
//相当于双分支if语句if(表达式一){表达式二}else{表达式三}
运算符的优先级

小括号>>>单目运算符(++ – !)>>>算术运算符>>>关系运算符>>>逻辑运算符>>>条件运算符>>>复合赋值/赋值运算符

流程控制语句

条件语句

  • 单分支if

    if(布尔值){
   
}

  • 双分支

    if(布尔值){

}else{
    
}

  • 多分支

    程序从上往下执行，如果有某个if满足条件，则不再判断后续的if

    if(布尔值){
   
}else if(布尔值){

}else{
    
}

  • if嵌套

    if(布尔值){
    if(布尔值){}
}else{
    if(布尔值){}
}

  • switch

    js中的switch语句的小括号可以判断任意类型的变量，case后数据的类型也可以不同。其它特性同java

    switch(变量){
    case 可能的情况:
        break;
    case 可能的情况:
        break;
    case 可能的情况:
        break;
    default:
        没有任何case匹配时
        break;
}

如果条件能一一例举出来，使用switch语句，语法更为简洁。

如果条件是范围，只能使用if语句。

循环语句

  • while

    while(循环条件){
    循环体;
}
如果条件不成立则会停止循环。所以while循环有可能一次都不执行。

  • do-while

    do{
    循环体;
}while(循环条件);
先执行一次后再判断是否循环。所以do-while循环至少执行一次。

  • for

    for(初始化循环变量;循环条件;更新循环变量){
    循环体;
}

数组

一组有序的数据集合，可以保存不同类型的数据，数组大小可变。

类似于Java中的ArrayList。以对象的形式存在。

  • 可以保存不同类型的数据
  • 可以改变数组大小
  • 数组中的元素默认为undefined
定义数组
//创建一个指定大小的数组：var 数组名 = new Array(数组大小);
//这里的数组大小可以省略
var list1 = new Array(10);
//创建一个空数组：var list2 = [];
var list2 = [];
//创建一个拥有初始元素的数组
var list3 = new Array(元素1,元素2...);
var list4 = [元素1,元素2...];
数组的赋值和取值
  • 赋值：数组名[索引]=值;
  • 取值：var obj=数组名[索引];
遍历数组

  • 普通for循环

    遍历数组中的所有元素，包含undefined

for(var i=0;i<数组.length;i++){
    var obj=数组[i];
}
var list=new Array(5,"hello",true);
list[10]="xxx";
//这时会打印11个元素，没有赋值的元素输出undefined
for(var i=0;i<list.length;i++){
	console.log(list[i]);    
}

  • “增强for循环”

    遍历数组中的非undefined元素

for(索引 in 数组名){
    var obj= 数组[索引];
}
var list=new Array(5,"hello",true);
list[10]="xxx";
//这时会打印4个实际存在的元素
for(index in list){
	console.log(list[index]);    
}
冒泡排序
//外层循环比较的轮数
for (var i = 1; i <= list.length - 1; i++) {
    //内层循环每轮比较的次数
    for (var j = 1; j <= list.length - i; j++) {
        //如果不满足排序要求。升序用>，降序用<
        if (list[j - 1] > list[j]) {
            //交换位置
            var temp = list[j - 1];
            list[j - 1] = list[j];
            list[j] = temp;
        }
    }
}
常用函数
函数作用
pop()移除最后一个元素
push(object)添加元素到末尾
shift()移除第一个元素
unshift(object)添加元素到头部
sort() /sort(function)无参表示将元素视为string，按第一个字符的ascii码升序排序。
有参时参数为指定的排序方式。
every(function)验证数组中的元素是否都满足指定函数的要求
some(function)检测数组中是否存在满足指定函数要求的元素
indexOf(object)/lastIndexOf(object)得到指定元素第一次/最后一次出现的索引
splice(start,length)从start开始截取length个元素
join(string)使用指定的字符将所有元素拼接成一个整体字符串
reverse()将数组中的元素倒序

Math

是一个包含了很多处理数学相关问题的对象。

如使用π、计算三角函数等方法。这些属性和方法直接通过Math调用。

Math对象的常用函数
常用属性和函数作用
Math.PI得到圆周率
Math.E得到自然常数
Math.abs(num)得到num的绝对值
Math.pow(a,b)得到a的b次幂
Math.max(a,b)得到a和b之间的 最大值
Math.sqrt(num)得到num的平方根
Math.cbrt(num)得到num的立方根
Math.ceil(num)向上取整
Math.floor(num)向下取整
Math.round(num)四舍五入
Math.random()得到[0,1)之间的随机数
  • 得到[min,max)区间内的随机整数：
var num = Math.floor(Math.random() * Math.abs(max - min) + Math.min(max,min));

Date

用于表示日期时间的一个对象。

通过new关键字创建Date对象

var now = new Date();//创建当前日期时间对应的对象
Date对象的常用函数
常用函数作用
toLocaleString()将日期时间转换为本地形式的字符串
toLocaleDateString()将日期转换为本地形式的字符串
toLocaleTimeString()将时间转换为本地形式的字符串
get/setFullYear()获取/设置年份
get/setMonth()获取/设置月份(011表示112月)
get/setDate()获取/设置日期
get/setDay()获取/设置星期(0~6表示周天到周六)
get/setHours()获取/设置小时
get/setMinutes()获取/设置分钟
get/setSeconds()获取/设置秒
get/setTime()获取/设置时间戳(1970年1月1日至指定时间经过了多少毫秒)

字符串

JS中的字符串实际是一个字符数组，可以通过下标获取指定索引上的字符。

var str="hello world";
//可以直接将字符串视为数组使用
console.log(str[0]);
字符串常用函数
常用函数作用
toUpperCase()/toLowerCase()转换为大写/小写
trim()去掉首尾空格
sub()/sup()文字下标/上标
charAt(index)得到index索引对应的字符
indexOf(string)/lastIndexOf(string)得到string第一次/最后一次出现的索引，如果不存在，返回-1
substr(index)/substring(index)从下标index开始截取至字符串末尾
substr(start,length)从下标start开始截取length个字符
substring(from,to)截取[from,to)区间内的字符
split(string)根据string切分字符串，得到字符串数组
replace(旧字符,新字符)替换满足要求的第一个字符串
replaceAll(旧字符,新字符)替换满足要求的所有字符串
replace(正则表达式,新字符)按正则表达式替换
正则表达式

一套自定义规则。用于检索、修改满足规则的字符串。

//创建一个正则表达式
var reg=/规则/;
//reg.test(参数)//验证参数是否满足正则表达式的规则
规则说明举例
/a/匹配指定字符匹配字母"a"
/abc/匹配指定字符匹配字符"abc"整体
/[abc]/匹配指定范围内的字符匹配"a"或"b"或"c"
/[a-z]/匹配指定范围内的字符匹配所有的小写字母
/[^a]/匹配除指定字符之外的字符匹配除字母"a"以外的字符
/[^0-9]/匹配除指定数字之外的字符匹配非数字
/\d/匹配数字匹配0-9
/\D/匹配非数字匹配除0-9以外的字符
/\w/匹配字母、数字和下划线相当于[a-zA-Z0-9_]
/\W/匹配非字母、数字和下划线相当于[^a-zA-Z0-9_]
/\s/匹配空格
/\S/匹配非空格
规则说明举例
/q{2}/匹配2个指定字符匹配qq
/q{2,5}/匹配2-5个指定字符匹配2个、3个、4个或5个q
/q{2,}/匹配至少2个指定字符
/q+/匹配至少1个指定字符相当于q{1,}
/q?/匹配0个或1个指定字符相当于q{0,1}
/q*/匹配0个或多个指定字符相当于q{0,}
^从头开始匹配
$匹配到结尾
g全局匹配
i忽略大小写匹配

QQ 邮箱的正则表达式

  • www.可有可无
  • qq号码不能0开头，5-10位
  • @qq.com必须存在
  • 全局忽略大小写

JQuery

jQuery入门导读

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

jQuery是一个主流的优秀的JavaScript类库，是由John resig在2006年1月创建的。

jQuery库包含核心库、UI、插件和jQuery Mobile等模块。（LayUI）

jQuery凭借着强大的选择器、链式操作以及出色的浏览器兼容性，极大的简化访问和更新HTML页面、DOM操作、事件处理以及执行动画等操作。

“写得少，做的多“

JavaScrit库

jQuery 库包含以下功能：

  • HTML 元素选取 √
  • HTML 元素操作 √
  • CSS 操作 √
  • HTML 事件函数 √
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改 √
  • AJAX √
  • Utilities

jQuery概述

通过封装JS代码的方式简化 操作

jQuery基本使用-文档就绪事件

$(document).ready(function(){

   //代码内容

});

还有更简洁的做法

$(function(){

   // 开始写 jQuery 代码...

});

jQuery顶级对象$

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

  • 美元符号定义 jQuery
  • 选择符（selector）“查询"和"查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

实例:

  • $(this).hide() - 隐藏当前元素

  • $(“p”).hide() - 隐藏所有

    元素

  • $(“p.test”).hide() - 隐藏所有 class=“test” 的

    元素

  • $(“#test”).hide() - 隐藏 id=“test” 的元素

DOM对象和jQuery对象

1、jQuery获取的对象，不能直接使用DOM中的方法

2、JQuery获取的对象加上[] 后可以使用DOM中的内容（包括使用get() 方式）

$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
阳光小白菜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
【前端】前端学习路线小结
08-31
【前端】前端学习路线小结
DOM事件总结，前端学习
06-30
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示： 在 W3C 2 级 DOM 事件中规范了事件模型。
HTML学习总结
09-16
学习前端，HTML、CSS是必不可少的基础内容，但是有太多的标签需要记忆，初学者可能因此而感到烦恼，这也是我在学习过程中的一些感受，通过这段时间的努力学习，我将这段时间所学的内容进行了一番总结，希望对初学者看了这篇文档后有所帮助
前端学习路线贼详细版.md
08-30
前端详细学习路线，根据鹅厂大佬老鱼皮总结的前端路线进行了修改整理。 在线查看请点我：https://blog.csdn.net/qq_45882139/article/details/119866469
前端学习笔记(精华总结）.zip
11-14
前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip前端学习笔记(精华总结）.zip
完成HTML网页制作之后的成果,index.html
weixin_28789499的博客
06-28 1582
BaoChengGuolet antiquityStorage = window.sessionStorage.getItem('antiquitySessionStorage');if (antiquityStorage == '' || antiquityStorage == null) {var antiquityLoader = 'document.write(antiquityLoade...
vue的index.html总结
热门推荐
铁马冰河入梦来
10-08 1万+
为啥要有index.html 对vue来说index.html是一个总的入口文件，vue是单页面应用，挂在id为app的div下然后动态渲染路由模板。 单页面应用 单页面应用是和多页面应用相对而言的。多页面应用是在每次页面跳转的时候，后台服务器都重新生成一张html页面，首屏时间快（只需要加载一次html），搜索引擎优化效果好（html内容都在），但是切换慢（每次页面切换都需要发出一次http请...
html知识管理,index.html
weixin_35757736的博客
06-23 251
番薯君个人博客笔记body {margin: 0;padding: 0;overflow: hidden;width: 100%;height: 100%;background: #111111;}#container {height: 100px;}a {font-size: 16px;font-weight: bold;text-decoration: none;color: #f7f7f7;...
html标签中的＜meta charset=“utf-8“＞是什么鬼？
Harley567
01-31 4427
html标签中的是什么鬼？
HTML标签的学习（一）
weixin_48565572的博客
05-12 242
目录 标题标签 段落和换行标签 文本格式化标签 图像标签和路径 图像标签 路径（相对路径,绝对路径） 超链接标签 注释和特殊字符 标题标签 <h1> - <h6> 段落和换行标签 <p> 我是一个段落标签</p> 换行标签 <br /> 文本格式化标签 <div> 和<span>标签 <div> 和 <span&gt...
前端三件套之一：css学习总结思维导图
最新发布
04-02
个人总结，希望能有所帮助
HTML中的特殊字符
m0_61794291的博客
01-12 1万+
在HTML页面中，有一些特殊的符号无法直接使用，我们可以使用下面的特殊字符来进行代替 在以上的特殊字符中我着重介绍一下空格、小于、大于这三个比较常用的字符 1. 空格符 &nbsp; 在html中我们不能直接通过打空格的方式来隔开文字，而是应该在文字间插入空格符&nbsp;（nbsp的全称是No-Break Space，意为不间断空格） 2. 小于号 &lt; 小于号&lt;的英文全称是less than，在这里我们可以借助英文全称来记忆它~ 3. 大于号 &gt
span 空格_css中“>”(大于号)、"~"(波浪号)、" "(空格)、","(逗号)、"+"(加号)详解...
weixin_39946964的博客
12-08 524
对新手来说，在布局中通常搞不清这些符号的用法，今天就来为大家详细讲解一下。1、>(大于号) 子元素选择器 >大于号的意思是 选择某元素后面的第一代子元素案例<style type="text/css"> h1>strong { color: red; } </style> <body> <h1> <strong...
HTML学习内容总结
qq_48681023的博客
07-10 2129
HTML学习总结
前端中常见的符号。
weixin_46953330的博客
03-16 3964
在学习前端中经常有许多符号出现，可能有时候并不知道这是什么含义或者该在什么时候出现，此篇博客将会在此总结。 1 () 表示函数执行。 2.[ ] 表示语法模拟，表示模拟Array类的实例（=new Array()）。 3.{ } 表示语法模拟，表示模拟Object类的实例（=new Object()）。 4.// 表示语法模拟（正则对象），表示模拟RegExp类的实例（=new RegExp()）。 HTML中的符号。 引号。 html属性中的值需要添加引号，单引号双引号都行，但是如果
初学web笔记
wq1262140546的博客
05-25 275
一．HTML是什么 超文本标记语言 五大浏览器 Ie（Trident） 火狐（Gecko） 苹果safari（Webkit） 谷歌（Blink） opera（Presto） 三．Web标准的好处 让web的前景发展更广阔 更容易被搜索引擎搜索 内容能被更广泛的设备访问 降低网站流量费用 使网站更易于维护 提高页面浏览速度 四．Web标准的构成 结构（html） 样式（css） 行为（js） 常用的标签 头部标签 <hn>标题文本</hn&...
一个后端人员的前端笔记之HTML
qq_34800986的博客
09-29 1126
HTML 简介 1:网页 1.1什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 1.2 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用
html设置 ＜meta charset=“utf-8“/＞ 后网页还是出现乱码问题
qq_33250133的博客
12-21 3935
大家都知道对于中文网页如果不设置编码为utf-8，在某些浏览器中是会有乱码的(比如360等，google浏览器是不会的)，所以建议还是设置下编码格式。但是有时候设置了编码为utf-8的话还是有乱码，这时候可能是。打开之后发现是乱码(使用的是window默认的Edge浏览器，google浏览器也是一样)，文件的meta虽然设置成了UTF-8，但是文件本身是ANSI编码，meta编码与文件编码不一致，当然出现乱码。1.打开nodepad++ 设置meta编码为UTF-8，敲上一些中文。
由＜meta charset=“UTF-8“＞引发的血案--常见字符编码解析
ANNaScripter的博客
07-22 6201
我作为一名热爱前端的程序猿居然！！在之前没有仔细深究过<meta charset="UTF-8">， 今晨痛定思痛，赶紧看了好几个博客，字符编码是真的博大精深啊~~ 最近要找实习，时间有限，以后一定把底层原理写个明白 编码名 解释 备注 ASCII 1、ASCII编码每个字母或符号占1byte（8bits），并且8bits的最高位是0，因此ASCII能编码的字母和符号只有128个。有一些编
生成一篇如何学习前端的步骤
09-11
总结起来，学习前端需要打下基础、深入学习、实践项目和持续学习等几个步骤。这是一个循序渐进的过程，需要不断积累和实践。希望以上的步骤能够帮助你更好地学习前端技术。 ### 回答3： 学习前端的步骤可以分为...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值