html&css&js&Jquery

Javaweb

* JavaWeb:
	* 使用Java语言开发基于互联网的项目

* 软件架构:
	1. C/S: Client/Server 客户端/服务器端
		* 在用户本地有一个客户端程序,在远程有一个服务器端程序
		* 如:QQ,迅雷...
		* 优点:
			1. 用户体验好
		* 缺点:
			1. 开发、安装,部署,维护 麻烦
	2. B/S: Browser/Server 浏览器/服务器端
		* 只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序
		* 优点:
			1. 开发、安装,部署,维护 简单
		* 缺点:
			1. 如果应用过大,用户的体验可能会受到影响
			2. 对硬件要求过高

* B/S架构详解
	* 资源分类:
		1. 静态资源:
			* 使用静态网页开发技术发布的资源。
			* 特点:
				* 所有用户访问,得到的结果是一样的。
				* 如:文本,图片,音频、视频, HTML,CSS,JavaScript
				* 如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎,可以展示静态资源
		2. 动态资源:
			* 使用动态网页及时发布的资源。
			* 特点:
				* 所有用户访问,得到的结果可能不一样。
				* 如:jsp/servlet,php,asp...
				* 如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器
         * 静态资源:
					* HTML:用于搭建基础网页,展示页面的内容
		            * CSS:用于美化页面,布局页面
					* JavaScript:控制页面的元素,让页面有一些动态的效果

HTML

1. 概念:是最基础的网页开发语言
	* Hyper Text Markup Language 超文本标记语言
		* 超文本:
			* 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本.
		* 标记语言:
			* 由标签构成的语言。<标签名称> 如 html,xml
			* 标记语言不是编程语言

2. 快速入门:
	* 语法:
		1. html文档后缀名 .html 或者 .htm
		2. 标签分为
			1. 围堵标签:有开始标签和结束标签。如 <html> </html>
			2. 自闭和标签:开始标签和结束标签在一起。如 <br/>

		3. 标签可以嵌套:
			需要正确嵌套,不能你中有我,我中有你
			错误:<a><b></a></b>
			正确:<a><b></b></a>

		4. 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来
		5. html的标签不区分大小写,但是建议使用小写。

	* 代码:
		<html>
		
			<head>
				<title>title</title>
			</head>
			
			<body>
				<FONT color='red'>Hello World</font><br/>
				
				<font color='green'>Hello World</font>
			
			</body>
	
		</html>

3. 标签学习:
	1. 文件标签:构成html最基本的标签
		* html:html文档的根标签
		* head:头标签。用于指定html文档的一些属性。引入外部的资源
		* title:标题标签。
		* body:体标签
		* <!DOCTYPE html>:html5中定义该文档是html文档
	2. 文本标签:和文本有关的标签
		* 注释:<!-- 注释内容 -->
		* <h1> to <h6>:标题标签
			* h1~h6:字体大小逐渐递减
		* <p>:段落标签
		* <br>:换行标签
		* <hr>:展示一条水平线
			* 属性:
				* color:颜色
				* width:宽度
				* size:高度
				* align:对其方式
					* center:居中
					* left:左对齐
					* right:右对齐
		* <b>:字体加粗
		* <i>:字体斜体
		* <font>:字体标签
		* <center>:文本居中
			* 属性:
				* color:颜色
				* size:大小
				* face:字体

		* 属性定义:
			* color:
				1. 英文单词:red,green,blue
				2. rgb(值1,值2,值3):值的范围:0~255  如  rgb(0,0,255)
				3. #值1值2值3:值的范围:00~FF之间。如: #FF00FF
			* width:
				1. 数值:width='20' ,数值的单位,默认是 px(像素)
				2. 数值%:占比相对于父元素的比例

	

	3. 图片标签:
		* img:展示图片
			* 属性:
				* src:指定图片的位置

		* 代码:
			 <!--展示一张图片 img-->

		    <img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
		
		    <!--
		        相对路径
		            * 以.开头的路径
		                * ./:代表当前目录  ./image/1.jpg
		                * ../:代表上一级目录
		     -->
		
		    <img src="./image/jiangwai_1.jpg">
		
		    <img src="../image/jiangwai_1.jpg">
	4. 列表标签:
		* 有序列表:
			* ol:
			* li:
		* 无序列表:
			* ul:
			* li:
	5. 链接标签:
		* a:定义一个超链接
			* 属性:
				* href:指定访问资源的URL(统一资源定位符)
				* target:指定打开资源的方式
					* _self:默认值,在当前页面打开
					* _blank:在空白页面打开
		    
	6. div和span:
		* div:每一个div占满一整行。块级标签
    	* span:文本信息在一行展示,行内标签 内联标签

	7. 语义化标签:html5中为了提高程序的可读性,提供了一些标签。
		1. <header>:页眉
		2. <footer>:页脚
	8. 表格标签:
		* table:定义表格
			* width:宽度
			* border:边框
			* cellpadding:定义内容和单元格的距离
			* cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、
			* bgcolor:背景色
			* align:对齐方式
		* tr:定义行
			* bgcolor:背景色
			* align:对齐方式
		* td:定义单元格
			* colspan:合并列
			* rowspan:合并行
		* th:定义表头单元格
		* <caption>:表格标题
		* <thead>:表示表格的头部分
		* <tbody>:表示表格的体部分
		* <tfoot>:表示表格的脚部分	

