Web基础 HTML和CSS介绍和基本使用及语法，JavaScript和jQuery介绍和基本使用及语法


WEB 什么是WEB互联网上的一种应用程序-->网页典型的应用：C/SClient:客户端Server:服务器B/SB: Browser :浏览器S:　Server :服务器WEB的组成　& 运行流程由服务器，浏览器　和通信协议组成服务器：处理用户的请求(request)和响应(response)浏览器：代替用户向服务器发送请求(User Agent)通信协议：规范了数据时如何打包以及传递的　(http)http:Hyper Text Transfer Protocal超级　　　　文本　　传输　　　　　协议WEB服务器作用：接受用户的请求并给出响应存储WEB信息具备安全性功能产品：APACHETOMCAT                                               IIS---Internet Information ServiceNginx技术：JSP - Java Servre PagePHP - ASP.NET(微软)Python Web (Django, Flask,... ...)WEB浏览器作用：代替用户向服务器发送请求作为响应数据的解释引擎主流浏览器产品Micosoft Internet Explorer(IE)Google ChromeMozilla FirefoxApple SafariOpera Opera浏览器考内核处理数据，内核包含两部分：内容排版引擎　- HTML, CSS脚本解释引擎　- JS浏览器技术：也成为"前端技术"HTML,CSS,JavaScriptHTML概述HTML介绍和基本语法什么是HTMLHTML:Hyper Text Markup Language超级　　　文本　　标记　　　　语言编写网页的一款语言超文本：具备特殊功能的文本就是超文本普通文本 a : 普通字符　a超文本　a : 表示的是超链接功能普通文本 b :普通文本 b超文本　b :表示文字加粗功能标记：超文本的组成形式普通文本 a :a超文本　a :<a></a>语言：语言有自己的语法规范W3C: World Wide Web Consortium万维网联盟HTML在计算机中的表现所有的文案工业都是以　.html或.htm 作为结尾的文件来进行表示的　开发工具：所有的文本编辑累软件都可以做为开发工具记事本Editplus(主推), Sublime　　Dreamweaver,WebStorm, ......运行工具：　浏览器推荐使用：Google ChromeHTML 基础语法(重点)标记语法什么是标记在网页中，用于表示功能的符号称为"标记/标签/元素"语法所有的标记，在使用时必须用<>括起来标记分为　双标记　和　单标记双标记：由开始标记和结束标记组成<标记的名字>....</标记名称>eg: <a>...</a><b>...</b>div标记<div>...</div>p标记<p>...</p>注意：双标记，有开始，必须要有结束，否则显示效果会出错建议写法：标记要打打一对单标记：只有一个标记，即能表示开始，又能表示结束单标记自己就是个独立的功能，没有文本或其他内容可以控制语法：<标记>　　或　<标记/>eg: <br> 或　<br/> :换行<hr> 或　<hr/> :一条水平线<impg> 或　<img/> :　显示图片标记的嵌套定义：在一对标记中，再出现另外一对标记，目的是为了实现功能的嵌套超链接：<a>...</a>加粗: <b>...</b>加粗的超接连：　<a><b>...</b></a> 或　<b><a>...</a></b>*为了良好的可读性，被嵌套的内容尽量独占一行，并添加缩进正确写法：<a><b>... ...</b></a>练习：编写一对html标记在html标记中其那套一对head标记在html标记中其那套一对body标记答案：<html>　-->外面的一层叫：父元素/父标记<head>... ...</head>　-->里面的一层叫：子元素/子标记<body>... ...</body></html>标记的属性和值什么是属性定义：在标记中，用来修饰标记显示效果的东西就是属性语法：属性的声明必须在开始标记中<标记 ---属性的声明位置处></标记>属性名和标记名之间要用空格隔开<标记 ---属性名称></标记>属性名和属性值之间用等号连接，属性值要用双引号或单引号引起来<标记　属性名="值"></标记>一个元素允许设置多个属性，多属性之间之间排名不分先后，但多属性之间要用空格隔开<标记　属性1="值1" 属性2="值2"></标记>练习：创建一对p标记,内容随意增加一个属性，名称为 align 取值为 center增加一个属性，名称为 id 取值为 p1答案：<p align="center" id="p1">这是一个坑</p>HTML中的注释注释格式：<!-- 注释内容 -->注意：注释不能出现在<>中错误写法如：<p<!-- ... ... -->>... ...</p>注释不能嵌套<!--这是内容<!--内容-->-->HTML中不区分大小写<p></p><P></P><p></P>HTML文档结构文档类型声明出现在网页最顶端的第一个标记作用：告诉浏览器使用HTML的哪个版本<!doctype html>HTML页面在文档类型声明之下，使用一对html标记来表示网页的开始和结束<html></html>在html中，包含两对子元素<head></head>表示网页头部信息<body></body>表示网页主题信息练习：创建01-page.html网页文件搭建网页结构增加文档类型声明增加html跟标记在html中增加头部和主体增加适当的注释<!--文档 类型说明--><!--html跟标记--><!doctype html><html><!--网页头部--><head>小傻瓜</head><!--网页主题--><body><b>真惨</b></body></html><head> 标记作用：描述网页的头部信息，对于网页起到控制的作用子元素：　<title>标题网页</title>指定网页编码<meta charset="utf-8">告诉浏览器按照utf-8的编码方式进行网页解析注意：必须要保证网页文件的编码方式也是utf-8文本相关标记HTML中特殊字符处理&nbsp; 表示一个空格&lt;   表示一个 <&gt;   表示一个　>&copy; 表示一个　©&yen;  表示　￥文本样式标记作用：修改文本在网页中的表现形式标记：<i></i> :斜体显示文本<u></u>:下划线显示文本<s></s>:删除线显示文本<b></b>:加粗显示文本<sup></sup>:上标方式显示文本<sub></sub>:下标方式显示文本练习：这是有一段加粗，斜体，删除线，下划线，上标　和下标的文本特点：该组标记能够与其他的标记的标记或文本在一行内显示标题标记作用：以不同的文字大小以及加粗方式显示文本语法：<h#></h#>#: 1-6<h1></h1>:一级标题<h2></h2>:二级标题练习：<h1>静夜思</h1><h2>李白</h2><h3>床前明月光</h3><h4>疑是地上霜</h4><h5>举头望明月</h5><h6>低头思故乡</h6>特点：会改变文字的大小以及加粗效果每个标题都会具备垂直的空白距离每个标题独占一行每个标题都会具备一个属性属性：align取值：left　　　:　左对齐center　:　居中对齐right　　:　右对齐<h1 align="left">静夜思</h1><h2　align="center">李白</h2><h3 align="right">床前明月光</h3><h4>疑是地上霜</h4><h5>举头望明月</h5><h6>低头思故乡</h6>段落元素作用：突出显示一段文本，每一段文本独占一行/块，并且每个段落都会具备一段垂直空白距离语法：<p></p>属性：align取值：left / center / right练习：天长地久有时尽此恨绵绵无绝期<p>天长地久有时尽</p><P>此恨绵绵无绝期</p>换行元素<br>或<br/>分区元素块分区元素标记：<div></div>作用：布局　(合理划分网页空间)[配合CSS]特点：独占一行/一块行内分区元素标记：<span></span>作用：设置同一行文本的不同样式(配合CSS)特点：允许在一个内显示多个span元素，也能够与其他的文本在一行内显示行内元素与块元素块元素只要在网页中能独占一行/一块的匀速都成为块元素，简称为块元素  块元素： p h1 h2 h3 h4 h5 h6 div 作用：都可以做布局* 所有的块元素都会具备align属性行内元素：多个元素能够在一行内显示的，就是行内元素行内元素：span i b s u sub sup　a 图片作用：处理文本的样式列表标记作用：按照从上到下的方式来进行数据排列并能够显示列表的标识在内容的前面列表的组成列表的类型列表的类型有序列表　--> <ol></ol> (Order List)无序列表 --> <ul></ul> (Unordered List)列表项<li></li> (List Item)eg:<ol><li>内容1</li><li>内容2</li></ol>练习：创建03-list.html搭建网页结构在body中创建一个有序列表，用四个列表项分别标识四大名著的名称在body中创建一个无序列表，用四个列表项分别四大天王的名称列表属性有序列表 - oltype取值1:按数字方式排列显示，默认值A:按大写英文字符显示a:按小写英文字符显示I:按大写罗马数字显示i:按小写罗马数字显示<ol type="I"><li>西游记</li><li>红楼梦</li><li>水浒传</li><li>三国演义</li></ol>start指定有序的字符是　几　开始显示<ol type="I"　start="10"><li>西游记</li><li>红楼梦</li><li>水浒传</li><li>三国演义</li></ol>无序列表 --> ultype取值：disc:实心原点，默认值circle:空心圆点square:实心方块none:不显示任何标识列表的嵌套在一个列表项中，又出现一个列表<ul><li><ul><li></li><ul><li><ul>练习：１水浒传a西门庆b潘金莲c武大郎２三国演义i吕布ii貂蝉iii董卓图像和超链接URL (Uniform Resource Locator) 统一资源定位器　用于标识网络中资源的位置，俗称路径URL分类：绝对路径访问网络资源时，使用绝对路径eg: http://www.baidu.comhttp://www.tmooc.cn相对路径：从当前文件所在的位置处去开始查找资源文件所经过的路径如果当前文件和资源文件所处位置在同一目录时，则直接引用资源文件i.gp如果资源文件的父文件和当前文件在同一位置，则需要进入父文件下引用资源文件imgs/i.jpg如果资源文件和当前文件的父文件处在同一位置，则需要先从父文件出去在引用资源文件../i.jpg根相对路径从WEB程序所在的根目录处开始查找资源文件注意：url中不能出现中文url是严格区分大小写图像标记<img>属性:src:指定要显示的图片的路径width:宽度：以px为单位的数值(允许省略px)px　:　pixel :像素height:高度：以px为单位的数值(允许省略px)注意：如果宽度和高度只设定一个值的话，那么另外一个值也跟这等比缩放<img src="asd/a.JPG" width="150"><div align="center"><img src="asd/b.jpg"width="150"><h4>图-2</h4></div>注意：p标记是不能嵌套块级元素的超链接什么是超链接用户可以通过点击的操作来完成页面的跳转的行为语法：标记： <a>内容</a>属性：href : 表示是链接地址target　: 指定要打开的新网页的方式取值：_self :　默认值，在自身标签页中打开新网页_blank : 在新标签页中打开新网页表格表格的语法标记表格: <table></table>表行: <tr></tr>  ----Table Row单元格(列)：<td></td> ---- Table Data创建以个四行四列的表格属性：table属性：width : 指定表格的宽度，以px为单位数值(px可以省略)height : 指定表格的高度，以px为单位数值(px可以省略)border : 指定边框的宽度，以px为单位的数值(px可以省略)align : 指定表格在其父元素中的水平对其方式取值：　left / center / rightcellpadding : 指定单元格内边距指定单元格边框与内容之间的距离cellspacing : 指定单元格外边距指定单元格之间的距离(单元格与表格之间的距离)tr属性align控制当前行内容的水平对齐方式取值： left  /  center  /rightvalign控制当前行内容的垂直对齐方式取值： top / middle / bottombgcolor控制当前行内容的背景颜色取值：表示颜色的英文单词td属性widthheightalignvalignbgcolorcolspan : 跨列 / 合并列rowspan : 跨行 / 合并行不规则表格单元格的跨列从指定单元格的位置处开始，横向向右合并几个单元格(包含自己)，被合并的单元格要删除出去语法：　colspan="n"单元格的跨行从指定单元格的位置处开始，纵向向下合并几个单元格(包含自己),被合并掉的单元格要删除出去语法： rowspqn="n"行分组什么是行分组允许将表格中的若干行花跟到一组中，方便管理语法：表头行分组允许将表格中最上方的若干行划分到一组中<thead></thead>表尾行分组允许将表格中最下方的若干行划分到一组中<tfoot></tfoot>表主体行分组表格中除了最上方和最下方之外的行们进行分组的话允许放在表主体行分组中<tbody></tbody>表单作用：用于接受用户的数据并提交给服务器表单两要素from 要素表单，用于收集用户信息并提交给服务器表单控件提供了能够与用户交互的可视化组件form元素作用：表单，用于收集用户信息并提交给服务器from 元素在网页中式不可见的，但功能不能忽略语法：标记：<from></from>属性：action : 指定处理程序的地址 (默认提交给本页)method : 提交方式 /　方法　(共提供7-8个值，常用的只有两个)get(默认值)通常是在向服务器要数据是使用特点：提交的数据会显示在地址栏上安全性较低提交数据最大为2KBpost要将数据提交给服务器处理时使用特点：隐式提交，看不到提交数据安全性较高无提交数据的大小限制表单控件(重难点)作用 ＆　注意：作用：提供了能够与用户交互的可视化组件注意：只有放在表单中的表单控件才允许被提交表单控件都是"行内块"元素表单控件详解(难点)文本框 ＆　密码框文本框： <input type="text">  显示输入密码框： <input type="password">　隐藏输入属性：name:定义控件名称提交给服务器使用，如果没有name的话则无法提交value:值要提交给服务器的值，同时也是默认能显示在控件上的值maxlength:限制输入的最大字符数placeholder : 占位符用户在未输入任何数据时所显示的内容按钮：提交按钮：<input type="submit">将表单数据提交给服务器重置按钮：<input type="reset">将表单内容恢复到初始化的状态普通按钮：<input type="button">允许通过JS自定义功能属性：value:按钮上显示的文本<button>内容</button>属性：type取值：submit /reset / button单选按钮　和　复选框单选按钮：<input type="radio">复选框：<input type="checkbox">属性：name:定义控件名称，处了定义名称之外，还起到分组的作用一组中的单选按钮　或　复选框　名称必须一致value :值尽量提前声明checked设置预选中，该属性无值隐藏域　和文件选择框隐藏域：作用：想提交给服务器但不想给用户看的数据放在隐藏域中语法：<input type="hidden">属性：name:定义控件的名称value:定义空件的值文件选择框作用：文件上传时使用标记：<input type="file">属性：name:定义控件的名称多行的文本域(框)标记：<textarea></textarea>属性：name:定义控件名称文本值就是valuecols:指定文本域默认显示的列数(宽度)一行能够显示的英文字符量，中文减半rows:指定文本域默认显示的行数(高度)下拉选择框(下拉列表)<select name="xxx"><option value="值">显示数据</option></select>CSS介绍CSS: Cascading Style Sheets #样式表HTML:搭建网页结构CSS:修饰和美化网页CSS的使用方式(重点)内联方式：又称为：行内样式，内联样式特点：将CSS的内容定义在单独的HTML标签中语法：<标记 style="样式声明">样式声明：就是要修饰的样式效果样式声明是有样式属性和属性值来组成的属性和值之间使用冒号(:)来连接<标记 style="属性:值">在一个style中允许出现多个样式声明，多个样式声明之间，用分号(;)隔开<标记 style="属性:值;属性:值;">常用的属性和值：文字大小：属性：font-size取值：以px为单位的数字eg:设置某div的文字大小为18px<div style="font-size:18px;">xxx</div>文本颜色:属性：color取值：取值为表示英文的单词eg:设置某div的文字颜色为红色<div style="color:red;">xxx</div>修改背景颜色：属性：background-color取值：取值为表示英文的单词练习：创建一个网页 01-style.html创建一个div　内容随意使用内联文字36px文本红色背景黄色<div style="font-size:36px;color:red;background-color:yellow;">我们都要好好的</div>内部样式表作用：让定义好的样式能够使用在当前页面的多个元素上语法：<head><style>样式规则1样式规则2... ...样式规则n</style></head>样式规则：由选择器和样式声明组成的目的：为了声明一组独立的样式选择器：规范了页面中哪些元素能够使用声明好的样式语法：选择器{属性1:值1;属性2:值2;}eg:p{color:red;}span{font-size:36px;}让所有的div都实现文字文本的变化：解：<head><style>div{font-size:36px;color:red;background-color:yellow;}</style></head>外部样式表作用：将声明好的样式应用在多个网页中将样式规则声明放在独立的css文件中(***.css)在使用的网页中对css文件进行引入即可使用步骤：声明：创建.css文件，并编写样式规则引用：<head><link rel="stylesheet" href="css文件路径"></head>样式表的特征继承性大部分的css属性是可以由父元素继承给子元素的层叠性允许为一个元素定义多种的使用方式或多个样式规则如果样式的声明之间不冲突的话，那么所有的样式声明都可以应用在元素上优先级允许为一个元素定义多种的使用方式或多个样式规则，如果样式声明冲突的话，会按照不同方式的优先级来应用样式浏览器缺省设置(不进行设置，浏览器自带的属性)　低　　内部或外部样式表(定义的属性) 中就近原则：后定义者优先内联方式　高简易调错Invalid property value属性值写错了Unknown property name属性名称写错了CSS选择器(重难点)作用：规范了页面中那些元素能够使用声明好的样式目的：为了匹配页面的元素选择器的详解元素选择器特点：由标记名称作为选择器，主要匹配页面中指定标记所对应的所有元素语法：标记{样式声明;}eg:div{...}p{...}input{...}练习：设置页面中所有的a元素，不显示下划线不显示下划线：text-decoration:none<head><style>a{text-decoration:none;}</style></head>类选择器特点：允许被任意元素所引用的选择器语法：声明.类名{样式声明}类名：字母，数字，下划线("_")，连字符("-")　组成数字不能开头eg:div{ ... }  元素选择器.div{ ... }  类选择器引用：<标记 class="类名">引用不加点(".")练习：创建一个网页04-selector-class.html创建几个元素(div,p,span,h1)使用类选择器文字大小:28px背景颜色设为silver斜体显示：font-style:italic;特殊用法：分类选择器的定义方式允许将元素选择器和类选择器结合到一起使用，为了实现对某种元素不同　样式的细分控制语法：元素选择器.类选择器{ ... }eg: .inportant{类选择器，匹配所有class为important的元素}div{元素选择器，匹配所有div元素}div.important{匹配class为important的div元素}多类选择器的引用方式允许让一个元素同时引用多个类选择器，多个选择器之间使用　空格　隔开语法：.c1{ ... }.c2{ ... }.c3{ ... }<标记 class="c1 c2 c3">练习：增加一个类选择器.dec{text-decoration:underline;}　出现下划线让所有元素都增加对dec累选择器的引用id选择器ID的作用在HTML中，每个元素都允许设置一个id属性，主要用于表示该元素在网页中独一无二的标识<div id="main"></div>ID选择器为了匹配页面中指定ID值的元素语法：#ID值{ ... }eg: #main{color:red;}群组选择器：作用：定义多个选择器们的共有样式定义方式是以一个逗号隔开的选择器列表语法：选择器1,选择器2,选择器3,... ... { ... ... }eg:#main,p,div.span,.redColor{corlor:red;}等同于：#main{color:red;}p{color:red;}div.spqn{solor:red;}span{color:red;}.redColor{color:red;}后代选择器作用：依托于元素的后代关系来匹配元素(不限制层级)语法：选择器1 选择器2{ ... }eg: #wang span{匹配id为wang的元素中所有的span元素}子代选择器作用：依托于元素的子代关系来匹配元素(只有一层层级关系)语法：选择器1>选择器2{ ... }#wang>span{id为wang的元素中的下一级span元素}#wang>p>span{background-color:yellow;}等同于#wang p span{background-color:blue;}等同于#wang>p span{background-color:green;}伪类选择器作用：匹配元素不同状态的选择器eg: 超链接 a 元素, 具备四个状态状态1:链接未被访问是时的状态文本为蓝色，并有下划线状态2:鼠标悬停在元素上的状态鼠标的状态变成了"手"状态3:当元素被激活时(鼠标点击时)文本会变成红色状态4:当访问过后的时候文本颜色变为紫色语法：:伪类状态通常会配合其他元素一起使用选择器:伪类状态{ ... }选择器：匹配元素:伪类状态：匹配状态链接伪类:link匹配超链接未被访问时的状态:visited匹配超链接被访问后的状态动态伪类:hover匹配悬停在元素上面时的状态:active匹配元素被激活时的状态:focus匹配获取焦点时的状态(文本框和密码框使用居多)选择器的优先级当多个选择器能够同时应用到一个元素上时，并且样式发生冲突的话，则要按照不同选择器的优先级来应用样式选择器的优先级看"权值"选择器         取值元素选择器       1类/伪类选择器    10id选择器        100内联方式        1000如果是复杂的选择器(后代，子代，分类)的计算方式是将选择器们的权值累加尺寸　与　边框单位尺寸单位px - 像素% - 占据父元素对应属性的占比in - 英寸(描述硬件大小) 1 in=2.54 cmpt - 磅 1pt=1/72inpt在css中通常表示文字大小计算机中通常设置PPI(Pixel Per Inch)为72cm - 厘米mm - 毫米在css中，所有的尺寸单位是不能省略的颜色单位(颜色取值)rgb(r,g,b)r: 红色范围值: 0-255g: 绿色范围值: 0-255b: 蓝色范围值: 0-255eg:background-color:rgb(255,0,0):红色rgb(0,255,0):绿色rgb(0,0,0):黑色rgb(255,255,255):　白色rgba(r,g,b,alpha)alpha:颜色透明度,取值 0-1 之间的数字0:完全透明1:完全不透明eg:background-color:rgba(128,36,72,0.5) 半透明#rrggbb由6位16禁止数字来组成的颜色eg:#ff0000:红色#rgb#rrggbb的缩写，当每两位数字相同时，可以使用所写的方式#ff0000 --->#f00#11ffss --->#1f3#333 ---> #333333表示颜色的英文单词red,green,blue,... ...尺寸　和　边框尺寸属性作用改变元素的宽度和高度属性宽度属性：width取值：以px 或%为单位的数值高度属性：height取值：以px或%为单位的数值所有块级元素的尺寸:宽度：占父元素100%的款高度：以内容为准所有行级元素的尺寸宽度：以内容为准高度：以内容为准注意：在　html 和　css　中，除img以外的所有行内元素的尺寸是不允许修改的行内块元素可以改　如按钮，文本框等溢出处理什么是溢出当使用尺寸属性限制尺寸时，如果内容所需要的空间大于元素的尺寸的话，则产生溢出效果溢出处理的属性属性：overflow取值：visible可见的，默认值hidden溢出的内容会隐藏scroll显示滚动条，溢出时滚动条可用auto自动，溢出时产生滚动条并可用边框属性边框实现边框的简写方式通过一个属性完成四个方向边框的所有效果设置(宽度，样式，颜色)属性：border取值：width style colorwidth:边框的宽度，以px为单位的数值style:边框的样式取值：solid:实线dotted:虚线(点)dashed:虚线(线)color:边框的颜色取值为合法的颜色值可以取值为 transparent(透明)特殊用法：border:none; 取消边框,无边框显示单边定义定义某一条边框的宽度，样式，颜色属性：border-方向:width style color;方向：top  /  bottom  / left   /righteg:上边框3px 实线　蓝色border-top:3px solid blue;单属性定义这只四个方向边框的某一个属性值语法：border-属性:值;属性：width / style /coloreg: 设置四个方向的边框尺寸为5px设置四个方向的边框颜色为pink色border-width:5pxborder-color:pink;单边单属性定义设置某一方向边框的某属性值属性：border-方向-属性:值;方向：top / bottom / left / right属性：　width / style /color下边框样式为点虚线border-bottom-width:dotted;右边框宽度为3pxborder-right-width:3px;左边框颜色为红色border-left-color:red;轮廓outline:none;边框倒角作用：将边框的四个直角变为圆角语法属性：border-radius取值：以px为单位的数值以%为单位的数值(一般给50%)边框阴影属性：box-shadow:h-shadow v-shadow blur spread color;h-shadow:阴影的水平偏移距离取值为数字取值为正，阴影向右偏移取值为负，阴影向左偏移v-shadow:阴影的垂直偏移距离取值为数字取值为正，阴影向下偏移取值为负，阴影向上偏移blur:阴影的模糊大小取值为数字数字越大越模糊spread:阴影的大小取值为数字color:阴影的颜色box-shadow:0px 0px 5px 0px #0000FF框模型 - Box Model什么是框模型框：页面元素皆为框框模型：定义元素的尺寸和距离的一种计算方式Box Mokel:盒模型,方框属性包含：尺寸，边框，外边框　和　内边框当框模型属性介入到元素时，元素的整体占地尺寸会发生改变，计算方式如下：占地宽度=左右外边距+左右边框+左右内边距+宽占地高度=上下外边距+上下边框+上下内边距+高外边距什么是外边距围绕在元素边缘之外的空白距离就是外边距外边距是不允许被其他元素占据的语法：属性 margin最多能够设置四个方向的外边距值margin-top上外边距的值margin-right右外边距的值margin-bottom下外边距的值margin-left左外边距的值取值以px 为单位的数值eg:左外边距的值为20pxmargin-left:20px以%为单位的数值以父元素尺寸的占比作为外边距的值取值为负数目的是为了移动元素元素设置上边距为正数，元素下移动元素设置上边距为负数，元素上移动元素设置左外边距为正数，元素右移动元素设置左外边距为负数，元素左移动取值为 auto自动：自动计算左右外边距的值注意：auto 只能应用在左右外边距上，上下无效只能为设置宽度的块级元素设置左右外边距为auto,目的是为了让块级元素水平居中margin的简洁写法margin:value;value表示的是上下左右四个方向的外边距的值eg:margin:10px;margin:v1 v2;v1:表示上下外边距的值v2:表示左右外边距的值eg:margin:0px auto;margin:v1 v2 v3;v1:表示上外边距的值v2:表示左右外边距的值v3:便是下外边距的值 eg:margin:5px auto 3px;margin:v1 v2 v3 v4v1:上外边距v2:右外边距v3:下外边距v4:左外边距页面中具备外边距的元素body,p,h1~h6,ul,ol以上元素都具备默认的外边距CSS重写：通过元素选择器将标记的默认样式改掉   <style>body,p,h1,h2,h3,h4,h5,h6,ul,ol{margin:0px}   </style> 内边距什么是内边距内容与元素之间的距离注意：内边距会扩大元素边框的所占区域语法：属性：padding:四个方向的内边距值padding-top/right/bottom/left:值;取值：以px 为单位的数值以%为单位的数值简洁写法：同marginpadding:value;上下左右padding:v1 v2; 上下 左右padding:v1 v2 v3; 上 左右 下padding:v1 v2 v3 v4; 上 右 下 左页面中具备默认内边距的元素ul,ol文本框，密码框，按钮box-sizing作用指定框模型(尺寸，边框，内边距)的计算方式语法属性：box-sizing取值：content-box : 默认值，元素的width和height,只规定到元素的内容区域的宽和高，内边距和边框的尺寸是需要额外计算再附加到当前元素上的div{width:300px;height:40px;border:1px solid #000;padding:1px 12px;box-sizing:content-box;}整体高度：44px整体宽度：326pxborder-box: 元素的width 和 height, 能规定到元素边框，内边距 以及内容尺寸的width=边框宽度+内边距+实际内容宽度height=边框高度+内边距+实际内容高度div{width:300px;height:40px;border:1px solid #000;padding:1px 12px;box-sizing:border-box;}整体宽度：300px整体高度40px背景属性背景颜色属性：background-color取值：合法的颜色值注意：背景颜色是从边框的位置处就开始绘制背景图像属性：background-image取值：url(图片路径)括号内容可隐可不隐背景平铺属性：background-repeat取值：repeat默认值，横纵都平铺no-repeat不平铺repeat-x横向平铺repeat-纵向平铺背景图片尺寸属性：background-size取值：width height以px为单位的数值width% heght%采用当前元素的尺寸占比作为背景图尺寸背景图片位置作用改变背景图在元素中的默认位置语法：属性：background-position取值：x y以px为单位的数值，用空格隔开x:背景图像水平偏移距离  取值为正，背景图片向右偏移取值为负，背景图片向左偏移y:背景图像垂直偏移距离取值为正，背景图片向下偏移取值为负，背景图片向上偏移 x% y%0% 0%背景图在左上角100% 100%背景图在右下角50% 50%背景图在中间95% 0%背景图 ，偏右靠上关键字x:left/center/righty:top/center/bottom背景属性- 简写方式属性：background取值：color url() repeat position;eg:background:red; 背景颜色为红色background:url(a.jpg) no-repeat 95% center; 文本格式化属性字体属性指定字体属性：font-family取值：由逗号隔开的字体列表注意：如果字体中包含中文或空格的话，要用引号引起来eg:font-family:"微软雅黑";font-family:"Microsoft Yahei";font-family:"微软雅黑",Arial,Helvetica;指定文体大小属性：font-size取值：px 或 pt指定字体加粗属性：font-weight取值：normal:非加粗显示bold:加粗显示value取值为无单位的数字400:normal 900:bold字体的样式属性：font-style取值：normal:非斜体显示italic:斜体显示练习：创建以01-font.html创建一个div设置字体为楷体，加粗默写题大小为18pt <style>#un{font-family:'楷体';font-weight:bold;font-style:italic;font-size:18pt;}</style>字体属性(简写)属性：font取值：style weight size family;注意：使用简写方式时，必须要设置family的值，否则无效font:12px; 无效font:12px;"微软雅黑" 有效文本属性文本颜色属性：color取值：合法的颜色值文本的排列方式作用：控制某元素内的文本，图片,行内块元素的排列方式属性：text-align取值：left/center/right/justifyjustify:两端对齐文字修饰作用：指定线条修饰效果属性：text-decoraton取值：none: 无任何线条显示underline: 下划线显示overline: 上划线显示line-through: 删除线显示  等同于u标记行高作用：指定一行文本数据的所占高度特点：如果行高的高度高于文本的高度的话，那么文本将在行高的范围内垂直居中显示使用场合：文本垂直居中显示模拟行间距属性：line-height取值：以px为单位的数字无单位的数字，表示当前字体大小的倍数eg:#d1{font-size:12px;line-height:24px;line-height:2;}练习：创建03-lineHeight.html创建div 200*200 编写一个文本使文本居中创建div 多写几行文本模拟1.5倍行间距表格属性表格的常用属性尺寸属性边框属性文本格式化被金属学框模型margin不能用在td上的表格的特有属性边框合并属性：border-collapse取值：separate默认值，分离边框(双线边框)模式collapse边框合并边框边距作用：设置每两个单元格之间的距离属性：border-spacing取值:指定一个数值水平和垂直间距相等给定两个数值第一个值：表示水平间距第二个值：表示垂直间距两个数值之间使用空格隔开注意：必须要在分离边框模式下使用即:border-collapse的值为separate的时候有效过渡效果 - transition什么是过渡使得CSS的属性值在一段时间内平缓变化的一个效果语法指定过渡属性作用：指定哪个属性值在变化的时候使用过渡效果属性：transition-property取值：属性名称all但凡能使用过渡效果的属性值在变化时一律都使用过渡来体现允许使用过渡效果的属性所有与颜色相关的属性所有取值为数字的属性eg:transition-property:background-color;指定过渡时长作用：指定在多长时间内完成过渡效果属性：transition-duration取值：以s 或 ms 为单位的数字1s=1000ms300ms=0.3s= .3seg:transition-duration:0.3s;指定过渡的时间曲线函数作用：制定过渡效果变化速率属性：transition-timing-function取值：ease默认值，慢速开始，快速变快，慢速结束linear匀速ease-in慢速开始，加速结束ease-out快速开始，减速结束ease-in-out慢速开始和结束，中间先加速后减速指定过渡延迟作用：当激发过渡效果后，等待多长时间在开始执行操作属性：transition-dalay取值：以s 或 ms 为单位的数字练习：创建200*200的元素红色背景尺寸变为400*400变为黄色变成圆形#d{width:200px;height:200px;background-color:red;transition-property:all;transition-duration:5s;transition-timing-function:linear;}#d:hover{background-color:yellow;width:400px;height:400px;border-radius:50%;}<div id="d"></div>过渡属性属性：transition取值：property duration timing-fun dalayeg:transition:color 5s linear,background 3s;transition:all 5s linear;定位(重难点)什么是定位表示的是元素在网页中的位置定位的分类在css中，定位主要分为以下几类：普通流定位(默认定位方式)浮动定位(重难点)相对定位绝对定位固定定位普通流定位普通流定位，又称为"文档流定位"，是页面中默认的定位方式，典型的"流式布局"特点：每个元素在页面中都有自己的位置，并占据一定的空间每个元素都是从其父元素在左上角开始排列的每个元素基本都是按照从左到右从上到下开始排列的块级元素：从上到下，每个独占一行行内元素&行内块元素：从左到右，排列不下时换行浮动定位浮动元素的特点将元素设置为浮动定位，元素将具备以下特点：浮动元素会被排除在文档流之外--->脱离文档流，那么元素将不再占据页面空间剩余未浮动元素会上前占位浮动定位的元素会停靠在父元素的左边或右边或其他已浮动元素的边缘上浮动只能在当前行浮动浮动解决的问题：让多个块级元素在一行内显示的问题语法：属性：float取值：none默认值，即无任何浮动效果left浮动到父元素的左边，或停靠在左边已有的浮动元素的边缘上right浮动到父元素的右边，或停靠在右边已有的浮动元素的边缘上浮动引发的特殊效果：如果父元素显示不下所有已浮动子元素的话，那么最后一个将换行，但有可能被卡住元素一旦浮动起来之后，就将变成块级元素行内元素一旦浮动，就允许修改尺寸元素一旦浮动起来之后，在未指定宽度的情况下，宽度将由内容来决定主要针对块级元素文字，图片，行内元素是采用环绕的方式来排列的，是不会被浮动元素压在底下的浮动消除浮动元素一旦浮动起来之后，后面的元素要上前占位，有可能被浮动元素压在底下，如果元素不想压在底下的话，则可以通过消除浮动影响的方式来解决问题语法：属性：clear取值：none默认值，不作任何浮动的操作left清除当前元素前面元素左浮动所带来的影响，即不会被前面元素左浮动而压在底下right清除当前元素前面元素右浮动所带来的影响，即不会被前面元素右浮动而压在底下both清除当前元素前面元素任何一种浮动方式带来的影响,既不会被前面元素浮动而压在底下浮动元素对父元素高度的影响由于浮动元素会脱离文档流，所以是不占据页面空间的，那么也就不占父元素的空间，那么父元素的高度是以未浮动的子元素的高度为准的解决父元素的高度为父元素设置高度弊端：不一定每次都清楚的知道父元素的高度设置父元素也浮动弊端：会对父元素后面的元素产生位置的影响设置父元素的属性 overflow 为 hidden 或 auto弊端：如果有溢出要显示的元素，也一同被隐藏了在父元素中追加空块级元素，并设置其clear属性为both
其他定位相关属性定位方式属性：position取值：static:静态的，默认值relative:相对定位absolute:绝对定位fixed:固定定位注意：将元素的position设置为relative/absolute/fixed任意一种的话，那么该元素就称为"已定位元素"偏移属性(共四个)作用：配合着已定位元素实现位置的移动属性：top / right / bottom / left取值：以 px 为单位的数值top:以元素的上边为基准边移动元素取值为正，元素下移取值为负，元素上移right:以元素的右边为基准边移动元素取值为正，元素左移取值为负，元素右移bottom:以元素的下边为基准边移动元素取值为正，元素上移取值为负，元素下移left:以元素的左边为基准边移动元素取值为正，元素右移取值为负，元素左移定位方式 - 相对定位什么是相对定位元素会相对于它原来的位置偏移某个距离场合元素位置微调时使用相对定位语法：属性：position取值：relative配合着 偏移属性 实现位置的移动练习：创建一个网页创建一个ul及四个li每个li 100*30 背景颜色 左浮动 10px右边距使用相对定位  当鼠标悬停在li上li左移10px;使用margin完成上述操作定位方式 - 绝对定位(难点)什么是绝对定位 & 特点绝对定位的元素会脱离文档流--->不占页面空间绝对定位的元素会相对于离它最近的，已定位的，祖先元素去实现位置的初始化如果元素没有已定位的祖先元素，那么元素将相对于body去实现位置的初始化语法：属性：position取值：absolute配合着 偏移属性 实现位置的定位注意绝对定位的元素会变为块级元素(任何元素变成绝对定位的话，就可以直接修改尺寸)堆叠顺序什么是堆叠顺序已定位元素们堆叠在一起的排列顺序语法属性：z-index取值：无单位的数字，数字越大元素越靠上，默认值为0    注意：如果堆叠顺序相同的话，则后来者居上只有已定位的元素才能使用z-indexrelative/absolute/fixed父子元素之间，永远都是子压在父上，是不受堆叠顺序影响的定位方式 - 固定定位什么是固定定位让元素固定在浏览器窗口的某个位置处，不会随着滚动条的滚动而发生位置的改变语法：属性：position取值：fixed配合着 偏移属性 实现元素位置的固定注意：固定定位的元素永远都是相对于body实现位置初始化的固定定位的元素会变成块级元素显示显示方式什么是显示方式决定了元素是以什么样的方式显示在网页中(块级/行级/行内块)语法属性：display取值：none让元素不显示--隐藏脱离文档流--不占据页面空间block将元素变为块级元素inline将元素变为行内元素inline-block将元素变为行内块元素特点：多个元素能够在一行显示 - 行内允许修改尺寸 - 块级显示效果可见性属性属性：visibilty取值：visible默认值，可见的hidden隐藏的,未脱离文档流，所以还占据着页面空间面试：visibility:hidden和display:none的区别visibility:hidden  未脱离文档流display:none 脱离文档流，不占据空间透明度属性：opacity取值: 0(完全透明)~1(完全不透明)测试：网页中创建两个h1标记第一个h1 使用rgba设置红色背景，0.5透明度第2个h1 设置红色背景，0.5透明度垂直方向对齐方式属性：vertical-align取值：top/middle/bottom/baseline放在td中相当于valign的作用取值：top/middle/bottom, middle是默认值放在图片和行内块元素中设置元素两端的文本相对于元素的垂直对齐方式取值：top/middle/baseline,baseline是默认值光标作用：改变鼠标悬停在元素上时鼠标的样子(不需要加hover)属性：cursor取值default - 默认值pointer - 小手text  - Icrosshair  - +wait -  等待help - 帮助#main{cursor:pointer}列表表现特征上下外边距左内边距列表项特征纵向排列列表属性list-style-type取值：none---->不显示任何标识disc----->实心圆点circle--->空心圆点square--->实心方框... ...listy-style作用：列表的简写属性常用用法：list-style:none;转换属性- transform什么是转换改变元素在页面中的位置，尺寸，角度的一种方式属性转换属性属性：transform取值：none:默认值，无任何转换效果转换函数如果有多个函数的话，中间要用空格隔开转换原点什么是转换原点转换原点就是转换操作所围绕的一个点语法属性：transform-origin取值：使用空格隔开的两个值以 px 为单位的数值以 % 为单位的数值关键字 : top / bottom / left / right / center注意：more的转换原点是在元素的中心位置处转换效果位置作用改变元素在页面的位置语法属性：transform取值(函数)：translateX(x)x:表示元素在x轴的位移距离(横向)x取值为正，元素右移x取值为负，元素左移translateY(y)y:表示元素在y轴的位移距离(纵向)y取值为正，元素下移y取值为负，元素下移translate(x)等同于 translateX(x)translate(x,y)同时在x轴和y轴上做位移操作缩放作用改变元素在页面的大小语法属性：transform取值(函数):scaleX(x)x表示横向缩放比例x默认值为1,原始大小取值大于1的数字：放大的比例大于0小于1的数字：缩小的比例小于0:物极必反(180度的翻转放大比例)scaleY(y)y表示横向缩放比例y默认值为1,原始大小取值大于1的数字：放大的比例大于0小于1的数字：缩小的比例小于0:物极必反(180度的翻转放大比例)  scale(value)value表示x轴和y轴的缩放比例是相同的旋转作用改变元素在网页的角度语法属性：transform取值：rotate(ndeg)n为旋转角度n取值为正，顺时针旋转n取值为负，逆时针旋转注意：转换远点会影响转换效果旋转操作时，会连同坐标轴也一同跟着旋转，会影响旋转之后的位移操作JavaScript概述什么是JavaScriptJavaScript简称"JS",是一种运行于js解释器或执行引擎中的解释性脚本语言JS发展史1992年Nombas公司开发了一款脚本语言，能够运行在网页中，名称 CMM(C--)更名为ScriptEase1995年Netscape(网景)为自己的浏览器Navigator2.0开发里另一款脚本语言 - LiveScript,后更名为 JavaScript1996年Microssft,为自己的浏览器IE3.0开发了一款JavaScript的克隆版本JScript1997年Netscape找到了ECMA(欧洲计算机制造商联合会)，Netscape将JS的核心交给了ECMA,从此JS的核心被更名为ECMA Script,简称ES完整的JS组成:核心 - ECMAScript包含了JS中最基本的语法规范浏览器对象模型  -  BOM模型(Browser Object Model)  提供了一系列的可操作的方法和属性用于和浏览器进行交互文档对象模型 - DOM模型(Document Object Model)提供了一系列的可操作方法和属性用于和文档进行交互JS的使用方法在元素事件中编写JS代码事件：用户在元素上所激发的行为操作onclick:当用户单击元素时激发的操作语法：<标记 noclick="JS执行代码">JS可执行的代码：console.log("向控制台中输出一句话");console.log('向控制台中输出一句话');将代码嵌入在网页的<script></script>里语法：在网页的任意位置处，均可以嵌入<script>可执行的JS代码</script>特点：网页加载时就执行document.write("向网页中输入的一句话")注意：将document.write编写在按钮中的话，在执行时，会刷新网页中的内容练习：在一个按钮中，单机时，执行document.write()将JS代码编写在外部的JS文件中创建一个JS文件(xxx.js),编写JS代码在使用的网页中对js文件进行引入<script src="JS文件路径"></script>注意：在引入的JS标记中是不能编写JS脚本的JS的基础语法JS都是由语句来组成的由运算符，关键字 和 表达式构成的JS中严格区分大小写console.log("...")  正确Console.log("...")  错误每条语句必须以 ; 便是结束所有的标识符，符号必须都是英文的console.log("...");  正确console.log(“...”)；  错误JS中的注释单行： //  (自动换行算一行)多行： /* .... */JS中的变量 和 常量变量声明变量声明：var 变量名;赋值：变量名 = 值;声明并赋值: var 变量名=值;eg:声明一个变量名为uname,值为 王小明var uname="王小明";console.log(uanme);  控制台显示document.write(uname);  网页中显示window.alert(uname);  弹出显示var name=""  //尽量不要用 name 做变量注意：在声明变量时，尽量使用 var 关键字，如果省略var的话，也可以，但容易出现问题声明变量如果未赋值的话，默认值为undefined变量名的命名规范不能是JS中的关键字和保留关键字由字母，数字，下划线(_)和$  var $ = 35;var _46 = 46;数字不能开头尽量不要重复尽量要见名知意如无特殊需求，尽量使用小驼峰命名法var age;var gender;var userName;变量的使用方式为变量赋值只要变量出现在赋值(=)符号的左边,一律都是赋值操作var age = 35;var newAge = age;获取变量的值只要变量没出现在赋值(=)符号的左边，一律都是取值操作console.log(uname);ar age = 35;//赋值age = age + 35;赋值操作：先运算赋值符号右面表达式或值，再赋值给左边的变量赋值符号的左边只能是变量常量什么是常量一经声明就不允许被修改的数据就是常量语法const 常量名=值;注意：常量声明好之后是不允许被修改的，所以一定要赋值常量名一般采用全大写形式练习：1、创建一个网页06-JS-const-exer.html2、声明一个常量PI，赋值为3.143、声明一个变量 r，表示一个圆的半径，随意赋值4、通过PI和r计算圆的周长，并将结果保存在变量 l 中 （2*π*r）5、通过PI和r计算圆的面积，并将结果保存在变量 s 中 （π*r*r）半径为...的圆的周长是...半径为...的圆的面积是...保留到小数点 n 位var l = 62.8000000000004;l = l.toFixed(n);var input=window.prompt("输请入数字"); 在网页中输出
数据类型什么数据类型数据的类型,约束了数据在内存中所占的空间大小JS的数据类型分类基本数据类型(原始类型)number类型数字类型，可以表示32位(4字节)的正数或64位(8字节)的浮点数整数：允许表示十进制，八进制 和 十六进制十进制：var num=321;八进制：var num=010;(八进制以0开头)十六进制：var num=0x1A;小数：小数计数法： var num=123.456;指数计数法： var num=1.5e3;string类型字符串类型由Unicode的字符，数字和标点组成注意：字符串在使用是必须用单引号或双引号引起来每个字符都有自己的Unicode码查看字符的Unicode码var str="张";str.charCodeAt(); //得到十进制Unicode小括号可以用下标表示具体字符var r =str.charCodeAt();//将r转换为十六进制的字符串r=r.toString(16);如何将Unicode码转换为对应的字符已知Unicode码：5f20var str="\u5f20"; //正确写法var s1="\u"+5f20; //错误写法中文范围"\u4e00~\u9fa5"转义字符\n:换行 \t:制表符 \":一个双引号\':一个单引号\\:一个\boollean类型：布尔类型，只用于表示真(true)或(false)注意：boolean类型是可以参与到数字运算中的true当成1运算false当成0运算var r=1+true;  //2var r=3685 * false; //0var r=true+false; //1undefined类型产生undefined场合：声明变量为负值访问对象不存在的属性时查看数据类型使用typeof() 或typeof 查看变量的数据类型var num = 35;var t1 = typeof(num);var t2 = typeof num;引用数据类型数据类型数据类型转换不同的数据类型之间的数据在进行运算时是如何转换的隐式转换数字 + 字符串将数字转换为字符串，再进行拼接var num=15;var str="18";var r=num+"str";  // 1518var r="15"+18+15;  //151815var r=15+18+"15";  // 3315var r="15"+(18+15);  //1533数字 + 布尔将布尔类型转为数字布尔 + 字符串将布尔转换为字符串，再拼接var b = true;var s= "你好";var r= b + s;  //"true你好"布尔 + 布尔将布尔转为数字，再相加注意：任意类型与字符串做加法运算时，都是将其他类型转换为字符串再拼接字符串与数字进行运算时：加法：拼接其余操作(-,*,/,%):先将字符串转换成数字，再做运算显式转换(转换函数，强制转换)toString()将任意类型的数据转换为字符串，并返回转换后的结果语法：var r = 变量.toString();eg:var num=18;var r = num.toString();var num =18;var r = num + "";parseInt()作用：将任意类型的数据转换成整数,如果实在无法转换的话，则返回NAN(Not a Naumber)语法：var r =parseInt(数据)eg:var r = parseInt("13.5");r:13var r =parseInt("13");r:13var r=parseInt("13你好");r:13var r=parseInt("你好");r:NaNparseFloat()作用等同于parseInt(),允许转换小数var r = parseFloat("35.5");r:35.5var r = parseFloat("35.5abc");r:35.5var r = parseFloat("abc35.5");r:NaNNumber()作用：将任意类型的数据转换为数字，只要包含非法字符的话，结果就为NaNvar r = Number("35.5");r:35.5var r = Number("35");r:35var r= Number("35你好");r:NaN运算符算术运算符+  -  *  /  %  ++  --  %: 模++:自增运算符，在自身数据的基础上只做+1运算--:自减运算符，在自身数据的基础上只做-1运算eg:var a=15;a++;++a;++做前缀：对变量先自增，再使用++做后缀：先使用，再对变量自增eg:var num=5;console.log(num++);   //先输出5再变为6console.log(num);    //输出6var num=5;console.log(++num);  //先变为6，输出6console.log(num);    //输出6var num=5;num++;console.log(num);  //输出6var num=5;console.log(num--);   //先输出5再变为4console.log(num);    //输出4var num=5;console.log(--num);  //先变为4，输出4console.log(num);    //输出4  var r=num++ + ++num + num++ + ++num +num;r:37关系运算符(比较运算符)> < >= <= == != === !==10 > 5 true"10" > 5 true如果运算符的两端有一个操作数是数字的话，那么另外一个会自动通过Number()进行转换然后再进行比较"3" < 5 false"10a">5 false"10a"<5 false先将"10a"通过Number()转换为数字，再与5比较"10a" 通过Number()转换时，结果为NaNNaN只有做!=运算时结果为true,其余比较都是falseNaN !=任何数时(包括NaN)，结果为true,其他运算皆为false"张三丰" > "张无忌"  false"三" 19977"无"：26080比较每位字符的Unicode码,最终比较"三"和"无"的Unicode码"10" > "5" :false"50" > "5" :true=== 和 !=="5" == 5 : true===:比较数据的数值和数据类型都相等的情况下，结果才为真"5" ===5 :false!==:比较数据的数值和数据类型只有一个不等，结果就为真"4" !== 4 :true逻辑运算符! :非，对现有条件取反，等同于python not&&: 逻辑与，等同于python中的 and||:逻辑或，等同于 python中的 or条件1 && 条件2:条件1为真，条件2为假，整体结果为假条件1为假，条件2为真，整体结果为假条件1为假，条件2为假，整体结果为假条件1为真，条件2为真，整体结果为真条件1 || 条件2：条件1为真，条件2为假，整体结果为真条件1为假，条件2为真，整体结果为真条件1为假，条件2为假，整体结果为假条件1为真，条件2为真，整体结果为真 ! 条件：非真即假，非假即真，位运算符按位与: &eg:3 & 5: 13:0115:101=======001场合：判断一个数字的奇偶性任意数字与1做按位与操作，结果为1是奇数，结果为0是偶数按位或：|场合：任意小数与0做按位或操作，快速取整(抛弃小数位，保留整数位)eg:423.123 | 0 :423按位异或：^场合：两个数字的二进制位进行比较，不同则为1,相同则为0eg:3 ^ 5: 63:0115:101=========110 : 6^的作用：在不借助第三方变量的前提下，交换两个数字的位置eg:var a=5;var b=3;step1: a=a^b;  //a:6step2: b =b^a;  // b:5step3: a=a^b;   // a:3条件运算符单目运算符也叫一元运算符：只有一个操作数的运算符++,--,!typeof双目运算符也叫二元运算符：有两个操作数的运算符+  -  *  /  % , ... ,  &&  ||  &  |三目运算符也叫三元运算符：有三个操作数的运算符? :条件运算符：条件表达式 ? 表达式1 : 表达式2;先判断条件表达式的值，如果为true则执行表达式1的操作，否则则执行表达式2的操作var r= score>60?"及格":"不及格";console.log(r)表达式1和表达式2的位置处，还可以是一个条件表达式var r = score >=90?"优秀":score>=60?"及格":"不及格";console.log(r);赋值运算符(op)a op= b;var num = 5;num += 6;  // num =num+6var a=3;var b=5;a=a^b; a^=b;b=b^a; b^=a;a=a^b; a^=b;程序的流程结构顺序结构分支结构(选择结构)循环结构分支结构：作用：根据条件，选择某一段代码去执行语法：if结构if(条件){满足条件要执行的代码}注意：if 后的{}是可以省略的，如果省略的话，则只控制该结构的第一条语句条件尽量是boolean类型的，如果不是，以下条件当成假运算:if(0){}if(0.0){}if(""){}if(NaN){}if(undefined){}if(null){}if(条件){语句块1}else{语句块2}if(条件1){语句块1}else if(条件2){语句块2}, ... ,else{语句块n}练习：分三次输入年 月 日 计算该日是改年的多少天switch 结构场合：只有在等值判断是使用语法：switch(变量){case 值1:语句块1break;  //可省略case 值1：语句块2break;... ...default:语句块n;//所有的case块都未匹配上时，才执行default}注意：变量和各个case块后面得值，是使用=== 的方式来判断的如果case后不增加break的话，则从匹配的case开始，向下依次执行(不判断)，直到结束或碰到break为止循环结构循环的作用重复的执行相同或相似的代码循环两要素循环条件循环操作(循环体)eg:想打印100遍 的hello world条件：打印100遍操作：打印hello worldvar i=1;   //声明循环条件，从1开始while(i<=100){console.log("hello world");i++;  //更新循环条件}while 循环语法：while(条件){循环体}do ... while 循环语法:do{循环体}while(条件);流程先执行循环体判断循环条件如果条件为真， 则继续执行循环操作，否则退出循环循环的流程控制break用在循环体内，用于跳出整个循环结构continue用于循环体内，用于跳出本次循环，继续执行下次循环whilevar i=1; //循环条件的声明while(i<=100){ //循环条件的判断console.log(i); //循环条件的判断i++; //更新循环变量}for 循环语法：for (表达式1;表达式2;表达式3){循环操作}表达式1:循环条件的声明表达式2:循环条件的判断表达式3:更新循环变量流程：先执行表达式1，生命循环条件(执行1次)判断表达式2的值，true或false如果为true,则执行循环操作；如果为false，则跳出循环执行完循环操作之后，再执行表达式3再判断表达式2的值，同步骤2for VS while相同点：先判断循环条件，再执行循环操作的结构不同点：while : 优先用在不确定循环次数的场合下for : 优先用在确定循环次数的场合下练习判断素数从弹框输入一个数，判断是否是素数循环的嵌套允许在一个循环的内部再出现循环for (var i=1;i<=10;i++){for (var j=1;j<=10;j++){}}函数什么是函数函数，即 function,是一段预定已好，可以独立执行并包含多条执行语句的代码块优点：多条执行语句的封装实现了代码的复用在js中创建函数function 函数名(参数列表){函数体[返回值]}参数列表：如果没有参数，可以为空如果有参数，就编写参数列表.如果参数是多个的话，各个参数之间使用","隔开有参数的函数，在调用时就要传参，如果未传参的话，参数的值就是undefinedeg:funciton show(){console.log("无参函数");condole.log("调用时不需要传参");}//无参数函数function show(name){console.log(name);}//有参数函数function show(name,age){console.log(name);console.log(age);}//多个参数的函数返回值：在函数体内，经过运算后，需要传递给函数调用者的一个值，就是返回值返回值是可选的，如果有反回值的话，需要使用return 进行返回，最多只能返回一个值eg:functin show(name){return "你好:"+name;}函数的调用在任意的JS合法的位置处，都允许做函数的调用eg:var ret=函数名(参数列表);有参数，则传参，否则，为空有返回值，可以接受，否则不接受变量的作用域什么是变量的作用域变量的作用域指的是变量的可访问范围作用域的分类局部变量使用var关键字声明在某个函数内的变量，都是局部变量局部变量只能在声明的函数内使用，出了函数则无法使用全局变量在function之外的声明的变量都是全局变量声明变量不使用var关键字的时候，都是全局变量全局变量可以应用在各个函数中以及各个位置处注意：全局变量，推荐放在所有的function之外，使用var关键字去声明数组 - Array什么是数组数组(Array)是一个用于保存批量数据的数据的数据结构数组是按照线性结构来保存数据的创建数组创建一个空数组var 数组名 = [];创建数组并初始化元素var 数组名 = [元素1,元素2,元素3,... ...];创建一个空数组var 数组名 = new Array();创建数组并初始化元素var 数组名 = new Array(元素1,元素2,... ...);注意：var 数组名= new Array(lenth); lenth 表示初始化的长度,lenth为number类型数组的使用获取 或 设置数组的元素值，一律使用下标下标从0开始，到数组元素个数-1结束将 arr1数组中的第一个元素更改为"安倍"arr1[0]="安倍";打印输出 arr1 数组中的第三个元素console.log(arr1[2]);获取数组的长度属性：length用法：数组名.length使用场合:能够找到数组中，最新要插入元素的位置(即向数组尾部增加元素时使用)var names=["刘德华","张学友","郭富城"];//向 names 的尾部追加新元素names[names.length]="黎明";练习：让用户循环从弹框录入数据输入exit退出，并打印清空数组将数组的length属性设置为0,即表示清空数组中的所有的元素配合循环，遍历数组中的每一个元素var arr=["金正恩","金正日","金日成"];//从头遍历到尾for (var i=0;i<arr.length;i++){console.log(arr[i]);}//从尾遍历到头for (var i=arr.length-1;i>=0;i--){console.log(arr[i]);}常用APItoString()作用：将数组转换成字符串,将转换后的字符串进行返回var arr=["孙悟空","猪八戒","沙僧"];console.log(arr.toString());结果：孙悟空，猪八戒，沙僧console.log("数组:"+arr)join(seperator)作用：返回一个由seperator连接的数组元素的字符串var arr=["孙悟空","猪八戒","沙僧"];var str=arr.join("-")console.log(str);结果为：孙悟空-猪八戒-沙僧reverse()作用：反转注意：该函数会改变现有数组的结构sort()作用：对现有数组的内容进行排序默认是按照元素的unicode码升序排序注意：该函数会改变现有数组的结构允许通过自定义的排序规则(排序函数)来指定数字的排序方式语法：arr.sort(排序函数);升序的排序函数function sortAsc(a,b){return a-b;}降序的排序函数function sortAsc(a,b){return b-a;}将sortAsc指定为排序函数数组会自动的将相邻的两个数字传递到参数的位置处如果函数值是大于0的数字的话，则交换两个数字的位置，否则不变指定排序函数：arr.sort(sorAsc);使用匿名函数指定排序规则匿名函数：是一个没有名称的函数，只因为某一功能而存在arr.sort(function(a,b){return a-b;});作业：从弹框中输入一个数字将该数字转为二进制再输出除二取余法数组进出栈操作栈式操作：提供了快速操作数组头部和尾部元素的方法push()入栈，压栈，向数组尾部增加新元素，并返回新数组的长度arr[arr.length]="张三丰";arr.push("张三丰");pop()出栈，弹栈，删除并返回数组尾部的元素unshift()向数组的头部添加新元素并返回数组的长度shift()删除并返回数组头部的元素二维数组什么是二维数组数组中的每个元素又是一个数组声明二维数组var books=[["西游记","水浒传","红楼梦","三国演义"],["老人与海","雾都孤儿","复活"]];books[0][1]="水浒传"字符串 - string声明字符串var str1="字符串1";var str2=String("字符串2");var str3=new String("字符串3");length 属性作用：返回当前字符串中字符的个数常用函数 - String API大小写转换函数toUpperCase()返回当前字符串的完全大写形式toLowerCase()返回字符串的完全小写形式练习：创建一个数组，并初始化若干数据生成一个四位验证码将生成四位随机验证码通过prompt提示给用户去看并接收比较两者是否一致获取指定位置的字符 或 字符的 Unicode码获取指定位置的字符函数：str.charAt(index)eg:var str="Hello World";var s=str.charAt(3);console.log(s); // 1console.log(str.charAt(6)); //W获取指定位置的字符的Unicode码函数: str.charCodeAt(index)eg:var str="Hello World";var r=str.charCodeAt(3);console.log(r); // 1 的Unicode码(十进制)检索字符串indexOf(value,fromIndex)value:要查找的子字符串fromIndex:从哪个下标位置处开始查找，如果省略，则从第一个字符处开始查找返回值：返回value第一次出现的下标，如果没有查询到子字符串的话，则返回-1lastIndexOf(value,fromIndex)作用：查找value最后一次下标截取子字符串函数：substring(start,end)作用：返回从start到end-1之间的字符串，如果省略end的话，则截取到整个字符串的尾部分割字符串作用：将一个由指定连接符的字符串，按照连接付给拆开，拆分成一个字符串数组函数：split(seperator)eg:var str="zsf_zwj_zcs_yxx_zm";var arr=str.split("_");console.log(arr);模式匹配作用：配合着 正则表达式 完成字符串的查找和替换正则表达式语法：/正则格式/修饰符修饰符：i:ignorcass(忽略大小写的匹配)g:global(全局匹配)m:multiple(允许多行匹配)eg:/\d{2,6}/g/垃圾/g   匹配垃圾两个字在全局函数replace(substr/regexp,replacement)作用：在一个字符串中，将substr或满足regexp格式的字符串替换成replacementmatch(substr/regexp)作用：按照指定的子字符串或正则表达式进行匹配，并返回满足格式的子字符串(数组)其它内置对象JS中对象分类内置对象  -- ES提供外部对象  window(BOM)document(DOM)自定义对象 -- function对象：包含属性 和 方法(函数)对象.属性对象.方法()RegExp 对象RegExp -Regular Expression创建RegExp对象的方式var regExp=/匹配模式/修饰符;eg:var reg=/垃圾/igm;var regExp=new regExp("匹配模式","修饰符");eg:var reg=new RegExp("垃圾","g");RegExp 对象的方法test(string)string:要验证的字符串作用：验证string是否满足当前正则表达式对象的格式，如果string满足正则表达式的话，则返回true,否则返回falseMath对象作用：执行与数学相关的运算和数据属性：Math.PI:表示πMath.E:表示自然数方法：三角函数Math.sin()Math.cos()Math.tan()计算函数Math.sqrt(x):开平方Math.log(x):求对数Math.pow(x,y):求x的y次方数值函数Math.abs(x):求x的绝对值Math.max(a,b,c,d):求一组数据中的最大值Math.min(a,b,c,d):求一组数据中的最小值Math.random():生产0-1之间的随机数Math.round(x):将x四舍五入到整数Date对象作用：获取客户端的日期时间创建Date对象获取当前日期时间var now=new Date();初始化自定义日期时间对象var date=new Date("2018/06/13 17:20:20");方法：读取或设置当前时间的毫秒数getTime()返回自1970-1-1 00:00:00 到date 对象所经过的毫秒数setTime(毫秒数)根据给定的毫秒数，结合1970-1-1 计算日期读取时间分量getFullYear()获取当前日期对象的地位年份数getYear()返回自1900年以来，到当前日期对象所经过的年数getMonth()返回0-11的数字来表示1-12月，需要得到当前月份时，需加1getDate()返回当前日期对象的日getDay()返回当前日期对象的星期几，返回0-6表示星期日-星期六获取时间getHours():获取小时getMinutes():获取分getSeconds():获取秒getMilliseconds():获取毫秒转换为字符串toString()toLocaleString()toLocaleTimeString()toLocaleDateString()外部对象BOM 和 DOMBOM:Browser Object Model浏览器对象模型将浏览器比喻成一个对象 -- window(网页初始化时会自动创建)，可以通过该对象灵活的操作浏览器DOM:Document Object Mondel文档对象模型将HTML文档比喻成一个对象  -- document, 可以灵活的操作网页上的内容，该对象属于window的属性之一，使用时不用声明window对象(BOM模型)作用：在JS中表示浏览器窗口window下的属性和方法在使用的过程中，可以省略window,而直接使用属性和方法window.alert() -->alert()window.document -->documentwindow.histor --> historywindow中的对话框警告框window.alert()/alert()输入框window.prompt()/prompt()确认框window.confirm()/confirm()点击"确定"按钮的话，返回true，其余的所有的操作，返回falsewindow中的定时器周期性定时器特点：每间隔一段时间后，就执行一遍程序，反复执行声明定时器var ret=setInterval(fun,duration);fun:要周期性执行的函数，可以是匿名函数duration:要间隔的时间周期ret:返回创建好的定时器对象(清除定时器时使用)清除定时器clearInterval(timer)timer:要清除的定时器对象一次性定时器特点：在指定的时间间隔后，只执行一次操作声明一次性定时器var ret=setTimeout(fun,time)fun:等待一定时间后执行time:要等待的时长ret:已启动的定时器对象清除定时器clearTimeout(timer);关闭网页window.close();window中的属性screen属性作用：获取客户端显示器的相关信息属性：width / heightavailWidth / availHeighthistory属性作用包含当前窗口所访问过的url地址们属性&方法属性length:所访问过得url的数量方法back():后退forward():前进go(num):在当前网页的基础上前进或后退几步num: 取值为正数，前进num: 取值为负数，后退location属性作用表示浏览器上地址栏的信息属性&方法属性：herf表示当前窗口中正在浏览的网页的地址，如果为href赋值，相当于实现网页跳转功能方法：reload()重新加载当前网页，相当于刷新navigator属性作用：包含浏览器的相关信息属性userAgent:显示信息document对象(DOM模型)document的概述document对象，是DOM模型中的顶层对象，封装了所有和HTML元素的属性，方法以及事件网页在加载的时候，会在内存中生成一颗节点树(DOM树)，DOM树会封装网页上所有的内容网页上给你的每一个元素，每一个属性，每一段文字(包括注释)，都会被封装成DOM树上的一个单独的节点节点分为以下类型元素节点 - 表示网页中的一个元素属性节点 - 表示元素中的一个属性文本节点 - 表示元素中的文本内容注释节点 - 表示网页中的注释内容文档节点 - 表示整个HTML文档DOM中所提供的操作查找节点读取节点信息修改节点信息删除节点创建节点查找节点通过元素的id查找节点前提：元素一定要具备id属性，否则无法查找方法：var elem=document.getElementById("元素ID");elem:对应ID的元素在JS中表现 - DOM对象/DOM元素DOM属性innerHTML修改/获取/设置当前DOM对象的HTML文本innerText修改/获取/设置当前DOM对象的普通文本value该属性只针对表单控件，允许获取或设置表单控件的值读取节点信息节点的类型属性：nodeType值：返回1：元素节点返回2：属性节点返回3：文本节点返回8：注释节点返回9：文档节点节点的名称属性：nodeName元素节点 & 属性节点：返回 元素名 或 属性名文本节点：返回 #text文档节点：返回 #document注释节点：返回 #comment获取 或 设置元素节点的属性值getAttribute(attrName)作用：获取指定属性值返回值：attrName属性对应的值setAttribute(attrName,attrValue)作用：修改或设置指定属性的值attrName:要修改或设置的属性名attrValue:要修改或设置的值removeAttribute(attrName)作用：将attrName属性从节点中以移除出去通过 dom对象.属性名 获取或设置属性值注意：class属性不适用于该方式元素的样式(css)使用 setAttribute 设置 class属性的值elem.setAttribute('class','类选择器');使用元素的className属性修改class值var div=$("container")div.className="red";注意：不能使用elem.class="类选择器名称"使用内联方式设置属性值elem.style.css属性值=值;elem.style.color="red";注意：如果css属性名中包含"-",那么"-"要取消，并且后面单词的第一个字符变大写font-sizeelem.style.fontSize="12px";border-right-colorelem.style.borderRightColor="red";DOM - 查询节点根据ID查询节点document.getElementById()根据层级节点结构查询parentNode根据当前的节点的层级结构，返回父元素节点childNodes根据当前的节点的层级结构，返回当前元素的所有的子元素数组注意：能够获取所有的文本节点和元素节点childen根据当前的节点的层级结构，返回当前元素的所有子元素节点数组nextSibling获取当前节点的下一个兄弟节点nextElementSbling获取当前节点的下一个元素兄弟节点previousSbling获取当前节点的上一个兄弟节点previousElementSibling获取当前节点的上一个元素兄弟节点通过标签名称获取页面元素语法：document.getElementsByTagName("标签名") 或 elem.getElementsByTagName("标签名")返回值：返回包含指定标记的元素数组们通过元素的name属性值获取元素语法:document.getElementsByName("name");返回值：包含指定name属性值的元素的数组通过元素的class属性值获取元素语法：document.getElementsByClassName("class") 或 elem.getElementsByClassName("class")返回值：返回包含指定class属性值的所有元素DOM增加节点创建节点语法:var elem=document.createElement("元素名");eg:function show(){var elem=document.createElement("div");elem.id='container';elem.innerHTML="动态创建的div";console.log(elem);}增加节点作用：将创建好的元素增加到网页中语法：document.body.appendChild(elem)向body中追加elem新元素parentNode.appendChild(elem)向parentNode的内部增加elem新元素parentNode可以表示页面上的任意一个节点parentNode.insertBefore(newElem,oldElem)将newElem插入到parentNode中oldElem之前删除节点在DOM中，删除节点的行为只能由父元素发起删除body中的子元素document.body.removeChild(elem);删除其他元素的子元素parentNode.removeChild(elem);  删除parentNode中的elem子元素事件什么是事件通常由用户的行为来激发的操作触发事件的行为所有的事件在绑定的时候，前面要加 on鼠标的事件click:鼠标单击事件mouseover: 鼠标移入进元素激发的事件mouseout:鼠标移出元素激发的事件mousemove:鼠标在元素内移动时的事件键盘事件keydowm:键位按下时事件keypress:键位按下时事件keyup:键位抬起时事件状态改变事件load:当元素加载完成时激发的事件change:元素发生改变是激发的事件(<select>)focus:当元素获取焦点时触发的事件blur:当元素失去焦点时出发的事件submit:当表单被提交时触发的事件绑定事件的方式在元素中绑定事件语法：<标记 on事件名="执行函数()">eg:为div元素绑定鼠标移入事件<div onmousever="函数"></div>为body绑定load事件<body onload="函数"></body>在JS中动态的为元素绑定事件var div = document.getElementById("d1");div.on事件名=function(){事件操作}var d1=document.getElementById("d1");动态的为d1绑定click事件d1.onclick=function(){事件操作}动态的为d1绑定mouseout事件d1.onmouseout=function(){事件操作}注意：在动态绑定事件中，在事件处理函数内，允许通过this关键字，来表示当前元素(DOM元素)事件行为load事件常用：为body绑定load事件，目的是为了在所有内容都加载完成后再执行的操作要放在此处语法：<body onload=""></body>(不常用)JS中动态绑定(常用)window.onload=function(){}submit 事件只有在表单被提交时才会触发注意：该事件需要一个boolean的返回值来通知表单是否要提交，返回为true,可以提交表单，返回为false则阻止表单提交事件对象(事件参数对象，event对象)什么是事件对象任何一个事件在触发后，都会自动产生一个event对象event对象中包含于当前事件相关的一些属性和方法获取evnet对象在html元素中绑定事件<标记 onclick="btn(event)">function btn(event){//事件处理函数}在JS中动态为元素绑定事件var d1=$("d1");d1.onclick=function(event){event表示的就是事件对象}事件对象的常用属性事件源什么是事件源触发当前事件的元素是谁获取事件源通过 event.target 获取事件源事件源是一个DOM对象鼠标事件(事件对象的常用属性)鼠标事件：click,mouseover,mouseout,mousemove,offsetX,offsetY获取鼠标在元素上的坐标点以元素的左上角为(0,0)clientX,clientY获取鼠标在网页上的坐标点screenX,screenY获取鼠标在屏幕上的坐标点键盘事件(事件对象的常用属性)键盘事件:keypress,keydown,keyupkeypress只有在输入字符的前提下，才会被激发which当前按下的字符的ASCII码key当前按下的字符注意：该事件允许通过一个返回值，通知元素是否要处理该事件，返回值为true，则正常显示输入的字符，返回值为false,则终止显示keydown只要按下键盘键位时就会被触发，无论是否有字符的输入which当前按下键位的键位码只区分按键，并不区分大小写大小写字符，是同一键位，所以键位码相同返回值：同keypress事件事件冒泡定义：当激发子元素事件时，同时把父元素对应的事件也给执行了场合：必须是父子结构或具备层级关系的元素必须同时设置了相同的事件阻止事件冒泡定义：让该事件在当前元素中执行，不向上冒泡语法：event.stopPropagation();jQueryjQuery介绍jQuery是一个轻量级的JS库 - 是一个被封装好的JS文件，提供了更为简便的元素操作方式jQuery封装了DOMjQuery核心理念：Write Less Do More(少写做多)jQueary版本：jQuery 2.x  不在兼容IE6,IE7,IE8jQuery 1.11.x使用jQuery引入jQuery文件<script src="jquery-1.11.3.js"></script>注意：该文件的引入操作必须要放在其他的jQuery操作之前使用jQueryjQuery对象定义：jQuery对象是由对页面元素进行封装后的一种体现jQuery中所提供的所有操作都只针对jQuery对象其他对象(DOM对象)无法使用工厂函数 - $()想要获取jQuery对象的话，则必须使用工厂函数$()在$()中允许传递一个选择器/DOM对象作为参数，$()能够将选择器 和 DOM对象全部封装成jQuery对象在进行返回DOM对象 和 JQuery对象之间的转换DOM对象：不能使用jQuery提供的操作jQuery对象：不能使用DOM提供的操作将DOM对象转换为jQuery对象语法：var 变量=$(DOM对象);注意：所有的jQuery对象在起名的时候，最好在变量前加$,主要用于和DOM对象的区分将jQuery对象转换为DOm对象语法一：var dom对象=jQuery对象[0];语法二：var dom对象=jQuery对象.get(0);jQuery选择器作用：获取页面上的元素们，返回值都是由jQuery对象所组成的数组语法：$("选择器")常用选择器基本选择器ID选择器$("id")返回：返回页面中指定ID值的元素类选择器$(".className")返回值：返回页面中指定className的所有元素元素选择器$("element")返回值：返回页面中指定标记的所有元素群组选择器 / 复合选择器$("selector1,selector2,...")返回值：返回满足函数内所有选择器的函数们层级选择器$("selector1 selector2")  后代选择器$("selector1>selector2")  子代选择器$("selector1+selector2") 名称：相邻兄弟选择器作用：匹配紧紧跟在selector1后面且满足selector2选择器的元素$("selector1~selector2")名称：通用兄弟选择器作用：匹配selector1后面所有满足selector2选择器的元素基本过滤选择器过滤选择器通常都会配合这其他的选择器一起使用:fist只匹配一组元素中的第一个元素eg:$("p:first"):last只匹配一组元素中的最后一个元素:not("selector")在一组元素中，将满足selector选择器的元素排除出去:odd匹配偶数行元素(下标为奇数):even匹配奇数行元素(下标为偶数):eq(index) --equals匹配下标等于 index的元素:gt(index)匹配下标大于index的元素:lt(index)匹配下标小于index的元素练习：使用p标记显示 两首诗变色显示行隐藏第二首诗属性过滤选择器依托于html元素的属性来进行元素过滤的语法：[attribute]作用：匹配包含指定属性的元素eg:div[id]  匹配具备id属性的div元素[attribute=value]作用：匹配attriburte属性值为value的元素eg:input[type="text"](引号可不用)  匹配文本框input[type=passowrd]  匹配密码框[attribute!=value]作用：匹配attrbute属性值不是value的元素[attribute^=value]作用：匹配attribute属性值是以value字符开头的元素eg:p[class^=col]  匹配col开始的[attribute$=value]作用：匹配attribute属性值是以value字符结尾的元素[attribute*=value]作用：匹配attribute属性值中包含value字符的元素子元素过滤选择器语法：:first-child匹配属于其父元素的首个子元素:last-child匹配属于其父元素中的最后一个子元素:nth-child(n)匹配属于其父元素中第n个子元素(这里的n不是下标)jQuery操作DOM基本操作html()作用：获取 或 设置 jQuery对象中的html内容eg:console.log($("#main").html);$("main").html("") 设置为空text()作用：获取 或 设置jQuery对象中的text内容val()作用：获取 或 设置 jquery对象中的value值(表单控件)属性操作attr()作用：读取 或 设置 jQuery对象的属性值eg:$obj.attr("id") 获取$obj的id属性值$obj.attr("id","main")  设置$obj对象的id属性值为mainremoveAttr("attrName")作用：删除jQuery对象的attrName属性eg:$obj.removeAttr("class");  删除class属性样式操作attr()$obj.attr("class","redBack");设置class值为redBackaddClass("className")作用：将className 添加到元素的class值之后eg:$obj.addClass("c1"); 追加c1连缀调用$obj.addClass("c1").addClass("c2");removeClass("className")如果无参数的话，则清空类选择器否则删除对应的类选择器eg:$obj.removeClass("c1")$obj.removeClass()toggleClass("className")切换样式：元素如果具备className选择器，则删除元素如果没有className选择器，则添加css("属性名")eg:$obj.css("width");获取$obj对象的width属性值css("属性名","属性值");eg:$obj.css("background-color","yellow")设置$obj对象的背景颜色的属性值为黄色css(JSON对象)JSON对象：是一种约束了格式的对象表现方式JSON:JavaScript Object NotationJSON对象的表示方式：JSON对象必须使用{}括起来使用键值对的方式来声明数据(表示属性和值)所有的属性在使用时必须使用双引号括起来，值如果是字符串的话，也必须使用双引号括起来属性和值之间使用冒号连接多对属性和值之间使用逗号隔开eg:$obj.css({"color":"red","font-size":"32px",...});遍历节点children()  /  children("selector")获取某jQuery对象的所有子元素 或 带有指定选择器的子元素注意：只考虑子代元素，不考虑后代元素next()  /  next("selector")获取某jQuery对象的下一个兄弟元素 / 满足selector的下一个兄弟元素prev()  /  prev("selector")获取某jQuery对象的上一个兄弟元素 / 满足selector的上一个兄弟元素siblings() / siblings(selector)获取某jQuery对象的所有兄弟元素 / 满足selector的所有兄弟元素find("selector")查找满足selector选择器的所有后代元素parent()查找某jQuery对象的父元素创建对象语法：$("创建的标记")eg:创建一对div  (优先使用)var $div=$("<div></div>");$div.html("动态创建的div");$div.attr("id","container");$div.css("color","red");创建一对divvar $div=$("<div id='container' seyle='color:red;'>动态创建的div</div>");插入元素作用：将创建好的元素插入到网页中内部插入作为元素的子元素插入到网页中方法：$obj.append($new)将$new元素插入到$obj元素中的最后一个子元素位置处(追加)$obj.prepend($new)将$new元素插入到$obj元素中的第一个子元素位置处(追加)外部插入作为元素的兄弟元素插入到网页中方法：$obj.after($new);将$new元素作为$obj的下一个兄弟元素插入进来$obj.before($new);将$new元素作为$obj的上一个兄弟元素插入进来 删除元素$obj.remove();将$obj元素删除出去jQuery中的事件处理页面加载后的执行类似于window.onload 但不同于 window.onloadjQuery加载后执行的特点：在DOM树加载完毕的时候就开始执行$(document).ready(function(){页面的初始化操作DOM树加载完成后就开始运行});$(),ready(function(){页面的初始化操作DOM树加载完成后就开始运行 })$(function(){页面的初始化操作DOM树加载完成后就开始运行        });jQuery的事件绑定方式一：$obj.bind("事件名称",事件处理函数);eg:$obj.bind("click",function(){console.log("...");});方式二：$obj.事件名称(function(){//事件处理函数});eg:$obj.click(function(){//通过 this 来触发该事件的DOM对象})事件对象-event在绑定事件的时候，允许传递event参数来表示事件对象$obj.bind("click",function(event){//even表示当前事件的事件对象});$obj.click(function(event){//event表示当前时间的事件对象});event的使用方式与原生JS事件中的event使用方式一致event.stopPropagation():阻止事件冒泡event.offsetX:坐标event.offsetY:坐标event.target:获取事件源jQuery动画基本显示/隐藏语法：显示: $obj.show() / $obj.show(执行时间)单位毫秒隐藏: $obj.hide() / $obj.hide(执行时间)单位毫秒滑动式显示/隐藏语法：显示: $obj.slideDown() / $obj.slideDown(执行时间)单位毫秒隐藏: $obj.slideUp() / $obj.slideUp(执行时间)单位毫秒淡入淡出式显示/隐藏语法：显示：$obj.fadeIn() / $obj.fadeIn(执行时间)单位毫秒隐藏：$obj.fadeOut() / $obj.fadeOut(执行时间)单位毫秒
 Invalid or unexpected token  无效标记或意外标记
