3.1 创建HTML元素

使用 jquery 创建动态元素是相当容易的。可以通过 $() 函数包含一个 HTML 标签的字符串来创建。

  1. $('<div>Hello</div>')

任何在已经存在的元素上执行的 jQuery 方法都是可以在新创建的元素上使用。

注意,如果想创建一个空的 div 元素,可以这样写:

  1. $('<div>');

前面介绍了 $() 函数的第二个参数 context。当使用 $() 函数来创建新元素时,可以使用 context 参数来为正要创建的新元素指定属性及其值

假设创建一个img元素,包含多个属性,而且可以点击该图片。

  1. $('<img>',
  2. {
  3. src: '../images/little.bear.png',
  4. alt: 'Little Bear',
  5. title:'I woof in your general direction',
  6. click: function() {
  7. alert($(this).attr('title'));
  8. }
  9. }).appendTo('body');

3.2 管理jQuery 集合

3.2.1 确定集合大小

假设你知道页面中所有段落的数量,现在需要显示。

  1. alert($('p').length);

3.2.2 从集合获取元素

有了集合,就可以执行一些排序操作。有时经常需要直接访问元素或者执行原生 javascript 的操作。

(1)通过索引查找元素

例如获取 alt 属性的 图片元素集合中第一个元素。

  1. var imgElement = $('img[alt]')[0];

如果选择使用方法而不是索引,可以使用 get() 方法。

① get()方法语法

get([index])

取得其中一个匹配的元素。 num表示取得第几个匹配的元素。

参数:[index]

取得第 index个位置上的元素

get()

取得所有匹配的 DOM 元素集合。

  1. var imgElement = $('img[alt]').get(0);

等价于全前面的索引代码。get()方法可接受负数索引。使用 get(-1) 会查找倒数第一个元素。

② eq()方法语法

eq(index)

获取集合中指定索引的元素,返回包含结果的新集合。

有时候想获取一个包含特定元素的 jQuery 对象,而不是原始元素。

  1. $('div:eq(1)');

为了了解与过滤器 :eq() 的区别:

  1. var $secondDiv = $('div').eq(1); //使用eq()方法选择
  2. var $secondDiv = $('div:eq(1)'); //使用:eq()过滤器选择

出于性能的考虑,建议选择第一种(eq())。

③ first()方法语法

④ last()方法语法

⑤ toArray()方法语法

toArray()

作为数组返回 Dom 元素的集合。

  1. var allLableButtions = $(`lable + button`).toArray();

这条语句查询所有页面上跟在 label 后面的 button 元素,做为javascript对象转换为数组赋值给 allLableButtions 变量。

(2)获取元素的索引

① index()方法语法

index([element])

查找集合中的特定元素,返回集合中的索引值。或者查找其兄弟元素的集合的第一个元素的索引。如果没有找到,则返回 -1 。

参数:element

(Selector|Element|jQuery)包含选择器的字符串、元素引用,或者恶意确定值的 jQuery 对象。

如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。

如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。

如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素,则返回-1。

  1. <ul>
  2. <li id="foo">foo</li>
  3. <li id="bar">bar</li>
  4. <li id="baz">baz</li>
  5. </ul>
  6. -------------------
  7. $('li').index(document.getElementById('bar')); //1,传递一个DOM对象,返回这个对象在原先集合中的索引位置
  8. $('li').index($('#bar')); //1,传递一个jQuery对象
  9. $('li').index($('li:gt(0)')); //1,传递一组jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置
  10. $('#bar').index('li'); //1,传递一个选择器,返回#bar在所有li中的做引位置
  11. $('#bar').index(); //1,不传递参数,返回这个元素在同辈中的索引位置。

