重庆华清远见-----前端阶段总结

最新推荐文章于 2024-06-09 18:24:15 发布

Young469

最新推荐文章于 2024-06-09 18:24:15 发布

阅读量245

点赞数

文章标签： java javascript 开发语言

本文链接：https://blog.csdn.net/qq_61840959/article/details/128402545

版权

应用程序的分类

客户端/服务器
Client / Server CS模式

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

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

浏览器/服务器
Browser / Server BS模式

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

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

HTML
Hyper Text Markup Language 超文本标记语言

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

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

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

标签的类型

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

标签的属性

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

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

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

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

页面种显示颜色的方式

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

常用标签

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

Emojo表情

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

无序列表ul

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

通过type属性修改符号

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

<ul>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
</ul>

有序列表ol

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

<ol>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
</ol>

表格table

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

*colspan=“3”属性实现跨3列；rowspan=“2”属性实现跨2行

超链接

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

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

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

_self 默认。在当前页面打开
_blank 在新页面打开
_parent 在父页面打开
指定的name名
- 如果是锚点的name，通过“#name“访问
- 如果是iframe的name，通过"name"访问

浮动框架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>

表单和表单元素

表单form

双标签，用于接收用户输入的数据

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

</form>

form表单有两个重要的属性

action:设置提交路径
- 可以是一个页面，也可以是后台请求映射
method:设置提交方式
- 默认值为get，表示使用get方式提交，提交的数据会暴露在浏览器地址栏中
- 设置为post方式，提交的数据不会暴露在浏览器地址栏中

表单元素

常用表单元素	作用
input	单标签，行内元素。通过修改关键属性type，变化为不同的组件
select	双标签，行内元素。下拉菜单
textarea	双标签，行内元素。文本域

input标签type属性的值	作用
text	文本框
password	密码框
radio	单选按钮
checkbox	复选框
date	日历组件
number	数字组件
hidden	隐藏域
file	上传文件
image	图片提交按钮
submit	提交按钮
reset	重置按

表单元素中的属性	作用
name	用于提交数据时设置提交的参数名
value	用于设置组件的默认值
checked	用于设置单选按钮和复选框的默认选中
placeholder	用于设置输入框的提示文字
required	用于设置输入框为必填项
selected	用于设置下拉菜单默认选中
disabled	用于设置某个组件为不可用状态
readonly	用于设置某个组件为只读状态
max/min/step	number独有，用于设置最大值、最小值和步长
rows/cols/	textarea独有，用于设置文本域的行数和列数

div标签

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

页面布局时采用div布局。

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>

层次选择器

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

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

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

<html>
    <head>
        <style>
            #father div{
                获取其中的所有子元素
            }
            #father > div{
                获取其中的第一层子元素
            }
        </style>
    </head>
    <body>
        <div id="father">
            <div>
                <div>使用>无法获取该div</div>
            </div>
            <div></div>
        </div>
    </body>
</html>

群组选择器

通过,同时选择多个元素

<html>
    <head>
        <style>
            div,#mp,.mu{

            }
        </style>
    </head>
    <body>
        <div ></div>
        <p id="mp"></p>
        <ul class="mu">
            <li></li>
        </ul>
    </body>
</html>

CSS优先级

style属性==>style标签==>引入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、bottom	border-bottom-color:red
border-方向	同时设置指定方向边框线型、宽度和颜色	border-right:1px solid red;
border-上下-左右-radius	设置某个方向为圆角
border-radius	同时设置四个角为圆角。如果正方形，值设置为边长的一半变为圆形
outline	轮廓。input文本框获得焦点时，会自动显示一个轮廓，通过将该属性设置为none去除轮廓
border-collapse	合并相邻边框。通常用于表格设置边框时，将其值改为collapse，表示合并相邻td边框。	collapse

伪类

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

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

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

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

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

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

显示方式display

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

浮动float

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

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

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

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

display:inline-block

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

float:left

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

盒子模型

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

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

内边距padding：边框与元素自身之间的距离

外边距margin：元素A的边框与元素B的边框之间的距离

盒子模型相关样式	作用
padding	内边距。一个参数表示同时设置4个方向，两个参数表示上下左右；三个参数表示上左右下；四个参数表示上右下左；
padding-方向	某个方向的内边距，方向可以是left、right、top、bottom
margin	外边距。如果某个值设置为auto表示自动将所在容器剩余距离除以2
margin-方向	某个方向的外边距

定位position

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