Web基础 HTML和CSS介绍和基本使用及语法，JavaScript和jQuery介绍和基本使用及语法相关推荐

【WEB基础】HTML CSS 基础入门（9）CSS盒子
网页上的元素辣么多,我该用什么办法让它们排列整齐.间距合理呢.常干家务的朋友们就容易理解了,用收纳盒呀! 所以用CSS做网页布局就涉及一个盒子的概念,简单理解,我们可以把页面上的所有HTML元素看作一 ...
WEB基础之：CSS Margins,Padding 和 Borders, Outlines
Margins,Padding 和 Borders, Outlines 1. 宽度和高度 2. margin与padding 3. 边框 3.1 **边框的样式:** 3.2 **边框宽度与颜色:** ...
雷宁轮播图编辑html,零基础学html+css
零基础学html+css是一本专为初学者设计的html+css基础教程,由雷宁等人编著.本书内容丰富翔实,全书由浅入深的讲解了HTML语言和CSS的语法基础,并且还以DIV+CSS布局为重点,提供30 ...
全栈 - 20 Web 基础网页的血肉 CSS
这是全栈数据工程师养成攻略系列教程的第二十期:20 Web基础网页的血肉CSS. HTML决定了网页中包含哪些内容,而CSS则决定了这些内容所呈现的样式. 什么是CSS CSS全拼是Cascadin ...
软件测试 Web自动化测试基础知识 HTML CSS JavaScript
文章目录 1 HTML 1.1 HTML简述 1.1.2 常用基本标签 1.1.3 表格 1.1.4 表单(重点) 表单小结 HTML小结 2 CSS样式表 2.1 三种格式修改样式 2.1.1 行内 ...
WEB安全之DIV CSS基础（二）：文字和文本的属性、列表样式和伪类超链接
WEB安全之DIV CSS基础(二):文字和文本的属性.列表样式和伪类超链接) 文字和文本的属性文字属性文本属性列表样式和伪类超链接项目符号列举设置列表项标记超链接文字和文本的属性文字 ...
Web 基础之CSS (全文5w字，超级详细)
文章目录 CSS学习 00. 使用CSS样式的方式 0.0 HTML的局限性 0.1 HTML <! DOCTYPE>声明标签 0.2 内链(行内)样式表(行内式) 0.3 嵌入式(内部) ...
Web基础总结（HTML、CSS等）
Web基础总结前言 HTML 元素和属性内容元素 head meta title base link body 表单元素功能元素其他元素分组元素页面交互元素语义元素全局属性 style ...
Web前端学习之 CSS基础二
Web前端学习之 CSS基础二 1. 2. 主体 3. 完整代码如下所示 4. 结束语 1. /* 权重是0 */* {font-size: 35px;text-align: center;color ...
Web基础 HTML和CSS介绍和基本使用及语法，JavaScript和jQuery介绍和基本使用及语法

Web基础 HTML和CSS介绍和基本使用及语法，JavaScript和jQuery介绍和基本使用及语法相关推荐

最新文章

热门文章
