jQuery插件-jjsshen

jQuery插件的笔记

相关课时：

jQuery插件2017-10-08

笔记详情：

L2 JavaScript基础
2.1 语法
1、区分大小写；
2、弱类型变量；
3、每行结尾分号可有可无；
4、括号用于代码块；
5、注释方式与C、java相同；

2.2 变量：用var声明，命名规则同C；
2.3 数据类型
1、字符串
2、数值
3、布尔值：true false
4、数组：var a = new Array(xx, xx, xx);

2.4 条件语句
1、比较：==
2、逻辑：与&& 或|| 非!
3、if 同 C
4、switch

2.5 循环语句
1、while
2、for

2.6 函数
1、用function 定义：
function functionName([arg0, arg1, ..., argN]){
statements
[return [expression]]
}

L3 CSS基础
3.1 概念
Cascading Style Sheet，层叠样式表，控制网页样式并允许样式信息与网页内容分离的一种标记性语言。
传统HTML语言的缺陷：修改麻烦，
CSS的引入：style标签

3.2 使用CSS控制页面
1、行内样式：在代码中使用style属性直接定义样式，与html没有本质区别
2、内嵌式：用style将格式单独分离出来。
3、链接式：对整个网站来说使用广泛，使用link标记，与外部文件超链接
4、导入样式：与链接式基本相同，使用import语句导入外部文件

3.3 CSS选择器
1、标记选择器：
h1 {color : red; font-size : 25px;}
标记选择器名 {属性:值; 属性:值;}
2、类别选择器
.class {color : green; font-size : 20px;}
.类别选择器名 {属性:值;}
3、ID选择器
#id {color : green; font-size : 20px;}
ID选择器 {属性:值;}
4、选择器的集体声明，用逗号分隔
5、选择器的嵌套：用空格隔开，表示子标记
6、子选择器：与嵌套基本相同，但定义了子标记的范围(用>号表示)

L4 CSS进阶
4.1 div与span标记
1、<div>(division)区块容器标记，即<div>...</div>之间相当于一个容器，可容纳段落、标题、表格、图片乃至章节、摘要和备

注等各种html元素。
2、div与span的区别：span为行内标记，div整体换行

4.2 盒子模型：一个盒子由content、border、padding、margin四部分组成。
4.3 元素的定位
1、float定位：悬浮
2、position定位：absolute、relative
3、z-index空间位置：叠加的顶层底层位置

4.4 CSS排版观念
1、将页面用div分块
2、设计各个块的位置
3、用CSS定位

L5 DOM模型
5.1 DOM 模型框架
文档对象模型DOM（Document Object Module）定义了操作文档对象的接口。

5.2 DOM模型中的节点
1、元素节点
2、文本节点
3、属性节点

5.3 使用DOM
1、访问节点：
document.getElementsByTagName
document.getElementById

2、父子关系
hasChildNodes()
childNodes

3、节点的属性
getAttribute("...")

4、创建新节点
createElement("...")
createTextNode("... ")
appendChild()

5.4 innerHTML
表示某个标记之间的所有内容，包括代码本身。该属性可以读取，同时还可以设置。

L6 JavaScript事件
6.1 事件流
1、冒泡型事件：事件会由子节点向父节点传递，各个节点会调用各自的响应函数。
2、捕获型事件

6.2 事件监听
1、简单的通用方法
window.onload = function(){
var xx = document.getElementById("...");
xx.onclick = function(){... } //处理对象点击的响应函数
}

2、IE：
绑定监听事件：对象.attachEvent（“事件名”，响应函数）
撤销监听事件：对象.detachEvent（“事件名”，响应函数）

3、标准DOM
对象.addEventListener(“事件名”，响应函数，false); //添加监听函数
对象.removeEventListener(“事件名”，响应函数，false); //撤销监听

6.3 事件对象
1、IE浏览器事件对象是windows对象的一个属性event
oP.onclick = function(){
var oEvent = window.event;
}

2、DOM中规定event对象必须作为唯一的参数传给事件处理函数
oP.onclick = function(oEvent){
...
}

