html

unit01-HTML、CSS

HTML: 用于开发网页的一门技术

CSS: 用于修饰、渲染网页的一门技术

HTML+CSS可以开发一个非常美观、非常漂亮的网页

开发网页 盖房子

HTML标签搭建网页的结构 砖块(搭建房子的结构)

CSS属性 石灰、油漆等涂料

HTML概述

HTML是什么

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

超文本: 超级文本、超过文本（其中可以包含除了文本以外的其他数据，例如图片、音频、视频等各种格式）

标记：也叫标签、元素、节点等，就是用尖括号(<>)括起来的一组内容，例如：

  
  等
HTML是最基础的开发网页的语言。
HTML由W3C组织提供(CSS/xml)
关于HTML的细节:
(1)使用HTML开发的网页文件通常以 .htm或 .html 为后缀!
(2)使用HTML开发的网页文件由浏览器负责解析并显示（浏览器就是一个html解析器）
(3)HTML是文档的一种(txt/word/ppt/pdf等)
总结: HTML就是用于开发网页的一门语言!!
HTML的结构
1、案例：编写我的第一个HTML网页，并用浏览器打开
新建一个txt文档，将后缀名改为.html，代码实现如下：


    
        
    
    
        
Hello CGB2003...
            
2、HTML结构详解
(1) 文档声明, 用来声明HTML文档所遵循的HTML规范和版本
    上面是html5.0的声明, 也是目前最常用的版本
(2) 根标签, 用于包裹所有的网页内容(除了文档声明)
(2) 头部分, 用来存放HTML文档的基本属性信息, 比如网页的标题, 文档使用的编码等, 这部分信息会被浏览器优先加载.
(3) 体部分, 用来存放可视化的网页内容. 即真正的网页数据
(4) 声明网页的标题
(5) 用来通知浏览器使用哪一个编码来打开HTML文档, 这个编码一定要和文件保存时的编码保持一致, 才不会出现中文乱码问题.
HTML语法(了解)
1、html标签 
标签：也叫做标记、元素等，标签分为开始标签，例如：
、
和结束标签，例如:
、
开始标签和结束标签之间还可以包含其他内容。

    声明网页的标题
    
有些标签开始标签和结束标签之间没有内容要包裹，通常可以写成自闭标签，例如：

 
   等
2、html属性
在标签上可以声明属性(属性不能独立存在,必须声明在标签上)
这是一个div元素
标签上可以声明多个属性，多个属性之间用空格分隔
标签上的属性的值可以使用单引号或者双引号引起来

3、html注释
格式: 
注释的作用: (1)为代码添加解释说明
(2)将一些暂时不需要执行的代码注释
浏览器对于html注释中的内容不会解析，也不会显示！
4、html空格和换行
在浏览器中，多个连续的空白字符（空格、制表符tab、换行）会被浏览器显示为一个空格。那么：
如何在网页中做一个换行：可以使用 
 标签做换行
如何在网页中做一个空格：可以使用 或 做空格
补充: HTML中是不区分大小写的！
HTML中对语法要求非常不严格！（比如大小写混用，或者标签只有开始没有结束，或者标签的不合理嵌套），但是我们在书写HTML时要按照规范来写。
HTML标签
图像标签
通过img标签可以在网页中插入一副图像



其中src属性用于指定图片的路径（图片的路径不要是带盘符的绝对路径，推荐使用相对路径）
width属性用于指定图片的宽度
height属性用于指定图片的高度
超链接标签
超链接就是a标签，通过a标签可以在网页中创建指向另外一个文档的超链接
点击超链接可以跳转到另外一个网页(图片/下载路径等)，示例:

01-第一个网页.html

百度一下，你就不知道




    
其中 href 属性用于指定点击超链接后将要跳转到的URL地址
target属性用于指定以何种方式打开超链接
_self：默认值, 表示在当前窗口中打开超链接
_blank：表示在新的窗口中打开超链接
表格标签
1.案例：在网页中插入一个3*3的表格
案例：在网页中插入一个3*3的表格

    

        
表头1
        
表头2
        
表头3
    
    

        
11

        
12
        
13
    
    

        
21
        
22
        
23
    
    

        
31
        
32
        
33
    

在浏览器中显示效果如下：

在head标签内添加如下内容：

再次刷新浏览器显示效果为：

2、表格标签介绍

table -- 用于在网页中定义一个表格
tr -- 用于定义表格中的行
td -- 用于定义表格中的单元格
th -- 用于定义表头行中的单元格（th中的文本默认居中，并且加粗）

3、练习：使用表格标签在网页中生成一个表格，如下图：

