Javascript+jQuery教程 - 好知网-重拾学习乐趣-Powered By Howzhi

你感兴趣的课程

开始学习

编程开发 ExtJS视频教程

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

免费

开始学习

编程开发 21天学通javascript

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

免费

开始学习

编程开发 AJAX核心技术教学

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

免费

学员动态

H好I学L者O 开始学习课时 CSS基础

H好I学L者O 加入课程 Javascript+jQue...

H好I学L者O 开始学习课时 JavaScript基础

H好I学L者O 开始学习课时 JavaScript背景知识

H好I学L者O 开始学习课时内容概述

课程最新笔记

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、变量名不可以是关键字或者保留字。数据类型。