华清远见重庆中心-前端知识技术总结

最新推荐文章于 2024-06-22 19:05:40 发布

qq_53837616

最新推荐文章于 2024-06-22 19:05:40 发布

阅读量254

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_53837616/article/details/128402405

版权

HTML

超文本链接，超文本是超级文本的意思，超越了文本的限制。标记也能称为标签，分为单标签和双标签。

标签类型：

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

常用标签

h1~h6:块级元素。标题，文字加粗，1最大
p 块级元素，段落
span行内元素
pre 块级元素，预处理标签
i 行内元素倾斜
u 行内元素，下划线
b 行内元素，加粗
sub 行内元素，文字下标
sup行内元素，文字上标

图片img：单标签，行内元素

<img src="图片路径" alt="无法显示图片时显示的文字",title="鼠标悬停时的提示文字/>

列表：ol/ul/li

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

无序列表ul：

默认前面每一项用实心圆符号修饰，可以通过type属性修改

disc默认。实心圆
circle空心圆
square 正方形
none去掉修饰符号

有序列表ol

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

通过type属性修改

a/A英文字母
I/i罗马符号
1默认数字
none去掉修饰符号

表格table

表格中的标签：

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

td中可以用colspan=”数字“来实现跨行，rowspan=”数字“实现跨列。

多媒体

音频audio

视频video:

controls开启控制器

autoplay自动播放

loop循环

muted静音

水平线hr和换行br

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

a标签

行内元素，双标签

实现超链接：

<a href="资源路径" target="">a</a>

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

-self 默认，在当前页面打开
-blank在新页面打开
-parent在父页面打开

指定的name名

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

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

//设置锚点
<a name="锚点名"></a>
//访问锚点
<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>

表单及表单元素

表单form双标签

<form action="表单提交的最终目的路径" method="表单提交方式">

</form>

action:设置提交路径，可以是一个页面，也可以是后台请求映射

method：设置提交方式

默认值是get，提交的数据会暴露在浏览器地址栏中
post ，提交的数据不会暴露在浏览器的地址栏中

表单元素

input 通过修改关键属性type，变化为不同的组件
select 下拉菜单
textarea文本域

input标签中type属性的值

text文本框
password密码框
radio单选按钮
checkbox复选框
data日历组件
number数字组件
hidden隐藏域
file上传文件
image图片提交按钮
submit提交按钮
reset重置按钮

表单元素中的属性：

name 用于提交数据时设置提交的参数名

value用于设置组件的默认值

checked设置单选按钮和复选框的默认选中、

placeholder：用于设置输入框的提示文字

required用于设置输入框为必填框

selected用于设置下拉菜单的默认选中

disable用于设置某个组件为不可用状态

readolny用于设置某个组件为只读状态

max/min/step：number独有，用于设置最大值、最小值和步长

rows/cols：textarea独有，用于设置文本域的行数和列数

div标签

块级元素，双标签，没有任何特点。

页面布局时采用div布局。

css

选择器

id选择器：

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

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

class选择器

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

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

元素/html/标签选择器：

直接通过标签名获取。

层次选择器：

通过空格或>获取某个元素的子元素。

"元素A 元素B" 表示获取元素A下的所有元素B

""元素A > 元素B" 表示获取元素A下的第一层元素B

群组选择器：

通过,同时选择多个元素

css优先级

style属性==>style标签==>引入css文件。

常用样式

尺寸：

width：设置块级元素的宽度，

height：设置块级元素的高度

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

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

背景backgroung：

样式名	作用	值
backgroung-color	背景色	颜色的单词，十进制RGB，十六进制RGB
backgroung-image	背景图	url（图片路径）
backgroung-repeat	背景重复	默认重复，no-repeat不重复
background-size	背景尺寸	默认加载原图。100%表示完整显示图片。cover表示覆盖元素。
background-position	背景位置	可以同时设置x轴和y轴的距离。
如10px 20px表示向右移动10px，向下移动20px
backgroundattachment	背景固定方式	fixed表示固定背景，scroll或默认表示跟随滚动条移动

border边框

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

