JS+JQuery笔记汇总

pgw6

贡献于2012-12-05

字数:0 关键词: jQuery JavaScript框架

1 精通 JavaScript 与 JQuery JS 语法 1、区分大小写;弱类型变量;每行结尾的分号可有可无,但是开发者应该养成良好的习惯,为每句代码都加上分号,这样可避免一些非主 流浏览器的不兼容;注释的方式,有单行和多行,//, 2、js 可以在一个变量中存储不同的数据类型。 var test=”sssssss”;alert (test);test=123456;alert(test); 但是,这种方法不值得推荐。使用变量是,应在同一个变量中只存储同一种数据类型 可不声明变量就直接使用 变量名称遵循的三条规则: (1) 首字母必须是字母,下划线,或者是美元符号$ 2 (2) 余下的字母可以是下划线、美元符号、任意字母或者数字 (3) 变量名不能是关键字或者保留字 著名的命名规则有三种,Camel 标记法,Pascal 标记法 和匈牙利标记法 Camel 标记法采用的是首字母小写,接下来的单词都以大写字母开头的方法 例如:var myStudentNumber,myEnglishName; Pascal 标记法采用首字母大写,接下来的单词都以大写字母开头 例如:var MyStudentNumber,MyEnglishName 匈牙利标记法,在 Pascal 标记法法的基础上,变量名前面加一个小写字母,或者小写字母序列,以说明该变量的类型。 数组:a, aArray; 布尔值:b bMale; 浮点型: f ,fTax; 函数:fn,fnSwap; 整型:i,iAge; 对象:o, oCar; 正则表达式:re,rePattern; 字符串:s,sUniversity; 变型:v,vSuper; 3 3、 获取指定位置的字符用 charAt() 用法:var test="nihao"; alert(test.charAt(2)); slice(start,end) ——选取的字符串个数是 end-start; 包括 start 但是不包括 end ; substring(start,end) 。 这两种方法的区别在于对负数的处理不同。负数对 slice 而言是从字符串的末尾往前计数,而 substring 将负数作为 0 处理,并将两个参数中 小的那个作为起始位置,较大的作为终止位置。substring(2,-3) 等价于 substring(2,0) 等价于 substring(0,2) 。 slice(start) substr(start,length) ——其实字符串的位置和子字符串的长度 indexOf(" 寻找的字符串"),lastIndexOf(" 寻找的字符串")——不同之处在于前者从前往后搜索,后者从后往前搜索,但是返回的都是子字符串 开始的位置 indexOf(" 寻找的字符串",index) ——从第几个字符开始往后找 4 lastIndexOf(" 寻找的字符串",index) ——从第几个字符开始往前找 toExponential ()把数值类型转化为科学计数法,该方法接受一个参数,表示要输出的小数位数。 var sMyNumber=983.5; sMyNumber.toExponential(1) ; typeof() 判断类型 类型转换:把数值型转换为字符型,可以直接利用加号+,将数值加上一个长度为零的空字符串,或者通过 toString() 方法——sMyNumber+"" ; sMyNumber.toString(); 如果使用 toString() 方法还可以加入参数,直接进行进制的转换 sMyNumber.toString(2); sMyNumber.toString(16); 5 parseInt(“ 字符串”)——有默认的,0 开头是八进制,增加一个参数可以实行进制转换。parseFloat(“ 字符串”); 4、、、、数组数组数组数组 var aColor=new Array(); aColor[0]="blue"; aColor[1]="red"; var aMap=new Array("China","USA","Britain"); var aMap=["China","USA","Britain"]; 转换为字符串: var aMap=new Array("China","USA","Britain"); document.write(aMap.toString()); 输出结果——China,USA,Britain 如果不希望用逗号进行转换后的链接,可用 join() ——参数,用来链接数项的字符串 aMap.join("") 不用连接符;aMap.join() 无参数等价于 toString(); 6 aMap.join("-") 输出结果是 China-USA-Britain 字符串转化为数组 split(“ 标识”)—— 参数为分割字符串的标识 var sMap="China-USA-Britain "; var aMap=sMap.split("-"); document.write(aMap.join("--") ); 数组名.reverse() ——数组元素反序 技巧技巧技巧技巧———————— 7 对于字符串而言没有类似 reverse() 的方法,可以先利用 split() 将其转化为数组,再利用数组的方法经行字符串的反序;最后再用 join() 转化 为字符串。 sort 排序 var aFruit=["pear","apple","peach"]; aFruit.sort(); document.write(aFruit.join() ); pop,push 堆栈方法(push 入栈,pop 出栈)(遵循后进先出的原则) var stack=new Array();stack.push("red");stack.push("green");stack.push("blue"); document.write(stack.toString()+"
"); red,green,blue var vItem=stack.pop(); document.write(vItem+"
"); 8 blue document.write(stack.toString()); red,green 4、、、、条件语句条件语句条件语句条件语句 比较操作符是区分大小写的,所以要统一大小写。 字符名.toUpperCase() ,字符名.toLowerCase() prompt :是 javascript 语言中的一个方法. 主要用处是:显示提示对话框。 9 用法:prompt(message,defaulttext) message 是提示信息 defaulttext 是要输入的值。也可以不输入值,如果不 输入值,则返回 null 。 var iNumber=Number(prompt(" 请输入一个数字","")); if(isNaN(iNumber)) isNaN 判断是否为数字 document.write(" 请确认输入数字"); else document.write(" 你输入的数字式"+iNumber); Number() ——将参数转化为数字,如果转换成功则返回转换后的结果,如果转换失败,返回 NaN 。 10 isNaN ()—— 用来判断参数是否是 NaN 的,如果是 NaN 则为 true, 反之则为 false 。 switch(expression){ case value1:statement1; break; case value2:statement1; break; ...... default:statement; } while(expression) statement; 11 do{statement;}while(expression) 例子例子例子例子: var aNumbers = new Array(); var sMessage = " 你输入了:\n"; var iTotal = 0; var vUserInput; var iArrayIndex = 0; do{ vUserInput = prompt(" 输入一个数字,或者'0' 退出","0"); aNumbers[iArrayIndex] = vUserInput; iArrayIndex++; 12 iTotal += Number(vUserInput); sMessage += vUserInput + "\n"; }while(vUserInput != 0) // 当输入为 0(默认值)时退出循环体 sMessage += " 总数:" + iTotal; alert(sMessage); break 和 continue 语句对循环中的代码执行提供严格的流程控制。Break 语句可以立即退出循环,阻止再次执行循环体中的任何代码。Continue 语句只是退出一次循环,根据控制表达式,还允许进行下一次循环。 对于不能没有办法预知对象的信息,使用循环。 13 for(property in expression ) statemnet; 例如:for(var i in window) document.write(i+"="+window[i]+"
"); 5、、、、函数函数函数函数 基本的语法 function functionName([arg0,arg1,...]){ statements [return[expression]] } 注:(1) 在 js 中,函数中的返回值,不需要单独声明,只需要用 return 关键字就可以 14 (2) 函数在执行过程中,只要执行过 return 语句后,便会停止继续执行函数体中的任何代码,因此,return 语句后的代码都不会被执 行。 (3) 如果函数它本身没有返回值,但又希望在某些时候退出函数体,可以调用没有参数的 return 语句随时退出函数 (4) Js 中有个特殊的对象是 arguments ,主要用来访问函数的参数。通过 arguments 对象,开发者无需明确指出参数的名称就能直接访 问他们。例如 arguments[0] 便是访问第一个参数的值 (5) 与其他设计语言不通,ECMAScript(实际上是一种脚本在语法和语义上的标准)不会验证传递给函数的参数个数是否等于函数定义 的参数个数,任何自定义的函数都可以接受人一个数的参数,而不会引发错误。任何遗漏的参数都会以 undefined 的形式传给函数, 而多余的参数将会被自动忽略。 可以利用 arguments 模拟函数重载,例如: function fnAdd(){ if(arguments.length == 0) return; else if(arguments.length == 1) 15 return arguments[0] + 5; else{ var iSum = 0; for(var i=0;i"); document.write(fnAdd(45,50) + "
"); document.write(fnAdd(45,50,55,60) + "
"); 16 6、、、、其它对象其它对象其它对象其它对象 new Date("month dd,yyyy hh:mm:ss"); new Date("month dd,yyyy"); new Date(yyyy,mth,dd,hh,mm,ss); new Date(yyyy,mth,dd); new Date(ms); yyyy:4 位数表示的年份 month: 用英文表示的月份名称,从 January 到 December 17 dd: 表示一个月中的第几天,从 1 到 31 hh: 小时数,从 0 到 23 的整数 mm: 分钟数,从 0 到 59 的整数 ss: 描述,从 0 到 59 的整数 ms:毫秒数,为大于等于 0 的整数 js 获取时间 var myDate = new Date(); myDate.getYear(); // 获取当前年份(根据浏览器不同返回两位数或者四位数,不推荐使用) myDate.getFullYear(); // 获取完整的年份(4 位,1970-) myDate.getMonth(); // 获取当前月份(0-11,0 代表 1 月) 18 myDate.getDate(); // 获取当前日(1-31) myDate.getDay(); // 获取当前星期 X(0-6,0 代表星期天) myDate.getTime(); // 获取当前时间(从 1970.1.1 开始的毫秒数) myDate.getHours(); // 获取当前小时数(0-23) myDate.getMinutes(); // 获取当前分钟数(0-59) myDate.getSeconds(); // 获取当前秒数(0-59) myDate.getMilliseconds(); // 获取当前毫秒数(0-999) myDate.toLocaleDateString(); // 获取当前日期 var mytime=myDate.toLocaleTimeString(); // 获取当前时间 myDate.toLocaleString( ); // 获取日期与时间 Date 对象提供的设置时间的方法 19 oDate.setDate(dd) 设置 Date 对象中月的某一天 (1 ~ 31)) setMonth(mth) 设置 Date 对象中月份 (0 ~ 11)) setFullYear(yyyy) 设置 Date 对象中的年份(四位数字) setYear(yy) 设置 Date 对象中的年份(两位或四位数字),不推荐使用。 setHours(hh) 设置 Date 对象中的小时 (0 ~ 23) setMinutes(mm) 设置 Date 对象中的分钟 (0 ~ 59) setSeconds(ss) 设置 Date 对象中的秒钟 (0 ~ 59) setMilliseconds(ms) 设置 Date 对象中的毫秒 (0 ~ 999) setTime(ms) 通过向或从 1970 年 1 月 1 日午夜添加或减去指定数目的毫秒来计算日期和时间 7、、、、BOM 基础基础基础基础 20 BOM :(BrowserObjectModel )使用 BOM 可移动窗口、更改状态栏文本,执行其它不与页面内容发生直接联系的操作。BOM 是 JavaScript 应用中唯一没有相关标准的部分,这是 BOM 真正独特且经常出现的问题的所在。BOM 主要处理浏览器窗口与框架,但事实上,浏览器特 有的 JavaScript 扩展都被认为是 BOM 的一部分,这些扩展包括: 1、 弹出新浏览器窗口的能力; 2、 移动、关闭和更改浏览器窗口大小 的能力; 3、 可提供 WEB 浏览器详细信息的导航对象; 4、 可提供浏览器载入页面详细信息的本地对象; 5、 可提供用户屏幕分辨率详细信息的屏幕对象; 6、 支持 Cookies; 7、 Internet Exploer 对 BOM 进行扩展以包括 Active 对象类,可以通过 javascript 来实现 Active 对象。 Window 对象表示整个浏览器窗口 moveBy(dx,dy) ——把浏览器窗口相对于当前位置移动像右移动 dx 像素,垂直移动 dy 像素。当 dx 和 dy 为负数时,则向相反的方向移动 moveTo(x,y) resizeBy(dw,dh) ——相对于浏览器窗口当前的大小,把宽度增加 dw 个像素,高度增加 dh 个像素 21 resizeTo(w,h) CSS 1、在浏览器中,width 和 height 的兼容性很差,具体指代跟 html 第一行的生命攸关,如果不声明则 IE7 中,指的是 content +padding+border , 而 firefox 中就指的是 content 的宽和高。 如果做如下 DTD 声明: 则指的都是 content 的宽和高。 2、top right bottom left 这 4 个 CSS 属性,它们都是配合 position 属性使用的,表示的是块的各个边界离页面边框(position 为 absolute )或 原来的位置(position 为 relative )的距离。只有当 position 属性设置为 absolute 或者 relative 时,才能生效。 22 DOM 1. 属性方法 类型/返回类 型 说明 nodeName String 节点名称,根据节点的类型而 定义 nodeValue string 节点的值,同样根据节点的类 型而定义 nodeType string 节点类型,常量值之一 firstChild Node 指向 childNodes 列表中的第 一个节点 lastChild Node 指向 childNodes 列表中的最 后一个节点 parentNode Node 指向节点的父节点,如果已经 是根节点,返回 null childNodes NodeList 所有子节点的列表,方法 item(i)可以访问第 i+1 个节 点 previousSibling Node 指向前一个兄弟节点,如果该 节点已经是第一个节点,则返 23 回 null nextSibling Node 指向后一个兄弟节点,如果该 节点已经是最后一个节点,则 返回 null hasChildNodes Boolean 当 childNodes 包含一个或多 个节点时,返回 true attributes NameNodeMap 包含一个元素特性的 Attr 对 象,仅用于元素节点 appendChild(node) Node 将 node 节点添加到 childNode 的末尾 removeChild(node) Node 从 childNodes 中删除 node 节 点 replaceChild(newnode,oldnode) Node 将 childNodes 中的 oldnode 节点替换成 newnode 节点 insertChild(newnode,refnode) Node 在 childNodes 中的 refnode 节点之前插入 newnode 节点 2、访问节点 有两种方法 getELementById 和 getElemntsByTagName 24 举例举例举例举例:::: var oUl=document.getElementsByTagName_r("ul"); var oLi2=oUl[1].getElementsByTagName_r("li"); alert(oLi2.length+""+oLi2[0]. tagName +""+oLi2[1]. childNodes [0].nodeVale); var oLi=document.getElementByIdx_x("cssLi"); 注意这个地方的双引号不能丢掉 alert(oLi.tagName+" "+oLi.childNodes[0].nodeValue); 3、节点类型 元素节点的 nodeType 是 1;属性节点的 nodeType 是 1;文本节点的 nodeType 是 1; 25 注意注意注意注意
  • 糖醋排骨
  • 圆笼粉蒸肉
  • 泡菜鱼
  • 板栗烧鸡
  • 麻婆豆腐
27 在 IE 下输出正常,但是 FireFox 等其它浏览器还包含众多的空格作为文本节点,因此以上代码仅适用于 IE 浏览器。
  • 糖醋排骨
  • 圆笼粉蒸肉
  • 泡菜鱼
  • 板栗烧鸡
  • 麻婆豆腐
修改成这样才在各个浏览器中兼容(这样就不如 jquery ) 下面的代码有一定难度:请多看几次 兼容代码处理方式兼容代码处理方式兼容代码处理方式兼容代码处理方式 28 31 寻找父元素寻找父元素寻找父元素寻找父元素 32 4、查询和设置属性节点 getAttribute 和 setAttriute var myImg = document.getElementsByTagName_r("img") [0] ;// 就一个元素也要用需要用就一个元素也要用需要用就一个元素也要用需要用就一个元素也要用需要用[0] // 获取图片 title 属性 alert(myImg.getAttribute("title")); myImg.setAttribute("src","02.jpg"); 5、创建和添加节点 创建元素节点 createElement_x() 33 创建文本节点 createTextNode() 创建文档碎片 createDocumentFragment(); 注意顺序,先创建 元素节点,然后文本节点,元素节点追加文本节点 var oP = document.createElement_x("p"); var oText = document.createTextNode(" 这是一段感人的故事"); oP.appendChild(oText); document.body.appendChild(oP); 6、删除节点 和 替 换节点 removeChild 和 replaceChild 34 var oP = document.getElementsByTagName_r("p") [0] ; oP.parentNode.removeChild(oP); // 追到父节点追到父节点追到父节点追到父节点 再删除再删除再删除再删除 var oOldP = document.getElementsByTagName_r("p") [0] ; var oNewP = document.createElement_x("p"); // 新建节点 var oText = document.createTextNode(" 这是一个感人肺腑的 故事"); oNewP.appendChild(oText);// 别忘记别忘记别忘记别忘记 oOldP.parentNode.replaceChild(oNewP,oOldP); // 替换节点 7、在特定节点前或后插入节点 35 insertBefore oOldP.parentNode.insertBefore(oNewP,oOldP); // 插入节点 通常将节点添加到实际页面中,页面就会立即更新并反映出这个变化。添加的节点非常多的时候,页面执行的效率很低,解决办法是 创建 一个文档碎片,把新的节点先添加到碎片上,然后一次性再添加到页面上 function insertPs(){ var aColors = ["red","green","blue","magenta","yellow","chocolate","black","aquamarine","lime","fuchsia","brass","azure","brown","bronze"]; var oFragment = document.createDocumentFragment(); // 创建文档碎片 for(var i=0;i

下载文档,方便阅读与编辑

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 8 金币 [ 分享文档获得金币 ] 3 人已下载

下载文档

相关文档