要求如下:

(1) 表格内容如下图, 并设置表格边框
(2) 设置单元格之间没有缝隙, 并设置单元格边框和内容之间的距离为5px
(3) 设置表格的背景颜色为pink, 并设置表格的宽度为70%
(4) 设置表格在网页中居中显示, 并为表格添加表头以及标题

表单标签

1、表单的作用: 用于向服务器提交数据

向服务器提交数据的两种方式：

(1)通过表单向服务器提交数据

表单中可以包含表单项标签，在表单项中可以填写数据（比如用户名、密码等），填写完成后通过提交表单，可以将表单中的数据提交给相应的服务器。

(2)通过超链接向服务器提交数据

http://www.baidu.com?username=张三&pwd=123&like=篮球

百度一下,你就不知道!

在地址栏URL地址的后面通过问号(?)可以拼接参数，参数可以有多个，多个参数之间用&分隔，参数还分为参数名（例如：username/pwd/like）以及参数值(例如:张三/123/篮球)，在回车后访问百度服务器的同时，就可以将问号后面拼接的参数一并带给百度服务器。

2、表单标签

其中action属性用于指定表单的提交地址，例如，将action指向百度服务器，就意味着将来填写完表单后，提交表单将会把表单中的数据提交给百度服务器。

method="GET/POST" 属性是用于指定表单的提交方式，常用的就是GET和POST提交。

表单项标签

1、input元素：

(1)普通文本输入框(比如:用户名/昵称/邮箱/验证码等)

(2)密码输入框(比如:密码/确认密码等)

(3)单选框(比如:性别/部门等)

男

(4)复选框/多选框(比如:爱好/岗位等)

(5)普通按钮(比如:换一张图片)

普通按钮本身没有功能,但我们可以通过js为按钮添加功能或添加行为

(6)提交按钮(比如:提交/注册/登录)

提交按钮用于提交表单中的数据到服务器中!

2、select、option标签：

    北京
    上海
    广州
    深圳

select用于定义一个下拉选框

option用于定义下拉选框上的选项

selected设置当前option选项默认被选中

3、textarea多行文本输入区域：

cols属性: 用于设置文本输入框的列数(宽度)

rows属性: 用于设置文本输入框的行数(高度)

placeholder属性: 设置输入框中的提示消息!

表单细节问题

1、提交表单时，表单中的数据为什么没有被提交？

对于表单中的表单项标签，只要是需要向服务器提交数据，该表单项上必须添加name属性；如果表单项标签上没有name属性，在表单提交时，该项将会被忽略。例如：

2、如何让多个单选框只能有一个被选中？

要求多个单选框必须具有相同的name属性值，如果多个单选框name属性值相同，则说明是一个组的内容，一个组中的单选框只能选择其中的一个！

性别:

    男
    女

3、为什么单选框、复选框选择某一项后提交的值都是on?

因为单选框、复选框只能选择，不同于用户名、密码输入框，可以输入内容。

因此我们需要通过value属性为单选框或复选框设置提交的值(如果不设置默认值都是on)，例如：

男
女

4、如何设置单选框或复选框默认选中某一项?

可以在单选框或复选框标签上添加一个checked="checked"属性，就可以让当前单选框或复选框默认被选中。例如：

男
女

篮球
足球
排球

5、如何设置下拉选框默认选中某一项?

在option标签上添加一个selected="selected"属性，可以让当前option选项默认被选中，例：

    北京
    上海
    广州
    深圳

6、下拉选框中option选项上的value属性的作用是什么？

    北京
    上海
    广州
    深圳

如果某一个选项被选中，并且该选项上添加了value属性，在提交表单时，将会提交value属性的值。

如果某一个选项被选中，该选项上没有添加value属性，在提交表单时，将会提交标签中的内容

其他标签

在html5之前，大多数的音频和视频是通过插件（比如flash）来播放的，html5规定了一种通过 audio和video元素来包含音频和视频的标准方法。

1、audio标签（html5）

audio标签能够播放声音文件或者音频流，例如：

其中audio标签的属性：

src属性：用于指定要播放的音频的URL地址
controls="controls"：为用户显示播放控件，比如播放、暂停和音量控制等
autoplay="autoplay"：音频在就绪后马上播放（自动播放）
loop="loop"：当音频完成播放后，再次开始播放（循环播放）
width、height：设置音频播放器的宽度和高度

之间插入的内容是供不支持 audio 元素的浏览器显示的

2、video标签（html5）

video标签能够播放视频流，目前支持三种视频格式：MPEG4、Ogg、WebM。

其中video标签的属性：