样式	作用	值
border-style	边框线型	solid单线，double双线，
dotted点线，dashed虚线
border-width	边框宽度	像素
bordercolor	边框颜色	颜色的三种写法
border	同时设置边框线型、宽度和颜色	1px solid red
border-方向-样式	某个方向的style或width或color。	border-bottom-color:red
border-方向	同时设置指定方向边框线型、宽度和颜色	border-right:1px solid red;

border-上下-左右-radius	设置某个方向为圆角
borderradius	同时设置四个角为圆角。如果正方形，值设置为边长的一半变为圆形
outline	轮廓。
border-collapse	合并相邻边框。

字体font

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

文本text

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

伪类

表示某个元素的某种状态，用于对某些元素在不同的情况下呈现不同的效果。

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

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

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

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

显示方式display

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

浮动float

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

left：向左浮动

right：向右浮动

none：清除浮动

盒子模型

页面中的所有块级元素，都是一个“盒子”，每个“盒子”由元素自身、内边距padding、边框border、外边距margin组成

盒子模型相关样式及作用：

padding，内边距。一个参数表示同时设置4个方向，两个参数表示上下左右；三个参数表示上左右下；四个参数表示上右下左；

padding-方向，某个方向的内边距，方向可以是left、right、top、bottom

margin，外边距。如果某个值设置为auto表示自动将所在容器剩余距离除以2

margin-方向，某个方向的外边距

注：一个元素的所占位置是外边距+边框+内边距+元素自身的大小

溢出overflow

当子元素超出父元素的范围时，称为溢出。通过overflow控制溢出部分的表现。

默认显示溢出部分，溢出部分不会影响后续元素。

hiden：隐藏溢出部分

scroll：使用滚动条

visiable:默认，显示

定位position

将元素以像素为单位调整位置

relative:相对定位，让某个元素，相对于原本的位置进行定位。定位原点为元素本身的位置。“

fixed：固定定位，让某个元素脱离文档流，默认根据页面的四个边界进行定位

absolute:绝对定位，让某个元素脱离文档流，根据已定位的父元素进行定位

文档流：页面中每个元素默认都有自己的位置，这个位置称为文档流。

JavaScript

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

HTML用于定义页面中的内容

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

JS用来操作HTML元素

HTML+CSS+JS组成前端基本三要素。

输出语句：

弹警告框alert();
控制台输出console.log();
打印在新页面document.write();

js组成：1：ECMAScript，2：BOM，浏览器对象模型，3：DOM，文档对象模型

ECMAScript核心语法

数据类型：

原始类型
- 数值型number:整数、小数都称为数值型
- 字符串string:用单引号或双引号引起来的都是字符串
- 布尔型boolean:true/false
- 未定义undefined:当某个变量没有声明或没有值时
- 空nul:某个引用类型变量通过null设置为空
引用类型

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

定义变量

var/let 变量名;

标识符的命名规则：

由字母、数字、下划线和$符号组成
不能以数字开头
不能使用js中的关键字

变量的初始化：

var name;

name = "Tom";

var age = 22;

//可以不用var定义，但不建议

sex = "男";

运算符

js中的boolean类型，0可以表示false，非0可以表示true。

默认true为1，所以可以用true或false当做数字来运算。

算术(+ - * / %)
关系

< >= <=
逻辑&& || !
赋值和复合赋值

= += -= *= /= %=
自增自减

++ --

条件

表达式1?表达式2:表达式3

条件语句

if语句：

js中的if语句条件可以是boolean值也可以是一个数字(0false,非0true)

多分支if语句，如果有一个条件满足则不再判断后续的条件，所以将范围最小的情况写在最前

switch语句：

与java中不同的是，小括号中没有数据类型的限制，不同的case后也可以写不同类型的数据。没有break，会继续执行后续case后的内容，直到break或没有代码，如果没有任何case满足，执行default

循环

while：先判断后执行，有可能一次都不执行。
do-while：先执行一次，再判断，至少执行一次。

for：

for(定义循环变量;判断循环条件;更新循环变量){
循环体
}

continue停止本次循环，执行下一次循环。

break停止所有循环。

JS中的本地对象

数组Array:可以保存不同类型的数据，数组大小可变。

定义数组:

var 数组名 = new Array();
var 数组名 = [];

数组遍历

for (var i = 0; i < list1.length; i++) {
console.log(list1[i]);
}
// 增强for循环，获取保存了数据的下标
for(var index in list1){
// 通过下标获取元素
console.log(list1[index]);
}