3、兼容浏览器通常采用的方法
oP.onclick = function(oEvent){
if(window.event) oEvent = window.event;
}

4、一系列属性、方法
5、事件类型
event.type 事件类型，如：click，mouseover等

L7 表格与表单
7.1 动态控制表格
1、动态添加
var oTr = document.getElementById("Id名...").insertRow(n) //以0为首行，在第n行插入
var oTd = oTr.insertCell(i); //添加单元格
oTd.appendChild(oText[i]); //添加文本属性

2、动态删除
var oTb = document.getElementById("...");
oTb.deleteRow(n); //删除第n行，后面行号自动补齐
oTb.rows[2].deleteCell[i]; //删除一个单元格，后面单元格自动补齐

7.2 表单基础
1、可通过document.form集合来引用表单：
document.forms["myForm1"];
其中html部分可能为：<form method="post" name="myForm1" action="addInfo.aspx">

2、基本表单元素
label标记可以使界面更加友好。
元素：input type = "..." text/password/radio/checkbox/submit/reset
select name = "..."
textarea

7.3 文本框
1、控制字符个数：
单行文本框的maxlenth属性；
<textarea>的字符个数：maxlenth = "50" onkeypress = "return LessThan(this);"
function LessThan(oTextArea) {
return oTextArea.value.lenth < oTextArea.getAttribute("maxlenth");
}

2、自动选择文本
鼠标经过时自动聚焦，且能选中默认值以便用户直接删除。代码：
input type = "text" onmouseover = "this.focus()" onfocus = "this.select()"

L8 调试与优化
8.1 错误和异常
1、拼写错误，字母区分大小写
2、访问不存在的变量
3、括号不匹配
4、字符串等变量连接错误
5、等号与赋值（== 与 =的区别）

8.2 错误处理
1、onerror事件
window.onerror = function(){
alert("出错啦！");
}
2、try...catch语句
try{
alert("this is an example");
alert(fresheggs); //此处出错
} catch() {
var sError = "";
for(var i in exception)
sError += i + ":" + exception[i] + "\n";
alert(sError);
}

8.3 调试器
1、Firefox错误控制台
2、Microsoft Script Debugger
3、Venkman（firefox插件，功能强大）

8.4 JavaScript优化
1、下载时间：更小更精简，节省空格等字符。
2、使用内置函数
3、最小化语句数量

L9 Ajax
9.1 认识Ajax
1、异步JavaScript与XML（Asynchronous JavaScript And XML）
2、传统web采用同步交互形式，用户发送请求，服务器根据请求执行后返回结果，存在用户等待。
3、Ajax采用异步交互形式。
4、Ajax组成：JavaScript、CSS、DOM、XMLHttpRequest对象

9.2 XMLHttpRequest对象
1、异步对象链接服务器
(1) 创建：
var xmlHttp;
function createXMLHttpRequest() {
if(window.ActiveXObject) //IE浏览器
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //针对IE创建异步对象
else if(window.XMLHttpRequest) //其他浏览器采用标准DOM创建
    xmlHttp = new XMLHttpRequest();
}
(2) 请求：
xmlHttp.open("GET", "9-1.aspx", true); //以异步方式（true）获取（GET）9-1.aspx文件
(3) onreadystatechange事件
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.Status == 200) //4表示与服务器交互成功，200表示服务器状态ok
    //do something
}
(4) send()发送
xmlHttp.send(null)； //

2、GET VS. POST
（1）GET
var queryString = "firstName=isaac&birthday=0624";
//getTime()使得每一次点击发送不同数据，欺骗IE浏览器强制刷新
val url = "9-3.aspx?" + queryString + "&timestamp=" + new Date().getTime();
xmlHttp.open("GET", url);
xmlHttp.send(null); //该语句只发送null
（2）POST
var queryString = "firstName=isaac&birthday=0624";
val url = "9-3.aspx?timestamp=" + new Date().getTime(); //使得每一次点击发送不同数据，欺骗IE浏览器强制刷新
xmlHttp.open("POST", url);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(queryString); //该语句负责发送数据
（3）在上述两种情况中，9-3.aspx的内容：
if (Request.HttpMethod == "POST")
Response.Write("POST:" + Request["firstName"] + ", your birthday is" + Request["birthday"]);
else if(Request.HttpMethod == "GET")
Response.Write("GET:" + Request["firstName"] + ", your birthday is" + Request["birthday"]);

