htmlcssjsJquery
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 或者 .htm2. 标签分为1. 围堵标签：有开始标签和结束标签。如 <html> html>2. 自闭和标签：开始标签和结束标签在一起。如 <br/>3. 标签可以嵌套：需要正确嵌套，不能你中有我，我中有你错误：<a><b>a>b>正确：<a><b>b>a>4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来5. html的标签不区分大小写，但是建议使用小写。* 代码：<html><head><title>titletitle>head><body><FONT color='red'>Hello Worldfont><br/><font color='green'>Hello Worldfont>body>html>3. 标签学习：1. 文件标签：构成html最基本的标签* html:html文档的根标签* head：头标签。用于指定html文档的一些属性。引入外部的资源* title：标题标签。* body：体标签* ：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,blue2. 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 src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/><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代码* 如："color:red;">hello css2. 内部样式* 在head标签内，定义style标签，style标签的标签体内容就是css代码* 如：hello css3. 外部样式1. 定义css资源文件。2. 在head标签内，定义link标签，引入外部的资源文件* 如：* a.css文件：div{color:green;}"stylesheet" href="css/a.css">hello csshello css* 注意：* 1,2,3种方式 css作用范围越来越大* 1方式不常用，后期常用2,3* 3种格式可以写为：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. 伪类选择器：选择一些元素具有的状态* 语法： 元素:状态{}* 如： * 状态：* 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-- ，后来更名为：ScriptEase2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript3. 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: true和false4. null：一个对象为空的占位符5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined2. 引用数据类型：对象4. 变量* 变量：一小块存储数据的内存空间* Java语言是强类型语言，而JavaScript是弱类型语言。* 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据* 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。* 语法：* var 变量名 = 初始化值;* typeof运算符：获取变量的类型。* 注：null运算后得到的是object5. 运算符1. 一元运算符：只有一个运算数的运算符++，-- ， +(正号) * ++ --: 自增(自减)* ++(--) 在前，先自增(自减)，再运算* ++(--) 在后，先运算，再自增(自减)* +(-)：正负号* 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换* 其他类型转number：* string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）* boolean转number：true转为1，false转为02. 算数运算符+ - * / % ...3. 赋值运算符= += -+....4. 比较运算符> < >= <= == ===(全等于)* 比较方式1. 类型相同：直接比较* 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。2. 类型不同：先进行类型转换，再比较* ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
5. 逻辑运算符&& || !* 其他类型转boolean：1. number：0或NaN为假，其他为真2. string：除了空字符串("")，其他都是true3. null&undefined:都是false4. 对象：所有对象都为true6. 三元运算符? : 表达式var a = 3;var b = 4;var c = a > b ? 1:0;* 语法：* 表达式? 值1:值2;* 判断表达式的值，如果是true则取值1，如果是false则取值2；6. 流程控制语句：1. if...else...2. switch:* 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)* switch(变量):case 值:* 在JS中,switch语句可以接受任意的原始数据类型3. while4. do...while5. for7. 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. Boolean4. Date：日期对象1. 创建：var date = new Date();2. 方法：toLocaleString()：返回当前date对象对应的时间本地字符串格式getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差5. Math：数学对象1. 创建：* 特点：Math对象不用创建，直接使用。 Math.方法名();2. 方法：random():返回 0 ~ 1 之间的随机数。 含0不含1ceil(x)：对数进行上舍入。floor(x)：对数进行下舍入。round(x)：把数四舍五入为最接近的整数。3. 属性：PI6. Number7. String8. 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. Global1. 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。 方法名();2. 方法：encodeURI():url编码decodeURI():url解码encodeURIComponent():url编码,编码的字符更多decodeURIComponent():url解码parseInt():将字符串转为数字* 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为numberisNaN():判断一个值是否是NaN* NaN六亲不认，连自己都不认。NaN参与的==比较全部问falseeval():讲 JavaScript 字符串，并把它作为脚本代码来执行。3. URL编码龙胖不下锅= %E9%BE%99%E8%83%96%E4%B8%8D%E4%B8%8B%E9%94%85
BOM（浏览器对象模型）:
-
什么是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* 如果用户点击取消按钮，则方法返回falseprompt() 显示可提示用户输入的对话框。* 返回值：获取用户输入的值2. 与打开关闭有关的方法：close() 关闭浏览器窗口。* 谁调用我 ，我关谁open() 打开一个新的浏览器窗口* 返回新的Window对象3. 与定时器有关的方式setTimeout() 在指定的毫秒数后调用函数或计算表达式。* 参数：1. js代码或者方法对象2. 毫秒值* 返回值：唯一标识，用于取消定时器clearTimeout() 取消由 setTimeout() 方法设置的 timeout。setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。clearInterval() 取消由 setInterval() 设置的 timeout。3. 属性：1. 获取其他BOM对象：historylocationNavigatorScreen:2. 获取DOM对象document4. 特点* Window对象不需要创建可以直接使用 window使用。 window.方法名();* window引用可以省略。 方法名();
4. Location：地址栏对象1. 创建(获取)：1. window.location2. location2. 方法：* reload() 重新加载当前文档。刷新3. 属性* href 设置或返回完整的 URL。
5. History：历史记录对象1. 创建(获取)：1. window.history2. history2. 方法：* 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.document2. document2. 方法：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 DOM1. 标签体的设置和获取：innerHTML2. 使用html元素对象的属性3. 控制元素样式1. 使用元素的style属性来设置如：//修改样式方式1div1.style.border = "1px solid red";div1.style.width = "200px";//font-size--> fontSizediv1.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 (2016年5月20日)2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）* 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. 如果操作的是元素的固有属性，则建议使用prop2. 如果操作的是元素自定义的属性，则建议使用attr2. 对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
代码
<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>
<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>本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！