src属性：用于指定要播放的视频的URL地址
controls="controls"：为用户显示播放控件，比如播放、暂停和音量控制等
autoplay="autoplay"：视频在就绪后马上播放（自动播放）
loop="loop"：当视频完成播放后，再次开始播放（循环播放）
width、height：设置视频播放器的宽度和高度

之间插入的内容是供不支持 audio 元素的浏览器显示的（这里不再给出示例）

3、div、span、p标签

div、span、p元素都是非常普通、但是又很常用的标签，它们都是容器标签，可以用来包裹其他元素或文本，将样式添加在这些元素上，就可以为包含在其中的内容设置样式。

div、p：块元素，默认独占一行，可以设置宽高（其中div元素通常用于布局，而p元素通常用于定义段落）

span：行内元素，行内元素可以显示在同一行，不可以设置宽高（span用于包含文本或组合行内元素，以便于统一设置样式）

4、header、footer标签（html5）

标签定义文档的页眉（介绍信息）或页面的头部分

标签定义文档或节的页脚。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

注册表单案例

    
欢迎注册
    

        

            

                
                
用户名:
                

            
            

                
                
密码:
                

            
            

                
                
性别:
                
男 女
                
            
            

                
                
爱好:
                
篮球
                    足球 排球
            
            

                
                
城市:
                

                        北京
                        上海
                        广州
                        深圳
                
            
            

                
                
自我描述:
                

            
            

                
                
                

            
        
    

CSS概述

什么是CSS？(了解)

CSS: 层叠样式表，用于修饰、渲染网页的一门技术

使用css样式修饰网页，可以实现将设置样式的css代码和展示数据的html代码进行分离，增强了网页的展示能力！

在HTML中引入CSS

方式1：通过style属性引入css（不推荐）

这是一个div...

由于上面这种方式是将css样式代码，直接写在标签上的style属性内部，如果属性太多，容易造成页面结构的混乱，不利于后期的维护。

将样式代码写在标签上，样式代码只对当前标签生效，代码无法复用！

并且使用这种方式无法将html标签和css样式进行分离!

因此不推荐使用这种方式！（这种通过style属性添加的样式，叫做行内样式/内联样式）

方式2：通过style标签引入css

在head标签内部可以添加一个style标签，在style标签内部可以直接书写css样式

这种方式是将所有的css样式代码集中在一个style标签内部统一管理，这种方式不会造成页面结构的混乱，并且可以实现代码的复用！

初步的实现了将html标签代码和css样式代码进行了分离!

代码示例 ：

方式3：通过link链接引入外部的css文件

在head标签内部，通过一个link标签可以引入外部的CSS文件

这种方式是将所有的css代码集中在一个单独的css文件中统一管理，真正的实现了将css代码和html代码的分离，实现了代码的复用。

代码示例：html中引入demo.css文件

demo.css文件

@charset "UTF-8";
p{
    border: 2px solid blue;
    color: red;
    font-family: "华文琥珀";
    text-indent: 50px;
}

CSS选择器

所谓的选择器就是能够在html中帮助我们选中元素进行修饰的一门技术。

标签名选择器

通过元素名称(或标签名称)选中指定名称的所有标签

格式: 元素名/标签名{ css样式... }

/* ----- 1.标签名选择器练习 ----- 
将所有span标签的背景颜色设置为#efbdef, 设置字体大小为22px，字体加粗；*/
span{ /* 选中所有的span元素 */
    background-color:#efbdef; 
    font-size: 22px;
    font-weight: bolder;
}

class选择器

可以为元素添加一个通用的属性 -- class，通过class属性为元素设置所属的组，class值相同的元素则为一组。通过class值可以选中这一组的元素，为元素添加样式。

格式：.class值{ css样式... }

实例:

/* ----- 2.类选择器练习 ----- 
(1)将所有的span（但是不包括div和p标签下的span）的背景颜色设置为#faf77b，边框改为2px solid cyan；
(2)将div下的span和内容为"span111"的span，背景颜色设置为#5eff1e、字体颜色设置
#ec0e7e；*/
.s1{ /* 选中所有class值为s1的元素 */
    background: #faf77b;
    border: 2px solid cyan;
}
.s2{ /* 选中所有class值为s2的元素 */
    background: #5eff1e;
    color: #ec0e7e;
}

另外，一个元素也可以设置多个class值，多个class值中间用空格分隔，例如：

span111

表示当前元素同时属于多个分组，多个分组上设置的样式也会同时作用在当前元素上。

如果多个分组设置了相同的样式（但是值不一样），样式会发生冲突，写在后面的样式会覆盖前面的样式！

