jQuery学习笔记 获取jQuery对象

使用jQuery选择器选择页面元素，目的是为了生成jQuery对象，语法相当简单：$(selector)。但值得注意的是，这是生成jQuery对象，不是DOM对象，因此$(selector).innerHTML以获取元素内部HTML代码是错误的，正确写法是$(selector).html()。同样的，判断一个DOM对象是否存在，不能够写成if($(selector))，而是if($(selector).length>0)。

　　当然jQuery对象和DOM对象可以互转换。从上面的例子也可以看出，jQuery对象可以视为是一个DOM对象数组，因此转换成DOM对象可使用get(index)方法或者[index]取下标；相反，DOM对象转换为jQuery对象只需直接用$(document.getElementById(“id”))包装一下就行了。

　　虽然取对象的方法很简单$(selector)，但是这个参数selector却是种类繁多。这里扼要说明一下：

　　过滤选择器：附在所有选择器的后面，通过特定的过滤规则来筛选出一部分元素，如$(selector:first)。若单独使用，$(:first)则等价于$(*:first)；

　　层次选择器：通过DOM元素间层次关系来获取特定元素，由两个选择器组合而成。选择过程为先按照第一个选择器选择元素，然后根据符号确定后代元素或子元素或兄弟元素，最后在这些元素范围内按照第二个选择器选取最后想要的元素；

　　下面就是各种选择器的表格说明- -这就打了我一上午，真蛋疼！

基本选择器


























选择器

描述

返回

*

选取所有元素

集合元素

element

根据标签名选取元素

集合元素

#id

根据id属性值选取元素

单个元素

.class

根据class属性值选取元素

集合元素

selector1,selector2,…,selectorN

将每个选择器选取的元素合并在一个结果，主要用于选取不同元素

集合元素

基本过滤选择器














































选择器

描述

返回

:first

选取第一个元素

单个元素

:last

选取最后一个元素

单个元素

:even

选取索引值是偶数的所有元素，索引从0开始

集合元素

:odd

选取索引值是奇数的所有元素，索引从0开始

集合元素

:eq(index)

选取索引值等于index的元素，index从0开始

单个元素

:gt(index)

选取索引值大于index的元素，index从0开始

集合元素

:lt(index)

选取索引值小于index的元素，index从0开始

集合元素

:not(selector)

选取匹配selector以外的元素

集合元素

:header

选取所有的标题元素

集合元素

:animated

选取当前正在执行动画的所有元素

集合元素

子元素过滤选择器


































选择器

描述

返回

:first-child

选取每个父元素的第一个子元素

集合元素

:last-child

选取每个父元素的最后一个子元素

集合元素

:only-child

如果某元素是父元素唯一的子元素，则将被选取

集合元素

:nth-child(odd)

选取每个父元素下索引值是奇数的子元素

集合元素

:nth-child(even)

选取每个父元素下索引值是偶数的子元素

集合元素

:nth-child(index)

选取每个父元素下索引值等于index的子元素

集合元素

:nth-child(equation)

选取每个父元素下索引值匹配equation的子元素

集合元素

内容过滤选择器






















选择器

描述

返回

:contains(text)

选取文本内容为text的元素

集合元素

:has(selector)

选取含有后代元素为selector的元素

集合元素

:parent

选取含有后代元素或文本的元素

集合元素

:empty

选取不包含后代元素或文本的空元素

集合元素

可见性过滤选择器














选择器

描述

返回

:hidden

选取所有不可见的元素

集合元素

:visible

选取所有可见的元素

集合元素

属性过滤选择器






































选择器

描述

返回

[attr]

选取拥有attr属性的元素

集合元素

[attr=value]

选取attr属性值为value的元素

集合元素

[attr!=value]

选取attr属性值不为value的元素

集合元素

[attr^=value]

选取attr属性值以value开始的元素

集合元素

[attr$=value]

选取attr属性值以value结束的元素

集合元素

[attr*=value]

选取attr属性值含有value的元素

集合元素

[attr~=value]

选取attr属性值用空格分隔的值中有一个为value的元素

集合元素

[selector1][selector2]…[selectorN]

选取满足所有属性过滤选择器的元素

集合元素

层次选择器






















选择器

描述

返回

selector1 selector2

从selector1的后代元素里选取selector2

集合元素

selector1>selector2

从selector1的子元素里选取selector2

集合元素

Selector1+selector2

从selector1后面的第一个兄弟元素里选取selector2

集合元素

selector1~selector2

从selector1后面的所有兄弟元素里选取selector2

集合元素

表单选择器


















































选择器

描述

返回

:input

选取<input><textarea><select><button>元素

集合元素

:text

选取符合[type=text]的<input>元素

集合元素

:password

选取符合[type=password]的<input>元素

集合元素

:radio

选取符合[type=radio]的<input>元素

集合元素

:checkbox

选取符合[type=checkbox]的<input>元素

集合元素

:image

选取符合[type=image]的<input>元素

集合元素

:file

选取符合[type=file]的<input>元素

集合元素

:button

选取符合[type=button]的<input>和<button>元素

集合元素

:submit

选取符合[type=submit]的<input><button>元素

集合元素

:reset

选取符合[type=reset]的<input><button>元素

集合元素

:hidden

选取所有不可见的元素

集合元素

表单过滤选择器






















选择器

描述

返回

:enable

选取所有可用表单元素

集合元素

:disable

选取所有不可用表单元素

集合元素

:checked

选取被选中的<input>元素（单选框、复选框）

集合元素

:selected

选取被选中的<option>元素

集合元素

赞 (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 获取指定标签的对象及属性的设置与移除

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

  • 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的值.这

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

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

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

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

  • jquery 事件对象属性小结

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

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

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

  • 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学习笔记 操作jQuery对象 属性处理

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

  • 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判断$("#id")获取的对象是否存在的方法

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

  • 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 isEmptyObject判断是否为空对象的函数

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

  • 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获取当前点击对象的value方法

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

  • 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将文本转化成JSON对象需要注意的问题

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

  • 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学习笔记之 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 : <

随机推荐