创建新 HTML 元素

  1. $('<div>Hello</div>');
  2.  
  3. /*
  4. 创建等价的空 div 元素
  5. */
  6. $('<div>');
  7. $('<div />');
  8. $('<div></div>');
  9.  
  10. /*
  11. 创建带属性的 图片元素
  12. */
  13. $('<img>',
  14. {
  15. src: '../images/little.bear.png',
  16. alt: 'Little Bear',
  17. title: 'I woof in your general direction',
  18. click: function(){
  19. alert($(this).attr('title'));
  20. }
  21. }).appendTo('body');

管理 jQuery 集合

  1. /*
  2. jQuery 允许把 jQuery 集合当做 JavaScript 数组进行处理,所以可以用简单的数组索引来读取集合中的元素。
  3. */
  4. var $imgAlt = $('img[alt]');
  5. console.log('数组长度为:' + $imgAlt.length);
  6. var firstImgAlt = $('img[alt]')[0]; //获取到的是一个原始的 DOM 元素
  7. console.log('返回第一个元素:');
  8. console.log(firstImgAlt);
  9.  
  10. /*
  11. 使用 get([index]) 方法
  12. */
  13. var imageElement = $('img[alt]').get(0); //和上面的用索引读取的代码效用一致
  14. /*
  15. 使用负数做索引,就会从集合尾部开始计算。-1 查找倒数第一个元素
  16. */
  17. var lastImageElement = $('img[alt]').get(-1);
  18. console.log('返回最后一个元素:');
  19. console.log(lastImageElement);
  20. /*
  21. 没有索引参数,那么返回的就是 JavaScript 数组
  22. */
  23. var imageArray = $('img[alt]').get();
  24. console.log(imageArray);
  25.  
  26. /*
  27. 想获得一个包含特定元素的 jQuery 对象,而不是原始对象
  28. */
  29. console.log('获取同一个特定元素(作为 jQuery 对象而不是原始对象)的三种写法的结果:');
  30. var $obj1 = $($('img[alt]').get(2));
  31. console.log($obj1 instanceof jQuery); //判断是否为 jQuery 对象
  32. console.log($obj1);
  33. var $obj2 = $('img[alt]:eq(2)');
  34. console.log($obj2);
  35. var $obj3 = $('img[alt]').eq(2); //推荐使用这种方法,使用 eq() 方法的性能比使用 :eq 筛选器的性能高,返回包含一个或多个元素的 jQuery 集合
  36. console.log($obj3);
  37.  
  38. /*
  39. first() 函数,对比 :first 筛选器
  40. */
  41. var $firstObj = $('img[alt]').first();
  42. console.log('first() 函数:');
  43. console.log($firstObj);
  44.  
  45. /*
  46. last() 函数,对比 :last 筛选器
  47. */
  48. var $lastObj = $('img[alt]').last();
  49. console.log('last() 函数:');
  50. console.log($lastObj);
  51.  
  52. /*
  53. 作为数组返回 DOM 元素的集合
  54. */
  55. var allPUL = $('p + ul').toArray(); //返回 ul 标签,且 ul 标签紧邻的兄弟节点为 p 标签
  56. console.log('toArray 返回 DOM 元素数组集合:')
  57. console.log(allPUL);
  58.  
  59. /*
  60. index() 函数,获取索引,索引从 0 开始
  61. */
  62. var index = $('.levels > li').index($('#li2'));
  63. console.log('#li2 的索引是(以对应的 jQuery 对象作为参数): ' + index);
  64. index = $('.levels > li').index(document.getElementById('li2'));
  65. console.log('#li2 的索引是(以对应的 JavaScript 对象作为参数): ' + index);
  66. index = $('.levels > li').index('#li2');
  67. console.log('#li2 的索引是(以对应的 selector 作为参数): ' + index); //结果为 -1,传 selector 字符串作为参数不可以吗???
  68.  
  69. index = $('#li3').index();
  70. console.log('无参 index() 方法返回的 #li3 的 index:' + index);
  71.  
  72. index = $('.levels > li[data-level=4]').index();
  73. console.log('无参 index() 方法返回的.leves > li[data-level=4] 的 index:' + index);
  74.  
  75. /*
  76. 使用关系获取集合
  77. */
  78. /*
  79. 返回集合中所有元素的祖先,既包含直接父节点也包含更高层的祖先节点,但是不包含文档根节点(document),但选中的祖先节点只会出现一次
  80. */
  81. var $parents = $('#hibiscus').parents();
  82. console.log('id为 #hibiscus 的所有祖先节点:');
  83. console.log($parents);
  84.  
  85. /*
  86. 通过 parents(selector) 对返回的祖先节点进行筛选
  87. */
  88. $parents = $('#hibiscus').parents('div');
  89. console.log('id为 #hibiscus 的所有祖先节点且节点标签为 div:');
  90. console.log($parents);
  91.  
  92. /*
  93. 返回集合中所有元素的直接父节点元素,重复的父节点元素只返回一次
  94. */
  95. var $parent = $('img, li').parent();
  96. console.log('"img, li" 的父元素:');
  97. console.log($parent);
  98.  
  99. /*
  100. 返回集合中所有元素的子元素,参数 selector 可以用于筛选
  101. 返回的是直接子元素
  102. */
  103. var $bodyChildren = $('body').children();
  104. console.log('body 的所有子元素,不包括文本节点:')
  105. console.log($bodyChildren);
  106.  
  107. /*
  108. children() 方法不返回文本节点,要处理文本节点使用 contents() 方法,参数 selector 可以用于筛选
  109. */
  110. var $bodyContent = $('body').contents();
  111. console.log('body 的所有子元素,包括文本节点:')
  112. console.log($bodyContent);
  113.  
  114. /*
  115. 搜索遍历集合中的所有元素的子节点(深度优先算法)
  116. */
  117. var $set = $('#sample-dom').find('[title]');
  118. console.log('find() 方法深度优先搜索:');
  119. console.log($set);
  120.  
  121. /*
  122. 返回集合中的直接兄弟节点
  123. 如果是最后一个节点,那么返回的集合长度为0
  124. */
  125. var $nextImg = $('#hibiscus').next();
  126. console.log('next() 方法返回集合中的直接兄弟节点:');
  127. console.log($nextImg);
  128.  
  129. var $nextAllImg = $('#hibiscus').nextAll();
  130. console.log('nextAll() 方法返回集合中的所有兄弟节点:');
  131. console.log($nextAllImg);
  132.  
  133. /*
  134. 返回集合中的前直接兄弟节点
  135. 如果是第一个节点,那么返回的集合长度为0
  136. */
  137. var $prevImg = $('#cozmo').prev();
  138. console.log('prev() 方法返回集合中的前直接兄弟节点:');
  139. console.log($prevImg);
  140.  
  141. /*
  142. 返回的集合可以注意下顺序,是从下往上
  143. */
  144. var $prevAllImg = $('#cozmo').prevAll();
  145. console.log('prevAll() 方法返回集合中的前所有兄弟节点:');
  146. console.log($prevAllImg);
  147.  
  148. /*
  149. 返回集合中元素的兄弟节点
  150. */
  151. var $siblings = $('#cozmo').siblings();
  152. console.log($siblings);
  153.  
  154. /*
  155. 集合中添加新元素
  156. add(selector[, context]): selector 参数可以是包含选择器的字符串、HTML 片段、DOM 元素、DOM 元素数组或者 jQuery 对象
  157. */
  158. $('img[alt]').addClass('red-border').add('img[title]').addClass('opaque');
  159.  
  160. /*
  161. 删除集合元素
  162. 使用 not() 方法链式调用选择器来剔除某些元素
  163. not(selector):创建不包含选择器 selecotr 参数匹配元素的新集合,注意这里是把符合条件的筛选去掉了
  164. */
  165. var $not = $('img[title]').not('[title*="puppy"]'); //等同的单个选择器 img[title]:not([title*='puppy'])
  166. console.log('not 方法:');
  167. console.log($not);
  168.  
  169. /*
  170. not() 方法中传入函数,用于复杂的或者无法用单个选择器表达式描述的情况
  171. 符合函数条件的会被筛选掉
  172. */
  173. var $notWithFunction = $('div').not(function(index){
  174. return $(this).children().length > 2 && index % 2 === 0;
  175. });
  176. console.log('not() 方法中传入函数:');
  177. console.log($notWithFunction);
  178.  
  179. /*
  180. filter(selector) 方法和 not(selector) 方法相反,符合条件的会被筛选出来
  181. */
  182. var $filtered = $('td').filter(function(){
  183. return this.innerHTML.match(/^\d+$/);
  184. });
  185. console.log('filter() 方法返回只包含纯数字的 td :');
  186. console.log($filtered);
