jQuery学习笔记 更改jQuery对象

jQuery代码的任务就是生成jQuery对象A，操作jQuery对象A；生成jQuery对象B，操作jQuery对象B……但是若此过程中，对象A、B……之间有某种关系，那么完全没必要一个个去$(selector)，这很繁琐的。因此jQuery提供了一些方法，使流程变为生成jQuery对象A，操作jQuery对象A；更改为jQuery对象B，操作jQuery对象B……

　　一个jQuery对象，既要进行N次操作，又要进行M次更改。因此有必要将生成的jQuery对象存储在一个变量中，多次调用。然而，试想每进行一次操作和更改就得声明一个新变量，这也很繁琐啊。所以jQuery采取了链式操作的方法，即执行操作后返回操作对象本身，于是可以持续执行下一个操作，直到需要更改对象时方执行更改，然后返回更改后对象。这实际上就是一种函数式思维。

　　举个例子，左右对比一下：








一般调用

链式调用

a=$(“div”);

a.addClass(“class”);

b=a.children(“ul”);

b.show();                         

c=a.siblings();

c.removeClass(“class”);

$(“div”).addClass(“class”)

.children(“ul”).show().end()

.siblings().removeClass(“class”);

　　接下来就介绍一下更改jQuery对象的各种方法：

更改为后代元素集合

















方法

描述

等价

children(selector)

在原先元素的后代元素中，选取匹配selector的元素。若不设置参数，children()等价于children(*)，选取原先元素的所有子元素

$(selector1).children(selector2)≡$(selector1>selector2)

find(selector)

在原先元素的后代元素中，选取匹配selector的元素。若不设置参数，find()等价于find(“:not(*)”)，不会选取原先元素的任何后代元素

$(selector1).find(selector2)≈$(selector1 selector2)。若参数使用基本过滤选择器，不是在全部后代元素中选取过滤匹配元素，而是在每一个后代元素中分别选取过滤匹配元素

contents()

选取原先元素的子元素或文本块

更改为祖先元素集合




















方法

描述

parent(selector)

在原先元素的父元素中，选取匹配selector的元素。若不设置参数，parent()等价于parent(“*”)，选取原先元素的所有父元素

parents(selector)

在原先元素的祖先元素中，选取匹配selector的元素。若不设置参数，parents()等价于parents(“*”)，选取原先元素的所有祖先元素

parentsUntil(selector)

选取原先元素的祖先元素，直到遇到匹配selector的元素为止，且不包括该元素。若不设置参数，parentsUntil()等价于parents()，选取原先元素的所有祖先元素

offsetParents()

选取原先元素的最近祖先定位元素，且该元素CSS属性display不能为none。定位元素指CSS属性position

closest(selector)

在原先元素及其祖先元素中，选取匹配selector的最近元素

更改为兄弟元素集合





























方法             

描述

等价

next(selector)

在原先元素后面的第一个兄弟元素中，选取匹配selector的元素。若不设置参数，next()等价于next(“*”)，选取原先元素后面的第一个兄弟元素

$(selector1).next(selector2)≡$(selector1+selector2)

prev(selector)

在原先元素前面的第一个兄弟元素中，选取匹配selector的元素。若不设置参数，prev()等价于prev(“*”)，选取原先元素前面的第一个兄弟元素

nextAll(selector)

在原先元素后面的兄弟元素中，选取匹配selector的元素。若不设置参数，nextAll()等价于nextAll(“*”)，选取原先元素后面的所有兄弟元素

$(selector1).nextAll(selector2)≡$(selector1~selector2)

prevAll(selector)

在原先元素前面的兄弟元素中，选取匹配selector的元素。若不设置参数，prevAll()等价于prevAll(“*”)，选取原先元素前面的所有兄弟元素

siblings(selector)

在原先元素的兄弟元素中，选取匹配selector的元素。若不设置参数，siblings()等价于siblings(“*”)，选取原先元素的所有兄弟元素

nextUntil(selector)

选取原先元素后面的兄弟元素，直到遇到匹配selector的元素为止，且不包括该元素。若不设置参数，nextUntil()等价于nextAll()，选取原先元素后面的所有兄弟元素

prevUntil(selector)

选取原先元素前面的兄弟元素，直到遇到匹配selector的元素为止，且不包括该元素。若不设置参数，prevUntil()等价于prevAll()，选取原先元素前面的所有兄弟元素

更改为更多元素集合













方法             

描述

等价

add(selector)

在原先元素的基础上添加选取匹配selector的元素

$(selector1).add(selector2)≡$(selector1,selector2)

andSelf()

更改为后代元素、祖先元素、兄弟元素的这些操作，会在原先元素以外选取元素。可用于将原先元素和更改操作选取的元素合并在一起

更改为部分元素集合








































方法             

描述

等价

eq(index)

在原先元素中筛选索引值等于index的元素，索引值从0开始正数，也可以从-1开始倒数，但不能混用

$(selector).eq(index)≡$(selector:eq(index))

first()

在原先元素中筛选第一个元素，等同于eq(0)

$(selector).first()≡$(selector:first)

last()