---

内容补充：选择器优先级顺序：

（1）如果是同一类选择器，同时给某些元素设置了样式，如果样式冲突了，那么写在后面的样式会覆盖前面的样式。

（2）如果是不同的选择器，设置的样式优先级顺序是：id选择器(100) > 类选择器(10) > 元素名选择器(1)

---

id选择器

通过标签上通用的属性id，可以为标签设置一个独一无二的编号（id值应该是唯一的），通过id值可以唯一的选中一个元素。

格式：#id值{ css样式 }

/* ----- 3.id选择器练习 -----
用id选择器将第一个p标签设置字体大小为24px，字体颜色为#a06649, 首行文本缩进20px。*/
#p1{ /* 选中id值为p1的元素 */
    font-size:24px;
    color: #a06649;
    text-indent: 20px;
}

这是一个p元素!!!

后代选择器

选中指定元素内部的指定后代元素

格式: 祖先 后代{ css样式... }

/* ----- 4.后代选择器练习 ----- 
为p元素内部的所有span元素，设置字体大小为18px,字体颜色为红色,背景颜色为pink;*/
p span{ /* 匹配所有p元素内部的所有span元素 */
    font-size:18px;
    color: red;
    background: pink;
}
/* p,span{} 匹配所有的p元素和所有的span元素 */

    这是一个p元素!!!
    这是一个span元素!!!

属性选择器

在选择器选中元素的基础上，根据元素的属性条件筛选/过滤元素

格式：选择器[属性条件1][属性条件2]...{ css样式 }

/* ----- 5.属性选择器 ----- 
为所有的文本输入框，设置背景颜色为#FF7CCC、字体大小22px，首行文本缩进15px；*/
input[type='text']{ /* 匹配所有的input并且type值为text的元素 */
    background: #FF7CCC;
    font-size: 22px;
    text-indent: 15px;
}
input[type='text'][name='email']{ 
    /* 选中所有的input并且type值为text、并且name为email的元素 */
    background : yellow;
}

常用属性总结

文本属性

1、text-align：设置元素内的文本水平对齐方式，其常用取值为:

left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐

2、text-decoration：设置文本的下划线样式，其常用取值为:

underline: 有下划线
none: 没有下划线

3、text-indent：设置文本首行缩进，单位: 像素/百分比

4、letter-spacing：设置字符间隔/间距，其常用取值为:

normal
像素值

5、text-shadow：设置字体阴影，其取值为:

像素值 像素值 像素值 颜色值
第一个值为阴影水平位移，第二个值为阴影垂直位移，第三个值为阴影扩散值，第四个值为阴影颜色

字体属性

font-size：设置字体大小

font-weight：设置字体粗细 normal、bold、bolder 100/200/300../900

font-family：设置字体，比如微软雅黑、黑体、楷体等

color：设置字体颜色

背景属性

background-color：设置背景颜色

background-image：设置背景图片，url('图片的路径');

background-repeat：设置或检索对象的背景图片是否及如何排列，常用取值：

repeat(默认值,重复排列)
repeat-x(横向重复排列,但纵向不重复)
repaet-y(纵向重复排列,但横向不重复)
no-repeat(不重复)

background-position：设置或检索对象的背景图片位置

background: 背景颜色 背景图片 背景图片是否重复 背景图片的位置

边框（border）

border:2px solid red; -- 设置元素的边框(可以同时设置边框的宽度、样式、颜色)

border属性可以拆分为如下设置:

border-width: 2px; -- 设置元素边框的宽度
border-style: solid; -- 设置元素边框的样式
border-color: red; -- 设置元素边框的颜色

其中border-width、border-style、border-color也可以按照上右下左方向进行拆分，以border-width为例：

border-top-width: 2px; -- 设置上边框的宽度
border-left-width: 2px; -- 设置左边框的宽度
border-right-width: 2px; -- 设置右边框的宽度
border-bottom-width: 2px; -- 设置下边框的宽度

其他属性

width：设置元素的宽度

height：设置元素的高

margin: 设置元素的外边距

margin-top: 10px; -- 设置元素的上外边距为10px;
margin-right: 20px; -- 设置元素的右外边距为20px;
margin-bottom: 30px; -- 设置元素的下外边距为30px;
margin-left: 40px; -- 设置元素的左外边距是40px;
---------------------------------------------
margin: 10px 20px 30px 40px; -- 上 右 下 左, 顺时针方向对应
margin: 10px 20px 30px; -- 上 左右 下
margin: 10px 20px; -- 上下 左右
margin: 10px; -- 上下左右都是10px;