表单标签

* 表单:
	* 概念:用于采集用户输入的数据的。用于和服务器进行交互。
	* form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围
        * 属性:
            * action:指定提交数据的URL
            * method:指定提交方式
                * 分类:一共7种,2种比较常用
                   * get:
                        1. 请求参数会在地址栏中显示。会封装到请求行中。
                        2. 请求参数大小是有限制的。
                        3. 不太安全。
                   * post:
                        2. 请求参数不会再地址栏中显示。会封装在请求体中
                        2. 请求参数的大小没有限制。
                        3. 较为安全。

        * 表单项中的数据要想被提交:必须指定其name属性
       
        * 表单项标签:
			* input:可以通过type属性值,改变元素展示的样式
				* type属性:
					* text:文本输入框,默认值
						* placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息	
					* password:密码输入框
					* radio:单选框
						* 注意:
							1. 要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样。
							2. 一般会给每一个单选框提供value属性,指定其被选中后提交的值
							3. checked属性,可以指定默认值
					* checkbox:复选框
						* 注意:
							1. 一般会给每一个单选框提供value属性,指定其被选中后提交的值
							2. checked属性,可以指定默认值
              	 	 * file:文件选择框
					 * hidden:隐藏域,用于提交一些信息。
			 * 按钮:
					* submit:提交按钮。可以提交表单
					* button:普通按钮
					* image:图片提交按钮
						* src属性指定图片的路径	

		   * label:指定输入项的文字描述信息
			   * 注意:
				   * label的for属性一般会和 input 的 id属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点。
		   * select: 下拉列表
			* 子元素:option,指定列表项
			
		  * textarea:文本域
			* cols:指定列数,每一行有多少个字符
			* rows:默认多少行。

CSS:页面美化和布局控制

1. 概念: Cascading Style Sheets 层叠样式表
	* 层叠:多个样式可以作用在同一个html的元素上,同时生效

2. 好处:
	1. 功能强大
	2. 将内容展示和样式控制分离
		* 降低耦合度。解耦
		* 让分工协作更容易
		* 提高开发效率
3. CSS的使用:CSS与html结合方式
	1. 内联样式
		 * 在标签内使用style属性指定css代码
		 * 如:<div style="color:red;">hello css</div>
	2. 内部样式
		* 在head标签内,定义style标签,style标签的标签体内容就是css代码
		* 如:
			<style>
		        div{
		            color:blue;
		        }
		
		    </style>
			<div>hello css</div>
	3. 外部样式
		1. 定义css资源文件。
		2. 在head标签内,定义link标签,引入外部的资源文件
		* 如:
    		* a.css文件:
				div{
				    color:green;
				}
			<link rel="stylesheet" href="css/a.css">
			<div>hello css</div>
			<div>hello css</div>

	* 注意:
		* 1,2,3种方式 css作用范围越来越大
		* 1方式不常用,后期常用2,3
		* 3种格式可以写为:
			<style>
		        @import "css/a.css";
		    </style>

4. css语法:
	* 格式:
		选择器 {
			属性名1:属性值1;
			属性名2:属性值2;
			...
		}
	* 选择器:筛选具有相似特征的元素
	* 注意:
		* 每一对属性需要使用;隔开,最后一对属性可以不加;