在原先元素中筛选最后一个元素，等同于eq(-1)

$(selector).last()≡$(selector:last)

slice(start,[end])

在原先元素中筛选索引值从start到end-1的元素。若不传入end，则筛选索引值大于等于start的元素

filter(selector)

在原先元素中筛选匹配selector的元素

filter(fn(index))

使用函数筛选，对于索引值等于index的元素，若函数返回true，该元素包含在筛选集合中，否则排除在外

可实现$(selector:even(index))、$(selector:odd(index))、

$(selector:gt(index))、

$(selector:lt(index))等

not(selector)

在原先元素中筛选不匹配selector的元素

$(selector1).not(selector2)≡$(selector1:not(selector2))

not(fn(index))

使用函数筛选，对于索引值等于index的元素，若函数返回true，该元素排除在筛选集合外，否则包含在内

可实现$(selector:even(index))、$(selector:odd(index))、

$(selector:gt(index))、

$(selector:lt(index))等

has(selector)

在原先元素中筛选出拥有匹配selector后代元素的元素

$(selector1).has(selector2)≡$(selector1:has(selector2))

还原jQuery对象








方法             

描述

end()

使执行更改jQuery对象操作后的选取元素还原到更改之前。若希望还原多个更改操作，则多次调用，直到最后会返回空集

赞 (0)