L10 jQuery基础
10.1 jQuery概述
1、是一个优秀的JavaScript框架。主要提供以下功能：
（1）、访问页面框架的局部
（2）、修改页面的表现（Presentation）
（3）、更改页面的内容
（4）、响应事件
（5）、为页面添加动画
（6）、与服务器异步交互
（7）、简化常用的JavaScript操作（数组操作、迭代等）
2、隔行变色的表格
（1）用CSS实现：使用class类别名标注不同的行（tr），统一更改。
（2）用JavaScript实现
window.onload = function(){
var oTable = document.getElementById("oTable");
for (var i = 0; i < oTable.rows.lenth; i++) {
if (i % 2 == 0) //判断是偶数行
oTable.rows[i].className = "altrow"; //动态设置类别名
}
}
（3）jQuery实现
<script language="javascripte" src="jquery.min.js"> </script>
$(function() {
$("table.datalist tr:nth-child(odd)").addClass("altrow");
})

10.2 jQuery的“$”
1、选择器

2、功能函数的前缀
var nString = " 1234567890";
nString = $.trim(nString); //用功能函数去掉字符串前面的空格

3、window.onload
（1）window.onload的冲突
（2）ready方法
$(document).ready(function() {
...
});
或者
$(function() {
...
});

4、创建DOM元素
var oNewP = $("<p>这是一个感人的故事</p>");
oNewP.insertAfter("#myTarget");

10.3 选择器
1、属性选择器
$(function(){
$("ul li ul li:has(a)").addClass("myClass");
})
2、位置选择器
$(function(){
$("p:lt(2)").addClass("myClass"); //p标记的集合，且是选择2之前的标记
})

L11 jQuery控制页面
11.1 标记的属性
1、获取属性的值
2、设置属性的值

11.2 元素的样式
1、添加CSS类
2、动态切换

11.3 页面的元素
1、直接获取、编辑内容：text()和html()方法
2、克隆元素：clone()方法

11.4 jQuery处理事件（代码比较复杂）
1、事件监听，不用判断浏览器兼容性
2、移除事件监听

L12 jQuery制作动画
12.1 元素的显示与隐藏
1、show()和hide()方法

12.2 渐入渐出的变幻
1、show()和hide()方法中加入参数，表示显示或隐藏的时间，单位ms
2、fadeIn()和fadeOut()方法，也有参数，表示时间，渐隐和渐显效果

12.3 幻灯片效果
1、slideUp()和slideDown()，参数表示时间，模拟ppt拉窗帘效果

L13 jQuery功能函数
13.1 浏览器的检测
1、$browser对象

13.2 盒子模型
1、标准盒子模型

2、IE盒子模型

3、$.boxModel对象，用于检测盒子模型。
4、盒子模型也可以统一，主要是声明，DOCTYPE

13.3 处理JavaScript对象
1、$.each()遍历
（1）$.each(obj, func); //对象和函数
（2）获取未知对象的信息；
2、数据过滤
3、数组的转化

L14 jQuery与Ajax
14.1 获取异步数据
1、传统方法
2、jQuery的load()方法
function startRequest() {
$("#target").load("14-1.aspx");
}
14.2 GET VS. POST （get和post的工作机制还是没搞清楚！）
$.get(url, [data], [callback])
$.post(url, [data], [callback], [type])

14.3 控制Ajax
1、设置Ajax的细节
$.ajax(options)
2、全局设定Ajax
$.ajaxSetup(options)

L15 jQuery 插件
15.1 表单插件 Form Plugin
jquery.form.js文件，提供获取表单数据、重置表单项目、使用ajax提交数据等功能。

15.2 UI插件
实现特效，如鼠标拖拽、拖入购物车等。

你感兴趣的课程

开始学习

编程开发 ExtJS视频教程

5万+浏览/ 505学员/ 4.3评分

免费

开始学习

编程开发 21天学通javascript