3.2.3 使用关系获取集合

  1. <div class="box-small">
  2. <h2>Dom Sample</h2>
  3. <div id="sample-dom">
  4. <span>Some images:</span>
  5. <div>
  6. ![](../images/image.1.jpg)
  7. ![](../images/image.2.jpg)
  8. ![](../images/image.3.jpg)
  9. ![](../images/image.4.jpg)
  10. ![](../images/image.5.jpg)
  11. ![](../images/image.6.jpg)
  12. </div>
  13. <div id="some-div">This is a <div> with an id of <code>some-div</code></div>
  14. <h2>Hello, I'm a <h2> element</h2>
  15. <p>
  16. I'm a paragraph, nice to meet you.
  17. </p>
  18. <ul class="my-list">
  19. <li>
  20. <a href="http://jquery.com">jQuery website</a>
  21. <ul>
  22. <li><a href="#css1">CSS1</a></li>
  23. <li><a href="#css2">CSS2</a></li>
  24. <li><a href="#css3">CSS3</a></li>
  25. <li>Basic XPath</li>
  26. </ul>
  27. </li>
  28. <li>
  29. jQuery also supports
  30. <ul>
  31. <li>Custom selectors</li>
  32. <li>Form selectors</li>
  33. </ul>
  34. </li>
  35. </ul>
  36. <table id="languages">
  37. <thead>
  38. <tr>
  39. <th>Language</th>
  40. <th>Type</th>
  41. <th>Invented</th>
  42. </tr>
  43. </thead>
  44. <tbody>
  45. <tr>
  46. <td>Java</td>
  47. <td>Static</td>
  48. <td>1995</td>
  49. </tr>
  50. <tr>
  51. <td>Ruby</td>
  52. <td>Dynamic</td>
  53. <td>1993</td>
  54. </tr>
  55. <tr>
  56. <td>Smalltalk</td>
  57. <td>Dynamic</td>
  58. <td>1972</td>
  59. </tr>
  60. <tr>
  61. <td>C++</td>
  62. <td>Static</td>
  63. <td>1983</td>
  64. </tr>
  65. </tbody>
  66. </table>
  67. <form id="form-fake" action="#">
  68. <div>
  69. <label for="aTextField">Text:</label>
  70. <input type="text" id="aTextField" name="someTextField" />
  71. </div>
  72. <div>
  73. <span>Radio group:</span>
  74. <label>
  75. <input type="radio" name="radio-group" id="radio-a" value="A" /> A</label>
  76. <label>
  77. <input type="radio" name="radio-group" id="radio-b" value="B" checked="checked" /> B</label>
  78. <label>
  79. <input type="radio" name="radio-group" id="radio-c" value="C" /> C</label>
  80. </div>
  81. <div>
  82. <span>Checkboxes:</span>
  83. <label>
  84. <input type="checkbox" name="checkboxes" id="checkbox-1" value="1" /> 1</label>
  85. <label>
  86. <input type="checkbox" name="checkboxes" id="checkbox-2" value="2" /> 2</label>
  87. <label>
  88. <input type="checkbox" name="checkboxes" id="checkbox-3" value="3" checked="checked" /> 3</label>
  89. <label>
  90. <input type="checkbox" name="checkboxes" id="checkbox-4" value="4" /> 4</label>
  91. </div>
  92. <input type="submit" id="button-submit" value="Submit" />
  93. </form>
  94. </div>
  95. </div>

① parents()方法语法

parents([expr])

取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。

参数

expr:用于筛选祖先元素的表达式

例子:获取id为radio-b的所有父元素集合

  1. $('#radio-b').parents()

② children()方法语法

想知道这里 #form-fake 子元素数量:

  1. $('#form-fake > *')



这里使用了极力不推荐使用的通用选择器。所以该使用 children() 方法。

  1. $('#form-fake').children()

③ contents()方法语法

children() 方法不会返回文本节点。

对于处理文本节点的情况,使用 contents()。和 children() 的不同在于:contents() 不接收任何参数,还可以获得文本节点和框架内元素。

contents():查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容

④ find()方法语法

find(expr|obj|element)

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法

参数

expr:用于查找的表达式

obj:一个用于匹配元素的jQuery对象

element:一个DOM元素

find() 的强大之处体现在 jQuery 的链式调用中,

  1. $('#form-fake').children().find('span')

⑤ nextUntil()方法语法

nextUntil([expr|element][,filter])

查找当前元素之后所有的兄弟元素,但不包括那个选择器匹配到的元素。

参数

[expr][,filter]:

expr: 用于筛选祖先元素的表达式。

filter: 一个字符串,其中包含一个选择表达式匹配元素。

[element][,filter]:

element: 用于筛选祖先元素的DOM元素。

filter: 一个字符串,其中包含一个选择表达式匹配元素。

看一个例子:

  1. <ul>
  2. <li class="awesome">First</li>
  3. <li>Second</li>
  4. <li class="useless">Third</li>
  5. <li class="good">Fourth</li>
  6. <li class="brilliant amazing">Fifth</li>
  7. </ul>

查询样式为 awesome 的元素的兄弟元素,排除样式为 brilliantamazing 的元素。

  1. $('.awesome').nextUntil('.brilliant.amazing');

如果只想查找样式 good 的元素,这个函数的第二个参数是可选参数 filter,允许你来实现目标。

  1. $('.awesome').nextUntil('.brilliant.amazing','.good');