补充: 颜色设置

颜色取值方式常见的方式有三种:

方式一：设置颜色名，例如：

red、green、blue、yellow、cyan、pink、white、black等

方式二：设置#加上六位的十六进制数值

#FF0000（red）、#00FF00（green）、#0000FF（blue）、#FFFF00（yellow）、#00FFFF（cyan）等

方式三：设置rgb颜色值 ( 课间休息：14：46-15：06 )

rgb(255,0,0) 、rgb(0,255,0) 、rgb(0,0,255) 、rgb(255,255,0) 、rgb(0,255,255) 等
（red） （green） （blue） （yellow） （cyan）

网页开发实战

完成JT项目中的登录页面!

完成JT项目中的注册页面!(选作!)

注册页面视频：https://www.bilibili.com/vide...

扩展内容

display属性

display用来设置元素的类型，常用取值：

block：块级元素的默认值
    默认情况下独占一行
    可以设置宽高
inline：行内元素的默认值
    默认情况下多个行内元素可以处在同一行
    一般不能设置宽高
inline-block：行内块元素
    多个元素既可以显示在同一行, 也可以设置宽和高
none：表示隐藏元素

元素类型(了解)

div/span/p 都是一个容器标签，用于包裹其他内容（这些元素本身不具备太多的样式！）

p: 块级元素，默认独占一行，用于包裹一段文本（写文章时用于p标签包裹每一段内容）

div: 块级元素，默认独占一行，用于包裹其他内容，将样式设置在div上，就可以作用在div的内容上。

span：行内元素，默认可以和其他元素显示在同一行。

(1)块级元素（block）

默认情况下，块级元素独占一行

可以设置宽和高，如果设置了就是设置的宽和高

如果不设置宽和高，其中宽是默认填满父元素，而高是由内容决定(由内容支撑)

比如: div/p/h1~h6/form/table 等元素都是块级元素

(2)行内元素（inline）

默认情况下，多个行内元素可以处在同一行

不能设置宽和高

比如: span/input/img/i/b 等元素都是行内元素

(3)行内块元素（inline-block）

既具备行内元素的特征(可以同行显示)，还具备块级元素的特征(可以设置宽和高)

unit02-JavaScript

JavaScript简介

什么是JavaScript(了解)

全称叫做JavaScript，简称叫做JS

由NetScape(网景)公司提供，是一门专门嵌入在浏览器中执行的脚本语言

LiveScript JavaScript

JS运行在浏览器中，负责实现网页中的动画效果

或者是实现表单校验等功能

JS特点和优势(了解)

1、特点：

(1)JS是一门直译式的语言(边解释边执行，没有编译的过程)

java--> 编写时 xx.java --->编译成 xx.class --> 运行class文件

js ---> 编写时 html, 编写时 js文件, 直接运行, 没有编译过程

(2)JS是一门基于对象的语言(JS中没有类的概念,也没有编译的过程)

JS中是有对象的(内置对象、自定义对象)

(3)JS是一门弱类型的语言(Java:强类型)

//在java中: 变量一旦声明, 就属于固定的数据类型, 不能被改变
String str = "abc";
int number = 100;
//在JS中: 变量是不区分类型的, 可以指向任意的数据类型
var s = 100; //number(数值类型)
s = "abc";    //string(字符串类型)
s = true; //boolean(布尔类型)
s = []; //object(对象类型)
s = function(){} //function(对象类型) 

2、优势：

(1)JS具有良好的交互性

(2)JS具有一定的安全性(只能在浏览器内部运行,不能访问浏览器以外的资源)

(3)JS具有跨平台性(JS 浏览器)

( JS语言是跨平台的，是因为有浏览器，但浏览器不跨平台

Java语言是跨平台的，是因为有虚拟机，但虚拟主机不跨平台 )

在HTML书写JS的方式

1、在script标签内部可以书写JS代码：

在head或者body标签内部可以添加一个script标签，在script标签内部可以直接书写JS代码！

2、通过script标签引入外部的JS文件

在head或body标签内部，可以通过script标签引入外部的JS文件。例如：

注意：(1)在引入js文件的script标签内部不要书写JS代码,例如:

(2)不要将引入JS文件的script标签自闭，因为可能会导致文件引入失败，如下：

在引入jQuery函数库文件时，如果文件引入路径错误，则会导致文件引入失败，如下图：

文档就绪事件函数

    
jQuery的引入示例...

问题描述：上面的代码在执行时，会报一个错误：

原因描述：在执行获取id为demo的元素时, h1元素还没有被浏览器加载到，所以获取不到h1元素。