/*
slice(start[, end])
start:首元素位置为0
end:返回元素的最后位置,如果为负数,则表示偏移从末尾开始
*/
var $slice = $('*').slice(0, 4);
console.log('slice() 方法获取前4个元素:');
console.log($slice);
/*
has(selector)
测试所有 jQuery 集合中的子元素,返回只包含匹配 selector 选择器的子元素的新集合
*/
var $has = $('div').has('img[alt]');
console.log('has() 方法返回匹配 selector 选择器的子元素的新集合:');
console.log($has);
/*
map(callback)
需要转换集合的元素,根据一个集合计算出另一个集合
在集合中的每个元素上调用 callback 函数,然后返回值到一个 jQuery 对象中
函数传递两个参数,第一个是集合中元素的索引,第二个是元素本身,元素本身作为函数的上下文(this)
*/
var $allIds = $('div').map(function(){
return this.id;
});
console.log('map() 方法得到元素的 id 的集合:');
console.log($allIds);
/*
each(iterator)
遍历集合中的所有元素,为每个元素调用 iterator 函数
函数传递两个参数,第一个是集合中元素的索引,第二个是元素本身,元素本身作为函数的上下文(this)
返回的集合是原来的 jQuery 集合
*/
var $imgAlts = $('img').each(function(i){
this.alt = 'This is image[' + i + '] with an id of ' + this.id;
});
console.log('each() 方法修改 img 元素的 alt:');
console.log($imgAlts);
/*
is(selector)
确定集合中是否有元素匹配给定的选择器
有匹配的返回 true,没有返回 false
*/
var hasImage = $('*').is('img');
console.log('is() 方法判断全文元素中是否包含 img 元素:');
console.log(hasImage);
/*
end()
在 jQuery 链式调用中使用该方法,在当前调用链中结束最近的过滤操作,然后返回匹配元素的集合到之前的状态
jQuery 对象维护了一个内部栈来保存针对匹配元素集合的修改
*/
$('img').filter('[title]').hide().end().addClass('my-class');
/*
addBack([selector])
把栈上前一个元素集合的元素添加到当前集合里
*/
$('div').addClass('my-class').find('img').addClass('red-border').addBack().addClass('opaque');
  1.  