相关推荐

  • jquery1.5.1中根据元素ID获取元素对象的代码

    在jquery1.5.1根据ID来获取对象返回的是对应数组,想不通怪不得使用document.getElementById(""ID名"")可以取到单一的对象,使用$("#ID名")却不行,悲剧呀. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/

  • JQuery将文本转化成JSON对象需要注意的问题

    1)$.parseJSON方法返回的是一个字符串,而不是JSON对象. 2)要将字符串转化成对象,很容易想起JS中的eval方法.事实上是可以的,不过需要加上括号.如var js="{\"PageIndex\":\"1\"}";var obj=eval("("+js+")");.不过使用eval,是不安全的,因为其可以编译任何js代码. 3)下载一个JSON解析器,因为其只认可JSON文本.这样就比较安全了

  • jquery isEmptyObject判断是否为空对象的函数

    复制代码 代码如下: isEmptyObject: function( obj ) { for ( var name in obj ) { return false; } return true; } 分析: 1.什么是对象:其实,在javascript中对象是一组"键/值"的组合,说白了就是数据集,表示属性和方法 jQuery 判断一个对象是否为空是使用for name in obj 来遍历对象中的属性名.如果一个对象有属性名则运行return false来返回结果,退出循环;否则,

  • jQuery学习笔记之 Ajax操作篇（一） - 数据加载

    jQuery学习笔记之 Ajax操作篇（一） - 数据加载

    加载 HTML 我们通常使用加载 HTML 的方法来加载 HTML 片段,并插入到指定位置,假设当前页面为: <div></div> <button>load</button> 同目录下的 test.html 文件内容为: <span>test</span> 我们可以使用 load 方法来加载 HTML,将其绑定到按钮的点击事件上: $('button').click(function() { $('div').load('test.

  • jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配

    指定元素中包含 id 属性的, 如: $("span[id]") 复制代码 代码如下: <span id="span1" name="S1">AAA</span><br/> <span id="span2" name="S2">BBB</span><br/> <span name="Sx3">CCC<

  • jQuery学习笔记 操作jQuery对象 CSS处理

    CSS基本属性处理 方法 描述 css(name) 获取元素上CSS规则中name属性值 css(name,value) css(name,fn(index,value)) css({name1:value1,-,nameN:valueN}) 设置元素上CSS规则name属性的值为value,也可使用函数参数,不解释:还可以一次性为同一元素设置多个CSS属性 CSS尺寸属性处理 方法 描述 height() 获取元素CSS属性height的值 width() 获取元素CSS属性width的值.这

  • Javascript学习笔记之 对象篇（一） : 对象的使用和属性

    Javascript学习笔记之 对象篇（一） : 对象的使用和属性

    false.toString(); // 'false' [1, 2, 3].toString(); // '1,2,3' function Foo(){} Foo.bar = 1; Foo.bar; // 1 一个经常容易被误解的就是数字常量不能视为对象,实际上数字常量仍然可以视为对象.这是因为 Javascript 解析器在解析点操作符时而将其视为浮点数特征而犯下的错误. 2.toString(); // raises SyntaxError 实际上,我们有很多方法可以使得数字常量表现为一个

  • jQuery怎么解析Json字符串(Json格式/Json对象)

    jQuery怎么解析Json字符串(Json格式/Json对象)

    json数据是我们常用的一种小型的数据实时交换的一个东西,他可以利用jquery或js进行解析,下面我来介绍jquery解析json字符串方法. 我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法. 上例中得到的JSON数据如下,是一个嵌套JSON: { "comments": [ { "content": "很不错嘛", "id": 1, "nickname&

  • jQuery学习笔记 操作jQuery对象 属性处理

    元素的属性处理 方法 描述 attr(name) attr(name,value) attr(name,fn(index,value)) attr({name1:value1,-,nameN:valueN}) 获取某个属性的取值,或可以用于设置某个属性的值.还可以使用函数作为参数,将函数返回值作为需要为元素属性设置的值,比如将第(index+1)个元素的name属性设置为函数返回值(实际上,明白函数式就根本不需要这说明).也可以一次性给同一元素多个属性 removeAttr(name) 删除某个

  • jQuery学习笔记 获取jQuery对象

    使用jQuery选择器选择页面元素,目的是为了生成jQuery对象,语法相当简单:$(selector).但值得注意的是,这是生成jQuery对象,不是DOM对象,因此$(selector).innerHTML以获取元素内部HTML代码是错误的,正确写法是$(selector).html().同样的,判断一个DOM对象是否存在,不能够写成if($(selector)),而是if($(selector).length>0). 当然jQuery对象和DOM对象可以互转换.从上面的例子也可以看出,jQ

  • jQuery学习笔记之 Ajax操作篇（二） - 数据传递

    jQuery学习笔记之 Ajax操作篇（二） - 数据传递

    请求数据 我们可以使用 GET.POST 两种方式向后端请求数据,这里以 PHP 为例,假设有测试页面 age.php,用于返回年龄信息,内容为: if(isset($_REQUEST['name']) && $_REQUEST['name'] == 'stephen') { echo '23'; } 当前页面内容为: <div> <a href="age.php">stephen</a> <span>age : <

  • jquery获取当前点击对象的value方法

    例:获取ul中li的value值 首先,在html中我们要为每个li设置value值 复制代码 代码如下: <ul> <li value="你好"></li> <li value="hello"></li> <li value="=-="></li> </ul> 再通过jquery根据点击事件获取对应的value 复制代码 代码如下: $(docume

  • jquery 事件对象属性小结

    使用事件自然少不了事件对象.  因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象. jQuery中统一了事件对象,  当绑定事件处理函数时,  会将jQuery格式化后的事件对象作为唯一参数传入: $("#testDiv").bind("click", function(event) { }); 关于event对象的详细说明, 可以参考jQuery官方文档: http://docs.jquery.com/Events

  • Jquery 获取指定标签的对象及属性的设置与移除

    1.先讲讲JQuery的概念,JQuery首先是由一个 America 的叫什么 John Resig的人创建的,后来又很多的JS高手也加入了这个团队.其实 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用简单的一些代码实现一些复杂的JS效果. 2.JQuery实现了代码的分离,不用再网页中加入如:onclick之类的事件来调用函数了,直接引入JQuery类库和自己编写的JQuery代码就可以了: 如: 复制代码 代码如下: $(function(){

  • Jquery判断$("#id")获取的对象是否存在的方法

    一.判断对象对象是否存在 如果是下面的 jQuery 代码判断一个对象是否存在,是不能用的 复制代码 代码如下: if($("#id")){ }else{} 因为 $("#id") 不管对象是否存在都会返回 object . 正确使用判断对象是否存在应该用: 复制代码 代码如下: if($("#id").length>0){}else{} 使用 jQuery 对象的属性 length 来判断,如果 > 0 就存在. 或者 复制代码 代

  • jQuery如何将选中的对象转化为原始的DOM对象

    在jQuery中,在一个页面上选择元素返回的集合是jQuery对象而不是原始的DOM对象. 所以只能运行jQuery方法. 如果要在选择集上运行DOM方法和属性,该集合必须转化为DOM对象 比如你不可以这样使用: $('div').innerHTML = "hello world"; 因为innerHTML是 DOM的属性而不是jQuery对象的属性.如果确实想这么做.那么就需要将jQuery对象转化为DOM对象.方法有两种. ①jQuery提供一种核心方法get(),所以上面的可以写

  • JQuery each打印JS对象的方法

    我们知道javascript可以用alert输出变量的值,但是有时候返回的是一个对象,json格式的数据,jQuery可以用这个方法循环遍历读出对象的值,假如这个对象名称是obj,循环遍历打印它的值: 复制代码 代码如下: $.each(obj,function(key,val){      if($.isPlainObject(val) || $.isArray(val)){          subObj(val);      }else{          alert(key+'='+va

  • jQuery学习笔记 操作jQuery对象 文档处理

    下面就是一些常用方法,格式为$(selector).方法,其中$(selector)即当前选定元素: 移动元素 方法 描述 append($(selector)) 向当前元素的内部追加内容 appendTo($(selector)) 将当前元素在某元素内部追加.但由于会根据需要对当前元素进行移动,所以jQuery对象更改了,可用end()还原 prepend($(selector)) 向当前元素的内部前置内容 prependTo($(selector)) 将当前元素在某元素内部前置.类似于app

  • jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后

    复制代码 代码如下: setFocus=function(id){ var t=$("#"+id).val(); $("#"+id).val("").focus().val(t); } 把焦点光标移动到id的文本最后. jquery获取焦点后光标在字符串后,当input获得焦点后,自动把光标移到文本内容的最后,jQuery用focus()使文本输入框获得焦点且焦点在文字的最右的方法 复制代码 代码如下: //获取焦点后光标在字符串后 //其原理就

随机推荐