解决方式一：

将script标签移到body内部，也就是h1元素的后面

这样浏览器在加载时，会先加载h1元素，再执行获取h1元素的代码，由于在获取h1元素之前，h1元素已经被浏览器加载过了，所以后面再获取就能够获取到！

代码示例：

    
jQuery的引入示例...
    

解决方式二：

将获取元素的代码放在文档就绪事件函数中，文档就绪事件函数会在浏览器加载完所有的html元素后（也就是加载完最后一个html元素时）立即执行。

由于当前网页中的所有元素都被加载了，h1元素肯定也被加载了，此时再获取h1元素就一定能获取到。

    
jQuery的引入示例...

解决方式三：

将获取元素的代码放在一个自定义的函数中，并将该函数绑定在h1元素的点击事件上，当我们点击h1元素时会执行自定义的函数，函数执行时才获取h1元素，此时就能够获取到h1元素。

    
jQuery的引入示例...

总结：什么时候该使用文档就绪事件函数?

如果在获取元素时，获取元素的代码执行的时机，比元素本身加载的时间还要早，如果元素还没有加载就获取，必然是获取不到的。

可以将获取元素的代码放在文档就绪事件函数中，等浏览器加载完整个网页后，文档就绪事件函数才会执行，此时所有的元素都被加载了，再获取任何元素都能获取到！

jQuery提供的文档就绪事件函数（简写形式）：

其完整写法为：

JS也为我们提供了文档就绪事件函数，其写法为：

jQuery选择器(重点)

基本选择器

(1)元素名选择器
$("div") -- 选中所有的div元素
$("span") -- 选中所有的span元素

(2)class/类选择器
$(".s1") -- 选中所有class值为s1的元素(class值为s1的元素可能是任何元素)
$("span.s1") -- 选中所有class值为s1的span元素

(3)id选择器
$("#one") -- 选中id为one的元素

(4)多元素选择器
$("div,span,.s1,#one") -- 选中所有的div元素,以及所有的span元素,以及所有class值为s1的元素,以及id为one的元素

层级选择器

$("div span") -- 选中所有div内部的所有span元素
$("#one span") -- 选中id为one的元素内部的所有span元素

$("#two+span") -- 选中id为two的元素后面紧邻的span兄弟元素
$("#two").next("span") -- 选中id为two的元素后面紧邻的span兄弟元素
$("#two").prev("span") -- 选中id为two的元素前面紧邻的span兄弟元素

$("#two~span") -- 选中id为two的元素后面所有的span兄弟元素
$("#two").nextAll("span") -- 选中id为two的元素后面所有的span兄弟元素
$("#two").prevAll("span") -- 选中id为two的元素前面所有的span兄弟元素

$("#two").siblings("span") -- 选中id为two的元素前、后所有的span兄弟元素

基本过滤选择器

(1) 选中第一个div元素
$("div:first")
$("div:eq(0)")
$("div").eq(0)

(2) 选中最后一个div元素
$("div:last")
$("div:eq(-1)")
$("div").eq(-1)

(3) 选中第n+1个div元素(n从零开始)
$("div:eq(n)")
$("div").eq(n)

综合案例

创建表格元素

练习1：创建单行单列的表格

function createTable1(){
    //1.创建一个table元素
    var $tab = $("");
    //2.创建一个tr元素
    var $tr = $("");
    //3.创建一个td元素, 并为td添加内容
    var $td = $("");
    $td.html("Hello TD~~");
    //4.将td添加到tr元素内部
    $tr.append( $td );
    //5.将tr添加到table元素内部
    $tab.append( $tr );
    //6.将table添加到body元素内部
    $("body").append( $tab ); 
    
    //$("body").append( "
Hello~~TD...
" );
}

练习2.1：创建单行6列的表格

function createTable2(){
    //1.创建一个table元素
    var $tab = $("");
    //2.创建一个tr元素
    var $tr = $("");
    for(var i=0;i<6;i++){ 
        //3.创建一个td元素, 并为td添加内容
        var $td = $("");
        $td.html("Hello TD~~");
        //4.将td添加到tr元素内部
        $tr.append( $td );
    }
    //5.将tr添加到table元素内部
    $tab.append( $tr );
    //6.将table添加到body元素内部
    $("body").append( $tab ); 
}

练习2.2：创建5行6列的表格