jQuery 实战读书笔记之第三章:操作 jQuery 集合的更多相关文章

  1. jQuery 实战读书笔记之第六章:事件本质

    理解浏览器事件模型 understandEventModel.html 代码: <!DOCTYPE HTML> <html> <head> <title> ...

  2. jQuery 实战读书笔记之第五章:使用 jQuery 操作页面

    html 如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l ...

  3. jQuery 实战读书笔记之第四章:使用特性、属性和数据

    使用属性 /* 每个元素都有一或多个特性,,这些特性的用途是给出相应元素或其内容的附加信息.(出自 JavaScript 高级程序设计) */ /* 特性是固有的 JavaScript 对象 属性指的 ...

  4. 《Android群英传》读书笔记 (2) 第三章 控件架构与自定义控件详解 + 第四章 ListView使用技巧 + 第五章 Scroll分析

    第三章 Android控件架构与自定义控件详解 1.Android控件架构下图是UI界面架构图,每个Activity都有一个Window对象,通常是由PhoneWindow类来实现的.PhoneWin ...

  5. 《深入理解Java虚拟机》读书笔记(第三章)

    垃圾收集器与内存分配策略(第三章) 前言,众所周知,Java是由c++进化而来,c++在内存需自己申请,自己释放,于是就有了Java的动态内存分配.书的第三章开篇,有这样一句话描述的很妙——Java与 ...

  6. Linux内核分析 读书笔记 (第三章)

    第三章 进程管理 3.1 进程 1.进程: 进程就是处于执行期的程序. 进程就是正在执行的程序代码的实时结果. 进程是处于执行期的程序以及相关的资源的总称. 进程包括代码段和其他资源. 2.线程:执行 ...

  7. 《深入理解java虚拟机》读书笔记二——第三章

    第三章 垃圾收集器与内存分配策略 1.判断对象是否已死 引用计数法: 给对象添加一个引用计数器,每当有一个地方引用它时,计数器值就加1,每当引用失效时,计数器值就减1. 任何时刻计数器为0的对象就是不 ...

  8. jQuery 实战读书笔记之第二章:选择元素

    基本选择器 html 代码如下,后面的 js 使用的 html 基本大同小异. <!doctype html> <html> <head> <title> ...

  9. 《深入理解bootstrap》读书笔记:第三章 CSS布局

    一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...

随机推荐

  1. Flex的 Event中属性currentTarget与target的差别

    Flex的 Event中属性currentTarget与target的差别 1.差别 (1)currentTarget是事件的处理对象(event processor) (2)target是事件的调用 ...

  2. ios中Core Location跟Map Kit的基本使用

    地图类开发应用中,离不开地理位置跟MKMapView的使用,下面就记录下自己在使用这两个东西中学到的. 不过并不是所有苹果的设备都支持地理位置,我们在使用前应该做个判断,代码如下: BOOL loca ...

  3. LightOj 1221 - Travel Company(spfa判负环)

    1221 - Travel Company PDF (English) Statistics problem=1221" style="color:rgb(79,107,114)& ...

  4. java集成jpush实现客户端推送

    代码地址如下:http://www.demodashi.com/demo/13700.html 前言 java 集成jpush 实现客户端推送 一.准备工作 开发环境: jdk1.6 Eclipse ...

  5. poj2983--Is the Information Reliable?(差分约束)

    Is the Information Reliable? Time Limit: 3000MS   Memory Limit: 131072K Total Submissions: 11125   A ...

  6. 0基础的小白怎么学习Java?

    自身零基础,那么我们应该先学好Java,首先我们来了解下Java的特性: Java语言是简单的 Java语言的语法与C语言和C++语言很接近,使得大多数程序员很容易学习和使用Java.另一方面,Jav ...

  7. &lt;&lt;Python基础教程&gt;&gt;学习笔记 | 第11章 | 文件和素材

    打开文件 open(name[mode[,buffing]) name: 是强制选项,模式和缓冲是可选的 #假设文件不在.会报以下错误: >>> f = open(r'D:\text ...

  8. Josephus排列

    思考与分析: 对于m为常数,能够用循环链表,用head,tail标志头尾指针使其易于表示循环结构.循环输出后删除结点n次,每次外层循环时.内层都固定循环m次.所以执行时间为O(mn)=O(n). 对于 ...

  9. PyCharm设置python新建文件指定编码为utf-8

    PyCharm新建文件时可以在模板中添加编码字符集为utf-8,新建文件可自动添加了

  10. SQL变量与全局变量

    变量 1.局部变量的声明(一个@) declare @n int   --声明变量关键字为declare 然后@加变量名 后面是变量类型 declare @s varchar(36) 2.局部变量的赋 ...