5. 选择器:筛选具有相似特征的元素
	* 分类:
		1. 基础选择器
			1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一
		        * 语法:#id属性值{}
		    2. 元素选择器:选择具有相同标签名称的元素
		        * 语法: 标签名称{}
		        * 注意:id选择器优先级高于元素选择器
		    3. 类选择器:选择具有相同的class属性值的元素。
		        * 语法:.class属性值{}
		        * 注意:类选择器选择器优先级高于元素选择器
		2. 扩展选择器:
			1. 选择所有元素:
				* 语法: *{}
			2. 并集选择器:
				* 选择器1,选择器2{}
			
			3. 子选择器:筛选选择器1元素下的选择器2元素
				* 语法:  选择器1 选择器2{}
			4. 父选择器:筛选选择器2的父元素选择器1
				* 语法:  选择器1 > 选择器2{}

			5. 属性选择器:选择元素名称,属性名=属性值的元素
				* 语法:  元素名称[属性名="属性值"]{}

			6. 伪类选择器:选择一些元素具有的状态
				* 语法: 元素:状态{}
				* 如: <a>
					* 状态:
						* link:初始化的状态
						* visited:被访问过的状态
						* active:正在访问状态
						* hover:鼠标悬浮状态
6. 属性
	1. 字体、文本
		* font-size:字体大小
		* color:文本颜色
		* text-align:对其方式
		* line-height:行高 
	2. 背景
		* background:
	3. 边框
		* border:设置边框,符合属性
	4. 尺寸
		* width:宽度
		* height:高度
	5. 盒子模型:控制布局
		* margin:外边距
		* padding:内边距
			* 默认情况下内边距会影响整个盒子的大小
			* box-sizing: border-box;  设置盒子的属性,让width和height就是最终盒子的大小

		* float:浮动
			* left
			* right

JavaScript

* 概念:	一门客户端脚本语言
	* 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
	* 脚本语言:不需要编译,直接就可以被浏览器解析执行了

* 功能:
	* 可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验。

* JavaScript发展史:
	1. 1992年,Nombase公司,开发出第一门客户端脚本语言,专门用于表单的校验。命名为 : C--	,后来更名为:ScriptEase
	2. 1995年,Netscape(网景)公司,开发了一门客户端脚本语言:LiveScript。后来,请来SUN公司的专家,修改LiveScript,命名为JavaScript
	3. 1996年,微软抄袭JavaScript开发出JScript语言
	4. 1997年,ECMA(欧洲计算机制造商协会),制定出客户端脚本语言的标准:ECMAScript,就是统一了所有客户端脚本语言的编码方式。

	* JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