function createTable2(){
    //1.创建一个table元素
    var $tab = $("");
    for(var j=0;j<5;j++){ //外层循环:控制行数
        //2.创建一个tr元素
        var $tr = $("");
        for(var i=0;i<6;i++){ //内层循环:控制列数
            //3.创建一个td元素, 并为td添加内容
            var $td = $("");
            $td.html("Hello TD~~");
            //4.将td添加到tr元素内部
            $tr.append( $td );
        }
        //5.将tr添加到table元素内部
        $tab.append( $tr );
    }
    //6.将table添加到body元素内部
    $("body").append( $tab ); 
}

练习3：创建指定行和列的表格

function createTable3(){
    //获取用户输入的行数和列数(js方式)
    //var rows = document.getElementById("rows").value;
    //var cols = document.getElementById("cols").value;
    var rows = $("#rows").val();
    var cols = $("#cols").val();
    console.log(rows+" : "+cols);
    //1.创建一个table元素
    var $tab = $("");
    for(var j=0;j");
        for(var i=0;i");
            $td.html("Hello TD~~");
            //4.将td添加到tr元素内部
            $tr.append( $td );
        }
        //5.将tr添加到table元素内部
        $tab.append( $tr );
    }
    //6.将table添加到body元素内部
    $("body").append( $tab ); 
}

仿QQ好友列表

/** 通过jQuery实现仿QQ列表好友列表 */
function openDiv(thisobj){ //thisobj是一个js对象 --转成--> jQuery对象
    //先将其他三个分组关闭( 将其他三个分组内的div设置为隐藏 )
    $("table span").not(thisobj).next("div").hide(); //css("display", "none")
    //根据被点击的分组找到分组内的好友列表, 切换好友列表的展示状态
    $(thisobj).next("div").toggle(); //如果元素显示则切换为隐藏, 如果隐藏则切换为显示
}

模拟员工信息管理系统

练习1：添加员工信息

function addEmp(){
    //1.获取要添加的员工信息(id, name, email, salary)
    var id = $("#box1 input[name='id']").val().trim();
    var name = $("#box1 input[name='name']").val().trim();
    var email = $("#box1 input[name='email']").val().trim();
    var salary = $("#box1 input[name='salary']").val().trim();
    console.log(id+" : "+name+" : "+email+" : "+salary);
    
    //2.校验员工信息
    //2.1.添加的员工信息不能为空!
    if( id == "" || name == "" || email == "" || salary == "" ){
        alert( "添加的员工信息不能为空!" );
        return;
    }
    
    //2.2.添加的员工id不能重复! (id=3)
    //获取所有的tr元素, 并遍历所有的tr元素
    var flag = false; //false表示id是不存在的!!!
    $("table tr").each(function(){ //this(JS对象)表示当前被遍历的元素 
        // this --转换为jQuery对象--> $( this ) 
        var _id = $(this).find("td:eq(1)").text();
        //拿着用户输入的id和当前员工的id进行比较
        if( id == _id ){ //只要有一个相等,就说明id已存在,则停止添加
            alert("您输入的员工ID已存在, 请重新添加!");
            flag = true; //true表示id已存在!!
            //return; 放在这里的return不能终止程序的执行
        }
    });
    if( flag ){ //true表示id已存在!!
        return;
    }
    //3.将员工信息添加到页面上(添加到table中)
    //>>创建一个tr元素
    var $tr = $("");
    //>>创建5个td元素,并将员工信息添加到td中
    var $td1 = $(""); //复选框
    var $td2 = $(""+id+""); //ID
    var $td3 = $(""+name+""); //name
    var $td4 = $(""+email+""); //email
    var $td5 = $(""+salary+""); //email
    //>>将td元素添加到tr中
    $tr.append( $td1 ).append( $td2 ).append( $td3 ).append( $td4 ).append( $td5 );
            
    //>>将tr元素添加到table中
    $("table").append( $tr );
}

练习2：删除员工信息

function delEmp(){
    //1.获取所选中员工所在的tr行 (获取所有被选中的复选框)
    //$("input:checked").parents("tr").remove(); //会连接表头一起删除
    $("input:checked").parent("td").parent("tr").remove();
}

练习3：修改员工信息（自己完成）

练习4：实现全选或全不选

function checkAll(){
    //1.获取全选复选框的选中状态( 选中(true)?  没选中(false)? )
    var isCheck = $("#all").prop("checked"); //true|false
    //2.获取所有普通复选框, 将全选框的选中状态设置给所有普通复选框
    $("input[type='checkbox'][id!='all']").prop("checked",isCheck);
}

jQuery总结

html元素操作

1、创建元素

