JavaScript 入门学习笔记总结2

363922298

贡献于2012-11-05

字数:57520 关键词: JavaScript开发

 JavaScript 入门笔记 JavaScript属于网络脚本语言。用来改进设计,验证表单,检测浏览器,创建cookies,以及更多的应用。它可以在任意的浏览器中运行。什么是JavaScript呢? JS 被设计用来向HTML页面添加交互行为; JS 是一种脚本语言; JS 有数行计算机代码组成; JS 通常直接嵌入 HTML页面; 注意: JavaScript与Java是完全不同的两种语言。 JavaScript能做什么? 为HTML设计师提供了一种编程工具, 1、它可以把及其短小的片段代码插入到HTML页面之中。 2、可以将动态文本放入HTML页面中:document.write(“

”+name+

); 3、JavaScript可以对事件作出响应。可以设置JS为当某件事发生时被触发。(例如页面载入完成时或者用户点击某一个HTML元素时。) 4、JavaScript可以读写HTML元素。修改HTML元素属性; 5、可以用来验证数据,在数据被提交到服务器之前,JS来验证这些数据的有效性。 6、可以用来检测访问者的浏览器。可以检测到浏览器对象,并根据浏览器实例类型载入不同的页面。 7、可以用来创建cookie,cookie用来存储和取回位于被访问者计算机中的信息。 8、JS的正式名称是 ECMAScript,是由ECMA组织发起和维护的。ECMA-262是JS标准。由Netscape的Brenddn Eich发明,已成为ISO国际标准。 JavaScript的语法 1、如何实现JS 1.1 普通文本: 写法 把一段文本,甚至带有HTML标签的文本插入HTML页面,需要用。Src是JS的相对路径。 1)、放在部分的脚本,在事件触发时,或者脚本被调用时执行。放在中的脚本可以在执行前被载入; 2)、位于后边的脚本,当页面被载入时就会执行。把脚本放入body部分后,它就会生成页面内容。 3)、你可以在同一个文档放置多个脚本,既可以放在body,也可以放在Head部分。 4)、有时可能希望在若干个页面运行同一个JavaScript,同时不在每个页面重复书写。那样可以把JS独立为一个外部文件,然后以.js后缀保存文件。外部文件中的JS,不能包括,可以把脚本文件统一放在同一个子目录中。 3、JavaScript语句 JS脚本,是由浏览器执行的语句序列。 JavaScript语句,是发给浏览器的命令,告诉浏览器要做的事情。比如document.write(“Hello World”); 就是告诉浏览器要输出Hello World语句。 每一个JS语句以分号结束。浏览器也把一行末尾作为语句结尾。但是通过分号,可以在同一行中写多个JS语句。 JavaScript代码块,可以用花括号组合起来,就像C语言的花括号一样。 4、JS的注释 可以添加注释来对JavaScript进行解释,提高其可读性。单行注释方法:// 多行注释方法:/* 这是注释 */ 注释掉的语句,或者行末信息不会被执行。 5、JS变量 JS对变量名大小写敏感,变量命名必须以字母,或者下划线开始。 声明(创建)变量:通过var语句进行变量定义。 var VariableName =5; 如果给变量赋值为字符串,那么需要用引号引起来。 变量赋值:可以定义时赋值,也可以定义后赋值。 VariableName2=“This is string”; 未声明变量:JS可以不声明而直接创建使用变量,像Python一样: variableName3=”Hello!”; 重复声明:重复声明同名变量,变量的原来的值还会保留。 A= 12; var A; document.write(A); //输出还是12 6、JS的运算符 算术运算符: + - * / % ++ --; 赋值运算符: = += -= *= /= %= 字符串相加运算符: str= “str1 ” + “str2” 相当于字符串连接; 字符串与数字相加: 字符串与数字相加,结果为一个字符串。 条件运算符: == (值判断运算) ===(全等运算符,值和类型完全相同的变量;比如a=8; a === “8” 会返回false) != > < >= <= 布尔运算符:&& || ! 三目运算符:getting= (version == “PER”)?”Yes” : “No” 7 JS 逻辑控制 选择:if else 结构, switch结构;switch(n)中,n可以是变量,也可以是表达式,表达式中的值会与case值比较,决定执行哪一个分支: switch(n) { case x: break; default: } 循环:for循环,将一段代码执行指定次数;while循环,只要条件为true,就执行循环;还有一种do… while循环,会首先无条件执行一次代码。例子: 语法: for (变量=开始值;变量<=结束值;变量=变量+步进值) { 需执行的代码 } while (变量<=结束值) { 需执行的代码 } do { 需执行的代码 } while(变量 < 结束值) 此外,break语句可以终止循环,continue语句可以跳出某一轮循环继续进行循环。 JS 还支持for … in 循环,来遍历数组内的元素。 for (变量 in 对象) { 执行代码,通常操作对象。 } 这里变量也可以指的是对象的属性。例子代码: 注释:关于URI中的井号,hash 在URL,“#”用于分隔开网址和网页内的一个位置定义的名称。在网址后加入“#xxx”,便可以跳到网页内的位置。 8 JS 消息框 JavaScript中有三种常用消息框,其实就是一些弹出对话框的函数: 1)警告框: 用于确保用户可以得到某些信息,通常用于告警:例如 alert(“警告!内存不足!”);如果想要告警信息能够换行,那么在alert参数的字符串中,要换行的地方添加’\n’即可。实例程序: 2)确认框:用于使用户可以验证或者接收某些信息。如果确认框出现,用户需要点击确定或者取消按钮,才能继续进行操作。如果点击“确定”,则返回值是true;如果点击“取消”,那么返回值是“false”;语法:confirm(“是否关闭程序?”); 3)提示框:用于提示用户进入页面之前,输入某些值。当提示框出现后,用户需要输入某个值,然后点击“确定”或者“取消”才能继续操作。如果用户点击“确定”,那么返回值是用户输入的数据,如果点击“取消”,那么返回值为“null”。 语法:prompt(“文本”,”默认值”); 9 JavaScript函数 将脚本编写为函数,可以避免脚本被载入时的立即执行。函数只有被调用处才执行。可以在页面任何位置放置调用脚本函数,(如果函数嵌入外部JS文件,甚至可以从其他HTML文件调用这个JS文件中的函数);函数在页面起始位置,即部分定义。 创建函数的语法:function 函数名(var1, var2, …, varN){ 代码 } 编辑函数时注意,JS是大小写敏感的。 JS的函数可以使用 return 语句返回值。例如: function prod(a, b) {return a*b;};在调用函数时,product=prod(2,3), 变量product将存储值6。 函数内部的变量,只有在函数内部有效。如果在函数外部声明变量,则整个页面上所有函数都可以访问这个变量。这些变量的生存期是页面关闭之前有效。 10 JavaScript事件 事件,是可以被JS侦测到的行为。网页中每个元素都可以产生某些触发JavaScript的函数的事件。比如,可以在用户点击某按钮时产生一个onClick事件触发函数。事件在HTML页面中定义。事件可以是鼠标点击、页面或者图像载入、鼠标悬浮在某个热点上、表单中选取输入框、确认表单、键盘按键。事件通常与JS函数配合,当事件发生时函数才会执行。下面是JS支持的HTML标签事件手册:http://www.w3school.com.cn/js/jsref_events.asp onload和onUnload事件;当用户进入页面,或者离开页面时,分别触发这两个事件。其中onload事件通常用来检测访问者的浏览器类型和版本,然后根据这些信息载入特定版本的页面。Onload和onUnload事件,也用于处理用户进入或者离开页面时,所建立的cookies。比如当用户第一次进入页面时,可以用消息框来询问用户姓名,保存在cookie中。当用户再次进入这个页面,之前的姓名信息可以保存。你可以输出 “Welcome back,John!” onFocus,onBlur和onChange事件,它们通常协作,来验证表单。当用户修改表单输入域内容,onChange事件就被触发了。比如: 一旦修改内容,checkEmail函数将被触发。 onSubmit 事件,用于在提交表单之前,验证表单所有的域。如下例,当用户点击“确认”按钮时,checkForm()函数将被调用。若阈值无效,此次提交会被取消。CheckForm()函数返回true或者false。当返回值为true时,说明有效,且表单提交。
onMouseOver和onMouseOut事件, 用来创建“动态的”按钮。例子代码: 当超链接被鼠标移动到时,脚本被侦测并执行。弹出一个告警框。 11、 JS异常与错误处理 (1)try … cache 作用是测试代码中的错误。 上网时常发现带有runtime 错误的Javascript告警框。同时询问我们是否debug。这些信息对开发人员有用,对用户没意义,可以捕获这些信息,进行处理。 网页捕获错误方法:try cache语句;onerror事件 try部分编写实际要运行的代码,cache负责发生错误时的处理。 try{ //在此运行代码} chache(err){// 处理错误} 注意的是:try … cache使用小写字母,大写字母会出错。 因为adddlert函数从来没有定义过,所以这里调用它会发生错误。 解决方法: var txt="" function message() { try { adddlert("Welcome guest!") } catch(err) { txt="There was an error on this page.\n\n" txt+="Click OK to continue viewing this page,\n" txt+="or Cancel to return to the home page.\n\n" if(!confirm(txt)) { document.location.href="http://www.w3school.com.cn/" } } } 这里在错误处理cache处,添加了一个确认框,让用户决定是否继续浏览。如果用户点击取消,就会返回document.locationhref指定的页面去。 (2)thorw关键字的作用是创建一个exception。帮助自定义异常。可以与try cache配合使用。语法是 throw( exception ) 这里exception可以是字符串,整数,逻辑值或者对象。 例子代码: var x=prompt("Enter a number between 0 and 10:","") try { if(x>10) throw "Err1" else if(x<0) throw "Err2" } catch(er) { if(er=="Err1") alert("Error! The value is too high") if(er == "Err2") alert("Error! The value is too low") } (3)onerror事件,是一种老式的,标准的,从网页中捕获JS错误的方法。 只要页面出现脚本错误,就会产生onerror事件。如果需要利用onerror事件,就必须创建一个错误处理函数。这个函数叫onerror处理器(onerror event handler)该事件处理器使用三个参数来调用:msg,错误消息;url,发生错误的页面的地址;line,发生错误的代码行数。 语法: onerror=handleErrfunction handleErr(msg,url,l) { //Handle the error here return true or false } 浏览器是否显示标准的错误信息,取决于onerror的返回值,返回false,则会在JS console控制台显示错误信息,反之则不会。 例子代码: write() 方法值得注意,在文档载入和解析的时候,它允许一个脚本向文档中插入动态生成的内容。 (7)writeln()方法;该方法与write()方法作用一样,不过每次输出后,都加入一个换行符。 9 JS Window 对象 window对象,是JS层级对象中的顶层对象。其中的方法,在一个HTML页面中编写脚本时,可以直接调用。它代表了一个浏览器窗口,或者一个框架。该对象在 或者 每次出现时自动创建。 window对象,是全局对象,所有表达式,都在这里计算。要引用窗口的话,只要把窗口的属性,作为全局变量来使用。可以在其中只写document,而不用写window.document.可以把当前窗口对象的方法,当做函函数来使用,而不必用形如 window.alert()。 Window对象实现了JS所定义的所有全局属性和方法。window对象的window属性和self属性引用的都是它自己。当你想明确引用当前窗口对象,而不是隐式调用时,可以使用这两个属性。除了这两个属性为,parent属性;top属性以及frame[]数组,都引用了与当前window对象相关的其他window对象。要引用窗口中一个框架,可以使用如下语法:frame[i] //当前窗口的框架; self.frame[i] //当前窗口的框架; w.frame[i] // 窗口w的框架。 要引用一个框架的父窗口或者父框架,可以用: parent //当前窗体的父窗口; self.parent //当前窗口的父窗口; w.parent // 窗口w的父窗口 要从顶层窗口含有的任何一个框架中引用它,可以用如下语法: top //当前框架的顶层窗口 self.top //同上 f.top //框架f的顶层窗口。 新的顶层浏览器窗口由方法 Window.open() 创建。当调用该方法时,应把 open() 调用的返回值存储在一个变量中,然后使用那个变量来引用新窗口。新窗口的 opener 属性反过来引用了打开它的那个窗口。一般来说,Window 对象的方法都是对浏览器窗口或框架进行某种操作。而 alert() 方法、confirm() 方法和 prompt 方法则不同,它们通过简单的对话框与用户进行交互。 Window对象属性: (1) closed 返回窗口是否关闭;布尔值。当一个window窗口关闭时,window对象不会消失,它继续存在,但是其closed属性值为true。 (2) defaultStatus 设置或返回窗口状态栏中的默认文本。可读可写,该文本在页面被加载时显示。 (3) document属性 该属性对应当前窗口中HTML的DOM对象; (4) history 对应一个History对象。它是一种Java Script对象,而不是DOM对象。由JS runtime engine自动创建,由一系列URL组成。这些URL是用户在一个浏览器窗口内已访问的URL。(它现在不再允许反问脚本已访问过的实际URL了。) (5) innerheight 和 innerwidth 返回窗口文档显示区的高度和宽度,只读属性。单位象素。 (6) length: 设置或者返回窗口中的框架数量; (7) location: 用于窗口或者框架中的Location对象。具体参见Location对象; (8) name: 设置或者返回窗口名称。该名称是在open()方法创建一个窗口时指定的,或者使用一个标记的name属性指定的。窗口名称,可以用作一个或者标签的target属性的值。以这种方式使用target属性声明了超链接文档或者表单提交结果应该显示于指定的窗口或者框架里。例如返回超链接的名称:代码如下: (9)Navigator 属性: 是对Navigator对象的只读引用,参阅Navigator对象。 (10)opener 属性:返回创建此窗口的窗口引用。该属性可以在创建者窗口,引用创建它的窗口所定义的属性和函数。语法为 window.opener; 只有表示顶层窗口Window对象的operner属性才有效。表示框架的window对象的operner属性无效。例如: MyWindow= window.open(‘’, ‘MyName’,’width=200, height=100’) MyWindow.document.write(“This is ‘myWindow’”) MyWindow.focus() MyWindow.opener.document.write(“This is the parent window”) (11) outerheight 和 outerwidth 属性: 返回窗口的外部高度。都是只读属性,单位象素。 (12) pageXOffset 设置或者返回当前页面相对于窗口显示区左上角X的位置; (13) pageYOffset 设置或者返回当前页面相对于窗口显示区左上角的Y的位置; (14)parent 返回父窗口。 (15)Screen 返回对Screen对象的只读引用,参见Screen对象。 (16)self 返回对当前窗口的引用,等价于该window对象的window属性。 (17)status 设置窗口的状态栏文本。status 属性可设置或返回窗口状态栏中的文本,可读可写。 (18)top 返回最顶层的祖辈窗口。该属性返回对一个顶级窗口对象的只读引用。如果窗口是一个框架,那么top属性引用包含框架的顶层窗口。语法:window.top 比如判断一个子窗口是否与主窗口在同一个框架中,如果是,则跳出框架: if ( window.top!= window.self) window.top.location=”tryjs_breakout.htm”; (19)window window属性等价于self属性,包含了对窗口自身的引用。 (20)screenLeft screenTop screenX screenY 四个只读属性,声明了窗口的左上角在屏幕上的X坐标和Y坐标。IE, Safari和Opera支持screenLeft和screenTop,而Firefox和Safari支持screenX和screenY。 Window对象的方法: (1) alert()方法 显示一段消息还一个确定按钮的告警对话框。 (2) blur()方法 把键盘焦点,从顶层窗口移开。Window.blur()方法可把键盘焦点从顶层窗口移开。把键盘焦点从顶层浏览器窗口移走,整个窗口由window对象指定,哪个窗口最终获得键盘焦点未指定。 (3) clearInterval() 取消由setInterval()设置的timeout;参数id-of-setinterval. 也就是setInterval()函数返回的ID值。setInterval函数设置一个间隔,来反复启动同一个函数调用。例子代码: 当电机按钮时,会停止Interval指定的那个函数的执行。 (4) cleanTImeout() 取消由setTimeout()方法设置的timeout .参数id_of_settimeout,这个参数是由setTimeout()返回的ID值, 取消对代码块的延迟执行。 (5) close() 函数: 用于关闭浏览器窗口。该方法将关闭window指定的顶层浏览器窗口。某个窗口可以通过调用self.close()或者只调用close()来关闭自身窗口,只有通过JS打开的窗口才能由JS关闭。 (6) confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 (7) createPopup() 创建一个pop-up窗口。 (8) focus() 把键盘焦点给予一个窗口。Window.focus() (9) moveBy() 可相对窗口的当前坐标,把它移动到指定的像素。参数有两个,一个X,一个Y。表示窗口右移和下移的像素数。 (10) moveTo() 把窗口的左上角移动到一个指定坐标,参数X,Y (11) open() 方法,打开一个新的浏览器窗口或者查找一个已命名的窗口。Window.open(URL, name, features, replace);其中,URL是一个可选字串,声明了要在新窗口中显示的文档的URL。若省略该参,则它的值是空字符串,新窗口不显示任何网页文档。Name,可选属性,由逗号分隔的特征列表 ,其中包括数字,字母,下划线。该字符声明了新窗口名称。该名称可用作标记
,
的属性target值。若该参数指定了一个已经存在的窗口,那么open()方法就不再创建一个新窗口,而仅仅返回对指定窗口的引用。此时,features将被忽略。Features参数,可选字符串,声明了新窗口要显示的标准浏览器的特征。如果省略该参数,新窗口将具备标准特征。Replace参数,可选布尔值,规定了装载到的窗口的URL是在窗口的浏览器历史中创建一个新条目,还是替换浏览器历史中的当前条目。支持的值: true-URL替换浏览器历史中的当前条目;false-URL在浏览器历史中创建新条目。 注意:注意区分window.open()方法与Document.open()方法。两者功能完全不同。当需要打开新窗口时,请使用window.open()而不是open()。 窗口特征(Window Features) channelmode=yes|no|1|0 是否使用剧院模式显示窗口。默认为 no。 directories=yes|no|1|0 是否添加目录按钮。默认为 yes。 fullscreen=yes|no|1|0 是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。 height=pixels 窗口文档显示区的高度。以像素计。 left=pixels 窗口的 x 坐标。以像素计。 location=yes|no|1|0 是否显示地址字段。默认是 yes。 menubar=yes|no|1|0 是否显示菜单栏。默认是 yes。 resizable=yes|no|1|0 窗口是否可调节尺寸。默认是 yes。 scrollbars=yes|no|1|0 是否显示滚动条。默认是 yes。 status=yes|no|1|0 是否添加状态栏。默认是 yes。 titlebar=yes|no|1|0 是否显示标题栏。默认是 yes。 toolbar=yes|no|1|0 是否显示浏览器的工具栏。默认是 yes。 top=pixels 窗口的 y 坐标。 width=pixels 窗口的文档显示区的宽度。以像素计。 (12) print() 打印当前窗口内容,就像用户单击浏览器的打印按钮。会生成定制打印要求,进行页面的打印机操作。 (13) prompt() 显示可提示用户输入的对话框。语法:prompt(text,defaultText);第一个可选参数,是要在对话框中显示的纯文本。第二个参数,是默认输入的文本。如果用户单击提示框的取消按钮,则返回 null。如果用户单击确认按钮,则返回输入字段当前显示的文本。 在用户点击确定按钮或取消按钮把对话框关闭之前,它将阻止用户对浏览器的所有输入。在调用 prompt() 时,将暂停对 JavaScript 代码的执行,在用户作出响应之前,不会执行下一条语句。 (14) resizeBy() 方法,带有参数width,height。用来根据制定的象素大小来调整窗口大小。两个参数表示,要使当前窗口宽度,高度增加的像素数,可正可负。 (15) resizeTo() 把窗口的大小,调整到指定的宽度和高度。其两个参数,是要调整后窗口的高度和宽度; (16) scrollBy(xnum,ynum)把文档内容滚动指定的像素数。 (17) scrollTo() (18) setInterva() 按照指定的周期(以毫秒计)来调用函数或者表达式。该函数可以不停调用函数,直到clearInterval()关毕被调用窗口,由setInterval()返回的ID值可用作clearInterval()方法的参数。 (19) setTimeout() 用于在指定的毫秒数后,调用函数或者计算表达式。参数为code,millisec. 第一个参数是要调用的函数后要执行的JS代码串,后一个参数是在执行代码前需要等待的毫秒数。SetTimeout只执行code一次,如果想多次调用,需要用setInterval()或者让code 自身调用setTimeout()。 10 JS Navigator 对象 实际是一个JavaScript对象,而不是HTML DOM对象。它是由JS runtime engine自动创建的,包含客户端浏览器的信息。 Navigator对象中的集合: plugins[] 返回文档中所有的嵌入式对象的引用。该集合是一个Plugin对象数组,其中元素代表浏览器已经安装的插件。Plug-in提供的是有关插件的信息。其中包括他所支持的MIME类型的列表。 Navigator对象属性: 属性 描述 IE F O appCodeName 返回浏览器的代码名。 4 1 9 appMinorVersion 返回浏览器的次级版本。 4 No No appName 返回浏览器的名称。 4 1 9 appVersion 返回浏览器的平台和版本信息。 4 1 9 browserLanguage 返回当前浏览器的语言。 4 No 9 cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。 4 1 9 cpuClass 返回浏览器系统的 CPU 等级。 4 No No onLine 返回指明系统是否处于脱机模式的布尔值。 4 No No platform 返回运行浏览器的操作系统平台。 4 1 9 systemLanguage 返回 OS 使用的默认语言。 4 No No userAgent 返回由客户机发送服务器的 user-agent 头部的值。 4 1 9 userLanguage 返回 OS 的自然语言设置。 4 No 9 Navigator对象的方法: javaEnabled() 规定浏览器是否启用Java; tainEnabled()设置浏览器是否启用数据污点。 12 JS Screen对象 由JavaScript runtime engine自动创建的,包含有关客户机显示屏幕的信息。每个window对象的screen属性,都引用一个screen对象。它存放了显示浏览器屏幕的信息。例如,一个程序可以根据显示器尺寸,选择使用大图像还是小图像。根据显示器颜色深度,选择使用16位色还是8位色的图形。 Screen 对象的属性 属性 描述 IE F O availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。 4 1 9 availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。 4 1 9 bufferDepth 设置或返回在 off-screen bitmap buffer 中调色板的比特深度。 4 No No colorDepth 返回目标设备或缓冲器上的调色板的比特深度。 4 1 9 deviceXDPI 返回显示屏幕的每英寸水平点数。 6 No No deviceYDPI 返回显示屏幕的每英寸垂直点数。 6 No No fontSmoothingEnabled 返回用户是否在显示控制面板中启用了字体平滑。 4 No No height 返回显示屏幕的高度。 4 1 9 logicalXDPI 返回显示屏幕每英寸的水平方向的常规点数。 6 No No logicalYDPI 返回显示屏幕每英寸的垂直方向的常规点数。 6 No No pixelDepth 返回显示屏幕的颜色分辨率(比特每像素)。 No 1 9 updateInterval 设置或返回屏幕的刷新率。 4 No No width 返回显示器屏幕的宽度。 4 1 9 IE Internet Explorer; F Firefox; O Opera; 13 JS History对象 是JS对象不是DOM对象。由一系列URL组成,是用户在浏览器窗口已经访问过的URL。为防止隐私泄露,不在允许脚本访问已经访问过的URL。现在唯一保存的功能,只有back(),forward()和go()方法。 History 对象的属性 属性 描述 IE F O length 返回浏览器历史列表中的 URL 数量 4 1 9 History 对象的方法 方法 描述 IE F O back() 加载 history 列表中的前一个 URL 4 1 9 forward() 加载 history 列表中的下一个 URL 4 1 9 go() 加载 history 列表中的某个具体页面 4 1 9 14 JS Location对象:包含了当前URL信息 Location 对象的属性 属性 描述 IE F O hash 设置或返回从井号 (#) 开始的 URL(锚)。 4 1 9 host 设置或返回主机名和当前 URL 的端口号。 4 1 9 hostname 设置或返回当前 URL 的主机名。 4 1 9 href 设置或返回完整的 URL。 4 1 9 pathname 设置或返回当前 URL 的路径部分。 4 1 9 port 设置或返回当前 URL 的端口号。 4 1 9 protocol 设置或返回当前 URL 的协议。 4 1 9 search 设置或返回从问号 (?) 开始的 URL(查询部分)。 4 1 9 Location 对象的方法 方法 描述 IE F O assign() 加载新的文档。参数URL 4 1 9 reload() 重新加载当前文档。参数URL 4 1 9 replace() 用新的文档替换当前文档。参数newURL 4 1 9 该对象存储在Window对象的Location属性中,表示那个窗口中当前显示的文档的WEB地址。其href属性存放文档的完整URL。其它属性则分别描述了URL各个部分。这些属性与Anchor对象,或Area对象的URL属性类似,当一个Location对象被转化为字符串,其href属性直接返回。 不过 Anchor 对象表示的是文档中的超链接,Location 对象表示的却是浏览器当前显示的文档的 URL(或位置)。但是 Location 对象所能做的远远不止这些,它还能控制浏览器显示的文档的位置。如果把一个含有 URL 的字符串赋予 Location 对象或它的 href 属性,浏览器就会把新的 URL 所指的文档装载进来,并显示出来。 除了设置 location 或 location.href 用完整的 URL 替换当前的 URL 之外,还可以修改部分 URL,只需要给 Location 对象的其他属性赋值即可。这样做就会创建新的 URL,其中的一部分与原来的 URL 不同,浏览器会将它装载并显示出来。例如,假设设置了Location对象的 hash 属性,那么浏览器就会转移到当前文档中的一个指定的位置。同样,如果设置了 search 属性,那么浏览器就会重新装载附加了新的查询字符串的 URL。 除了 URL 属性外,Location 对象的 reload() 方法可以重新装载当前文档,replace() 可以装载一个新文档而无须为它创建一个新的历史记录,也就是说,在浏览器的历史列表中,新文档将替换当前文档。 javascript控制页面控件隐藏显示的两种方法 方法的不同之处在于控件隐藏后是否还在页面上占位 方法一: document.all["PanelSMS"].style.visibility="hidden"; document.all["PanelSMS"].style.visibility="visible"; 方法二: document.all["PanelSMS"].style.display="none"; document.all["PanelSMS"].style.display="inline"; 方法一隐藏后 页面的位置还被控件占用 只是不显示 方法二隐藏后 页面的位置不被占用 一点经验: 当一个流程运行到某一个步骤出错,需要检查:一,这个表单本身设计是否有问题,使它没办法正常显示?二,这个表单与之前表单的数据映射是否有问题,有非法类型或者NuLL映射?三,这个表单本身到后一步表单的映射是否有问题?(一般建议把本表单到后一个表单的映射,推迟到该表单后边的一个Mapping Activity上);四,如果是在这两个表单之间有其它的Activity,比如BackActivity,Switch Activity等,查看一下这些中间Activity是否有问题,比如属性设置;BackActivity的<%=instance.instanceId%>属性值是不是拼写错了? IE浏览器不支持的onselect事件。 可以用的方法执行一段JS函数,而不会使页面跳转。 JS的Document属性和方法 对象属性 document.title //设置文档标题等价于HTML的title标签 document.bgColor //设置页面背景色 document.fgColor //设置前景色(文本颜色) document.linkColor //未点击过的链接颜色 document.alinkColor //激活链接(焦点在此链接上)的颜色 注意:修改form对象的属性 当修改document.forms[i]对象的action属性时,需要添加的相对位置,必须带有双斜线的路径:”\\uengine-web\\wih\\formHandler\\a.jsp” 对象属性 document.title //设置文档标题等价于HTML的title标签 document.bgColor //设置页面背景色 document.fgColor //设置前景色(文本颜色) document.linkColor //未点击过的链接颜色 document.alinkColor //激活链接(焦点在此链接上)的颜色 document.vlinkColor //已点击过的链接颜色 document.URL //设置URL属性从而在同一窗口打开另一网页 document.fileCreatedDate //文件建立日期,只读属性 document.fileModifiedDate //文件修改日期,只读属性 document.charset //设置字符集 简体中文:gb2312 document.fileSize //文件大小,只读属性 document.cookie //设置和读出cookie ——————————————————————— 常用对象方法 document.write() //动态向页面写入内容 document.createElement(Tag) //创建一个html标签对象 document.getElementById(ID) //获得指定ID值的对象 document.getElementsByName(Name) //获得指定Name值的对象 document.body.appendChild(oTag) ——————————————————————— body-主体子对象 document.body //指定文档主体的开始和结束等价于body>/body> document.body.bgColor //设置或获取对象后面的背景颜色 document.body.link //未点击过的链接颜色 document.body.alink //激活链接(焦点在此链接上)的颜色 document.body.vlink //已点击过的链接颜色 document.body.text //文本色 document.body.innerText //设置body>…/body>之间的文本 document.body.innerHTML //设置body>…/body>之间的HTML代码 document.body.topMargin //页面上边距 document.body.leftMargin //页面左边距 document.body.rightMargin //页面右边距 document.body.bottomMargin //页面下边距 document.body.background //背景图片 document.body.appendChild(oTag) //动态生成一个HTML对象 常用对象事件 document.body.onclick=”func()” //鼠标指针单击对象是触发 document.body.onmouseover=”func()” //鼠标指针移到对象时触发 document.body.onmouseout=”func()” //鼠标指针移出对象时触发 ——————————————————————— location-位置子对象 document.location.hash // #号后的部分 document.location.host // 域名+端口号//好像返回的是主机名localhost,没有返回端口号 document.location.hostname // 域名 document.location.href // 完整URL document.location.pathname // 目录部分 document.location.port // 端口号 document.location.protocol // 网络协议(http:) document.location.search // ?号后的部分 documeny.location.reload() //刷新网页 document.location.reload(URL) //打开新的网页 document.location.assign(URL) //打开新的网页 document.location.replace(URL) //打开新的网页 ——————————————————————— selection-选区子对象 document.selection 例如:
请选中这里的部分文字。
<script type="text/javascript" language="javascript"> selection的createRange方法 document.selection.createRange() 根据当前文字选择返回 TextRange 对象,或根据控件选择返回 ControlRange 对象。 配合 execCommand,在 HTML 编辑器中很有用,比如:文字加粗、斜体、复制、粘贴、创建超链接等。 这些好像都是只有在IE下才能实现。。 ——————————————————————— images集合(页面中的图象) a)通过集合引用 document.images //对应页面上的img标签 document.images.length //对应页面上img标签的个数 document.images[0] //第1个img标签 document.images[i] //第i-1个img标签 b)通过name属性直接引用 img name=”oImage” document.images.oImage //document.images.name属性 c)引用图片的src属性 document.images.oImage.src //document.images.name属性.src d)创建一个图象 var oImage oImage = new Image() document.images.oImage.src=”1.jpg” 同时在页面上建立一个img /标签与之对应就可以显示 ———————————————————————- forms集合(页面中的表单) a)通过集合引用 document.forms //对应页面上的form标签 document.forms.length //对应页面上/formform标签的个数 document.forms[0] //第1个/formform标签 document.forms[i] //第i-1个/formform标签 document.forms[i].length //第i-1个/formform中的控件数 document.forms[i].elements[j] //第i-1个/formform中第j-1个控件 b)通过标签name属性直接引用 /formform name=”Myform”>input name=”myctrl”/>/form document.Myform.myctrl //document.表单名.控件名 c)访问表单的属性 document.forms[i].name //对应form name>属性 document.forms[i].action //对应/formform action>属性 document.forms[i].encoding //对应/formform enctype>属性 document.forms[i].target //对应/formform target>属性 document.forms[i].appendChild(oTag) //动态插入一个控件 document.all.oDiv //引用图层oDiv document.all.oDiv.style.display=”" //图层设置为可视 document.all.oDiv.style.display=”none” //图层设置为隐藏 document.getElementId(”oDiv”) //通过getElementId引用对象 document.getElementId(”oDiv”).style=”" document.getElementId(”oDiv”).display=”none” /*document.all表示document中所有对象的集合 只有ie支持此属性,因此也用来判断浏览器的种类*/ 图层对象的4个属性 document.getElementById(”ID”).innerText //动态输出文本 document.getElementById(”ID”).innerHTML //动态输出HTML document.getElementById(”ID”).outerText //同innerText document.getElementById(”ID”).outerHTML //同innerHTML JS事件大全 onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件 onMouseDown IE4|N4|O 鼠标上的按钮被按下了 onMouseUp IE4|N4|O 鼠标按下后,松开时激发的事件 onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件 onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象] 页面相关事件 事件 浏览器支持 描述 onAbort IE4|N3|O 图片在下载时被用户中断 onBeforeUnload IE4|N|O 当前页面的内容将要被改变时触发的事件 onError IE4|N3|O 捕抓当前页面因为某种原因而出现的错误,如脚本错误与外部数据引用的错误 onLoad IE3|N2|O3 页面内空完成传送到浏览器时触发的事件,包括外部文件引入完成 onMove IE|N4|O 浏览器的窗口被移动时触发的事件 onResize IE4|N4|O 当浏览器的窗口大小被改变时触发的事件 onScroll IE4|N|O 浏览器的滚动条位置发生变化时触发的事件 onStop IE5|N|O 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断 onUnload IE3|N2|O3 当前页面将被改变时触发的事件 表单相关事件 事件 浏览器支持 描述 onBlur IE3|N2|O3 当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可] onChange IE3|N2|O3 当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可] onFocus IE3|N2|O3 当某个元素获得焦点时触发的事件 onReset IE4|N3|O3 当表单中RESET的属性被激发时触发的事件 onSubmit IE3|N2|O3 一个表单被递交时触发的事件 滚动字幕事件 事件 浏览器支持 描述 onBounce IE4|N|O 在Marquee内的内容移动至Marquee显示范围之外时触发的事件 onFinish IE4|N|O 当Marquee元素完成需要显示的内容后触发的事件 onStart IE4|N|O 当Marquee元素开始显示内容时触发的事件 编辑事件 事件 浏览器支持 描述 onBeforeCopy IE5|N|O 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件 onBeforeCut IE5|N|O 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件 onBeforeEditFocus IE5|N|O 当前元素将要进入编辑状态 onBeforePaste IE5|N|O 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件 onBeforeUpdate IE5|N|O 当浏览者粘贴系统剪贴板中的内容时通知目标对象 onContextMenu IE5|N|O 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的中加入onContentMenu="return false"就可禁止使用鼠标右键了] onCopy IE5|N|O 当页面当前的被选择内容被复制后触发的事件 onCut IE5|N|O 当页面当前的被选择内容被剪切时触发的事件 onDrag IE5|N|O 当某个对象被拖动时触发的事件 [活动事件] onDragDrop IE|N4|O 一个外部对象被鼠标拖进当前窗口或者帧 onDragEnd IE5|N|O 当鼠标拖动结束时触发的事件,即鼠标的按钮被释放了 onDragEnter IE5|N|O 当对象被鼠标拖动的对象进入其容器范围内时触发的事件 onDragLeave IE5|N|O 当对象被鼠标拖动的对象离开其容器范围内时触发的事件 onDragOver IE5|N|O 当某被拖动的对象在另一对象容器范围内拖动时触发的事件 onDragStart IE4|N|O 当某对象将被拖动时触发的事件 onDrop IE5|N|O 在一个拖动过程中,释放鼠标键时触发的事件 onLoseCapture IE5|N|O 当元素失去鼠标移动所形成的选择焦点时触发的事件 onPaste IE5|N|O 当内容被粘贴时触发的事件 onSelect IE4|N|O 当文本内容被选择时的事件 onSelectStart IE4|N|O 当文本内容选择将开始发生时触发的事件 数据绑定 事件 浏览器支持 描述 onAfterUpdate IE4|N|O 当数据完成由数据源到对象的传送时触发的事件 onCellChange IE5|N|O 当数据来源发生变化时 onDataAvailable IE4|N|O 当数据接收完成时触发事件 onDatasetChanged IE4|N|O 数据在数据源发生变化时触发的事件 onDatasetComplete IE4|N|O 当来子数据源的全部有效数据读取完毕时触发的事件 onErrorUpdate IE4|N|O 当使用onBeforeUpdate事件触发取消了数据传送时,代替onAfterUpdate事件 onRowEnter IE5|N|O 当前数据源的数据发生变化并且有新的有效数据时触发的事件 onRowExit IE5|N|O 当前数据源的数据将要发生变化时触发的事件 onRowsDelete IE5|N|O 当前数据记录将被删除时触发的事件 onRowsInserted IE5|N|O 当前数据源将要插入新数据记录时触发的事件 数据绑定 事件 浏览器支持 描述 onAfterPrint IE5|N|O 当文档被打印后触发的事件 onBeforePrint IE5|N|O 当文档即将打印时触发的事件 onFilterChange IE4|N|O 当某个对象的滤镜效果发生变化时触发的事件 onHelp IE4|N|O 当浏览者按下F1或者浏览器的帮助选择时触发的事件 onPropertyChange IE5|N|O 当对象的属性之一发生变化时触发的事件 onReadyStateChange IE4|N|O 当对象的初始化属性值发生变化时触发的事件 <%@include file="..\\formHandler\\submit.jsp" %> JS DOM对象的方法属性 1 createElement(element) 创建一个指定标签名创建一个新的元素节点,返回值为指向新建元素节点的引用指针。 eg) var para = document.createElement("p"); document.body.appendChild(para); 2 createTextNode() 创建一个包含着给定文本的新文本节点,返回一个指向新建文本节点的引用指针: reference = document.createTextNode() 参数为新建文本节点所包含的文本字符串 eg) var message = document.createTextNode("hello world"); var container = document.createElement("p"); container.appendChild(message); document.body.appendChild(container); 3 cloneNode() reference = node.cloneNode(deep) 为给定节点创建一个副本,参数为true或者false,true表示同时复制该节点的子节点,false则不复制任何子节点。 var para = document.createElement("p"); var message = document.createTextNode("hello world"); para.appendChild(message); document.body.appendChild(para); var newpara = para.cloneNode(true); document.body.appendChild(newpara); 4 appendChild() reference = node.appendChild(newChild); 插入节点,例子参考前面。 5 insertBefore() reference = element.insertBefore(newNode,targetNode) 将一个给定节点插入到一个给定元素节点的给定子节点的前面,返回一个指向新增子节点的引用指针。 eg) var container = document.getElementById("content"); var message = document.getElementById("fineprint"); var para = document.createElement("p"); container.insertBefore(para,message); 6 removeChild() reference = element.removeChild(node) 将从一个给定元素利删除一个子节点,返回一个指向已被删除的子节点的引用指针。 当某个节点被removeChild()删除后,此节点所有子节点都被删除。 7 replaceChild() reference = element.replaceChild(newChild,oldChild) 把一个给定父元素里的一个子节点替换为另外一个节点,oldChild节点必须是element元素的一个子节点,返回值是一个指向已被替换的那个 子节点的引用指针。 eg) var container = document.getElementById("content"); var message = document.getElementById("fineprint"); var para = document.createElement("p"); container.replaceChild(para,message); 8 setAttribute() element.setAttribute(attributeName,attributeValue); 为给定元素节点添加一个新的属性值或是改变它的现有属性 9 getAttribute attributeValue = element.getAttribute(attributeName) 返回一个给定元素的一个给定属性节点的值。 10 getElementById() element = document.getElementById(ID) 寻找一个有着给定id属性值的元素,返回一个元素节点 11 getElementByTagName() 用于寻找有着给定标签名的所有元素: elements = document.getElementsByTagName(tagName) 返回一个节点集合。 12 hasChildNodes 用来检查一个给定元素是否有子节点 booleanValue = element.hasChildNodes 返回true或false。 13 DOM属性 节点的属性 nodeName属性将返回一个字符串,其内容是给定节点的名字。 如果节点是元素节点,返回这个元素的名称; 如果是属性节点,返回这个属性的名称; 如果是文本节点,返回一个内容为#text的字符串; nodeType属性将返回一个整数,这个数值代表给定节点的类型 nodeValue属性将返回给定节点的当前值 如果节点是元素节点,返回null; 如果是属性节点,返回这个属性的名称; 如果是文本节点,返回文本节点的内容; 遍历节点树 childNodes 该属性返回一个数组,这个数组由给定元素节点的子节点构成 firstChild 返回第一个子节点 lastChild 返回最后一个子节点 nextSibling 返回给定节点的下一个子节点 parentNode 返回一个给定节点的父节点 previousSibling 返回给定节点的下一个子节点?? 14 setTimeout javaScript函数,能够让某个函数在经过一段预定的时间之后才开始执行,函数有两个参数,第一个参数是将要执行的那个函数的名字; 第二个参数是一个数值,以毫秒为单位设定了需要经过多长时间才开始执行由第一个参数所给出的函数: setTimeout(function,interval); 注意函数的名字后边不要带有括号;也不要加双引号。 修改
处理函数 因为可能修改已经存在的这个超链元素的onclick属性,本来实验用getAttribute和setAttribute的,但是没有成功;经过测试,直接用这个元素对象 aObject.onclick 属性即可读写;给它赋值为我们自己的方法时: aObject.onclick=mufunc;即可;注意我们的函数名mufunc()用在这里时,既不要添加括号,也不要添加双引号。 是连接到URL的一种方法;herf="#"是指连接到本页。 冒号 function 相当于function xyz() 给你举个例子看下 javascript Object.extend的用法 Object.extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } Prototype 对Object类进行的扩展主要通过一个静态函数Object.extend(destination, source)实现了JavaScript中的继承。 从语义的角度, Object.extend(destination, source)方法有些不和逻辑, 因为它事实上仅仅实现了从源对象到目标对象的全息拷贝。不过你也可以这样认为:由于目标对象拥有了所有源对象所拥有的特性, 所以看上去就像目标对象继承了源对象(并加以扩展)一样。另外, Prototype对Object扩展了几个比较有用的静态方法, 所有其他的类可以通过调用这些静态方法获取支持。 JScript code Object.extend = function(destination, source) { // 一个静态方法表示继承, 目标对象将拥有源对象的所有属性和方法 for (var property in source) { destination[property] = source[property]; // 利用动态语言的特性, 通过赋值动态添加属性与方法 } return destination; // 返回扩展后的对象 } Object.extend(Object, { inspect: function(object) { // 一个静态方法, 传入一个对象, 返回对象的字符串表示 try { if (object == undefined) return 'undefined'; // 处理undefined情况 if (object == null) return 'null'; // 处理null情况 // 如果对象定义了inspect方法, 则调用该方法返回, 否则返回对象的toString()值 return object.inspect ? object.inspect() : object.toString(); } catch (e) { if (e instanceof RangeError) return '...'; // 处理异常情况 throw e; } }, keys: function(object) { // 一个静态方法, 传入一个对象, 返回该对象中所有的属性, 构成数组返回 var keys = []; for (var property in object) keys.push(property); // 将每个属性压入到一个数组中 return keys; }, values: function(object) { // 一个静态方法, 传入一个对象, 返回该对象中所有属性所对应的值, 构成数组返回 var values = []; for (var property in object) values.push(object[property]); // 将每个属性的值压入到一个数组中 return values; }, clone: function(object) { // 一个静态方法, 传入一个对象, 克隆一个新对象并返回 return Object.extend({}, object); } }); 传统的面向对象语言中,每个对象都会对应到一个类。而上一节讲this 指针时提到, JavaScript 中的对象其实就是属性(方法)的一个集合,并没有严格意义的类的概念。所以它提供了另外一种简单的方式来创建对象,即大括号({})语法: { property1:statement, property2:statement2, …, propertyN:statmentN } 通过大括号括住多个属性或方法及其定义(这些属性或方法用逗号隔开),来实现对象 的定义,这段代码就直接定义个了具有n个属性或方法的对象,其中属性名和其定义之间用 冒号(:)隔开。例如: 第一行定义了一个无类型对象obj,它等价于: var obj=new Object(); 接着定义了一个对象user 及其属性和方法。注意, 除了最后一个属性(方法)定义, 其他的必须以逗号(,)结尾。其实,使用动态增减属性的方法也可以定义一个完全相同的 user 对象,读者不妨使用前面介绍的方法做一个尝试。 使用这种方式来定义对象,还可以使用字符串作为属性(方法)名,例如: var obj={“001”:”abc”} jQuery库 jQuery是一个简洁快速的JavaScript库,其重要功能有:让你在网页上简单的操作文档;处理事件;运行动画效果以及添加Ajax交互。jQuery是一款跨浏览器的JS库。 jQuery入门指南 一、安装,可以在 http://jquery.bassistance.de/jquery-starterkit.zip http://jquery.com/src 下载到jQuery库源码。 二、简单例子: 如果要让jQuery读取和处理文档DOM,必须尽可能快的在DOM载入后开始执行事件,所以,用一个ready事件作为处理HTML文档的开始: $(document).ready(function() { // do stuff when DOM is ready//当文档载入后从此处开始执行代码 }); 下面做一个简单的alter事件,在function中,我们定义任意点击一个链接时,显示一个altert: $(document).ready(function() { $("a").click(function() { alert("Hello world!"); }); }); 这里 $(“a”)是一个jQuery选择器,它选择所有的a标签,即 ; $号是jQuery类的意思。因此$() 构造了一个新的jQuery对象,函数click()是这个对象的一个方法,它绑定一个单击事件到所有选中的标签,并在标签出发时执行方法体。就好像Link ;但是jQuery不要求在标签上写onclick事件;这样结构文件的HTML文档与描述行文的文件的JS文档完全分离了。就像CSS追求的效果一样。 三、使用选择器和事件 jQuery提供两种方式来选择HTML的element对象:一是用CSS和Xpath选择器联合起来形成一个字符串,来传递到jQuery的构造器(如$(“div> ul a”));第二种方法是用jQuery对象的几个方法methods。两种方式可以混合使用。 比如HTML代码中有一段:
  1. First element
  2. Second element
  3. Third element
那么一般javascript的写法是:document.getElementById("orderedlist"). 来获取对象;我们在jQuery中则可以这样做: $(document).ready(function() { $("#orderedlist").addClass("red"); }); 这样starterkit中的一个CSS样式red附加到了orderedlist上。更复杂的例子:根据鼠标悬停在最后一个元素上的位置与否,切换样式: $(document).ready(function() { $("#orderedlist li:last").hover(function() { $(this).addClass("green"); }, function() { $(this).removeClass("green"); }); }); 更多例子: Hide all Paragraph elements that contain a link: $("p[a]").hide(); Show the first paragraph on the page: $("p:eq(0)").show(); Hide all divs that are currently showing: $("div:visible").hide(); Get all list items that are children of an unordered list: $("ul/li") /* valid too: $("ul > li") */ Get all Paragraphs, with a class of 'foo', that have a link in them: $("p.foo[a]"); Get the input field's value with the name of 'bar': $("input[@name=bar]").val(); All checked radio buttons: $("input[@type=radio][@checked]") 在jQuery中,所有的JS事件,如onClick,onLoad,onXXX等都有效,但是它直接用事件名字XXX而不带有on的。它的事件介绍: (1)hover(Function, Function) 出错信息:No macro or processor named ‘param’ found 这是一个定制的方法,提供了一个‘in’对象到常用任务。每当鼠标悬停到匹配的元素上边时,第一个function被触发。而每当鼠标离开匹配元素后,第二个function被触发。例子: $("p").hover(function(){ this.$old = this.innerHTML; $(this).html("Welcome!"); },function(){ $(this).html(this.$old); }); (2)toggle(Function, Function) 开关事件 每当一个匹配的元素被clicked,第一个函数被触发,当再次点击,第二个函数被触发,再点击还是第一个函数被触发。。。。。。。。 $("p").toggle(function(){ $(this).addClass("selected"); },function(){ $(this).removeClass("selected"); }); (3)Dynamic event(Function) 动态事件 用来简述提供的bind或者unbind的functions,之前你通常写作: $("p").bind("click",Function); 现在你可以这样写: $("p").click(Function); 将事件绑定到元素上,同时绑定了处理函数。相关事件包括: abort ;blur ;change ;click ;contextmenu ;dblclick ;error ;focus ;keydown keypress ;keyup ;load ;mousedown ;mouseenter (Internet Explorer only) mouseleave (Internet Explorer only) ;mousemove ;mouseout ;mouseover ;mouseup reset ;resize ;scroll ;select ;submit ;unload (4)Dynamic unEvent(Function) 它也是一个简述,但是它用来将一个匹配的元素和相应事件解绑定。例如: $("p").unclick(Function); 这只是解绑了某一个事件响应函数,而不是其它的事件响应,如果想要该事件完全不作为,那么可以: $("p").unclick(); (5)Dynamic oneEvent(Function) 这个与前边的相似,但是它所处理的事件,只会执行处理器一次,后边再有事件到来就不会响应了。它可以用于一次单击的按钮: $("p").oneclick(function(){ alert("Only once!"); }); //第一次点击时执行,以后再点击无效了。 再看一个新功能: $(document).ready(function() { $("#orderedlist").find("li").each(function(i) { $(this).html( $(this).html() + " BAM! " + i ); }); }); find() 让你在已经选择的element中作条件查询,因此对于:
  1. First element
  2. Second element
  3. Third element
$("#orderedlist).find("li") 就像$("#orderedlist li"). each() 一样,迭代了所有的li,并且可以在此基础上做更多处理。大部分方法,比如 addClass()都可以用自己的each() ,而本例中,html()用来获取每个li的html文本,追加一些文字,并将之设置为li的html文本(.html()是获取对象的html代码,而.html(“xxx”)是设置“xxx”为对象的html代码) 如何在没有被jQuery覆盖的DOM元素上调用一些方法,必须你在AJAX方式成功提交后的reset: $(document).ready(function() { // use this to reset a single form $("#reset").click(function() { $("#form")[0].reset(); }); }); 再次强调井号的意义:URL中,“#”用于分隔开网址和网页内的一个位置定义的名称。在网址后加入“#xxx”,便可以跳到网页内的位置 这里把form元素的id也设置为了form,所以可以用#form访问它。当然最好不要这样做,可以用其他名字,这样可以用如$(“#forms1”)这样的方式来访问它。总之,这段代码的意义是选择所有ID为FORM的元素,然后在其第一个上调用了reset();如果有一个以上的form,可以这样做: $(document).ready(function() { // use this to reset several forms at once $("#reset").click(function() { $("form").each(function() { this.reset(); }); }); }); 这样点击reset链接之后,就选择了文档中所有的form元素并为它们执行了一次reset();当然,你也可能是不希望有些特定元素被选择,jQuery提供了filter()和not()方法来解决这些问题。filter()过滤表达式,减少不符合的被选择项,not()则用来取消所有符合过滤表达式的被选择项。例如,一个无序list,想要选择所有不包含ul子元素的li元素: $(document).ready(function() { $("li").not("[ul]").css("border", "1px solid black"); }); // 该操作不涉及子元素有ul的那些li元素。 刷新浏览器后,会给所有li元素添加边框,除了那些指定包含ul子元素的以外。注意CSS方法的方便使用,如果想再加一个样式:$("li").not("[ul]").css("border", "1px solid black").css("color","red");) 上边表达式代码,语法来自Xpath,可以在子元素和属性上用做过滤器,比如选择所有带有name属性的链接: $(document).ready(function() { $("a[@name]").background("#eee"); }); 该代码给所有带有name属性的连接添加了一个背景色;更常见的是,用name来选择链接。因为不同浏览器对href理解不一致性,用部分匹配*=代替完全匹配 = : $(document).ready(function() { $("a[@href*=/content/gallery]").click(function() { // do something with all links that point somewhere to /content/gallery}); }); 还有一种情况,是选择上一个或者下一个元素: $(document).ready(function() { $('#faq').find('dd').hide().end().find('dt').click(function() { var answer = $(this).next(); if (answer.is(':visible')) { answer.slideUp(); } else { answer.slideDown(); }}); }); 链式表达式更直观,像 “#faq”只选择了一次,利用end()方法,第一次find()方法会结束 undone,这样就可以在它后边继续查找find(‘dt‘)而不是继续匹配#faq; 点击事件中,用$(this).next()找到dt下面紧接着的一个dd元素(this就是找到匹配的那个dt元素啦)。这样FAQ答案就可以收缩了。注意:if(answer.is(‘:visible’))的用法;注意answer.slideUp()。默认下他们是在同级别的元素,而且还可以选择父亲级别的元素:例如:鼠标移动到文章某段的某个链接时,其父级元素,就是这个文章段落都突出显示: $(document).ready(function() { $("a").hover(function() { $(this).parents("p").addClass("highlight"); }, function() { $(this).parents("p").removeClass("highlight"); }); //鼠标移开时恢复原样。两个function的触发时机不同。 }); 看一下$(document).ready(callback)的缩写方法: $(function() { // code to execute when the DOM is ready }); 这样,上边Hello Word的例子可以简写为: $(function() { $("a").click(function() { alert("Hello world!"); }); }); 四、使用AJAX 写一个投票应用,可以在PHP上完成。我们用jQuery生成一个DIV容器,ID是rating: $(document).ready(function() { // generate markup var ratingMarkup = ["Please rate: "]; for(var i=1; i <= 5; i++) { ratingMarkup[ratingMarkup.length] = "" + i + " "; } // add markup to container and applier click handlers to anchors $("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) { e.preventDefault(); // send requests $.post("rate.php", {rating: $(this).html()}, function(xml) { // format result var result = [ "Thanks for rating, current average: ", $("average", xml).text(), ", number of votes: ", $("count", xml).text() ]; // output result $("#rating").html(result.join('')); } ); }); }); 这段代码生成了5个链接,并把它们追加到id 为“rating”的容器中,当其中一个链接被点击时,该链接标明的分数,就以rating参数的形式发送给rate.php, 然后结果以XML形式从服务器传递回来,添加到容器中,代替这些链接部分的HTML内容展示。 一个加载AJAX时常见问题是,当载入一个事件句柄,到一个需要载入内容的HTML文档时,你只能在内容载入之后再加载这些句柄。为了防止代码重复执行,可能用到如下一个function: // lets use the shortcut $(function() { var addClickHandlers = function() { $("a.clickMeToLoadContent").click(function() { $("#target").load(this.href, addClickHandlers); }); }; addClickHandlers(); }); 这样addClickHandler只在DOM载入完成后执行一次,并且是在用户点击具有clickMeToLoadContent这个样式的链接之后。 注意:addClickHandlers函数是作为一个本地变量被定义而不是全局变量,如function addClickHandler(){} 这样做是为了防止与其它的全局变量或者函数相冲突。 另一个问题:回调的参数。可以通过一个额外的参数指定回叫方法,简单的办法是将这个回调函数包含在一个其他的function里: // get some data var foobar = ...; // specify handler, it needs data as a paramter var handler = function(data) { ... }; // add click handler and pass foobar! $('a').click( function(event) { handler(foobar); } ); // if you need the context of the original handler, use apply: $('a').click( function(event) { handler.apply(this, [foobar]); } ); 五、动态效果:使用FX 一些生动的效果,可以通过show()和hide()来实现: $(document).ready(function() { $("a").toggle(function() { $(".stuff").hide('slow'); }, function() { $(".stuff").show('fast'); });}); 与animate()联用,渐显示效果: $(document).ready(function() { $("a").toggle(function() { $(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow'); }, function() { $(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow'); });}); 六、有序化与tablesorter插件 略 七、自定义插件 1、给自定义插件一个名字,比如foobar; 2、创建一个插件相关的名字 jquery.[you plug name].js 比如这里就是jquery.foobar.js 3、创建一个或更多插件的方法,是使用继承jQuery对象的方式: jQuery.fn.foobar = function() { // do something}; 4、创建一个帮助函数,说明用(可选) jQuery.fooBar = { height: 5, calculateBar = function() { ... }, checkDependencies = function() { ... } }; 现在插件中就可以使用这些函数了:jQuery.fn.foobar= function(){} 5、创建一个默认的初始参数配置,可以由用户自己去设置:(可选) jQuery.fn.foobar = function(options) { var settings = { value: 5, name: "pete", bar: 655 }; if(options) { jQuery.extend(settings, options); }}; 现在可以使用插件了,默认参数生效: $("...").foobar(); Or with some options: $("...").foobar( { value: 123, bar: 9} ); 发布插件时,你最好给出使用说明文档和例子。 比如控制所有的radio或者checkbox是否被选中的插件: $.fn.check = function() { return this.each( function() { this.checked = true; });}; 现在插件可以这样用: $("input[@type='checkbox']").check(); 现在可以编写uncheck和toggleCheck()了; $.fn.check = function(mode) { var mode = mode || 'on'; // if mode is undefined, use 'on' as default return this.each(function() { switch(mode) { case 'on': this.checked = true; break; case 'off': this.checked = false; break; case 'toggle': this.checked = !this.checked; break; } });}; 关于XPATH: XPath 规范基本上遵循与文件系统寻址相同的规则: 1、如果 XPath 表达式以斜杠 (/) 开头,代表的是 XML 元素的绝对路径(从 XML 文档的根开始)。 2、如果 XPath 表达式以双斜杠 (//) 开头,则会选择当前文档中符合指定条件的所有元素,而不考虑它们在 XML 文档中的位置。例如,//employee 会查找 XML 文档中的所有员工节点。 3、星号 (*) 会选择由前面的路径定位的所有 XML 元素。例如,/company/department/* 选择一个部门的所有子节点,即该部门的所有员工。 4、点 (.) 选择当前的节点,两个点 (..) 选择父节点。例如,用于选择某个员工所在的部门的 XPath 表达式就是 ../employee。 5、要选择属性,请使用 @ 字符。例如,/company/department/employee[@retired] 选择指定了 retired 属性的所有员工。 / XPath根节点,指XML文件的所有元素 /personData/spous/wife 指出元素明确位置 //name 根节点下所有的name元素 /personData/children//name children子元素下的所有name元素 匹配符「*」 /personData/children*/*/name /personData/children/daughter/name /personData/children/son/name //* 所有的元素 属性节点「@」 /personData@gender 若位置路为属性,需使用「@符号」 节点的组合条件「|」 //spouse | //children 选择所有的spouse和children元素 节点的索引条件「[…]」 /personData/children/daughter[1] children子元素的第一个daughter子元素 /personData/children/daughter[3] children子元素的第三个daughter子元素 /personData/children/daughter[last()] children子元素的最后一个daughter子元素 /personData/children/daughter[@ranking] 选有ranking属性的daughter子元素 /personData/children/daughter[@*] 选有任何元素的daughter子元素 /personData/children/daughter[@ranking="1"] 选有ranking属性值=1的daughter子元素 jQuery的语法: 使用方法: 使用Jquery的页面中引入Jquery的js即可: 主要语法: 1、元素引用 jquery通过$() 来引用元素(把它变成jquery对象),包括通过id,class,元素名,元素层级关系以及dom或者xpath等条件方法,返回的是一个jquery对象(是一种集合对象),不能直接调用dom定义的方法; 2、jQuery对象与dom对象的转换: 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用时一定要注意操作的是一个dom对象,还是一个jquery对象。 普通dom对象,可以通过$()方法转化为jQuery对象:$(document.getElementById("msg")) jquery对象转化为dom对象,只要从其集合中抽取某一项(索引): 如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。 看一个例子: $("#msg").html(); //JQUERY $("#msg")[0].innerHTML; //DOM $("#msg").eq(0)[0].innerHTML; //DOM $("#msg").get(0).innerHTML; //DOM 3、获取jQuery集合中的某一项: 可以通过eq,get(n)或者索引号,获取元素集合中的某一项,eq返回的是jquery对象;get(n) 和索引则返回dom元素对象。jquery与dom对象方法不同;比如获取第三个div的内容: $("div").eq(2).html();              //调用jquery对象的方法 $("div").get(2).innerHTML;       //调用dom的方法属性 4、在同一个函数中实现get和set操作 jQuery对象的很多方法,都同时实现get和set操作,比如 $("#msg").html(); //返回id为msg的元素节点的html内容。 $("#msg").html("new content"); //将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new 带有参数值,就表示设置,没有参数值,就是获取。 同理,有text方法;height方法;width方法;val方法(表单输入框的value值);click方法等等(对于事件方法,不带参是触发事件函数,带参是添加事件处理函数)。 $("input").val(");       //返回表单输入框的value值 $("input").val("test");       //将表单输入框的value值设为test $("#msg").click();       //触发id为msg的元素的单击事件 $("#msg").click(fn);       //为id为msg的元素单击事件添加函数 事件处理方法还有blur,focus,select,submit等等。 5、集合处理功能 对于jquery返回的集合内容,无需我们自己遍历循环处理,jquery提供了方便的方法,包括两种形式: (1) $("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]}) // 为索引分别为0,1,2的p元素分别设定不同的字体颜色。 $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]}) // 实现表格的隔行换色效果 each方法;i是集合中的索引号。 (2) $("p").click(function(){alert($(this).html())}) // 为每个p元素增加了click事件,单击某个p元素则弹出其内容 直接给所有元素添加处理函数。 6、扩展我们需要的功能: $.extend({ min: function(a, b){return a < b?a:b; }, max: function(a, b){return a > b?a:b; } }); //为jquery扩展了min,max两个方法 这样是全局扩展了,以后可以使用这两个扩展函数,通过“$.函数名”的方式调用: alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20)); 7、支持方法连写 即可以对一个jquery对象连续调用不同的方法: $("p").click(function(){alert($(this).html())}) .mouseover(function(){alert('mouse over event')}) .each(function(i){this.style.color=['#f00','#0f0','#00f'][i]}); 上例把对

相关的消息处理定义的很全面,都是在一句中进行的。 8、操作元素的样式: 主要包括以下几种方式: $("#msg").css("background"); //返回元素的背景颜色 $("#msg").css("background","#ccc") //设定元素背景为灰色 $("#msg").height(300); $("#msg").width("200"); //设定宽高 $("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式 $("#msg").addClass("select"); //为元素增加名称为select的class 类标示。 $("#msg").removeClass("select"); //删除元素名称为select的class $("#msg").toggleClass("select"); //如果存在(不存在)就删除(添加)名称为select的class 9、完善的事件处理功能: jQuery为我们提供了各种事件处理方法,无需在html元素上直接写事件,而可以为通过jquery获取的对象添加事件。如: $("#msg").click(function(){alert("good")})    //为元素添加 了单击事件 $("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})   //为三个不同的p元素单击事件分别设定不同的处理 jQuery中几个自定义事件: (1)hover(fn1, fn2) 模仿悬停事件的方法; (2) ready(fn) DOM载入就绪时可以查询及操作时绑定一个要执行的函数;(3)toggle(evenFn, oddFn) 点击时不断切换调用的函数;(4)trigger(eventtype) 在每一个匹配的元素上触发某类事件;(5)bind unbind 参数是eventtype,fn,从每个匹配元素中添加或者删除绑定的事件。 10、几个实用的特效功能 toggle()和slidetoggle()方法提供了状态切换功能;toggle()方法包括了hide()和show()方法;slideToggle()方法包括了slideDown()和slideUP方法。 11、实用的jQuery方法: $.browser.浏览器类型,包括 safari opera msie, mozilla 如检测是否ie, 可以用: ie:$.browser.isie 如果是ie浏览器,则返回true; $.each(obj,fn): 通用的迭代函数,可用于近似迭代对象和数组,如: $.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); }); 参数一是操作对象,参数而是操作内容,或者函数。上例中i是index,n是值;相当于: var tempArr=[0,1,2]; for(var i=0;i 0 ? i + 1 : null; }); tempArr内容为:[2,3] $.merge(arr1, arr2): 合并两个数组并删除其中重复项目 $.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4] $.trim(str):删除字符串两端的空白字符。 $.trim(" hello, how are you? "); //返回"hello,how are you? " 12、解决自定义方法或其他类库与jQuery的冲突 有时候其它类库或者js代码已经使用了$定义,那么我们可以: 使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用 Jquery的时候只要将所有的$换成jQuery即可,如原来引用对象方法$("#msg")改为jQuery("#msg")。 比如: jQuery.noConflict(); // 开始使用jQuery jQuery("div p").hide(); // 使用其他库的 $() $("content").style.display = 'none'; jQuery 库的深入 内核 $(elements) 将DOM元素(一个或多个)封装为jQuery对象;它也接受XML文档或者window对象为有效参数。 $(expr, context) :接收一个包含css或者基本Xpath选择符的字符串,去匹配一组元组或者HTML内容。jQuery的核心功能有赖于此函数。最基本的用法就是向它传递一个表达式(通常由CSS或XPath选择符组成),然后根据这个表达式来查询所有匹配的元素;默认下$( ) 是查询当前HTML文档中所有的DOM元素。返回一个jQuery对象。例如,查找表单中所有type为radio的input元素: $("input:radio", document.forms[0]) $(fn) :是$(document).ready()的简写方式,允许你绑定一个在DOM文档载入完成后执行的函数。这个函数的作用如同$(document).ready()一样,只不过用这个函数时,需要把页面中所有其他的$()操作符都包装到其中来。DOM就绪时,执行其中的函数。 $(html): 根据提供的原始HTML标记字符串,动态创建由jQuery对象包装的DOM元素,返回一个jQuery;例子: $("

Hello

").appendTo("#body") 动态创建一个div元素及内容,插入到ID为body的元素中。函数内部是创建了一个临时元素,把元素的innerHTML属性标记为给定字符串。 $.extend(prop) :扩展jQuery对象,是jQuery实现继承的方式。比如像jQuery名空间添加两个函数。 $.noConflict():运行这个函数将变量$的控制权让渡给第一个实现它的那个库。这样可以确保jQuery不会与其他库的$对象发生冲突。在运行这个函数后,就只能使用iQuery变量访问iQuery对象。例如,在要用到$("div p")的地方,就必须换成iQuery("div p")。 each(fn): 以每一个匹配的元素作为上下文来执行一个函数。这意味着,每次执行传递进来的函数时, 函数中的this关键字都指向一个不同的元素(每次都是一个不同的匹配元素)。而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数。例子: $("img").each(function(i){ this.src = "test" + i + ".jpg"; }); eq(pos) :将匹配的元素集合缩减为一个元素。这个元素在匹配元素集合中的位置变为0,而集合长度变成1。参数是哪个元素在集合中的index,注意它返回的是jQuery对象,而不是DOM对象,跟直接下标访问是不同的。 get(num) :取得其中一个匹配的元素。 num表示取得第几个匹配的元素。与直接通过index访问的效果一样,返回一个DOM的Element对象; gt(pos) :将匹配的元素集合缩减为给定位置之后的所有元素。这个元素在匹配元素集合中的位置变为0,而长度变成1。 index(subject): 搜索与参数表示的对象匹配的元素,并返回相应元素的索引值。如果找到了匹配的元素,从0开始返回;如果没有找到匹配的元素,返回-1。返回类型 Number length :当前匹配的元素数量。返回Number,是一个元素; lt(pos) :将匹配的元素集合缩减为给定位置之前的所有元素。这个元素在匹配元素集合中的位置变为0,而长度变成1。与gt相反,它返回的是index之前的。 size() :当前匹配的元素数量。 CSS部分: css(key, value):在所有匹配元素中,设置一个样式属性的值。返回的是jQuery对象;key (String): 要设置的样式属性名称;value (Object): 要设置的样式属性的值。例如: $("p").css("color","red"); $("p").css("left",30); css(name) :访问第一个匹配元素的样式属性。使用这个方法可以很容易地取得第一个匹配元素的样式属性的值。返回值string;例如 $("p").css("color"); 返回值是“red” css(properties) :把一个“名/值对”对象设置为所有匹配元素的样式属性。 这是一种在所有匹配的元素上设置大量样式属性的最佳方式。返回jQuery对象。例如: 为所有p元素设置color和background样式属性。 $("p").css({ color: "red", background: "blue" }); 参数properties (Map): 要设置为样式属性的名/值对对象 height(val):为每个匹配的元素设置CSS高度(width)属性的值。如果没有明确指定单位(如:em或%),使用px;参数val是一个string或者Number类型;例:$("p").height(20); width(val):同上 height() 或者 width() :不带参数,是获取值。 DOM部分: Attributes属性: addClass(class):为每个匹配的元素添加指定的类名标记符。例如:$("p").addClass("selected");如果HTML中有代码:

Hello

;则执行后,变为: [

Hello

] attr(key, fn):为所有匹配的元素设置一个计算的属性值。不提供值,而是提供一个函数,由这个函数计算的值作为属性值。 attr(key, value):为所有匹配的元素设置一个属性值。可以是由${规则}表达式提供的计算值,见示例2。注意,不能在IE中设置input元素的name属性。可以使用$(html)或.append(html)或.html(html)动态地创建包含name属性的input元素。 实例2: $("img").attr("title", "${this.src}"); attr(name) :取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。 attr(properties):名/值对形式的设置值方式,参数properties (Map): 作为属性的“名/值对”对象;例子:$("img").attr({ src: "test.jpg", alt: "Test Image" }); html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。例子:$("div").html(); 如果有值参数,则相当于设置匹配元素的HTML内容了。 removeAttr(name) :从每一个匹配的元素中删除一个属性。name是一个字符串参数,是要删除的属性名字。 removeClass(class):从所有匹配的元素中删除全部或者指定的类。参数class可选,是要删除的类名,如未指定,全部删除所有匹配元素的class属性。 text(val) :设置所有匹配元素的文本内容。这个函数与html()函数具有同样的效果。它跟html(val)的操作一样的。 toggleClass(class): 如果存在(不存在)就删除(添加)一个类。无参相当于删除,有参相当于添加一个class属性到匹配的元素。例如: $("p").toggleClass("selected") val(val) :设置每一个匹配元素的值。如果没有val参数,则是获取匹配元素的值。这个值对Form操作十分重要。例 $("input").val("test"); 如果HTML源码为 执行后变为: ManiPulation 操作: after(content):在每个匹配的元素之后插入内容。例如HTML源码为:

I would like to say:

;运行$("p").after("Hello"); 结果得到:

I would like to say:

Hello append(content) :向每个匹配的元素内部追加内容。 这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似。例如:

I would like to say:

;执行的代码为:$("p").append("Hello"); 得到的结果:

I would like to say: Hello

示例: 向所有段落中追加一个jQuery对象(类似于一个DOM元素数组)。 $("p").append( $("b") ); HTML 代码:

I would like to say:

Hello,则结果为:

I would like to say: Hello

appendTo(expr) :把所有匹配的元素追加到另一个、指定的元素元素集合中。实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。 返回值:jQuery;例子: 把所有段落追加到ID值为foo的元素中。 $("p").appendTo("#foo"); HTML 代码:

I would like to say:

结果:

I would like to say:

before(content) :在每个匹配的元素之前插入内容。插入在已有innerHtml内容之前; clone(deep) :克隆匹配的DOM元素并且选中这些克隆的副本。 在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。参数Boolean,表示是否递归克隆这个元素的子元素。 empty() :删除匹配的元素集合中所有的子节点。 insertAfter(expr) :把所有匹配的元素插入到另一个、指定的元素元素集合的后面。 实际上,使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是把B插入到A后面,而是把A插入到B后面。同样有insertBefore(expr), 跟after, before函数对对应。 prepend(content) :向每个匹配的元素内部前置内容。 这是向所有匹配元素内部的开始处插入内容的最佳方式。有点before函数的效果。 prependTo(expr):把所有匹配的元素前置到另一个、指定的元素元素集合中。实际上,使用这个方法是颠倒了常规的$(A).prepend(B)的操作,即不是把B前置到A中,而是把A前置到B中。 remove(expr) :从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。 可以通过一个可选的表达式对要删除的元素进行筛选。 wrap(elem) :把所有匹配的元素用其他元素的结构化标记包装起来。这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。当HTML标记代码中的元素包含文本时无法使用这个函数。因此,如果要添加文本应该在包装完成之后再行添加。 HTML 代码:

Test Paragraph.

执行:$("p").wrap( document.getElementById('content') ); 结果:

Test Paragraph.

同样还有一个warp函数,不过它包装的对象不是getElementById获取的元素,而是直接HTML字符串; Traversing 穿越: add(elements ): 把一个或多个DOM元素添加到匹配的元素集合中。 这个函数用于把一个DOM元素集合添加到一个jQuery对象中。例子: $("p").add([document.getElementById("a"), document.getElementById("b")]) 类似的: add(html) :添加的是HTML字符串 add(expr):把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。如$(“p”).add(“div”) children(expr) :取得一个包含匹配的元素集合中每一个元素的所有唯一子元素的元素集合。 可以用可选的表达式进行筛选。 找到每个div的所有子元素中带有类名为selected的元素。$("div").children(".selected") 注意了:每个匹配正则式中,如果为“字符串”,那是对元素名匹配,如果为“#字符串”,那是对元素的id匹配。而带有点的“.字符串”表示对class属性的匹配。 contains(str) :把元素集合筛选为包含指定文本(区分大小写)的元素。缩小匹配结果集用的,比较有用。返回的是一个jQuery对象; end() :结束最近的“破坏性”操作,把匹配的元素列表回复到前一个状态。在调用end函数后,匹配的元素列表会回复到上一个操作之前的匹配元素列表状态。如果前面的操作(对元素列表的状态)没有破坏性,则什么也不改变。 $("p").find("span").end(); 本来是查找p状态,经过find函数,到达了在p元素下子元素查找span的状态,经过end,又回到查找p状态。 filter(filter):从匹配的元素集合中删除那些不符合指定的筛选条件的元素(即返回与指定表达式匹配的元素集合)。这个方法用于缩小搜索的范围。比如,删除所有拥有一个ol子元素的元素:$("p").filter(function(index) { return $("ol", this).length == 0; }) filter(expression):从所有匹配的元素集合中删除那些与指定的表达式(可以是多个)不匹配的元素(即返回与指定表达式匹配的元素集合)。这个方法用于缩小匹配的范围。使用表达式字符串数组可以实现一次完成多重筛选的效果。 例子: 选择所有段落并删除那些类名不是selected的元素,但不删除第一个元素。$("p").filter([".selected", ":first"]) find(expr) :搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择符语法或基本的XPath语法来写。 is(expr) :用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合这个表达式,或者表达式是无效的,都返回false。其中的表达式可以使用filter(String)函数,因此filter()函数原有的规则在这里也适用;例如:检查一个input元素的父元素,是否是表单元素: $("input[@type='checkbox']").parent().is("form") next(expr) :取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素。 可以用一个可选的表达式进行筛选。例如:$("p").next(".selected") 找到每个p元素后边类名是selected的元素。注意它返回的也是一个jQuery是一个元素集合,而非独立元素。 not(elems) :从匹配的元素集合中删除所有符合条件的元素集合。这个函数用于从jQuery对象中删除一个或多个元素。 not(expr) :同上不过参数是表达式,可以是元素名,元素类名或者元素id not(el) :从匹配的元素集合中删除指定的元素。这个方法用于从一个jQuery对象中删除一个元素。它删除的是一个元素:例子:$("p").not( $("#selected")[0] ) parent(expr) :取得一个包含着所有匹配元素的唯一父元素的元素集合。 可以通过一个可选的表达式进行筛选。例如 找到每个段落的父元素:$("p").parent() parents(expr) :取得一个包含着所有匹配元素的唯一祖先元素的元素集合(不包含根元素)。 可以通过一个可选的表达式进行筛选。 prev(expr) :取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。可以用一个可选的表达式进行筛选。 这个函数只返回前一个紧邻的同辈元素,而不是前面所有的同辈元素 siblings(expr) :取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。 可以用可选的表达式进行筛选。 Event事件 (略) Effects 效果 animate fadeIn; hide show 隐藏显示元素。toggle切换元素的可见效果。 JavaScrpt 脚本 $.browser 包含从navigator.userAgent属性中读取的用户代理标签(代理检测)。 例子:if($.browser.safari) { $( function() { alert("this is safari!"); } ); } 如果当前浏览器时safar,那么输出一个alert框告知用户。 $.each(obj, fn) :一个通用的迭代函数,可用于近似地迭代对象和数组。 这个函数与$().each()不同,$().each()是专门用于迭代和执行jQuery对象的函数。而这个函数可以用于迭代任何对象和数组。 这个函数的回调中包含两个参数:第一个是key(对象)或index(数组),第二个是值。 返回值:Object;参数: obj (Object): 要重复迭代的对象或数组 fn (Function): 要在每个对象中执行的函数 例子: $.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); }); 看调用方式; $.extend(target,prop1,propN) :用一个或多个其他对象来扩展一个对象,返回这个被扩展的对象。这是简化继承的主要工具。参数: target (Object): 要扩展的对象 prop1 (Object): 要与第一个对象合并的对象 propN (Object): (可选) 更多要与第一个对象合并的对象 $.grep(array,fn,inv) :使用筛选函数,从一个数组中筛选项目。 其中筛选函数必须传递两个参数:数组中的当前项目和数组中项目的索引。如果要保持数组中的项目,这个函数必须返回true;如果返回false,就会删除项目。 返回值:Array 参数: array (Array): 要在其中查找项目的数组 fn (Function): 处理数组项目的函数 inv (Boolean): 反转选项 - 选择相反的筛选结果 $.map(array, fn) :把一个数组中的项目转换到另一个数组中。作为参数的转换函数会被每个数组项目调用,而且会给这个转换函数传递一个表示要转换的项目的参数。 转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组--表示对原始数组项目的扩展模式。 返回值:Array 参数: array (Array): 要转换的数组 fn (Function): 处理数组项目的函数 $.merge(first,second) :合并两个数组,删除其中重复的项目。 得到的新数组是:第一个数组中的所有项目,加上第二个数组中唯一的(不与第一个数组中任何项目相同的)项目。 返回值:Array 参数: first (Array): 要合并的第一个数组 second (Array): 要合并的第二个数组 $.trim(str) :删除字符串两端的空白字符。 返回值:String 参数: str (String): 要删除空白字符的字符串 AJAX 略 Plugins 插件集合

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

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

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

下载文档

相关文档