* ECMAScript:客户端脚本语言的标准
	1. 基本语法:
		1. 与html结合方式
			1. 内部JS* 定义<script>,标签体内容就是js代码
			2. 外部JS* 定义<script>,通过src属性引入外部的js文件

			* 注意:
				1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
				2. <script>可以定义多个。
		2. 注释
			1. 单行注释://注释内容
			2. 多行注释:/*注释内容*/
		3. 数据类型:
			1. 原始数据类型(基本数据类型)1. number:数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
				2. string:字符串。 字符串  "abc" "a" 'abc'
				3. boolean: truefalse
				4. null:一个对象为空的占位符
				5. undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefined
				
			2. 引用数据类型:对象
			
		4. 变量
			* 变量:一小块存储数据的内存空间
			* Java语言是强类型语言,而JavaScript是弱类型语言。
				* 强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
				* 弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。
			* 语法:
				* var 变量名 = 初始化值;
			
			* typeof运算符:获取变量的类型。
				* 注:null运算后得到的是object
		5. 运算符
			1. 一元运算符:只有一个运算数的运算符
				++--+(正号)  
				* ++ --: 自增(自减)
					* ++(--) 在前,先自增(自减),再运算
					* ++(--) 在后,先运算,再自增(自减)
				* +(-):正负号
			    * 注意:在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换
                    * 其他类型转number:
                        * string转number:按照字面值转换。如果字面值不是数字,则转为NaN(不是数字的数字)
                        * boolean转number:true转为1false转为0
			2. 算数运算符
				+ - * / % ...

			3. 赋值运算符
				= += -+....

			4. 比较运算符
				> < >= <= == ===(全等于)
				* 比较方式
                  1. 类型相同:直接比较
                      * 字符串:按照字典顺序比较。按位逐一比较,直到得出大小为止。
                  2. 类型不同:先进行类型转换,再比较
                      * ===:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false
			5. 逻辑运算符
				&& || !
				* 其他类型转boolean:
                   1. number:0NaN为假,其他为真
                   2. string:除了空字符串(""),其他都是true
                   3. null&undefined:都是false
                   4. 对象:所有对象都为true
			
			6. 三元运算符
				? : 表达式
				var a = 3;
		        var b = 4;
		
		        var c = a > b ? 1:0;
				* 语法:
					* 表达式?1:2;
					* 判断表达式的值,如果是true则取值1,如果是false则取值26. 流程控制语句:
			1. if...else...
			2. switch:
				* 在java中,switch语句可以接受的数据类型: byte int shor char,枚举(1.5) ,String(1.7)
					* switch(变量):
						case:
				*JS,switch语句可以接受任意的原始数据类型
			3. while
			4. do...while
			5. for
		7. JS特殊语法:
			1. 语句以;结尾,如果一行只有一条语句则 ;可以省略 (不建议)
			2. 变量的定义使用var关键字,也可以不使用
        		* 用: 定义的变量是局部变量
                * 不用:定义的变量是全局变量(不建议)


	2. 基本对象:
		1. Function:函数(方法)对象
            1. 创建:
                1. var fun = new Function(形式参数列表,方法体);  //忘掉吧
                2. 
                    function 方法名称(形式参数列表){
                        方法体
                    }

                3. 
                   var 方法名 = function(形式参数列表){
                        方法体
                   }
            2. 方法:

            3. 属性:
                length:代表形参的个数
            4. 特点:
                1. 方法定义是,形参的类型不用写,返回值类型也不写。
                2. 方法是一个对象,如果定义名称相同的方法,会覆盖
                3. 在JS中,方法的调用只与方法的名称有关,和参数列表无关
                4. 在方法声明中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数
            5. 调用:
                方法名称(实际参数列表);
		
		2. Array:数组对象
            1. 创建:
                1. var arr = new Array(元素列表);
                2. var arr = new Array(默认长度);
                3. var arr = [元素列表];
            2. 方法
                join(参数):将数组中的元素按照指定的分隔符拼接为字符串
                push()	向数组的末尾添加一个或更多元素,并返回新的长度。
            3. 属性
                length:数组的长度
            4. 特点:
                1. JS中,数组元素的类型可变的。
                2. JS中,数组长度可变的。
		3. Boolean
		4. Date:日期对象
            1. 创建:
                var date = new Date();

            2. 方法:
                toLocaleString():返回当前date对象对应的时间本地字符串格式
                getTime():获取毫秒值。返回当前如期对象描述的时间到197011日零点的毫秒值差
		5. Math:数学对象
            1. 创建:
                * 特点:Math对象不用创建,直接使用。  Math.方法名();

            2. 方法:
                random():返回 0 ~ 1 之间的随机数。 含0不含1
                ceil(x):对数进行上舍入。
                floor(x):对数进行下舍入。
                round(x):把数四舍五入为最接近的整数。
            3. 属性:
                PI
		6. Number
		7. String
		8. RegExp:正则表达式对象
			1. 正则表达式:定义字符串的组成规则。
				1. 单个字符:[]
					如: [a] [ab] [a-zA-Z0-9_]
					* 特殊符号代表特殊含义的单个字符:
						\d:单个数字字符 [0-9]
						\w:单个单词字符[a-zA-Z0-9_]
				2. 量词符号:
					?:表示出现0次或1*:表示出现0次或多次
					+:出现1次或多次
					{m,n}:表示 m<= 数量 <= n
						* m如果缺省: {,n}:最多n次
						* n如果缺省:{m,} 最少m次
				3. 开始结束符号
					* ^:开始
					* $:结束
			2. 正则对象:
				1. 创建
					1. var reg = new RegExp("正则表达式");
					2. var reg = /正则表达式/;
				2. 方法	
					1. test(参数):验证指定的字符串是否符合正则定义的规范	
		9. Global
			1. 特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。  方法名();
			2. 方法:
			    encodeURI():url编码
			    decodeURI():url解码

			    encodeURIComponent():url编码,编码的字符更多
			    decodeURIComponent():url解码

			    parseInt():将字符串转为数字
			        * 逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number
			    isNaN():判断一个值是否是NaN
			        * NaN六亲不认,连自己都不认。NaN参与的==比较全部问false

			    eval():讲 JavaScript 字符串,并把它作为脚本代码来执行。
            3. URL编码
                  龙胖不下锅= %E9%BE%99%E8%83%96%E4%B8%8D%E4%B8%8B%E9%94%85

