HTML/CSS JavaScript jQuery

HTML/CSS

html基础

HTML 是用来描述网页的一种是超文本标记语言。Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
HTML 段落是通过 <p> 标签进行定义的。
HTML 链接是通过 <a> 标签进行定义的。
HTML 图像是通过 <img> 标签进行定义的。

<!--html常用标签-->

<html>描述网页</html>
<body>可见的页面内容</body>
<h1>标题</h1>
<p>段落</p>
<span>不换行的标签</span>
<br />//用于换行
<div>可换行的标签</div>
<!-- hr:产生一条横线的标签,可以设置属性值 -->
<hr width="400px" color="blue">

<!--列表 -->
<!-- ul 无序列表 ，前面有圆点-->
<ul>
			<li>误落尘网中，一去三十年</li>
			<li>误落尘网中，一去三十年</li>
			<li>误落尘网中，一去三十年</li>
</ul>

<!-- ol有序列表 ，默认数字为序号-->
<ol>
			<li>误落尘网中，一去三十年</li>
			<li>误落尘网中，一去三十年</li>
			<li>误落尘网中，一去三十年</li>
</ol>



<!--  html文本修饰标签-->
		font标签----用于设置文本的字体样式
        b标签----文本加粗
        i标签----文本斜体
        s标签----添加删除线
        u标签-----添加下划线
        sup标签----添加上标
        sub标签----添加下标
        strong标签----文本加粗
        big标签----元素中的内容在显示时比周围的文本大一个字号
        small标签-----元素中的内容在显示时比周围的文本小一个字号


<!-- 图片的标签 <img src="" alt=""> -->
    width:宽，height:高，title：标题，src="图片的地址"，alt：当图片没有正常加载时，则显示alt的文字说明.



<!-- 超链接   <a href=""></a>   -->

<!-- a标签：超链接标签，点击超链接标签，可以让页面跳转到新的资源路径，网页内容被更新-->
		 href属性：指定跳转的url地址（相对地址，绝对地址）
		 **url:统一资源定位器（网络上可以访问的资源路径
		 target属性：_blank:打开的内容显示在一个新的窗口，_self:打开的内容显示在当前窗口,如下：
        <a href="www.baidu.com" target="_blank">百度首页</a>
		<a href="www.baidu.com" target="_self">百度首页</a>
<!-- 设置顶部标志：定义锚点 -->
			<a name="top">顶部区域</a>
<!-- 通过锚点的名字top，跳转到锚点所在的位置 -->
			<a href="#top">回到顶部</a> 


<!-- 表格 -->
        table标签：用于实现表格
		caption：设置表格名字
		tr：（table row）：行
	    td:列（单元格）
	    border:边框
	    width：宽度
	    cellpadding="0":设置文本内容和表格边框的宽度
		cellspacing="0":设置单元格之间的宽度

css基础

css的三种使用样式

内联样式：在标签内通过style的属性进行使用，如：<p style="color:red;">内联样式</p>
内部样式：在head标签中通过<style>css语言</style>进行使用，如：<head><style>body {background-color: powderblue;}</style></head>
外部样式：通过在head标签中，使用<link href="xx.css"标签，引入css文件，进行使用：
<link href="xx.css" type="text/css" rel="stylesheet" />

css的基本选择器

标签选择器：标签名{样式}，如：标签选择器（div{}），选择标签为div的所有元素
class（类）选择器：.className{样式}，如：类选择器（.one），选择类名为one的所有元素
id选择器：#idName{样式} 如：id选择器（#box{}），选择id为box的元素
分类选择器：元素选择器.className/idName
分组选择器：多个选择器同用一个样式，如x,y{样式}，选择x、y的所有元素，如：在html中为多个标签元素设置同一个样式时，使用该选择器
派生选择器：找子标签（嵌套在内部的第一层符合条件的标签元素）:选择器>选择器{}，子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素找子孙标签（嵌套在内部的所有符合条件的标签元素）：选择器选择器{}，后代选择器（#box div），选择id为box元素内部所有的div元素相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
伪类选择器：给html中一个标签元素的鼠标滑过的状态来设置样式,如：没有被访问过xx:link{},访问过后xx:visited{样式},悬停时xx:hover{样式},鼠标摁住时xx:active{样式},伪类：xx:foucs{样式}，获取焦点的时候，设置的样式在a标签中使用按顺序来使用，xx:hover{}可以应用在其他标签上

