手机版

jQuery实用基础的超详细介绍

时间:2021-11-21 来源:互联网 编辑:宝哥软件园 浏览:

一、jQuery简介jQuery是继Prototype之后的又一个优秀的JavaScript库。jQuery idea :写得少做得多。优点如下:轻量级、功能强大的选择器,优秀的DOM操作封装,可靠的事件处理机制,完善的Ajax和优秀的浏览器兼容链操作模式.第一种情况

二、jQuery对象jQuery对象是用jQuery ($())包装DOM对象后产生的对象。jQuery对象对于jQuery是唯一的。如果一个对象是jQuery对象,它可以使用方法: $(“# persona tab”)。jQuery中的html();jQuery对象不能使用DOM对象的任何方法,DOM对象也不能使用jQuery中的任何方法约定:如果获得了jQuery对象,那么添加$。var $变量=jQuery对象var变量=变量前的DOM对象。3.DOM对象被转换成jQuery对象。对于一个DOM对象,你可以得到一个jQuery对象。var dc=document.getElement('aa ')仅通过用$ () (jQuery对象是用jQuery包装DOM对象后产生的对象)包装DOM对象。var $ DC=$(DC);转换后可以使用jQuery中的方法。jQuery对象不能使用DOM中的方法。但是,如果jQuery没有封装想要的方法,不得不使用DOM对象,那么有如下两种处理方法: (1) jQuery对象是数组对象,通过[index]的方法可以得到对应的DOM对象。var $ DC=$(' # DC ');var DC=$ DC[0];(2)使用jQuery中的get(index)方法获取对应的DOM对象var $ DC=$(' # DC ');var DC=$ DC . get(0);四.jQuery选择器

选择器基本选择器是jQuery中最常用的选择器,也是最简单的选择器。它通过元素id、类和标签名来搜索DOM元素(id在网页中只能使用一次,类是允许重用的)。

层次选择器如果你想获得特定的元素,如后代元素、子元素、相邻元素、兄弟元素等。则需要使用分层选择器。

请注意,(“prev ~ div”)选择器只能选择“# prev”元素后面的同级元素;但是,jQuery中的方法兄弟()与前后位置无关。只要是对等节点,就可以选择过滤器选择器。过滤器选择器主要通过特定的过滤规则过滤出所需的DOM元素。选择器以“:”开头。根据过滤规则的不同,过滤器选择器可以分为基础过滤器、内容过滤器、可见性过滤器、属性过滤器、子元素过滤器和表单对象属性过滤器选择器。基本过滤器选择器

内容过滤选择器内容过滤选择器的过滤规则主要体现在其包含的子元素和文本内容

可见性过滤器选择器可见性过滤器选择器根据元素的可见和不可见状态选择相应的元素

可见选择器:hidden不仅包含样式属性显示为none的元素,还包含文本隐藏字段(input type="hidden ")和visible:hidden等元素。过滤器选择器的过滤规则是通过元素的属性获得相应的元素

子元件过滤器选择器

第n个子()选择器详细说明如下:(1) :第n个子(偶/奇):可以选择每个父元素下索引值为偶(奇)的元素;(2): th-child(2):可以选择每个父元素下索引值为2的元素;(3) :3360可以在每个父元素(3)下选择索引值是3的倍数的元素:第(3n 1)个子元素:可以在每个父元素下选择索引值是3n 1的元素。1.表单对象属性过滤选择器该选择器主要过滤选中的表单元素

第二,表单选择器

3.jQuery 1中的DOM操作。DOM(文档对象模型—):独立于浏览器、平台和语言的界面。有了这个接口,就可以轻松访问页面中的所有标准组件:DOM操作分类:2、DOM Core: DOM Core并不是JavaScript的专属,而是可以被任何支持DOM的编程语言使用。它的用途不仅限于处理网页,还可以用来处理任何用标记语言编写的文档。比如: XMLHtmdom3360使用JavaScript和dom为HTML文件编写脚本时,有很多属性CSS-DOM:是特定于HTML-DOM的,是针对CSS操作的。在JavaScript中,CSS-DOM主要用于获取和设置样式对象的各种属性。4.寻找节点,寻找节点,和寻找元素节点,是由jQuery选择器完成的。找到需要的元素,找到属性节点后,可以调用jQuery对象的attr()方法,获取其各种属性值。5.创建节点,使用jQuery的factory函数$($)(: $(html)。将根据传入的html标记字符串创建一个DOM对象,这个DOM对象将被打包为jQuery对象并返回。注意,由:动态创建的新元素节点不会自动添加到文档中,而是需要通过其他方法插入到文档中。创建单个元素时,应该注意关闭标签并使用标准的XHTML格式。例如,创建P元素,可以使用$(“P/”)或$(“P/P”),但不能使用$(“P”)或$(“P”)创建文本节点,即在创建元素节点时直接写出文本内容;创建属性节点也是在创建元素节点时一起创建的。6.插入节点(1)动态创建HTML元素没有实际用途,需要将新创建的节点插入到文档中,即成为文档中某个节点的子节点

七、插入节点(2)

上述方法不仅可以将新创建的DOM元素插入到文档中,还可以移动原始的DOM元素。8.删除节点1,remove():从DOM中移除所有匹配的元素,传入的参数用于根据jQuery表达式过滤元素。当通过remove()方法删除节点时,该节点中包含的所有后代节点将同时被删除。此方法的返回值是对已删除节点的引用。2.empty():清除节点清除元素中的所有后代节点(不包括属性节点)。9.复制节点1。clone():克隆匹配的DOM元素。返回值是克隆的副本。但是,复制的新节点此时没有任何行为。2.clone(true):复制元素,也复制元素中的事件。10.替换节点1。replaceWith():用指定的HTML或DOM元素替换所有匹配的元素。2.全部更换()。3360颠倒了replaceWith()方法。请注意,如果事件在替换之前已经绑定到元素,则最初绑定的事件将在替换之后与原始元素一起消失。11.包装节点包装():用其他标签包装指定的节点。这种方法对于在文档中插入额外的结构化标签非常有用。并且不会破坏原始文档的语义。wrappall():用一个元素包装所有匹配的元素。wrap()方法单独包装所有元素。wrapInner():使用其他结构化标签包装每个匹配元素的子内容(包括文本节点)。十二.属性操作attr()。3360获取属性和设置属性当一个参数传递给此方法时,即属性是为获取元素而指定的,当两个参数传递给此方法时,即为元素设置了指定属性的值。jQuery中的很多方法都是实现获取和设置的函数,比如3360 attr()、html()、text()、val()、height()。Width(),css(),等。removeAttr():删除指定元素XIII的指定属性。设置并获取HTML,文本和值读取并设置一个元素中的HTML内容: html()。这个方法可以用于XHTML。但是,它不能用于读取和设置XML文档中元素的文本内容: text()。这种方法可以用于XHTML或XML文档。读取和设置元素中的值3360 val()类似于JavaScript中的value属性。对于文本框,下拉列表框。单选框这个方法可以返回一个元素的值(多选框只能返回第一个值)。如果是多选下拉列表框,则返回包含所有选定值的数组。14.常用的节点遍历方法获取由匹配元素的所有子元素组成的集合: children()。该方法只考虑子元素,不考虑任何后代元素。它获得紧接在匹配元素后面的兄弟元素的集合(但是集合中只有一个元素): next()。获取紧接在匹配元素之前的同级元素集合(但集合中只有一个元素):pprev()获取匹配元素:同级前后的所有同级元素()XV。style操作get类和set类:类是元素的一个属性。因此,attr()方法可用于获取和设置类。追加样式: addClass()移除样式3360 Remove class()-从匹配的元素中删除所有或指定的类切换样式:tongleclass()。-控制样式的重复切换。如果类名存在,将其删除;如果它不存在,请添加它。确定它是否包含某个样式: has class()-确定元素是否包含某个类;如果是,返回真;否则返回false。

版权声明:jQuery实用基础的超详细介绍是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。