BOM(浏览器对象模型):

  1. 什么是BOM

    BOM是browser object model的缩写,简称浏览器对象模型
    BOM提供了独立于内容而与浏览器窗口进行交互的对象
    由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window
    BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性
    BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C
    BOM最初是Netscape浏览器标准的一部分
    

window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象
由于window是顶层对象,因此调用它的子对象时可以不显示的指明window对象。

BOM和DOM什么区别?

这是浏览器运行时中的两个不同的概念。

BOM 浏览器对象模型

提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口,可以对浏览器窗口进行访问和操作,譬如可以弹出新的窗口,改变状态栏中的文本,对Cookie的支持,IE还扩展了BOM,加入了ActiveXObject类,可以通过js脚本实例化ActiveX对象等等)

DOM 文档对象模型

DOM是针对XML的基于树的API。描述了处理网页内容的方法和接口,是HTML和XML的API,DOM把整个页面规划成由节点层级构成的文档。

DOM本身是与语言无关的API,它并不与Java,JavaScript或其他语言绑定。

特定语言的DOM

针对XHTML和HTML的DOM。这个DOM定义了一个HTMLDocument和HTMLElement做为这种实现的基础。

1. 概念:Browser Object Model 浏览器对象模型
	* 将浏览器的各个组成部分封装成对象。

2. 组成:
	* Window:窗口对象
	* Navigator:浏览器对象
	* Screen:显示器屏幕对象
	* History:历史记录对象
	* Location:地址栏对象

3. Window:窗口对象
    1. 创建
    2. 方法
         1. 与弹出框有关的方法:
            alert()	显示带有一段消息和一个确认按钮的警告框。
            confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
                * 如果用户点击确定按钮,则方法返回true
                * 如果用户点击取消按钮,则方法返回false
            prompt()	显示可提示用户输入的对话框。
                * 返回值:获取用户输入的值
         2. 与打开关闭有关的方法:
            close()	关闭浏览器窗口。
                * 谁调用我 ,我关谁
            open()	打开一个新的浏览器窗口
                * 返回新的Window对象
         3. 与定时器有关的方式
            setTimeout()	在指定的毫秒数后调用函数或计算表达式。
                * 参数:
                    1. js代码或者方法对象
                    2. 毫秒值
                * 返回值:唯一标识,用于取消定时器
            clearTimeout()	取消由 setTimeout() 方法设置的 timeout。

            setInterval()	按照指定的周期(以毫秒计)来调用函数或计算表达式。
            clearInterval()	取消由 setInterval() 设置的 timeout。

    3. 属性:
        1. 获取其他BOM对象:
            history
            location
            Navigator
            Screen:
        2. 获取DOM对象
            document
    4. 特点
        * Window对象不需要创建可以直接使用 window使用。 window.方法名();
        * window引用可以省略。  方法名();
4. Location:地址栏对象
	1. 创建(获取)1. window.location
		2. location

	2. 方法:
		* reload()	重新加载当前文档。刷新
	3. 属性
		* href	设置或返回完整的 URL
5. History:历史记录对象
    1. 创建(获取)1. window.history
        2. history

    2. 方法:
        * back()	加载 history 列表中的前一个 URL* forward()	加载 history 列表中的下一个 URL* go(参数)	加载 history 列表中的某个具体页面。
            * 参数:
                * 正数:前进几个历史记录
                * 负数:后退几个历史记录
    3. 属性:
        * length	返回当前窗口历史列表中的 URL 数量。

DOM(文档对象模型)

HTML DOM 树

https://www.w3school.com.cn/i/ct_htmltree.gif

* 概念: Document Object Model 文档对象模型
	* 将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作

* W3C DOM 标准被分为 3 个不同的部分:

	* 核心 DOM - 针对任何结构化文档的标准模型
		* Document:文档对象
		* Element:元素对象
		* Attribute:属性对象
		* Text:文本对象
		* Comment:注释对象

		* Node:节点对象,其他5个的父对象
	* XML DOM - 针对 XML 文档的标准模型
	* HTML DOM - 针对 HTML 文档的标准模型