css的特征

继承性：父元素的一些样式会被其子元素去继承，比如字体颜色。
层叠性：一个元素可以有多个样式效果进行叠加。
优先级：浏览器默认样式<标签的默认样式<[外部样式/内部样式/内联样式]内联样式的优先级高于内部样式和外部样式，内部样式和外部样式：谁后写，谁优先id选择器优先级>class选择器>标签选择器。

css的盒子模型

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。

 /* border: 3px solid gray;/*四个方向均有边框*/
		  /* margin：外边距，设置元素之间的间距 */
		  	/* margin：10px;四个方向都是10px */
		  	/* margin: 10px 20px;/*上下，左右*/
		  	*/
		  	/* margin: 5px 10px 20px 30px;/*margin ：上下左右；四个方向分别设置*/
		  	*/ margin-top: 20px;
		  	/*只设置上方向的margin，等同于：margin：20px 0 0 0；*/
		  	/* padding：内边距，设置元素和自己内部的内容之间的间距 */
			
			/* padding: 20px; */
			/* 四个方向都是20px */
			
			/* padding: 20px 40px; */
			/* padding：上下，左右 */
			padding: 5px 10px 15px 20px;
			/* padding：上下左右；四个方向分别设置 */
			/* padding-top: 20px; */
			/* 只设置上方向的padding，等同于：padding：20px 0 0 0； */
			
			/* padding-left,padding-right,padding-bottom */

溢出的解决方式

overflow: hidden;/*溢出的解决方式：隐藏溢出部分*/
overflow: scroll;/*设置出现滚动条，溢出的部分通过滚动条查看*/
overflow: visible;/*溢出部分可见，溢出的默认处理方式*/
overflow: auto;/*继承父元素的溢出处理方式*/

背景图

背景颜色：background-color
背景图片：background-image:url(存放图片的路径);
                       background-repeat: no-repeat/repeat-x/repeat-y/repeat
                       background-size:大小
                       background-position:图片区域
                       background-attachent:背景固定
组合设置：background：颜色背景图片重复方式背景图片top 背景图片left

浮动定位

子元素浮动之后，父元素高度为0，造成溢出现象。解决方案：1.给父元素设置高度，2.使用overflow，隐藏溢出；
内部嵌套的元素浮动之后，包裹元素高度为0，可以给包裹元素设置高度；
内部嵌套的元素浮动之后，包裹高度为0，可以使用overflow：hidden；让包裹元素的高度和内部元素高度匹配；
clear: both;清除浮动的影响;none-不清除，both清除两边浮动元素的影响，left-清除左边的影响，right-清除右边的影响。

position

position定位，top，left，right，bottom设置元素的具体位置。
相对定位：relative。
绝对定位：absolute,参考的是自己的有相对定位的包裹元素，如果直接父元素没有相对定位，那么找父辈的，如果最终没有找到，那么找html（body）为准。
固定定位：fixed。
给元素设置了定位之后，如果被定位的元素的位置相同，则会发生堆叠现象（重合在一起）可以使用z-index，修改显示。z-index: 数据;标签设置z-index之后，数据值越大的显示在越上层（就是能被看见）

js

初识js

javascript 简称js，HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间，<script>标签内部只能写符合js的语法规则的语句。
可以把js相关内容写在单独的.js文件中，然后在html页面上，通过<script src="xx.js"引入js文件中，进行使用。
Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中。
定义变量的关键字：let 或var。
注释：快捷键ctr+?,单行或者代码行末注释：//,多行注释：/* */

js输出数据的方式

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

js的数据类型

声明变量类型：声明新变量时，可以使用关键词 "new" 来声明其类型：如let x=new String。
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。
js中，boolean参与运算的时候，true转为1，false转为0；
string参与运算的时候，做的是字符串的拼接；
       把变量直接用于条件判断的时候，非空为true , 空为false；
       查看变量类型：typeof(变量名)；
       产生随机数，Math.random(),得到[0,1)的随机小数，Math是js的内置对象；
