资源描述
什么是Ajax?
Asynchronous JavaScript+XML,即异步JavaScript+XML。
Ajax主要包含哪四种技术?各种技术在Ajax中主要起什么作用?
JavaScript: 通用的脚本语言,定义工作的工作流和业务逻辑。CSS: 为Web页面元素提供了一种可重用的可视化的定义方法。DOM: 以一种可以使用JavaScript操作的可编程对象展现出Web页面的结构。XMLHttpRequest: 用来与服务器进行异步通信,在用户工作时,提交用户的请求并获取最新数据。
为什么需要Ajax?(Ajax的主要优点是什么?)
提供Web页面新奇古怪的、交互性强的界面,可以发送异步请求,这大大的延长了Web页面的寿命。通过与服务器异步交互,无需打断用户正在界面上执行的操作,为用户带了真正的价值。能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变过的信息。传统的Web浏览技术已无法胜任高层次网络访问需求,新的方法能提供给用户更好的体验。Ajax只需要使用绝大多数计算机上现有的技术,就能完成任务,改善用户感受。
Ajax提高用户体验基于什么理念?
为了减少网络延迟把远程调用变为本地调用,采用异步交互等。
Ajax的四个基本原则
1、 浏览器中的是应用而不是内容 2、服务器交付的是数据而不是内容 3、用户交互变得流畅而连续4、有纪律严肃的编程
JavaScript语言的特点是?
JavaScript是弱类型、解释型和通用的脚本语言。JavaScript是一种轻量级的、解释性的程序设计语言,而且具备一定面向对象的能力。JavaScript与操作系统无关,它依赖JavaScript的解释引擎。浏览器通过内嵌JavaScript的解释引擎从而获得了对JavaScript的处理能力。通过在网页中嵌入<script>标签,将JavaScript脚本添加到网页中,使得网页不再是简单的静态HTML,而是包含了控制浏览器的程序、动态创建HTML内容和与用户交互的程序,即动态HTML(DHTML)。
Ajax技术的内涵是什么?
JavaScript是Ajax工具箱中的核心内涵。Ajax应用程序完全下载到客户端的内存中,由数据、表现和程序逻辑三者组成, JavaScript就是用来实现逻辑的工具。
CSS样式定义包括哪两部分?
选择器和样式声明
JavaScript的常用对象
保存多个数据元素的容器,Array对象(数组):
添加、删除和替换数组元素:对数组最常用的操作,就是添加、删除或者替换数组元素。添加数组元素可以使用unshift方法或者push方法。使用数组的unshift方法可以将一个新的元素添加到数组的开头,数组中所有原有元素都往后移动一位,数组长度增加1。unshift方法的使用示例如下所示。
• var a = [1,2,3,4,5];
• a.unshift(0); //a = [0,1,2,3,4,5]
• var b = new Array('abc','test');
• b.unshift('yes');
• b.unshift(32); //b = [32,'yes','abc','test']
利用Array对象的slice方法,可以得到数组的一个片段,或者说子数组。它的两个参数指定了要返回的数组片段的起始点。数组片段由slice方法第一个参数指定位置开始,到第二个参数指定位置结束的所有元素组成,但不包含第二个参数指定位置的元素。如果省略掉第二个参数,则会返回从第一个参数指定位置的元素到数组结束的所有元素。
利用Array对象的reverse方法可以将数组所有元素反转,示例如下所示。
var a = [1,2,3,4,5];
a.reverse(); // a = [5,4,3,2,1]
将数组转换成字符串
var a = [1,2,3,4,5];
a.join(); //返回'1,2,3,4,5'
a.join('-'); //返回'1-2-3-4-5'
a.join('**'); //返回'1**2**3**4**5'
利用Array对象的sort方法可以对数组的元素进行排序。当sort方法不带参数执行时,在排序的时候会将数组元素转换成字符串,并按照字符串首个字符的ASCII码从小到大排列,如果数组含有未定义的元素,则这些元素会被放到数组末尾。一个使用sort方法排序的例子如下所示。
var a = ['d','csd',32,1,'ef1','2as'];
a.sort(); //返回[1,'2as',32,'csd','d','ef1']
字符串对象(String)
String对象也提供了substring方法来截取一段字符串的片段。substring方法可以接受两个参数来指定截取范围,当第二个参数被省略时,默认截取到字符串的结尾。使用substring方法截取字符串的例子如下所示。
var a = 'I love ajax';
var b = a.substring(2,4); // b = 'lo'
var c = a.substring(2);// c = 'love ajax'
使用String对象的replace方法可以将字符串中指定的内容替换成新的内容并返回一个新的字符串。
var a = 'I love ajax';
var b = a.replace(' ','_'); // b = 'I_love_ajax'
var c = a.replace('a','o'); // c = 'I love ojox'
var d = a.replace('ajax','AJAX'); // d = 'I love AJAX'
// a = 'I love ajax'
String对象提供了两个方法来作大小写转换的操作:toLowerCase方法和toUpperCase方法。toLowerCase方法将字符串中的所有大写字母转换为小写字母,toUpperCase则将字符串中所有的小写字母转换为大写字母。
var a = 'I love ajax';
var b = a.toUpperCase();
var c = a.toLowerCase();
将字符串转换成数组
使用split方法可以将字符串根据指定的子字符串分割成若干元素,并将这些元素按照顺序在字符串中的先后排列并返回一个包含这些元素的数组。
var a = '00-12-13-DF-3A';
var b = a.split('-'); // b = ['00','12','13','DF','3A']
var c = 'I love ajax';
var d = c.split(' '); // d = ['I','love','ajax']
var e = 'a=1&b=2&c=3'.split('&'); // e = ['a=1','b=2','c=3']
正则表达式:RegExp对象
创建一个正则表达式,可以使用RegExp构造函数和直接量两种方式。就像字符串直接量被包含在一对引号中一样,正则表达式直接量被包含在一对斜线(/)中。例如,创建一个正则表达式的方法如下所示。
var reg1 = new RegExp('\\d+');
var reg2 = new RegExp('^[1-9a-zA-Z]*$');
var reg3 = /\d+/;
var reg4 = /^[1-9a-zA-Z]*$/;
每个RegExp对象都有5个属性。属性source是一个只读的字符串,它存放的是正则表达式的文本,示例代码如下所示。
var reg = new RegExp('^[1-9a-zA-Z]*$','im');
var text = reg.source; // text = '^[1-9a-zA-Z]*$'
search方法以正则表达式为参数,返回第一个与之匹配的子字符串的开始位置,如果没有任何子字符串与之匹配,则返回-1。search方法的使用示例如下所示。
var str = 'I love JavaScript and Ajax';
alert(str.search(/l.*e/)); // 匹配'love',返回2
alert(str.search(/\s/)); // 匹配'I'和'love'之间的空格,返回1
alert(str.search(/.(?:Script)/)); // 匹配Script前面的a,返回10
常用正则表达式
• 匹配中文字符:[\u4e00-\u9fa5]
• 匹配双字节字符(包括汉字):[^\x00-\xff]
• 匹配HTML标记:/<(.*)>.*<\/\1>|<(.*) \/>/
• 匹配Email地址:/ ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/i
• 匹配URL地址:/ ^http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?$/i
• 匹配字符串收尾的空格:/(^\s*)|(\s*$)/
• 匹配颜色代码:/\#[a-fA-F0-9]{6}/
• 匹配身份证号码:/^\d{15}(\d{2}[xX0-9])?$/
• 匹配电话号码:/^((\(\d{3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}$/
• 匹配整数:/^(\+|\-)?[1-9]\d*$/
• 匹配浮点数:/^(\+|\-)?(0\.|[1-9][0-9]*\.?)([0-9]*[1-9])$/
日期和时间:Date对象
创建一个Date对象:var now = new Date();
读取和设置日期及时间的各个部分:
• getFullYear():返回对象中的年份部分,用四位数表示。
• getMonth():返回对象中的月份部分(从0开始计算)。
• getDate():返回对象所代表的一月中的第几天。
• getDay():返回对象所代表的一周中的第几天。
• getHours():返回对象中的小时部分。
• getMinutes():返回对象中的分钟部分。
• getSeconds():返回对象中的秒部分。
• getMilliseconds():返回对象中的毫秒部分。
• getTime():返回对象的内部毫秒表示。
• getTimezoneOffset():返回对象所表示的日期的本地时间和UTC时间之间的时间差,以分钟为单位。
复杂的数学运算:Math对象
• 小数的取整:使用Math对象的ceil和floor方法。ceil方法提供了对一个浮点数的上舍入操作,即返回的是一个大于或者等于原数的整数。floor方法提供了对一个浮点数的下舍入操作,即返回的是一个小于或者等于原数的整数。Math.方法名(参数…);
• 得到随机数:Math.random()总是返回一个介于0到1之间的随机数,
• 幂运算:使用Math对象的pow方法。该方法接受2个参数,第一个参数为底数,第二个参数为幂数。
操作浏览器窗口:window对象
• 使用对话框:JavaScript中的对话框有三种形式,分别对应着window对象的3个方法:alert、confirm和prompt。
• 改变窗口状态栏的信息:window对象提供了一个可读写的属性status,使得JavaScript程序可以控制浏览器窗口状态栏所显示的信息,window.status = 'I love Ajax';
• 延迟执行和定时执行:setTimeout方法可以让某段程序代码、某个函数或者某个方法在指定的时间延迟后执行。该方法接受2个参数,第一个参数为需要延迟执行的代码段、函数或者方法,第二个参数则表示了延迟的时间长度,单位为毫秒。
• window对象的history属性保存浏览器的历史记录:它提供了go、back和forward三种方法对历史记录进行操作。go方法接受一个正整数或者负整数作为参数,其语法格式如下所示。history.go(n);
• 控制窗口的大小和位置: resizeTo方法、resizeBy方法、moveTo方法、moveBy方法
操作HTML文档:document对象
• 文档的输出:document对象提供了write方法使得JavaScript可以附加文本到当前打开的文档中,
• 文档的标题:document对象的title属性描述了位于HTML文档中<title>和</title>中间的内容,即文档的标题,JavaScript可以读取和设置这个值。
• 文档的图像:document对象的images属性是一个数组,保存了对当前HTML文档中所有图像的引用。在下面的演示程序中,通过遍历images数组来给文档中所有的图片加上边框。
• 文档的超链接:同images属性类似,links属性也是一个数组,其保存了文档中所有超链接的引用。
• 文档的表单:document对象的forms属性是一个数组,保存了当前文档中所有表单的引用。表单是HTML中最重要的元素之一,是用户与服务器进行数据交互的重要工具。
• 在网页上显示自动更新的日期和时间:通过操作Date对象及利用setInterval方法,来制作在网页上自动更新的日期和时间。
DOM节点操作的基本属性和方法。
• 根据id属性引用节点:通过document对象的getElementById方法来查找拥有指定id属性值的节点。
• 根据name属性引用节点:通过docment对象的getElementsByName方法可以取得文档中所有具有指定name属性的节点的集合,该方法返回的是一个数组。
• 根据标签名引用节点:Node对象提供了getElementsByTagName方法来查找所有标签名与给定参数一致的下属节点,该方法返回一个数组。
• 引用父节点:Node对象提供了parentNode属性来引用当前节点的父节点。
• 引用子节点:Node对象提供了3个属性来引用其直属子节点,分别是childNodes、firstChild和lastChild。childNodes属性来引用其所有的直属子节点。firstChild属性等于childNodes返回的元素集合中的第一个元素。lastChild属性等于childNodes返回的元素集合中的最后一个元素。
• 引用相邻的节点:Node对象的previousSibling和nextSibling属性保存了节点的上一个和下一个兄弟节点的引用。
• 创建元素节点:使用document对象的createElement方法。该方法接受一个标识需要创建的元素的标签名的字符串参数,返回对被创建的节点的引用。
• 创建文本节点:使用createTextNode方法可以创建一个文本节点,该方法接受一个字符串作为创建的文本节点的文本值。示例代码如下。document.createTextNode(‘It is a text node’);
• 添加节点:Node对象提供了appendChild方法来将程序创建的节点,添加到父节点的直属子节点列表的末尾。该方法也可作用于已经存在于DOM树中的节点,执行方法后会改变节点在DOM树中的位置,而不是插入一个新的节点。
• 插入子节点:Node对象提供了insertBefore方法来将新节点插入到指定子节点的前面,其语法格式如下所示。parentNode.insertBefore(newNode,childNode);
• 替换子节点:Node对象提供了replaceChild方法来使用一个新的节点替换一个子节点,其语法格式如下所示。parentNode.replaceChild(newNode,childNode);
• 复制节点:Node对象提供了cloneNode方法来得到Node对象的一个副本。cloneNode方法接受一个布尔值参数,来标识返回的节点副本中是否包含原节点的子节点。当参数为true时,则包含子节点;当参数为false时,则不包含子节点。
• 删除子节点:Node对象提供了removeChild方法来删除一个直属子节点,该方法接受一个参数,为需要参数的子节点的引用。parentNode.removeChild(childNode);
• 读取节点属性:使用Node对象的getAttribute方法可以得到节点的某一属性的值,该方法接受一个属性名作为参数,返回指定属性的值。例如有一a元素。<a id=”link” href=””>Robin Chen</a>
• 添加和修改属性节点:当需要添加或者修改一个属性节点时,可以使用Node对象的setAttribute方法。node.setAttribute(attName,attValue);
• 删除属性节点:当需要删除一个节点的某个属性时,可以使用removeAttribute方法。removeAttribute方法接受一个参数,表明了需要删除的属性的名称。其基本语法格式如下所示。node.removeAttribute(attName);
• 获取和设置元素的CSS类:通过设置元素的class属性,可以为元素指定一个css类来设置元素的样式。
• 获取和设置元素样式:DOM为Node对象定义了style属性,以此作为对CSS样式操作的接口。元素的style属性是一个对象,保存了元素的CSS样式信息。例如node.style.backgroundColor保存了背景色的信息,node.style.color保存了文字颜色的信息。
• Dom中常用的GUI事件处理函数属性:Onmouseover、onmouseout、onmousemove、oncilck、onkeypress、onfouse、onblur
• 注销事件处理程序:当不再需要一个事件处理程序时,可以将其注销。使用节点属性或者对象属性注册的事件处理程序,可以通过将对象的相应属性设置为null来注销该事件处理程序。使用attachEvent或addEventListener注册的事件处理程序,可以使用对应的detachEvent或removeEventListener来注销。
XMLHttpRequest对象有哪些属性和方法?
停止当前请求:abort();把http请求的所有响应作为键值对返回:getRequestHeader();建立对服务器的调用:open(“method”,”url”);向服务器发送请求:send(content);把制定的首部设置为所提供的值:setRequestHeader(string header, string value);改变状态时的状态触发器:onreadystatechange;请求状态:readystate;服务器响应:responseTest;等等。
FireBug中一些常用的调试命令。
1.console.log提供在控制台中输出信息的基本方法 2.console.dir直接将对象或html元素的详细信息输出到firebug中 3.console.time和console.timeEnd添加到一段代码的开头和结尾,计算并输出执行这段代码所花费的时间 4.console.profile和console.profileEnd 类似于3中的方法,只是输出的是对包含的代码段的性能测试数据5.console.count统计自身被执行的次数,接受一个字符串参数作为输出到控制台的信息的标题。
MVC模型的含义。
模型-视图-控制器(MVC)描述的是将程序和用户交互的部分与其他部分很好地分离的一种方式。视图和模型不应该相互通信,始终通过控制器来经行,控制器可以看做一个薄的边界层,允许视图和模型通过它来通信,它使得在代码库中实现了清晰的职责分离,提高了代码的灵活性和可维护性。这样,模型和视图可以保持松散耦合,即他们都不需要了解对方的内部实现,
MVC黄金定律
为什么分离逻辑和视图?具体有哪些措施?
为用户提供可视的界面,以便触发事件,事件用来与控制器对话。需要在模型改变时作出相应,更新自己,通常需要再次通过控制器进行通信。1、可以采用编程方式添加事件。2、使用css间接添加事件。3、绑定事件处理函数代码。
在Ajax应用中,服务器有哪两个角色?
1、将应用交付到浏览器;2、与客户端对话,处理查询并提供请求需要的数据;
流行的实现语言有哪些?
PHP、Java、ASP、ASP.NET等
与用户交互数据时,有哪四种类型?各有什么优缺点?
仅限于客户端的交互:指用户交互由已加载到浏览器中的脚本来处理的交互。不需要任何Web服务器的资源,这对于提高应用的响应速度和降低服务器的负载有好处。
以内容为中心的交互:HTML内容仍然有服务器生成,然后发送到嵌入到主要Web页面的IFrame,涉及到与后台通信。客户端的代码负责放置IFrame和构造必要的URL来调用内容,它只需要对应用业务逻辑的有限了解,客户端和表现层的耦合比较松散,因为大部分的功能仍然加载在服务器端。
以脚本为中心的交互:依靠加载的脚本,使用多种方式修改特定的页面。组成客户层应用的代码可以在运行时有效地扩展。网络活动转移到了后台,消除了可见的闪烁感。这种模式导致了层间相对紧密地耦合,服务器生成的代码需要了解客户端API调用的细节。
以数据为中心的交互:服务器提供纯数据流,由自己的客户端代码而不是JavaScript来解析,使用XML数据,使用JSON数据,使用XSLT
Json与XML相比有什么优缺点?
JSON,优点:非冗长性、解析方便、结构简单。不足:JSON没有像XML那样的命名空间机制,这样在不同上下文的相同信息段混合在一起时,可能会给解析带来一定的麻烦。同时JSON的创建和验证过程跟XML相比,会稍微麻烦一些,
在JavaScript如何读取和生成JSON
在javascript中读取JSON数据的关键是eval()方法的使用,eval()方法接受一个字符串作为参数,他会将该字符串作为javascript语句,并调用javascript解析器来运行该语句,然后将语句运行的结果当作返回值返回,由于JSON的基本结构实际上就是javascript中的对象和数据,所以将JSON格式的字符串作为参数传递给eval()方法时,返回的就是包含了相应数据的对象或者数据。而且javascript中的对象或数组都可以很方便的转化JSON格式的字符串,以提供给程序进一步处理,例如传递给后端处理程序等,这样,就可以生成JSON.
公有属性和私有属性定义的区别(this作用域)。
• 在类中通过this指针添加的属性,都是公有(public)属性。公有属性指可以被外部访问的属性,如下所示。
var someone = new People(“Susan”,”female”);
var name = someone.name; //读取name属性
someone.name = “Lily”; //写入name属性
• 在私有属性指的是只能在对象内部被访问和操作,而不允许外部访问的属性
JavaScript是如何实现继承的?包括构造函数和原型的继承。(继承体系和具体实现)
• 对象冒充:是指一个对象冒充另外一个对象来执行其他对象的方法,或者说是一个对象将另外一个对象的方法当作自己的方法来执行。JavaScript提供了call和apply两个方法来实现这种机制。call和apply方法所实现的功能是一样的,只是参数形式不同,其语法如下所示。
functionName.call(object,argument1,argument2,argument3,…);
functionName.apply(object,[argument1,argument2,…]);
• 封装继承方法:子类不仅在构造函数中调用了父类的构造函数,而且可以对父类的原型对象作出处理,这可以使得定义在父类原型对象中的属性和方法可以被继承
解决浏览器不一致的两种模式是什么?
跨浏览器不一致:Façade和Adapter模式
Observer、Command、singleton模式的含义。
管理事件处理函数:Observer模式,职责被适当的分配到事件源和事件处理函数;
重用用户操作处理函数:Command模式,需要用户几个途径触发相同的操作。
保持对资源的唯一引用:Singleton模式,确保只能从一个地方访问特殊的资源。
保护浏览器端的安全性有哪些策略?
引入“来源服务器”策略,Ajax应用不能读取或写入本地文件系统中,除了他自身所在的Web域,他也不能创建任何其他Web域的网络连接,程序生成IFrame能够加载来自其他域的页面,但两个域的脚本不能相互交互。
使用远程服务进行通信有哪两种实现方案?
1、 开发额外的服务器代码 2、仅在客户端完成
IE和Mozilla的安全模型有什么差异?
IE的安全系统是基于区域的概念,Mozilla浏览器的安全模型是基于权限的,用户的应用代码必需请求权限。IE会自动记住第一次的决定。Mozilla授予的权限仅仅保持一段时间,与请求权限的函数持续时间相同,这样用户操作会被对话框打断,安全性和可用性发生了冲突。
保护机密数据的方法有哪些?各有什么优缺点?
使用安全HTTP,对通信流量进行加密。在普通HTTP上使用JavaScript加密数据,1.公钥和私钥2.JavaScript实现。MD5,1、每次采用MD5加密一段数据总会产生相同的结果2、两个不同的资源几乎不可能生成同样的MD5摘要3、不容易被逆推。
如何保护服务器端的安全性?
设计安全的Web层,屏幕搜刮器与Ajax、限制对Web数据的访问,过滤HTTP请求
,使用HTTP会话,使用加密的HTTP首部信息
性能的两个衡量指标是什么?
运行速度的快慢和需要消耗的资源的多少,资源主要包括占用的内存和CPU。
性能分析的概念及方法有哪些?
JavaScript的执行速度,指该程序最慢的子系统的执行速度。用来测量时间的最简单的工具是系统时钟,JavaSript通过Date对象提供对系统时钟的访问。使用venkman性能分析器。
优化Ajax的执行速度的方法
1、优化for循环 2、将DOM节点附加到文档 3、尽量减少点号操作符的使用
内存泄露的概念及JavaScript产生泄漏的原因是什么?解决的办法是什么?
内存泄露:申请了内存并在工作完成后没有释放。产生泄露的原因:使用完变量忘记解除引用。解决办法:1、打破循环引用2、移除DOM元素3、针对IE的更多特殊考虑因素,手工切断、循环引用。
主流框架有哪些?
YUI、Dojo、mooTools、Prototype、JQuery
Prototype框架中典型方法
使用$方法代替document.getElementByid、使用$$方法获得元素引用、使用Try.these尝试运行多个函数、使用$F方法来获得表单元素的值等等..
JQuery的优点是什么?
程序员:简化javascript和ajax编程,能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度。
用户:改善了页面视觉效果,增强了与页面的交互性,体验更绚丽的网页物资。
JQuery专题(编程题)
<script type="text/javascript" src="./script/jquery.js"></script> //加载架包
页面载入:.jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数,那就是ready $(document).ready(function() {}) 可简写为:$(function(){});
核心函数:
n $(expression,[context]),接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素,jQuery 的核心功能都是通过这个函数实现的
n $(html),根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 DOM 元素
n $(elements),将一个或多个DOM元素转化为jQuery对象 注意是jQuery对象,而不是DOM对象。如果我想得到DOM对象呢?很简单,只需在其后跟一个索引值(如[0])—因为它得到的是一个对象数组,即可得到DOM对象。然后就可以使用innerHTML、innerText等DHTML方法和属性了。
JQuery对象访问:
n each(callback) :以每一个匹配的元素作为上下文来执行一个函数 。
n size() :jQuery 对象中元素的个数
<img src="test1.jpg"/> <img src="test2.jpg"/> $("img").size();
n get() :取得所有匹配的 DOM 元素集合
<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").get().reverse(); get(index) :取得其中一个匹配的元素
$("img").get(0);
n index(subject) :搜索与参数表示的对象匹配的元素,并返回相应元素的索引值 。
<div id="foobar"><div></div><div id="foo"></div></div>
$("div").index($('#foobar')[0]) // 0
$("div").index($('#foo')[0]) // 2
$("div").index($('#foo')) // -1
选择器:
n 基本选择器(3种):
$("标签名"),如$("p")是选取了所有的p标签节点
$("#id名"),如$("#test")是选取了id为test的标签节点
$(".class名"),如$(".test")是选取了所有class为test的标签节点
n 组选择器:
下面还是现做一个约定:把"标签名或#id名或.class名"记作mix,则mix表示一个标签名,或一个#id或一个.class. $("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3")
n 后代选择器:
$("mix mix"),当然可以是多个嵌套,但后代选择器可以是深层子代,所以$("mix mix mix ...")这种写法作用不大.
例子:$("div .test"):在div标签内的所有具有test的class的后代元素(就是被div嵌套的class属性为test的标签)
n 子选择器:
$("mix>mix"),这个放在后代选择器后面是为了和它做对比.子选择器只能选择第一代子代.不处理深层嵌套.例子:
$("div>.test")
<div><p class="test"></p></div>对这里的p段落标签有效.但对
<div><p><p class="test"></p></p></div>对这里的p段落标签无效,这里要用
$("div .test)
n 临近选择器:
$("mix+mix"),选取下一个兄弟节点.如:$("div +#test"),id为test的的节点必须是div的下一个兄弟节点
n 属性选择器:
$("mix[@attr]"):选取所有该mix且具有attr属性的节点
$("mix[@attr=a_value"]):选取所有该mix且具有attr属性并满足属性值为a_value的节点
$("mix[@attr^=a_value_head"]):attr属性的属性值是以a_value_head开头的
$("mix[@attr$=a_value_end"]):attr属性的属性值是以a_value_end结尾的
$("mix[@attr*=a_value"]):attr属性的属性值中包含a_value
冒号限定结点选择器:$("mix:condition"):mix标签,并且满足限定条件.
E:root:类型为E,并且是文档的根元素
E:nth-child(n):是其父元素的第n个类型为E的子元素 ,基数从1开始
E:first-child:是其父元素的第1个类型为E的子元素
E:last-child:是其父元素的最后一个类型为E的子元素
E:only-child:且是其父元素的唯一一个类型为E的子元素
E:empty:没有子元素(包括text节点)的类型为E的元素
E:enabled
E:disabled:类型为E,允许或被禁止的用户界面元素
E:checked:类型为E,处于选中状态的用户界面元素
E:visible:选择所有可见元素
E:hidden:选择所有隐藏元素
E:not(s):类型为E,不匹配选择器s
E:eq(n),E:gt(n),E:lt(n):元素限定
E:first:相当于E:eq(0)
E:last:最后一个匹配的元素
E:even:从匹配的元素集中取序数为偶数的元素
E:odd:从匹配的元素集中取序数为奇数的元素
E:parent:选择包含子元素(包含text节点)的所有元素
E:contains('test'):选择所有含有指定文本的元素
n 表单选择器:
E:input:选择表单元素(input,select,textarea,button)
E:text:选择所有文本域(type="text")
E:password:选择所有密码域(type="password")
E:radio:选择所有单选按钮(type="radio")
E:checkbox:选择所有复选框(type="checkbox")
E:submit:选择所有提交按钮(type="submit")
E:image:选择所有图像域 (type="image")
E:reset:选择所有清除域(type="reset")
E:button:选择所有按钮(type="button")
当然包括E:hidden
n $的其他用法:
$(document):网页文档对象
$(document.body):网页body对象,和$("body")是一样的
$(函数):DOM载入后就执行该函数.所以$(document).ready()可以写做$()
$(选择器部分,选择器来源):这个举例说明
$("input:radio",document.forms[0]):在文档的第一个表单中,搜索所有单选按钮
$("div",xml.responseXML):查询指定XML文档中的所有div元素
选择器来源可以是:作为上下文的DOM元素,文档或jQuery对象
属性:
attr(name):取得第一个匹配元素的属性值
attr(properties):将一个“名/值”形式的对象设置为所有匹配元素的属性
attr(key,value)为所有匹配的元素设置一个属性值
attr(key, fn) :为所有匹配的元素设置一个计
展开阅读全文