* 核心DOM模型:
	* Document:文档对象
		1. 创建(获取):在html dom模型中可以使用window对象来获取
			1. window.document
			2. document
		2. 方法:
			1. 获取Element对象:
				1. getElementById()	: 根据id属性值获取元素对象。id属性值一般唯一
				2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
				3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
				4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
			2. 创建其他DOM对象:
				createAttribute(name)
            	createComment()
            	createElement()
            	createTextNode()
		3. 属性
	* Element:元素对象
		1. 获取/创建:通过document来获取和创建
		2. 方法:
			1. removeAttribute():删除属性
			2. setAttribute():设置属性
	* Node:节点对象,其他5个的父对象
		* 特点:所有dom对象都可以被认为是一个节点
		* 方法:
			* CRUD dom树:
				* appendChild():向节点的子节点列表的结尾添加新的子节点。
				* removeChild()	:删除(并返回)当前节点的指定子节点。
				* replaceChild():用新节点替换一个子节点。
		* 属性:
			* parentNode 返回节点的父节点。
* HTML DOM
	1. 标签体的设置和获取:innerHTML
	2. 使用html元素对象的属性
	3. 控制元素样式
		1. 使用元素的style属性来设置
			如:
				 //修改样式方式1
		        div1.style.border = "1px solid red";
		        div1.style.width = "200px";
		        //font-size--> fontSize
		        div1.style.fontSize = "20px";
		2. 提前定义好类选择器的样式,通过元素的className属性来设置其class属性值。

事件监听机制:

* 概念:某些组件被执行了某些操作后,触发某些代码的执行。	
	* 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
	* 事件源:组件。如: 按钮 文本输入框...
	* 监听器:代码。
	* 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。
* 常见的事件:
	1. 点击事件:
		1. onclick:单击事件
		2. ondblclick:双击事件
	2. 焦点事件
		1. onblur:失去焦点
		2. onfocus:元素获得焦点。

	3. 加载事件:
		1. onload:一张页面或一幅图像完成加载。

	4. 鼠标事件:
		1. onmousedown	鼠标按钮被按下。
		2. onmouseup	鼠标按键被松开。
		3. onmousemove	鼠标被移动。
		4. onmouseover	鼠标移到某元素之上。
		5. onmouseout	鼠标从某元素移开。

	5. 键盘事件:
		1. onkeydown	某个键盘按键被按下。	
		2. onkeyup		某个键盘按键被松开。
		3. onkeypress	某个键盘按键被按下并松开。

	6. 选择和改变
		1. onchange	域的内容被改变。
		2. onselect	文本被选中。

	7. 表单事件:
		1. onsubmit	确认按钮被点击。
		2. onreset	重置按钮被点击。	

JQuery

1. 概念: 一个JavaScript框架。简化JS开发
	* jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨	是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优	化HTML文档操作、事件处理、动画设计和Ajax交互。

	* JavaScript框架:本质上就是一些js文件,封装了js的原生代码而已
2. 使用
	1. 步骤:
		1. 下载JQuery
			* 目前jQuery有三个大版本:
				1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,
					 功能不再新增。因此一般项目来说,使用1.x版本就可以了,
					 最终版本:1.12.4 (2016520)
				2.x:不兼容ie678,很少有人使用,官方只做BUG维护,
					 功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,
					 最终版本:2.2.4 (2016520)
				3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,
					 一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。
					 目前该版本是官方主要更新维护的版本。最新版本:3.2.12017320日)
			* jquery-xxx.js 与 jquery-xxx.min.js区别:
				1. jquery-xxx.js:开发版本。给程序员看的,有良好的缩进和注释。体积大一些
				2. jquery-xxx.min.js:生产版本。程序中使用,没有缩进。体积小一些。程序加载更快

		2. 导入JQuery的js文件:导入min.js文件
		3. 使用
			var div1 = $("#div1");
            alert(div1.html());		
3. JQuery对象和JS对象区别与转换
	1. JQuery对象在操作时,更加方便。
    2. JQuery对象和js对象方法不通用的.
    3. 两者相互转换
        * jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
        * js -- > jq : $(js对象)