parseInt(),将字符串转换为整数；
isNaN(),js的一个函数，实现判断某个变量是否为数字，NaN-not a number。

JS获取DOM元素的方法

通过ID获取（getElementById）通过id取得HTML元素。
通过name属性（getElementsByName）通过name取得元素，是一个数组。
通过标签名（getElementsByTagName）通过HTML标签取得元素，是一个数组。
通过类名（getElementsByClassName）通过HTML标签取得元素，是一个数组。
获取html的方法（document.documentElement）
获取body的方法（document.body）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）

元素的操作

元素.innerHTML:给标签元素的内部嵌套其他的html内容,浏览器解析为标签的显示方式。
元素.innerText：给标签元素的内部嵌套文本内容，浏览器不解析，直接显示内容。

常用的js事件

对象的属性和方法

字符串

toUpperCase(); // 转大写
toLowerCase(); // 转小写
charAt(); // 找指定位置的字符
indexOf() // 找到就返回索引位置，找不到返回-1
lastIndexOf(); // 从后往前找。
indexOf( , ); // 从指定位置开始找。
substring(,)// 从指定位置开始，找到指定的结束位置
substring()// 从指定位置开始找，找到原字符串的最后。
replace//替换字符串
split() concat() substr（）// 字符串的分割

Number对象

Math.round() //四舍五入
Math.floor()//向下取整
Math.ceil()//向上取整
Math.PI//定义常量

Date

let now =new Date();//获取当前日期
getFullYear()//四位年
getDate()//月中的日期
getMonth()//月
getHours()//小时
setFullYear()//修改日期
getMilliseconds()//当前日期中的毫秒数部分

== 和 ===的区别

== :表示判断内容是否相等。 ===: 被称为全等, 内容和类型都要相等。

数组

js的Array对象：长度可变，数组元素可以使用任意类型。可以通过数组下标的方式操作数组。

创建数组：数组元素可以是任意类型。
push(添加数组末尾元素)，pop（取出数组的末尾元素）--操作数组的末尾。
unshift（添加数组首位元素），shift（取出数组首位元素）--操作数组首位。
数组的从长度可变：arguments。
定义数组的时候，如果数组只有一个参数，并且是整数的number类型，那么这个参数作为数组的长度。如果数组有多个参数，那么这些参数作为数组的元素。
数组的排序：js定义sort函数：默认的排序方式是按字符串进行排序。js定义reverse函数--数组的逆序，降序：先调用sort升序，在用reverse逆序。

数组的函数

join函数:把数组按指定的字符串拼接为一个字符串。
concat 函数：用于给数组连接新的元素，可连接的元素个数不定，原数组不会改变。
slice函数：用于获取数组的子数组，可以指定获取的范围。
reverse函数：数组的反转,原数组变化。
sort函数：升序排序，按字符串升序排序。

js函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。JavaScript 对大小写敏感，关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
在使用 return 语句时，函数会停止执行，并返回指定的值。
在 JavaScript 函数内部声明的变量是局部变量，所以只能在函数内部访问它。所以不同的函数可以使用相同名称的变量。
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。如果变量在函数内没有声明，该变量为全局变量。
js中的arguments对象：方法调用的时候，所有的参数都是保存在arguments对象中的，arguments本质就是数组。
函数内部，可以通过arguments对象，获取参数。

动态时钟

全局函数：setInterval,clearInterval

setInterval(函数,等待时长);//启动定时器：等待xx后，再执行xx函数。
clearInterval(存放启动定时器的变量名)//关闭定时器。

正则表达式

能出现的字符[字符]，\d表示纯数字[0-9],\w匹配字母数字[a-zA-Z0-9].....
出现的字符的个数{n},{n,m}, +等价于{1,},?等价于{0,1},*等价于{0，}
匹配行首^
匹配结尾$
.等价于任意内容
\用于转义，\.表示.本身
（）用于分组
|表示或
i-忽略大小写 g-全局查找

正则表达式的创建

let reg=new RegExp();

正则表达式相关的函数和方法