值	作用
relative	相对定位
fixed	固定定位
absolute	绝对定位

相对定义relative

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

元素不会脱离文档流(后续元素不会顶替其位置)。

固定定位fixed

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

通常用于放置一些工具、广告、返回首页等。

绝对定位absolute

让某个元素脱离文档流，根据已定位的父元素进行定位。如果没有已定位的父元素，会根据页面定位。

层叠z-index

某个已定位的元素，可以通过z-index控制其层叠顺序。

z-index是一个数字，数字越大，距离视线越近。

不透明度

取值范围[0,1]，值越大，越不透明

opacity

独立的样式，修改某个元素的不透明度

动画animation

1.定义动画的关键帧

@keyframes 动画名{
    0%{
        /*该阶段的样式*/
        样式名:值;
    }
    25%{}
    50%{}
    75%{}
    100%{}
}

2.给某个元素设置animation样式

#xxx{
    /*指定动画名*/
    animation-name:动画名;
    /*动画执行时间*/
    animation-duration:3s;
    /*延时*/
    animation-delay:3s;
    /*动画执行次数 infinite无限*/
    animation-iteration-count:4;
    /*动画时间函数 linear匀速  ease-in ease-out ease-in-out*/
    animation-timing-function:linear;

    /*简写 只写一个时间表示用时 写两个时间表示第一个是用时，第二个是延时*/
    animation:动画名 5s 2s infinite linear;
}

animation相关样式	作用
animation-name:动画名	执行指定动画
animation-duration:3s	动画执行时间
animation-delay:3s	动画延时时间
animation-iteration-count:3	动画执行次数，infinite表示无限
animation-timing-function:linear	动画执行时间函数，linear表示匀速
animation:动画名 5s 2s	简写。只写一个时间表示用时写两个时间表示第一个是用时，第二个是延时

JavaScript

JavaScript通常简称为JS，由网景(NetScape)公司推出。

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

弱类型：没有数据类型的限制，变量甚至可以不同定义就能使用。

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

script脚本：按指令顺序执行。

JS的作用

HTML用于定义页面中的内容

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

JS用来操作HTML元素

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

可以在页面中控制任意元素
可以在页面中动态嵌入元素
可以操作浏览器
可以与用户进行数据交互
JS写在哪里

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <!-- 通过提示框输出alert("输出内容") -->
        <button onclick="alert('Hello JS!')">点击1</button>
        <!-- 通过控制台输出console.log("输出内容") -->
        <button onclick="console.log('Hello JS!')">点击2</button>
        <!-- 通过新页面输出document.write("输出内容") -->
        <button onclick="document.write('Hello JS!')">点击3</button>
    </body>
</html>

2.

该标签是一个双标签，可以放在页面的任何位置，通常放在head标签中或body标签结束之前

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 可以将js代码写在这里 -->
        <script>
            //js代码
        </script>
    </head>
    <body>
        <!-- 建议将js代码写在这里 -->
        <script>
            //js代码
        </script>
    </body>
</html>

3.写到一个独立的.js文件中，再通过script标签导入

1.新建一个.js文件，将js代码保存在其中

```
document.getElementById("xxx");
```
2.在也中通过script标签引入

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

JS中的输出语句

alert(字符串或变量);//弹出警告窗
console.log(字符串或变量)//控制台输出

document.write(字符串或变量);//打印在页面中

JS的组成

1.ECMAScript

简称为ES，是JS的标准，也是JS的核心语法。

包含了数据类型、定义变量、流程控制语句等语法内容。

2.BOM

浏览器对象模型

3.DOM

文档对象模型

运算符

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

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

> < >= <=
用法同java，结果为boolean
==
比较值是否相同，不比较数据类型，如"123"==123结果为true。
===
比较值和数据类型是否相同，如"123"===123结果为false。
!=
比较值是否不同，如"123"!=123结果为false
!==
比较值和数据类型是否不同，如"123"!==123结果为true

自增自减

++ --
符号在前，先+1或-1后使用
符号在后，先使用后+1或-1
如果独立成行，都为+1或-1
var i=10;
var res=i-- - --i;
//res为10-8=2,i最终为8

window对象

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

常用属性和行为	作用
window.innerWidth	获取当前浏览器窗口可视区域宽度
window.innerHeight	获取当前浏览器窗口可视区域高度
window.screen	获取当前页面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.]location.href	获取或设置当前浏览器地址，能回退
[window.]location.assign(“地址”)	设置当前浏览器地址，能回退
[window.]location.replace(“地址”)	设置当前浏览器地址，不能回退
[window.]location.reload()	重新加载当前页面