4. 选择器:筛选具有相似特征的元素(标签)

	1. 基本操作学习:
		1. 事件绑定
			//1.获取b1按钮
            $("#b1").click(function(){
                alert("abc");
            });
		2. 入口函数
			 $(function () {
	           
   			 });
			 window.onload  和 $(function) 区别
                 * window.onload 只能定义一次,如果定义多次,后边的会将前边的覆盖掉
                 * $(function)可以定义多次的。
		3. 样式控制:css方法
			 // $("#div1").css("background-color","red");
      		$("#div1").css("backgroundColor","pink");
	2. 分类
		1. 基本选择器
			1. 标签选择器(元素选择器)
				* 语法: $("html标签名") 获得所有匹配标签名称的元素
			2. id选择器 
				* 语法: $("#id的属性值") 获得与指定id属性值匹配的元素
			3. 类选择器
				* 语法: $(".class的属性值") 获得与指定的class属性值匹配的元素
			4. 并集选择器:
				* 语法: $("选择器1,选择器2....") 获取多个选择器选中的所有元素
		2. 层级选择器
			1. 后代选择器
				* 语法: $("A B ") 选择A元素内部的所有B元素		
			2. 子选择器
				* 语法: $("A > B") 选择A元素内部的所有B子元素
		3. 属性选择器
			1. 属性名称选择器 
				* 语法: $("A[属性名]") 包含指定属性的选择器
			2. 属性选择器
				* 语法: $("A[属性名='值']") 包含指定属性等于指定值的选择器
			3. 复合属性选择器
				* 语法: $("A[属性名='值'][]...") 包含多个属性条件的选择器
		4. 过滤选择器
			1. 首元素选择器 
				* 语法: :first 获得选择的元素中的第一个元素
			2. 尾元素选择器 
				* 语法: :last 获得选择的元素中的最后一个元素
			3. 非元素选择器
				* 语法: :not(selector) 不包括指定内容的元素
			4. 偶数选择器
				* 语法: :even 偶数,从 0 开始计数
			5. 奇数选择器
				* 语法: :odd 奇数,从 0 开始计数
			6. 等于索引选择器
				* 语法: :eq(index) 指定索引元素
			7. 大于索引选择器 
				* 语法: :gt(index) 大于指定索引元素
			8. 小于索引选择器 
				* 语法: :lt(index) 小于指定索引元素
			9. 标题选择器
				* 语法: :header 获得标题(h1~h6)元素,固定写法
		5. 表单过滤选择器
			1. 可用元素选择器 
				* 语法: :enabled 获得可用元素
			2. 不可用元素选择器 
				* 语法: :disabled 获得不可用元素
			3. 选中选择器 
				* 语法: :checked 获得单选/复选框选中的元素
			4. 选中选择器 
				* 语法: :selected 获得下拉框选中的元素

5. DOM操作
	1. 内容操作
		1. html(): 获取/设置元素的标签体内容   <a><font>内容</font></a>  --> <font>内容</font>
		2. text(): 获取/设置元素的标签体纯文本内容   <a><font>内容</font></a> --> 内容
		3. val(): 获取/设置元素的value属性值
	2. 属性操作
		1. 通用属性操作
			1. attr(): 获取/设置元素的属性
			2. removeAttr():删除属性
			3. prop():获取/设置元素的属性
			4. removeProp():删除属性

			* attr和prop区别?
				1. 如果操作的是元素的固有属性,则建议使用prop
				2. 如果操作的是元素自定义的属性,则建议使用attr
		2.class属性操作
			1. addClass():添加class属性值
			2. removeClass():删除class属性值
			3. toggleClass():切换class属性
				* toggleClass("one"): 
					* 判断如果元素对象上存在class="one",则将属性值one删除掉。  如果元素对象上不存在class="one",则添加
			4. css():
	3. CRUD操作:
		1. append():父元素将子元素追加到末尾
			* 对象1.append(对象2): 将对象2添加到对象1元素内部,并且在末尾
		2. prepend():父元素将子元素追加到开头
			* 对象1.prepend(对象2):将对象2添加到对象1元素内部,并且在开头
		3. appendTo():
			* 对象1.appendTo(对象2):将对象1添加到对象2内部,并且在末尾
		4. prependTo()* 对象1.prependTo(对象2):将对象1添加到对象2内部,并且在开头
		5. after():添加元素到元素后边
			* 对象1.after(对象2): 将对象2添加到对象1后边。对象1和对象2是兄弟关系
		6. before():添加元素到元素前边
			* 对象1.before(对象2): 将对象2添加到对象1前边。对象1和对象2是兄弟关系
		7. insertAfter()
			* 对象1.insertAfter(对象2):将对象2添加到对象1后边。对象1和对象2是兄弟关系
		8. insertBefore()
			* 对象1.insertBefore(对象2): 将对象2添加到对象1前边。对象1和对象2是兄弟关系

		9. remove():移除元素
			* 对象.remove():将对象删除掉
		10. empty():清空元素的所有后代元素。
			* 对象.empty():将对象的后代元素全部清空,但是保留当前对象以及其属性节点		

