`
jd20800991
  • 浏览: 40734 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

初学jquery之自学笔记(4)

阅读更多

86.把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。
$("p").add("span');
$("p").add("<span>Ajax</span>");
87.取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
可以通过可选的表达式来过滤所匹配的子元素。注意:parents()将查找所有祖辈元素,而children()之考虑子元素而不考虑所有后代元素


$("div").children();
88.查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容
$("p").contents().not("[nodeType=1]").wrap("<b/>");
89.搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。
$("p").find("span");
90.取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素(可以使用nextAll)。可以用一个可选的表达式进行筛选。

$("p").next();
$("p").next(".selected") 
91.查找当前元素之后所有的同辈元素。可以用表达式过滤
$("div:first").nextAll().addClass("after");
92.取得一个包含着所有匹配元素的唯一父元素的元素集合。
你可以使用可选的表达式来筛选。
$("p").parent();
$("p").parent(".selected")
93.取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。
$("span").parents();
$("span").parents("p");
94.取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素。
$("p").prev();
$("p").prev(".selected")
95.查找当前元素之前所有的同辈元素可以用表达式过滤。
$("div:last").prevAll().addClass("before");
96.取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
$("div").siblings();
$("div").siblings(".selected")
97.加入先前所选的加入当前元素中
对于筛选或查找后的元素,要加入先前所选元素时将会很有用。
$("div").find("p").andSelf().addClass("border");
98.向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似。

$("p").append("<b>Hello</b>");
99.把所有匹配的元素追加到另一个、指定的元素元素集合中。
实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。
$("p").appendTo("#foo");
100.向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。
$("p").prepend("<b>Hello</b>");
$("p").prepend( $(".foo")[0] );
$("p").prepend( $("b") );
101.把所有匹配的元素前置到另一个、指定的元素元素集合中。
实际上,使用这个方法是颠倒了常规的$(A).prepend(B)的操作,即不是把B前置到A中,而是把A前置到B中。
$("p").prependTo("#foo");
102.在每个匹配的元素之后插入内容。
$("p").after("<b>Hello</b>");
103.在每个匹配的元素之前插入内容。
$("p").before("<b>Hello</b>");
104.把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
实际上,使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是把B插入到A后面,而是把A插入到B后面。

$("p").insertAfter("#foo");
105.把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
实际上,使用这个方法是颠倒了常规的$(A).before(B)的操作,即不是把B插入到A前面,而是把A插入到B前面。

$("p").insertBefore("#foo");
106.把所有匹配的元素用其他元素的结构化标记包装起来。
$("p").wrap(document.getElementById('content'));
107.把所有匹配的元素用其他元素的结构化标记包裹起来。
这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。
这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包裹元素。
当HTML标记代码中的元素包含文本时无法使用这个函数。因此,如果要添加文本应该在包裹完成之后再行添加。
$("p").wrap("<div class='wrap'></div>");
108.将所有匹配的元素用单个元素包裹起来这与 '.wrap()' 是不同的,'.wrap()'为每一个匹配的元素都包裹一次。
$("p").wrapAll(document.createElement("div"));
109.将每一个匹配的元素的子内容(包括文本节点)用DOM元素包裹起来
$("p").wrapInner(document.createElement("b"));
110.将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素。
$("p").wrapInner("<b></b>");

分享到:
评论

相关推荐

    jQuery基础自学笔记(pink老师jQuery全内容)

    《jQuery基础自学笔记》 jQuery 是一款非常流行的 JavaScript 库,由 John Resig 在2006年创建,它的出现极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。jQuery 的设计理念是“Write Less, Do ...

    JQuery自学学习笔记

    ### JQuery自学学习笔记 #### 一、JQuery简介与基本语法 JQuery 是一款轻量级的 JavaScript 库,极大地简化了 HTML 元素的选择、操作以及事件处理等任务。它提供了一种更加简单的方式来进行网页开发,使得开发者...

    jQuery 自学笔记 +  汉化版 jQuery Api

    这份“jQuery自学笔记”结合“jQuery API汉化版”提供了全面而简洁的学习资源,适合初学者快速掌握jQuery的核心概念和用法。 首先,jQuery的核心理念是“写得更少,做得更多”。它的选择器机制借鉴了CSS,使得选取...

    js&jquery;学习笔记

    JavaScript和jQuery是Web开发中的重要工具,用于创建交互式的网页和动态内容。JavaScript是一种轻量级的编程语言,而jQuery...对于初学者来说,这是一份宝贵的资源,能够快速上手JavaScript和jQuery,提升Web开发技能。

    jQuery学习笔记

    这个学习笔记集合覆盖了jQuery的基础到进阶内容,对于初学者来说是一份很好的参考资料。通过深入学习并实践这些笔记,可以快速掌握jQuery的核心技术和最佳实践。同时,持续关注jQuery的更新和发展,理解新的API和...

    ASP.net自学笔记

    ### ASP.NET自学笔记知识点梳理 #### 一、Visual Studio 操作要点 1. **数据库操作注意事项**: - **MDF 文件与 SQL Server 数据库**:在 Visual Studio 2008 中创建的 `.mdf` 文件本质上是 SQL Server 的数据库...

    狂神说 JavaWeb 笔记

    【狂神说 JavaWeb 笔记】 在JavaWeb开发领域,狂神说系列教程深受许多初学者和进阶者的喜爱。这些笔记详细介绍了如何利用Java技术进行...无论是自学还是系统学习,这些笔记都将为你的JavaWeb开发之路提供宝贵的指导。

    韩顺平PHP从入门到精通笔记、软件、源代码

    综上所述,这个资源包为PHP初学者提供了一条完整的自学路径,从理论学习到实践操作,再到高级应用,涵盖了PHP编程的各个方面。通过阅读笔记、查阅手册、实践代码以及理解实际项目,学习者可以逐步提升自己的技能,从...

    JEECMS自学帮助集合(包括FreeMarker)

    4. **JEECMS自学笔记**:JEECMS自学笔记.doc是个人学习JEECMS过程中的记录,可能涵盖了一些实际操作的技巧和遇到的问题解决方案,对于初学者来说是一份很好的参考。 5. **JEECMS网上文档集合**:JeeCMS网上文档集合...

    jQuery购物车商品数量加减合计代码.zip

    这个压缩包提供了一个基础的实现,对于学习jQuery特效和前端交互开发的初学者来说,是一个很好的实践案例。 总结来说,这个"jQuery购物车商品数量加减合计代码"涵盖了HTML页面结构设计、jQuery事件处理、JavaScript...

    java学习笔记(学习java的好书).rar_Java笔记_java 学习_w3school离线完全版_编程开发手册

    这份"java学习笔记(学习java的好书)"的PDF文档,显然是一个全面学习Java编程的资源,旨在帮助初学者和经验丰富的开发者深入理解Java的核心概念和技术。W3School离线完全版的加入,意味着这份资料还可能涵盖了Web开发...

    韩顺平html+css+javascript笔记完整版

    总的来说,"韩顺平html+css+javascript笔记完整版"是一个宝贵的自学资源,它将引导你步入前端开发的大门,带你探索丰富多彩的Web世界。结合实际练习和对新技术的关注,你将成为一名出色的前端开发者。

    JQuery.rar_Jsp/Servlet_Java_

    标题中的"JQuery.rar"是一个包含jQuery学习资料的压缩包,很可能包含了作者在学习过程中整理的笔记。这份资料对于初学者或者想要提升JavaScript技能的开发者来说是一份宝贵的资源。 ### 1. jQuery基础 - **选择器*...

    狂神说全部笔记内容.rar

    【狂神说全部笔记内容.rar】是一个包含了广泛Java技术领域学习资料的压缩包。这个压缩文件涵盖了从初学者到高级开发者所需的各种知识点,旨在提供一个全面的Java学习路径。以下是对其中各个主题的详细说明: 1. **...

    jqgrid4.6.zip

    "Jqgrid之onSelectRow 和onCellSelect 事件不能一起用-yellowcong_yelllowcong的专栏-CSDN博客_files"和"jQuery学习笔记--JqGrid相关操作 方法列表 备忘 重点讲解(超重要)_web开发自学-CSDN博客_files"以及"jqgrid...

    lighthouse-web-notes:Lighthouse Labs的课程笔记

    这个存储库将对初学者或希望巩固JavaScript基础的开发者非常有帮助。 **目录结构** 存储库可能包含以下结构,便于学习者按照不同主题和进度进行查阅: 1. **HTML/CSS基础** - HTML标签、属性和语义化 - CSS选择...

    java基础到spring boot

    4. "复习资料" 可能是一个文件夹,包含更多的学习资料,比如笔记、教程或练习题。 5. "JavaScript"、"jQuery"、"springboot"、"Bootstrap" 这些文件夹可能包含了相关技术的教程、代码示例或项目实践,对于深入理解和...

    前端-全套开发.pdf

    4. JavaScript项目实践:提供了面向初学者的JavaScript项目案例,例如“21个最佳JavaScript项目创意”和“20个前端练手项目合集”,这些资源帮助开发者通过实践学习来巩固和提升开发技能。 5. JavaScript技术细节:...

    lighthouse-web-notes

    "乐山笔记"是一个专门为Web开发新手准备的资源集合,旨在帮助初学者快速掌握Web开发的基本技能和核心概念。通过这个资料库,你可以找到一系列精心整理的笔记,覆盖了从HTML、CSS到JavaScript,以及更高级的主题,如...

Global site tag (gtag.js) - Google Analytics