history对象

方法	作用
[window.]history.back()/go(-1)	回退
[window.]history.forward()/go(1)	前进

DOM

Document Object Model

文档对象模型

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

标签元素节点==DOM对象

获取节点

获取节点的方式	作用
document.getElementById(“某个标签的id名”)	根据id名获取页面中唯一的节点。返回获取的节点对象。
document.getElementsByClassName(“某些标签的class名”)	根据class名获取页面中对应的所有节点。返回获取的节点数组。
document.getElementsByTagName(“标签名”);	根据标签名获取页面中对应的所有节点。返回获取的节点数组。
document.getElementsByName(“标签的name属性值”)	根据标签的name属性值获取对应的所有节点。返回获取的节点数组。

获取设置节点文本

innerText

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

innerHTML

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

获取设置节点属性

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

节点样式

修改单个样式

节点.style.样式名=“值”；

样式名在这里需要使用驼峰命名法。如background-color，要写成backgroundColor

修改多个样式

节点.style.cssText=“样式名:值;样式名:值”；

样式名和css中的写法一样

通过"节点.style.样式"只能获取通过该方式设置过的样式。

创建添加删除节点

创建节点

document.createElement("标签名");

添加子节点

父节点.appendChild(子节点);

删除子节点

父节点.removeChild(子节点)

获取父节点

某节点.parentNode

获取子节点

//父节点.children 获取子节点的数组
//父节点.firstChild 获取第一个子节点
//父节点.lastChild 获取最后一个子节点

事件

某个节点的某个行为。

给节点添加事件

<script>
    节点.事件 = function(){
    //触发事件时执行的内容
    }
</script>

<button onclick="函数(实参)">
    按钮
</button>
<script>
    functon test(){
        //xxxx
    }
</script>

常用事件

常用事件	作用
onclick	鼠标单击
ondblclick	鼠标双击
onfocus	文本框聚焦
onblur	文本框失去焦点
onmouseenter/onmouseover	鼠标移入
onmouseout/onmouseleave	鼠标移出
onmousemove	鼠标移动
onmousewheel	鼠标滚轮滚动
onmousedown/onmouseup	鼠标按下/松开
onsubmit	表单提交
onchange	改变

event对象

在某个函数中传入一个参数，通常为e或event，就可以监听对应的事件。

如在onmouse相关的事件中，加入参数event，就能监听鼠标状态。

在onkey相关的事件中加入参数event，就能监听键盘状态等。

节点.事件=function(event){

}

event对象常用属性和方法	作用
event.clientX;	获取当前鼠标水平位置
event.clientY;	获取当前鼠标垂直位置
event.preventDefault();	阻止默认事件
event.stopPropagation();	阻止事件冒泡

事件冒泡

文档中节点如果有重叠的情况，并且这些重叠的节点都有相同的事件。

默认在子节点触发事件时，父节点也会触发事件，这种情况称为事件冒泡。

通过event.stopPropagation();阻止事件冒泡发生。

表单相关

表单提交

不要使用提交按钮的单击事件，要使用表单的onsubmit事件

获取表单

//使用常用的id、class、标签名、name属性名，通过document.getElementXXX方式获取
//还可以使用document.forms获取当前页面中表单的数组
document.forms[0].οnsubmit=function(){
}

阻止表单提交

//在表单的提交事件中，使用return false阻止表单提交

输入框

获取输入框中输入的内容

//var 变量 = 节点.value;

设置输入框的内容

//节点.value = 值;
document.getElementsByName("username")[0].value = "xxx";

单选按钮

判断是否选中

//节点.checked结果为true表示选中

全选

点击全选时，将所有复选框的选中状态设置为全选按钮的选中状态

反选

点击反选时，将所有复选框的选中状态设置为它自身相反的选中状态

获取复选框选中的值

复选框需要自己设置value的值。

通常会定义一个数组保存最终选择的各个选项的value值。

通过遍历所有复选框，判断其状态，如果被选中，将其value添加到数组中。

下拉菜单

获取选中的值

下拉但可以通过option的value属性获取选中的值，如果没有设置value，获取的是option标签中的文本。

如果有value属性，获取实际的value值。

jQuery

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

作用

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

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

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对象)

$符号冲突问题

在页面中引入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节点

过滤选择器

普通过滤

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

普通过滤
$(“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

操作节点

获取、设置节点内容

函数
节点.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值