高级应用

1. 动画
	1. 三种方式显示和隐藏元素
		1. 默认显示和隐藏方式
			1. show([speed,[easing],[fn]])
				1. 参数:
					1. speed:动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如:1000)
					2. easing:用来指定切换效果,默认是"swing",可用参数"linear"
						* swing:动画执行时效果是 先慢,中间快,最后又慢
						* linear:动画执行时速度是匀速的
					3. fn:在动画完成时执行的函数,每个元素执行一次。

			2. hide([speed,[easing],[fn]])
			3. toggle([speed],[easing],[fn])
		
		2. 滑动显示和隐藏方式
			1. slideDown([speed],[easing],[fn])
			2. slideUp([speed,[easing],[fn]])
			3. slideToggle([speed],[easing],[fn])

		3. 淡入淡出显示和隐藏方式
			1. fadeIn([speed],[easing],[fn])
			2. fadeOut([speed],[easing],[fn])
			3. fadeToggle([speed,[easing],[fn]])
2. 遍历
	1. js的遍历方式
		* for(初始化值;循环结束条件;步长)
	2. jq的遍历方式
		1. jq对象.each(callback)
			1. 语法:
				jquery对象.each(function(index,element){});
					* index:就是元素在集合中的索引
					* element:就是集合中的每一个元素对象

					* this:集合中的每一个元素对象
			2. 回调函数返回值:
				* true:如果当前function返回为false,则结束循环(break)* false:如果当前function返回为true,则结束本次循环,继续下次循环(continue)
		2. $.each(object, [callback])
		3. for..of: jquery 3.0 版本之后提供的方式
			for(元素对象 of 容器对象)
	
3. 事件绑定
	1. jquery标准的绑定方式
		* jq对象.事件方法(回调函数)* 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。
			* 表单对象.submit();//让表单提交
	2. on绑定事件/off解除绑定
		* jq对象.on("事件名称",回调函数)
		* jq对象.off("事件名称")
			* 如果off方法不传递任何参数,则将组件上的所有事件全部解绑
	3. 事件切换:toggle
		* jq对象.toggle(fn1,fn2...)
			* 当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2.....
			
		* 注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。
			 <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
4. 插件:增强JQuery的功能
		1. 实现方式:
			1. $.fn.extend(object) 
				* 增强通过Jquery获取的对象的功能  $("#id")
			2. $.extend(object)
				* 增强JQeury对象自身的功能  $/jQuery

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-jQuery对象进行方法扩展</title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
       //使用jquery插件 给jq对象添加2个方法 check()选中所有复选框,uncheck()取消选中所有复选框
        
        
        //1.定义jqeury的对象插件
        $.fn.extend({
            //定义了一个check()方法。所有的jq对象都可以调用该方法
            check:function () {
               //让复选框选中

                //this:调用该方法的jq对象
                this.prop("checked",true);
            },
            uncheck:function () {
                //让复选框不选中

                this.prop("checked",false);
            }
            
        });

        $(function () {
           // 获取按钮
            //$("#btn-check").check();
            //复选框对象.check();

            $("#btn-check").click(function () {
                //获取复选框对象
                $("input[type='checkbox']").check();

            });

            $("#btn-uncheck").click(function () {
                //获取复选框对象
                $("input[type='checkbox']").uncheck();

            });
        });


    </script>
</head>
<body>
<input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
<input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">篮球
<input type="checkbox" value="volleyball">排球

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-jQuery对象进行方法扩展</title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //对全局方法扩展2个方法,扩展min方法:求2个值的最小值;扩展max方法:求2个值最大值
        
        $.extend({
            max:function (a,b) {
                //返回两数中的较大值
                return a >= b ? a:b;
            },
            min:function (a,b) {
                //返回两数中的较小值
                return a <= b ? a:b;
            }
            
            
        });

        //调用全局方法
        var max = $.max(4,3);
        //alert(max);

        var min = $.min(1,2);
        alert(min);
    </script>
</head>
<body>
</body>
</html>


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值