test函数：测试字符串是否满足正则表达式要求，满足返回true，不满足返回false。
string中提供replace方法：根据正则表达式的匹配规则，找到对应的内容，然后替换为指定的其他内容。
string中提供的match方法:把匹配到的内容获取出来，然后保存为一个数组。
string中提供了search方法：根据正则表达式搜索内容，找到了返回内容所在的索引位置。搜索不到返回-1。

文档对象模型

查询节点
- document.getElementById(id),document.getElementByTagName,document.getElementByClassName,document.getElementByName
- 节点对象，各种节点查询方法
节点名字
- 文档节点：节点名：#document
- 元素和属性节点，节点名字：元素或属性名
- 文本节点，节点名字：#text
节点的类型
- 文档节点，类型：9
- 元素节点，类型：1
- 属性节点，类型：2
- 文本节点，类型：3
获取节点的属性
- getAtrribute(属性名)
设置节点的属性
- setAttribute（"属性","属性的内容"）
删除节点的属性
- removeAttribute("属性")
节点的父节点
- 节点.parentNode
节点的子节点
- childNodes:找到的节点包括元素节点和文本节点
- children：找到子节点，只包含元素节点
- firstChild:第一个孩子，所有孩子中的第一个孩子，可能是文本节点
- firstElementChild：第一个孩子，代表孩子中的第一个元素节点
- lastChild:最后一个孩子，所有孩子中的最后一个，可能是文本节点
- lastElementChild：最后一个孩子，代表孩子中的最后一个元素节点
节点的兄弟节点
- previousSibling:上一个兄弟，可能是文本类型的兄弟
- previousElementSibling，上一个元素节点的兄弟
- nextSibling，下一个兄弟，可能是文本类型的兄弟
- nextElementSibling：下一个元素节点兄弟

节点的操作

创建节点：document.createElement("节点")，得到的是一个节点对象。
把节点添加到dom中
- 父节点.appendChild(创建的节点)，作为父节点的最后一个子节点appendChild（）追加到末尾，insertBefore（）插入到指定的位置。
- 父节点.insertBefore(新节点，参考节点),作为父节点的孩子，插入到指定位置去。
删除节点：节点删除之后，其子节点也被删除。
- 父节点.removeChild(子节点)，根据父节点，删除指定的子节点。
- 节点.remove(),删除节点本身，其子节点也被删除了。
替换节点
- 父节点.repalceChild(新节点，被替换的节点)
克隆节点
- 节点.cloneNode(true)：表示克隆节点及其子节点。
- 节点.cloneNode(false)：表示克隆节点本身，不包含子节点。

BOM和DOM

BOM:浏览器对象模型(browser object model)
DOM:文档对象模型(document object model)
BOM和DOM的关系
- DOM属于BOM。
- BOM:document,screen,history,location,navigator等

sreen-屏幕的宽高，屏幕的可用宽高

screen.Width//宽度
screen.Height//高度
screen.availWidth//可用宽度
screen.availHeight//可用高度

history-浏览器的历史信息先关的内容

history.length//浏览器中记录url的个数
history.forward()--后退一个窗口
history.back()--前进一个窗口
history.go(2)--参数是整数，跳转到指定位置

location--浏览器访问的url地址有关

location.reload()//刷新网页

窗口

confirm,确认框，让用户选择自己的操作
alert()，提示框，弹出一个对话框，显示一段文字信息
prompt，输入框，让用户可以输入一个数据
open,close函数

全局函数

setInterval
setTimeout

事件

事件分为：鼠标事件，键盘事件，状态事件，其他.....
事件对象：event,事件触发的时候会产生一个event对象。
事件的定义方式：
- a.在标签上使用on+事件，调用函数
- b.在js代码中通过函数绑定的方式进行函数的调用：obj.οnclick=function
事件的取消：事件执行的函数返回值是false，事件就取消了。
事件的执行机制：冒泡原理--元素的某个事件被触发了。那么其包裹的同类事件也会被触发。
键盘事件:onkeydown，onkeyup
事件类型 & event对象
           - 鼠标事件，键盘事件，状态改变事件,.....
           - event : 每发生一次事件，就会产生一个event对象。
           - 事件源：触发事件的源头(节点对象)
           - 事件处理机制：冒泡，阻止冒泡