3.2.4 分割集合

(1)集合中添加新元素(不是在html添加元素,是在选择器中添加)

① add()方法语法

  1. $('img[alt]')
  2. .addClass('red-border')
  3. .add('img[title]')
  4. .addClass('opaque')

(2)集合中删除元素

② not()方法语法

not(expr|ele|fn)

删除与指定表达式匹配的元素

参数

expr:一个选择器字符串。

element:一个DOM元素

function(index):一个用来检查集合中每个元素的函数。this是当前的元素

  1. $("p").not( $("#selected")[0] )

当需要最大的灵活的时候,传递函数给 not() 方法。

  1. $('div').not(function(index){
  2. return $(this).children().length > 2 && index % 2 === 0;
  3. });

③ filter()方法语法

filter(expr|obj|ele|fn)

筛选出与指定表达式匹配的元素集合

例子:创建所有包含正整数的 <td> 元素的集合。

  1. $('td').filter(function(index) {
  2. return this.innerHTML.match(/^\d+$/);
  3. });

(3)获取集合的子集

④ slice()方法语法

slice(start, [end])

选取一个匹配的子集

参数

start:开始选取子集的位置。第一个元素是0.如果是负数,则可以从集合的尾部开始选起

end:结束选取自己的位置,如果不指定,则就是本身的结尾。

  1. $('*').slice(12,19)

⑤ has()方法语法

has(selector)

创建并返回新的集合,只包含匹配 selector 选择器的子元素

参数

selector(Selector|Element)包含选择器的字符串会应用到集合中元素的所有子元素上,或者测试 Dom 上。

  1. $('div').has('img[alt]')

(4)转换集合的元素

⑥ map()方法语法

map(callback)

一组元素转换成其他数组(不论是否是元素数组)

(在集合中的每个元素调用 callback 函数,然后返回值到一个 jQuery 对象中。)

例子:页面上所有div元素的ID:

  1. $('div').map(function(){
  2. return this.id;
  3. }).toArray();
  4. //["sample-dom", "", "some-div", "", "", ""]

(5)遍历集合的元素

map()方法对于遍历集合元素后搜集值或转换为其他元素非常有用,但是很多时候为了达到其他目的才迭代元素。

⑦ each()方法语法

each(iterator)

遍历集合里的所有元素,然后为每个元素传入的 iterator(迭代器)函数

例子:为匹配集合中的每个元素设置一个属性值:

  1. $('img').each(function(i){
  2. this.alt = 'This is image['+ i +'] with an id of ' +this.id;
  3. })

3.2.5 使用集合的其他方法

① is()方法语法

is(selector)

确定集合中是否有元素匹配给定的选择器,如果有一个就返回 true

  1. <form><input type="checkbox" /></form>
  2. ---
  3. $("input[type='checkbox']").parent().is("form")
  4. //true

判断点击li标签增加背景色为红色,如果点击的是第2个strong,当前的li增加背景色为绿色

  1. <ul>
  2. <li>
  3. <strong>list</strong> item 1 - one strong tag
  4. </li>
  5. <li>
  6. <strong>list</strong> item
  7. <strong>2</strong> - two <span>strong tags</span>
  8. </li>
  9. <li>list item 3</li>
  10. </ul>
  11. ----
  12. $("li").click(function() {
  13. var $li = $(this),
  14. isWithTwo = $li.is(function() {
  15. return $('strong', this).length === 2;
  16. });
  17. if ( isWithTwo ) {
  18. $li.css("background-color", "green");
  19. } else {
  20. $li.css("background-color", "red");
  21. }
  22. });

② end()方法语法

end()

在 jQuery 链式调用中使用该方法;

在当前调用链中结束最近的过滤操作,然后返回匹配元素的集合到之前的状态。

回到最近的一个"破坏性"操作之前(hide()不是)

  1. $('img')
  2. .filter('[title]')
  3. .hide()
  4. .end()
  5. .addClass('red-border')

jQuery对象维护了一个内部栈来保存针对匹配元素的集合修改。调用诸如之前的方法时,新集合被压栈,调用 end() 方法时,顶部集合就会弹出,留出前一个集合来后续操作。

③ addBack()方法语法

addBack([selector])

把栈上前一个集合的元素添加到当前集合里,可以选择性提供选择器参数。

  1. <ul>
  2. <li>list item 1</li>
  3. <li>list item 2</li>
  4. <li class="third-item">list item 3</li>
  5. <li>list item 4</li>
  6. <li>list item 5</li>
  7. </ul>
  8. ----
  9. $('li.third-item').nextAll().addBack()
  10. .css('background-color', 'red');