数组初始化

var 数组名 = new Array(元素1,元素2...);
var 数组名 = [元素1,元素2...];

常用方法:

方法名	作用	返回值
sort()	将数组中的元素进行升序排序	排序后的数组
reverse()	将数组中的元素倒序保存	倒序后的数组
pop()	移除数组中的最后一个元素	被移除的元素
push(元素)	添加元素到数组末尾	最新的数组长度
shift()	移除数组中的第一个元素	被移除的元素
unshift(元素)	添加元素到数组开头	最新的数组长度
fill(元素)	使用指定元素填充数组	填充后的数组
splice(index)	从指定索引开始分割数组，方法调用后，数组为剩余
元素的数组	截取到的元素集合
以上方法在调用后，都会影响原数组

日期Date

创建Date对象

var now = new Date();

常用方法：

// 获取当前日期时间
var now = new Date();
// 年
document.write(now.getFullYear()+"<br>");
// 0-11表示1-12月
document.write(now.getMonth()+"<br>");
// 日期
document.write(now.getDate()+"<br>");
// 一周中的第几天 0-6表示周天到周六
document.write(now.getDay()+"<br>");
document.write(now.getHours()+"<br>");
document.write(now.getMinutes()+"<br>");
document.write(now.getSeconds()+"<br>");
// 获取从1970/1/1起经过的毫秒数
document.write(now.getTime()+"<br>");
//以上方法都有对应的set方法用于设置指定值
// 获取日期时间字符串
document.write(now.toString()+"<br>");
// 获取日期部分字符串
document.write(now.toDateString()+"<br>");
// 获取时间部分字符串
document.write(now.toTimeString()+"<br>");
// 以当前环境输出日期时间字符串
document.write(now.toLocaleString()+"<br>");
// 以当前环境输出日期字符串
document.write(now.toLocaleDateString()+"<br>");
// 以当前环境输出时间字符串
document.write(now.toLocaleTimeString()+"<br>");

字符串

在js中字符串其实是一个字符数组，字符串对象有属性length

常用方法：

var str = "rejklFDSAkdsja";
//length - 字符串的长度
console.log(str.length);
//字符串转小写，返回新字符串，不会改变源字符串内容
var lowerStr = str.toLowerCase();
console.log(lowerStr);
//字符串转大写，返回新字符串，不会改变源字符串内容
var upperStr = str.toUpperCase();
console.log(upperStr);
var blank = " ";
blank = " 123 ";
blank = " 1 2 3 ";
console.log(blank.length);
//去掉字符串前后（左右）的空格，返回新字符串
var newBlank = blank.trim();
console.log(newBlank.length);
console.log(newBlank);
blank = " a b c ";
//去掉字符串左边的空格
console.log(blank.trimLeft());
//去掉字符串右边的空格
console.log(blank.trimRight());
var str2 = "abcd12,34,xyz";
//返回指定下标的字符
console.log(str2.charAt(5));
//返回指定字符（字符串）在字符串中第一次出现的下标，从0开始
var index = str2.indexOf(",");
console.log(index);
//返回指定字符（字符串）在原字符串中最后一次出现的下标
console.log(str2.lastIndexOf(","));
//截取用逗号分割的两个dianhua号码
var phone = "13047598723,15123648695";
//substring截取指定位置开始（包含），到指定位置结束（不包含）的子字符串
var phone1 = phone.substring(0, phone.indexOf(","));
console.log(phone1);
var phone2 = phone.substring(phone.indexOf(",") + 1, phone.length);
console.log(phone2);
//substr 截取从指定位置开始（包含），指定长度的子字符串.长度超过字符串的长度，不
会报错，截取到字符串结束
phone2 =phone.substr(phone.indexOf(",") + 1, 11);
console.log(phone2);
//按指定字符（字符串）拆分字符串为数组,
var arrPhone = phone.split(",");
console.log(arrPhone[0]);
console.log(arrPhone[1]);
var chars = "abc中edfeg";
//用空字符串拆分，实际就是按字符拆分
var arrChar = chars.split("");
正则表达式
参考网址： https://www.w3school.com.cn/jsref/jsref_obj_regexp.asp
正则表达式对字符串匹配（规定字符串的格式，比如长度，允许出现的字符。。。）的工具，一般用于
表单输入数据的校验
正则表达式的定义和使用
 两种定义方式：var reg1 = new RegExp("hqyj");