$("
") -- 创建一个div元素，返回的是一个jQuery对象,表示创建的div元素
$("
xxxx
") -- 创建一个包含内容的div元素，返回的是一个jQuery对象,表示创建的div元素

2、添加子元素

$parent.append( $child ) -- 父元素调用方法添加子元素
$("body").append( "
我是新来的...
" ); -- 往body元素内部追加一个div子元素

3、删除元素

$("div").remove() -- 删除所有的div元素

JS删除所有div元素：
//获取所有的div元素(返回的是所有div组成的数组)
var divArr = document.getElementsByTagName("div"); //div数组
//遍历div数组,依次删除每一个div元素
var len = divArr.length;
for(var i=0;i

4、替换元素

$("div").replaceWith("
我是来替换的…
")

html元素内容和值的操作

      这是一个div11元素
    这是一个span元素
    这是一个div1111元素

1、html()函数 (类似于js中的innerHTML属性)

-- 用于获取或设置元素的内容，比如为div、span、p、h1~h6、table、tr、td、form等元素设置内容

$("div").html() -- 获取所有div中的第一个div的内容
$("div").html("xxxx") -- 为所有div设置内容

2、text()函数 (类似于js中的innerText属性，innerText在部分浏览器中不兼容)

-- 用于获取或设置元素的文本内容

$("div").text() -- 获取所有div中的所有文本内容
$("div").text("xxxx") -- 为所有div设置文本内容

3、val()函数 (类似于js中的value属性)

-- 获取或设置表单项元素的value值(input/select/option/textarea)

$("input").val() -- 获取所有input元素中的第一个input元素的value值
$("input").val(值) -- 为所有的input元素设置value值

元素属性和css属性操作

1、prop()函数 -- 用于获取或设置元素的属性值

在jQuery1.6版本之后才有这个函数，1.6之前版本的jQuery可以使用attr()函数

$("input[type='checkbox']").prop("checked")
// 获取input复选框的选中状态, 返回true表示复选框为选中状态,返回false表示复选框为取消选中状态
$("input[type='checkbox']").prop("checked", true)
// 设置所匹配的复选框元素为选中状态

$("#inp").prop("name"); //获取id为inp元素的name属性值, 返回useranme
$("#inp").prop("name","user"); //为id为inp的元素设置name属性值, name属性值就会变成user

2、css()函数 -- 用于获取或设置元素的css属性值

$("#div1").css("width") -- 获取id为div1元素的宽度
$("#div1").css("width","200px") -- 设置id为div1元素的宽度为200px
$("#div1").css({
    "width" : "200px",
    "height" : "150px",
    "border" : "5px solid red",
    "background" : "pink"
}); // 为id为div1的元素设置宽度为200px、高度为150px、边框以及背景颜色等样式

其他函数

1、each() 函数

$(selector).each(function( index,element ){})
// each()函数可以遍历$(selector)选择器选中的所有元素(即每次都选择器选中的元素中获取一个元素,并执行function 函数)
// function中的index -- 表示遍历的元素的下标
// function中的element -- 表示当前正在遍历的元素(也可以通过this获取)

示例：

$("table tr").each(function(){
    //从当前行中获取第二个单元格的内容(当前行的id值)
    var tempId = $(this).find("td").eq(1).html();
    //拿着用户输入的id 和 每一行中的id值进行比较
    if( id == tempId ){
        alert("添加失败，id已存在！");
        flag = true; //id存在，更新flag的值，true表示已存在！
    }
});

2、show()/hide() 函数

show() -- 设置元素由隐藏变为显示

$("div").show() -- 设置所有的div元素为显示

等价于:

$("div").css("display", "block");

hide() -- 设置元素由显示变为隐藏

$("div").hide() -- 设置所有的div元素为隐藏

等价于:

$("div").css("display", "none");

2、toggle()/slideToggle()

toggle() -- 切换元素的显示状态, 如果元素是显示的, 则切换为隐藏, 否则切换为显示

slidToggle() --切换元素的显示状态, 如果元素是显示的, 则切换为隐藏，否则切换为显示，切换为显示为下拉状态，隐藏为收缩状态。

扩展内容

为元素绑定点击事件

以点击事件为例，为元素绑定点击事件的方式为:

方式1(js版)：

方式2(js版)：

方式3(jQuery版)：

js对象和jQuery对象的互相转换

通过JS的方式获取元素，返回的是JS对象，JS对象只能调用JS的属性或函数

通过jQuery选择器获取元素，返回的是jQuery对象（结构像一个集合），jQuery对象只能调用jQuery的属性或函数。

如果现有JS对象，但我们需要调用jQuery的属性或函数，可以将JS对象转成jQuery对象；

如果现有jQuery对象，但我们需要调用JS的属性或函数，可以将jQuery对象转成JS对象；