4万+浏览/ 910学员/ 4评分

免费

开始学习

编程开发 AJAX核心技术教学

3万+浏览/ 367学员/ 4.8评分

免费

课程最新笔记

jQuery插件的笔记
L2 JavaScript基础2.1 语法1、区分大小写；2、弱类型变量；3、每行结尾分号可有可无；4、括号用于代码块；5、注释方式与C、java相同；2.2 变量：用var声明，命名规则同C；2.3 数据类型1、字符串2、数值3、布尔值：true false4、数组：var a = new Array(xx, xx, xx);2.4 条件语句1、比较：==2、逻辑：与&& 或|| 非!3、if 同 C4、switch2.5 循环语句1、while2、for2.6 函数1、用function 定义：function functionName([arg0, arg1, ..., argN]){ statements [return [expression]]}L3 CSS基础3.1 概念Cascading Style Sheet，层叠样式表，控制网页样式并允许样式信息与网页内容分离的一种标记性语言。传统HTML语言的缺陷：修改麻烦，CSS的引入：style标签3.2 使用CSS控制页面1、行内样式：在代码中使用style属性直接定义样式，与html没有本质区别2、内嵌式：用style将格式单独分离出来。3、链接式：对整个网站来说使用广泛，使用link标记，与外部文件超链接4、导入样式：与链接式基本相同，使用import语句导入外部文件3.3 CSS选择器1、标记选择器：h1 {color : red; font-size : 25px;}标记选择器名 {属性:值; 属性:值;}2、类别选择器.class {color : green; font-size : 20px;}.类别选择器名 {属性:值;}3、ID选择器#id {color : green; font-size : 20px;}ID选择器 {属性:值;}4、选择器的集体声明，用逗号分隔5、选择器的嵌套：用空格隔开，表示子标记6、子选择器：与嵌套基本相同，但定义了子标记的范围(用>号表示)L4 CSS进阶4.1 div与span标记1、<div>(division)区块容器标记，即<div>...</div>之间相当于一个容器，可容纳段落、标题、表格、图片乃至章节、摘要和备注等各种html元素。2、div与span的区别：span为行内标记，div整体换行4.2 盒子模型：一个盒子由content、border、padding、margin四部分组成。4.3 元素的定位1、float定位：悬浮2、position定位：absolute、relative3、z-index空间位置：叠加的顶层底层位置4.4 CSS排版观念1、将页面用div分块2、设计各个块的位置3、用CSS定位L5 DOM模型5.1 DOM 模型框架文档对象模型DOM（Document Object Module）定义了操作文档对象的接口。5.2 DOM模型中的节点1、元素节点2、文本节点3、属性节点5.3 使用DOM1、访问节点： document.getElementsByTagName document.getElementById 2、父子关系 hasChildNodes() childNodes3、节点的属性 getAttribute("...")4、创建新节点 createElement("...") createTextNode("... ") appendChild()5.4 innerHTML表示某个标记之间的所有内容，包括代码本身。该属性可以读取，同时还可以设置。L6 JavaScript事件6.1 事件流1、冒泡型事件：事件会由子节点向父节点传递，各个节点会调用各自的响应函数。2、捕获型事件6.2 事件监听1、简单的通用方法window.onload = function(){ var xx = document.getElementById("..."); xx.onclick = function(){... } //处理对象点击的响应函数}2、IE：绑定监听事件：对象.attachEvent（“事件名”，响应函数）撤销监听事件：对象.detachEvent（“事件名”，响应函数）3、标准DOM对象.addEventListener(“事件名”，响应函数，false); //添加监听函数对象.removeEventListener(“事件名”，响应函数，false); //撤销监听6.3 事件对象1、IE浏览器事件对象是windows对象的一个属性eventoP.onclick = function(){ var oEvent = window.event;}2、DOM中规定event对象必须作为唯一的参数传给事件处理函数oP.onclick = function(oEvent){ ...}3、兼容浏览器通常采用的方法oP.onclick = function(oEvent){ if(window.event) oEvent = window.event;}4、一系列属性、方法5、事件类型event.type 事件类型，如：click，mouseover等L7 表格与表单7.1 动态控制表格1、动态添加var oTr = document.getElementById("Id名...").insertRow(n) //以0为首行，在第n行插入var oTd = oTr.insertCell(i); //添加单元格oTd.appendChild(oText[i]); //添加文本属性2、动态删除var oTb = document.getElementById("...");oTb.deleteRow(n); //删除第n行，后面行号自动补齐oTb.rows[2].deleteCell[i]; //删除一个单元格，后面单元格自动补齐7.2 表单基础1、可通过document.form集合来引用表单：document.forms["myForm1"];其中html部分可能为：<form method="post" name="myForm1" action="addInfo.aspx">2、基本表单元素label标记可以使界面更加友好。元素：input type = "..." text/password/radio/checkbox/submit/reset select name = "..." textarea7.3 文本框1、控制字符个数：单行文本框的maxlenth属性； <textarea>的字符个数：maxlenth = "50" onkeypress = "return LessThan(this);" function LessThan(oTextArea) { return oTextArea.value.lenth < oTextArea.getAttribute("maxlenth");}2、自动选择文本鼠标经过时自动聚焦，且能选中默认值以便用户直接删除。代码：input type = "text" onmouseover = "this.focus()" onfocus = "this.select()"L8 调试与优化8.1 错误和异常1、拼写错误，字母区分大小写2、访问不存在的变量3、括号不匹配4、字符串等变量连接错误5、等号与赋值（== 与 =的区别）8.2 错误处理1、onerror事件window.onerror = function(){ alert("出错啦！");}2、try...catch语句try{ alert("this is an example"); alert(fresheggs); //此处出错} catch() { var sError = ""; for(var i in exception) sError += i + ":" + exception[i] + "\n"; alert(sError);}8.3 调试器1、Firefox错误控制台2、Microsoft Script Debugger3、Venkman（firefox插件，功能强大）8.4 JavaScript优化1、下载时间：更小更精简，节省空格等字符。2、使用内置函数3、最小化语句数量L9 Ajax9.1 认识Ajax1、异步JavaScript与XML（Asynchronous JavaScript And XML）2、传统web采用同步交互形式，用户发送请求，服务器根据请求执行后返回结果，存在用户等待。3、Ajax采用异步交互形式。4、Ajax组成：JavaScript、CSS、DOM、XMLHttpRequest对象9.2 XMLHttpRequest对象1、异步对象链接服务器(1) 创建：var xmlHttp;function createXMLHttpRequest() { if(window.ActiveXObject) //IE浏览器 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //针对IE创建异步对象 else if(window.XMLHttpRequest) //其他浏览器采用标准DOM创建 xmlHttp = new XMLHttpRequest();}(2) 请求：xmlHttp.open("GET", "9-1.aspx", true); //以异步方式（true）获取（GET）9-1.aspx文件(3) onreadystatechange事件xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState == 4 && xmlHttp.Status == 200) //4表示与服务器交互成功，200表示服务器状态ok //do something}(4) send()发送xmlHttp.send(null)； //2、GET VS. POST（1）GETvar queryString = "firstName=isaac&birthday=0624";//getTime()使得每一次点击发送不同数据，欺骗IE浏览器强制刷新val url = "9-3.aspx?" + queryString + "&timestamp=" + new Date().getTime();xmlHttp.open("GET", url);xmlHttp.send(null); //该语句只发送null（2）POSTvar queryString = "firstName=isaac&birthday=0624";val url = "9-3.aspx?timestamp=" + new Date().getTime(); //使得每一次点击发送不同数据，欺骗IE浏览器强制刷新xmlHttp.open("POST", url);xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");xmlHttp.send(queryString); //该语句负责发送数据（3）在上述两种情况中，9-3.aspx的内容：if (Request.HttpMethod == "POST") Response.Write("POST:" + Request["firstName"] + ", your birthday is" + Request["birthday"]);else if(Request.HttpMethod == "GET") Response.Write("GET:" + Request["firstName"] + ", your birthday is" + Request["birthday"]);L10 jQuery基础10.1 jQuery概述1、是一个优秀的JavaScript框架。主要提供以下功能：（1）、访问页面框架的局部（2）、修改页面的表现（Presentation）（3）、更改页面的内容（4）、响应事件（5）、为页面添加动画（6）、与服务器异步交互（7）、简化常用的JavaScript操作（数组操作、迭代等）2、隔行变色的表格（1）用CSS实现：使用class类别名标注不同的行（tr），统一更改。（2）用JavaScript实现window.onload = function(){ var oTable = document.getElementById("oTable"); for (var i = 0; i < oTable.rows.lenth; i++) { if (i % 2 == 0) //判断是偶数行 oTable.rows[i].className = "altrow"; //动态设置类别名 }}（3）jQuery实现<script language="javascripte" src="jquery.min.js"> </script>$(function() { $("table.datalist tr:nth-child(odd)").addClass("altrow");})10.2 jQuery的“$”1、选择器 2、功能函数的前缀var nString = " 1234567890";nString = $.trim(nString); //用功能函数去掉字符串前面的空格3、window.onload（1）window.onload的冲突（2）ready方法$(document).ready(function() { ...});或者$(function() { ...});4、创建DOM元素var oNewP = $("<p>这是一个感人的故事</p>");oNewP.insertAfter("#myTarget");10.3 选择器1、属性选择器$(function(){ $("ul li ul li:has(a)").addClass("myClass");})2、位置选择器$(function(){ $("p:lt(2)").addClass("myClass"); //p标记的集合，且是选择2之前的标记})L11 jQuery控制页面11.1 标记的属性1、获取属性的值2、设置属性的值11.2 元素的样式1、添加CSS类2、动态切换11.3 页面的元素1、直接获取、编辑内容：text()和html()方法2、克隆元素：clone()方法11.4 jQuery处理事件（代码比较复杂）1、事件监听，不用判断浏览器兼容性2、移除事件监听L12 jQuery制作动画12.1 元素的显示与隐藏1、show()和hide()方法12.2 渐入渐出的变幻1、show()和hide()方法中加入参数，表示显示或隐藏的时间，单位ms2、fadeIn()和fadeOut()方法，也有参数，表示时间，渐隐和渐显效果12.3 幻灯片效果1、slideUp()和slideDown()，参数表示时间，模拟ppt拉窗帘效果L13 jQuery功能函数13.1 浏览器的检测1、$browser对象13.2 盒子模型1、标准盒子模型2、IE盒子模型3、$.boxModel对象，用于检测盒子模型。4、盒子模型也可以统一，主要是声明，DOCTYPE13.3 处理JavaScript对象1、$.each()遍历（1）$.each(obj, func); //对象和函数（2）获取未知对象的信息；2、数据过滤3、数组的转化L14 jQuery与Ajax14.1 获取异步数据1、传统方法2、jQuery的load()方法function startRequest() { $("#target").load("14-1.aspx");}14.2 GET VS. POST （get和post的工作机制还是没搞清楚！）$.get(url, [data], [callback])$.post(url, [data], [callback], [type])14.3 控制Ajax1、设置Ajax的细节 $.ajax(options)2、全局设定Ajax $.ajaxSetup(options)L15 jQuery 插件15.1 表单插件 Form Pluginjquery.form.js文件，提供获取表单数据、重置表单项目、使用ajax提交数据等功能。15.2 UI插件实现特效，如鼠标拖拽、拖入购物车等。
JavaScript基础的笔记
JavaScript1.区分大小写2.首字母必须是zi
jQuery基础的笔记
hjk
JavaScript基础的笔记
JavaScript语法：1、区分大小写。2、弱类型变量：var age=25；var myname=“张三”；var school=“hi”；var male=“true”3、每行结尾的分号可有可无，浏览器会自动添加。4.括号表示代码块{}5、注释方式与C和java一样。二、变量通过var（variable）关键字。1、首字母必须是字母（大小写都行）、下划线（_）、或者美元符号$2、余下的字母是下划线、美元符号、任意字母或者数字字符。3、变量名不可以是关键字或者保留字。数据类型。

Javascript+jQuery教程

jQuery插件的笔记

你感兴趣的课程