var reg2 = /hqyj/;
 校验字符串使用test方法，字符串跟正则表达式匹配，返回true, 否则返回false
reg2.test("hqyj");
正则表达式的规则：
方括号
[1-9], [a-z] 范围
[abc], [135] 列举
（130|151|189） 组合，多选一
元字符
\d 数字
\w 字符
. 数字、字符、符号
\s 空格
\n 换行
\r 回车
\t 制表符
\ 转义符， \. 匹配点 比如url中点 www.com.cn
^ 以什么开头
$ 以什么结尾
量词
console.log(arrChar[3]);
//拼接字符串
var stra = "xxx,";
var strb = "你好";
console.log(stra + strb);
console.log(stra.concat(strb));
var str3 = "a d min";
//用新字符（字符串）替换第一个旧的字符串
console.log(str3.replace(" ", ""));
console.log(str3.replaceAll(" ", ""));

正则表达式

正则表达式对字符串匹配（规定字符串的格式，比如长度，允许出现的字符。。。）的工具，一般用于表单输入数据的校验

正则表达式的定义和使用

两种定义方式：var reg1 = new RegExp("hqyj");

var reg2 = /hqyj/;

校验字符串使用test方法，字符串跟正则表达式匹配，返回true, 否则返回false

reg2.test("hqyj");

正则表达式的规则：
- 方括号
  
  [1-9], [a-z] 范围
  
  [abc], [135] 列举
  
  （130|151|189）组合，多选一
- 元字符
  
  \d 数字
  
  \w 字符
  
  . 数字、字符、符号
  
  \s 空格
  
  \n 换行
  
  \r 回车
  
  \t 制表符
  
  \ 转义符， . 匹配点比如url中点 www.com.cn
  
  ^ 以什么开头
  
  $ 以什么结尾
- 量词
  
  一个或多个

0个或多个

? 0个或1个

{n} n个

{m, n} m到n个

{m, } m到任意个

修饰符

i 忽略大小写

g 全局匹配（匹配字符串的每一个符合规则的字符）

、

Math

floor() 向下取整
ceil() 向上取整
round() 四舍五入
abs() 取绝对值
random() 产生[0, 1)的随机数
产生随机数的公式
- [m, n]的随机数： Math.floor(Math.random() * (n - m + 1)) + m
- [m, n) 的随机数：Math.floor(Math.random() * (n - m)) + m

函数 function

自定义函数

函数的定义

function 函数名(参数1，参数2...){

//代码

return 返回值； //函数不需要返回值，省略return语句

}
函数调用

对象.函数名(参数);

js默认的全局函数

//js自带的全局函数
//字符串转整数
console.log(parseInt("85"));
console.log(parseInt("abc")); //返回结果为NaN （not a number）
console.log(parseInt("99abc"));//99, 数字开头的字符串能把前面的数字转为整数，后面部分的字
符自动丢弃
// 字符串转小数
console.log(parseFloat("3.14"));
console.log(parseFloat("a.14"));// NaN
console.log(isNaN(parseFloat("a.14")));// true, 说明字符不是数字，转换失败
console.log(parseFloat("3.1515927").toFixed(2));//toFixed()对小数保留小数的位数
console.log(parseFloat("3.14xyz"));//3.14
// eval, 把字符串中能执行的内容当语句执行
console.log(eval("3 + 2")); //5

匿名函数

标签.事件=function(){
}

弹框

警告框，带有提示文字和确认按钮
```
alert("提示文字")
```
输入框，带有输入框和确认取消按钮，点击确认，返回值为输入的内容

prompt("提示文字")
确认框，带有确认取消按钮，点击确认返回true，否则返回false

confirm("提示文字")

window对象

表示浏览器窗口对象，可以获取浏览器相关信息，调用浏览器的某些行为