首先,初始选择位于第3项,初始化堆栈集合只包含这项。调用.nextAll() 后将第4和第5项推入堆栈。最后,调用.addBack() 合并这两个组元素在一起,创建一个jQuery对象,指向所有三个项元素

3.操作jQuery集合《jquery实战》的更多相关文章

  1. jQuery 实战读书笔记之第三章:操作 jQuery 集合

    创建新 HTML 元素 $('<div>Hello</div>'); /* 创建等价的空 div 元素 */ $('<div>'); $('<div /> ...

  2. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发2-Model层建立

    上篇(asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作)文章讲解了开发过程中的准备工作,主要创建了项目数据库及项目,本文主要讲解项目M层的实现,M层这里 ...

  3. jQuery操作标签,jQuery事件操作,jQuery动画效果,前端框架

    jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...

  4. 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发4- 后台模板html页面创建

    上一篇教程<asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发>完成了本项目的登录模块,登录后就需要进入后台管理首页了,需要准备一个后台模 ...

  6. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作

    /****** Object: 新闻表 Script Date: 2017/9/2 星期六 15:11:12 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENT ...

  7. jquery mobile 入门级实战1

    第一步:使用CDN接入jquery mobile CDN的全称是Content Delivery Network,即内容分发网络.其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环 ...

  8. jQuery-认识JQuery,jQuery选择器

    认识JQuery: 1.window.onload与$(document).ready()的区别 window.onload $(document).ready() 执行时机 必须等待网页中的所有内容 ...

  9. 从零开始学习jQuery (九) jQuery工具函数

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 我们经常要使用脚本处理各种业务逻辑, 最常见的就 ...

随机推荐

  1. maven使用阿里镜像配置文件

    方法一: apache-maven-3.5.2\confsetting.xml,添加如下镜像配置: <mirrors> <mirror> <id>alimaven& ...

  2. 深入理解ajax系列第六篇——头部信息

    前面的话 每个HTTP请求和响应都会带有相应的头部信息,其中有的对开发人员有用.XHR对象提供了操作头部信息的方法.本文将详细介绍HTTP的头部信息 默认信息 默认情况下,在发送XHR请求的同时,还会 ...

  3. [代码]--c#获取系统时间

    public DateTime GetServerDataTime() { string sql = " select top 1 getdate() from sysobjects &qu ...

  4. BZOJ3434 WC2014时空穿梭(莫比乌斯反演)

    考虑枚举相邻点距离差的比例.显然应使比例值gcd为1以保证不重复统计.确定比例之后,各维坐标的方案数就可以分开考虑.设比例之和为k,则若坐标上限为m,该维坐标取值方案数即为Σm-ki (i=1~⌊m/ ...

  5. Exploring Pyramids UVALive - 3516 (记忆化DP)

    题意:给定一个序列 问有多少棵树与之对应 题目连接:https://cn.vjudge.net/problem/UVALive-3516 对于这一序列  分两种2情况 当前分支 和 其它分支  用df ...

  6. dp乱写3:环形区间dp(数字游戏)

    状态: fmax[i,j]//表示前i个数分成j个部分的最大值 fmin[i,j]//表示前i个数分成j个部分的最小值 边界:fmax[i,1]:=(sum[i] mod 10+10) mod 10( ...

  7. Openstack运维指南文档整理

    非常全面的运维指南整理http://zjzone.cc/index.php/2017/07/31/openstack-yun-wei-wen-dang-zheng-li/

  8. Spark记录-Scala函数

    Scala函数 Scala有函数和方法. Scala方法是一个具有名称和签名的类的一部分. Scala中的函数是一个可以分配给变量的完整对象. 函数定义可以出现在源文件中的任何位置. 不带参数的函数 ...

  9. Spring Mvc + Maven + BlazeDS 与 Flex 通讯 (七)

    BlazeDS 说明 BlazeDS是由Adobe开源的基于amf协议的,用于解决flex与java通讯的组件; 基于传统的文本协议的XML传输方式,在抽象层方面会有很大的压力,特别在需要序列化与反序 ...

  10. 20155236 2016-2017-2 《Java程序设计》第八周学习总结

    20155236 2016-2017-2 <Java程序设计>第八周学习总结 教材学习内容总结 通用API 日志 1.日志API简介:java.util.logging包中提供了日志功能相 ...