创建对象的三种方式

通过object创建对象：new Object()
通过构造函数，创建自定义对象
采用json格式定义对象
- json常用语服务器端和客户端交互的数据格式
- json格式：{key:value......},key就是字符串，value可以任意数据类型

jquery

jquery就是js的函数库，jquery中封装了常用的函数。2006年发布了第一个版本， js2.0之后不再兼容ie6,7这种低版本。类似于jquery的框架：zepto.js

jquery对象

jquery对象: 可以调用jquery中封装的函数，js对象：按原生js进行操作。

js 对应的 jquery函数
找到元素 $(选择器)
- 可以支持任意css的选择器。
- $("#d1") // id选择器
- $(".impt") // class选择器
- $("h1") // 标签选择器
- $("p.impt").css("background","green"); // 分类选择器
- $("h1,p").css("color","red") // 分组选择器
- console.log($("*").length); // 页面上所有的元素
- $("#box>li").css("border","3px solid blue") // 找所有的孩子
- $("#box li").css("color","yellow") // 找所有子孙
- $("#box+h4").css("color","pink") // 符合条件的，离自己最近的弟弟
- $("#box~h4").css("color","gray") //符合条件的自己的弟弟们
- 功能
  - jquery的方法：无参表示获取，有参表示设置
  - text() ,无参表示获取，有参表示设置
  - html() , 无参表示获取，有参表示设置
  - css(样式名) , css(样式名，样式值)
  - attr(属性名),attr(属性名，属性值)
display:none - hide()
display:block. - show()
innerHTML - html()
innerText - text()
onclick - click()
style.xx - css()

$(this): 对象类型的转换. jquery的函数只能通过jquery对象调用，$(this)的目的就是把js对象this，转换为jquery对象。只有jquery对象才能调用jquery中封装好的方法。jquery对象和js对象的转换： $(js对象) -- 转换了jquery对象。 $("span").get(0) , 获取到的是js对象。

eq是jquery提供的获取元素的方法，结果是一个jquery对象。

导入js文件的script标签的内部，不能嵌套其他的js代码，如果嵌套了其他内容，导入的js文件无效。<script src="../js/jquery.js"></script>

选择器

jquery通过选择器函数，得到是一个数组

jquery的选择器函数 $(selecter)
jquery的选择器函数 $(selecter)中的选择器支持任意css的选择器。
基本选择器（id ,class , tag），层次选择器(子，子孙, 弟弟)，
过滤选择器（:lt ,:odd(奇数), :even(偶数)），表单选择器(:text)

jquery函数

函数的参数是函数： setInterval(funcion , time);
回调(callback)函数：某个函数执行完成之后，再执行的其他函数，被称为回调函数。
- 语法规则：
                 function xx (yy){
                     // 先执行xx需要执行的代码，这部分执行完之后，
                     然后判断yy是否存在，存在就调用yy函数
                     if(yy){
                         yy()
                     }
                 }

事件

jquery提供了bind(绑定)函数，用于给对象绑定一个事件。
- blur失去焦点， -- focus 获取焦点
- bind(事件名称,事件触发执行的函数)

解除绑定

$(selector).unbind(event,function):解除绑定

阻止默认的事件
- $(e.target).hide(); --- js对象转换为jquery对象，然后可以调用jquery的方法
- event.preventDefault() //阻止默认行为 ( 表单提交 )
阻止冒泡事件
- event.stopPropagation(); // 阻止事件冒泡

学习心得

通过这段时间的学习，我最大的感触就是眼看着会，一动手就废，老师讲解的知识点能听明白，但是动手实操的时候就没有感觉了，不知道从何下手，不知道怎样将学过的知识结合起来运用到实际问题中去，还有就是容易忘记知识点，学了后面的忘了前面的，出现这些问题的原因可能就是自己对知识点的理解不够深刻，平时动手少，分析问题的逻辑能力比较弱，在今后的学习中，我会尽力去克服这些困难，争取在之后的日子里对这些知识的应用能够逐渐明朗。