常用属性和行为	作用
window.innerWidth	获取当前浏览器窗口可视区域宽度
window.innerHeight	获取当前浏览器窗口可视区域高度
windowscreen	获取当前页面screen对象，保存了屏幕相关信息
window.location	获取当前页面location对象，保存了浏览器地址栏相关信息
window.history	获取当前页面history对象，保存了浏览器历史记录相关信息
window.alert()	警告框
window.prompt()	输入框
window.confirm()	确认框
var wid=window.open()	弹出新窗口，返回值为弹出的窗口对象
wid.close()
window.close()	关闭窗口。如果通过open()方法的返回值调用，关闭打开的新窗口；如果通过window调用，关闭当前窗口
var myTimeout=window.setTimeout(函数,毫秒)	设置延时生效，在指定毫秒后执行一次指定函数。通常是一个匿名函数
window.clearTimeout(myTmeout)	取消指定的延时生效
var myInterval=window.setInterval(函数,毫秒)	设置重复生效，在指定的毫秒后重复执行指定函数，通常是一个匿名函数
window.clearInterval(myInterval)	取消指定的重复生效

screen对象

用于获取屏幕相关信息

属性	作用
[window.]screen.width	获取当前屏幕设置的宽度
[window.]screen.height	获取当前屏幕设置的高度
[window.]screen.availWidth	获取当前屏幕除任务栏之外的宽度
[window.]screen.availHeight	获取当前屏幕除任务栏之外的高度

location对象

用于设置或获取地址栏相关信息

常用属性和方法	作用
[window.]location.href	获取或设置当前浏览器地址，能回退
[window.]location.assign("地址")	设置当前浏览器地址，能回退
[window.]location.replace("地址")	设置当前浏览器地址，不能回退
[window.]location.reload()	重新加载当前页面

DOM

文档对象模型

每个页面都是一个文档树document tree
页面中的每个标签都是这个树的节点node
根节点是html
document对象是DOM中的核心对象，表示当前页面对象
DOM用于操作(获取设置内容、更改样式等)页面中的节点

获取节点

获取设置节点文本

innerText:读取或设置某个节点的内容(双标签中的内容)，无论设置什么内容都会原样显示

innerHTML:读取或设置某个节点的内容(双标签中的内容)，设置的内容中如果有HTML元素会识别HTML元素

获取设置节点属性

常用属性	作用
节点.src	获取或设置资源路径，如img的src
节点.value	获取或设置标签的value属性，如表单元素的value
节点.checked	获取或设置单选按钮和复选框的选中状态
节点.className	获取或设置标签的class属性值
节点.href	获取或设置标签的href属性值，如a的href

创建添加删除节点

创建节点:

document.createElement("div");

此时创建的节点处于"游离态",需要添加到其他节点中才能使用。

添加子节点:

//父节点.appendChild(子节点);
var md=document.createElement("div");
document.body.appendChild(md);

删除子节点

//父节点.removeChild(子节点)
var md=document.getElementById("md")
document.body.removeChild(md);

jQuery

jQuery是一个轻量级的javascript函数库，封装了很多javascript中的内容。

作用

用于获取文档中的元素，对元素进行操作
更强大的选择器
支持链式写法
封装了ajax，更方便使用

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

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

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

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

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

jQuery对象转换为dom对象

jQuery对象[0]
jQuery对象.get(0)

dom对象转换为jQuery

$(dom对象)

基本选择器

基本选择器
$("#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节点

过滤选择器

普通过滤

$("选择器:特定单词")

普通过滤
$("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")	得到被选中的下拉菜单选项
(":reset")/(":submit")	得到重置/提交按钮

属性过滤选择器

属性过滤
$("a[href]")	得到所有包含href属性的a标签
$("a:not([href])")	得到所有不包含href属性的a标签
$("div[属性=值]")	得到指定属性和值的div
$("div[属性!=值]")	得到指定属性不等于指定值的div
$("div[属性^=值]")	得到以指定值开头的指定属性的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值

总结：

对于前端的内容，理解到是不难，但是知识点太多了，很难记住，每次需要使用其中的一个方法时，经常想不起来或单词记不住。还有就是jQuare和js的语法容易搞混，因为每次想要实现一个效果时，两种方法都能实现，平时有提示还好，一旦脱离环境后，真的很难知道怎么去实现。平时去实现一个效果或者一个页面时，也会经常去翻以前的笔记等。这部分需要经常去联系，才能提高写代码的效率。即使如此，也不能保证每个方法都能熟悉运用。我认为，这部分的内容能够看懂别人写的代码，根据一些资料或者笔记能够写出理想的效果就十分不错了。