首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JQuery干货篇之选择元素

JQuery 干货篇之选择元素 1.1. 实验的HTML+CSS的代码 1.2. 选择器 1.3. JQuery对象的方法 1.4....对象住对象的序号,或者返回给定选择器参数的索引 $("img").index("img[src=*astor]") length || size() 返回的时jquery对象个数 $(...是jquery对象的每一个HTMLElelments对象,这里必须要有返回值,不然没有意义 实例: $("div.dcell").map(function(index,elem){ return...,其中带有两个参数选择的第二个参数是用来筛选所得到的结果集,第一个是用来定位直到这个元素为止 实例: $("img").parentsUntil("div.drow");//找img的祖先元素...因为对于自学的人来说想要找到系统的学习教程很困难,这一点我深有体会,我也是不断的摸索才小有所成,如果你们觉得我写的不错就帮我推广一下,让更多的人看到。

1.8K30

jQuery 元素添加插入内容方法 after, append, appendTo, before, prepend, prependTo 的区别

jQuery 元素添加插入内容的方法和区别,整理成表格,省的每次都要翻: jQuery方法 解释 after() 在被选元素之后插入指定内容 insertAfter() 在被选元素之后插入 HTML...如果用于已有元素,这些元素会被从当前位置移走,然后被添加到被选元素之后。...before() 在被选元素之前插入指定内容 insertBefore() 在被选元素之前插入 HTML 标记或已有的元素。如果用于已有元素,这些元素会被从当前位置移走,然后被添加到被选元素之前。...prepend() 在被选元素的开头(仍然在内部)插入指定内容 prependTo() 在被选元素的开头(仍然在内部)插入 HTML 标记或已有的元素 千言解释不如一图示意: 具体代码: This is the target div to which new elements are associated using jQuery var $

1.8K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Web前端学习笔记之jQuery基础

    丰富的DOM选择器,jQuery选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定...值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对678的支持。...,3.x版本的jQuery没有这个问题。...注意: 遍历过程可以使用 return false提前结束each循环。...终止each循环 return false; 伏笔... .data() 匹配的元素集合的所有元素上存储任意相关数据或返回匹配的元素集合的第一个元素的给定名称的数据存储的值。

    3.6K20

    jquery

    丰富的DOM选择器,jQuery选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定...值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对678的支持。...,3.x版本的jQuery没有这个问题。...注意: 遍历过程可以使用 return false提前结束each循环。...终止each循环 return false; 伏笔... .data() 匹配的元素集合的所有元素上存储任意相关数据或返回匹配的元素集合的第一个元素的给定名称的数据存储的值。

    5.8K30

    JQuery干货篇之操控DOM

    after 匹配元素集合的每个元素后面插入参数所指定的内容,作为其兄弟节点。...,这里的也是作为兄弟元素插入的 实例: 1 orchildElems.insertAfter("#row1 div.dcell"); wrap 集合匹配的每个元素周围包裹一个HTML结构,...src*=astor]").length>0) if(index==0) return div; //只第一个drow添加父元素div else...").unwrap(":first"); //这里使用参数来筛选要删除父级元素的当前元素,这里选择第一个元素 wrapAll 集合中所有匹配元素的外面包裹一个HTML结构,也就是为结果集中的所有元素都设置了一个相同的父级元素来包裹所有的元素...$("img").wrapAll(div); //这里的img没有共同的父元素,那么就会强制的将所有的元素拉在一起为他们设置一个父级元素 wrapInner 匹配元素里的内容外包一层结构,也就是为匹配元素的后代元素添加一个父级元素

    97410

    jQuery基础图文系列

    选择一个上级元素的最后一个同类子元素 :empty 选择元素里面没有任何内容,这里没有内容指的是一点内容都没有 :not() 否定选择器 :first-line 用于选取指定选择器的首行 :first-letter...用于选取首字母 ::before 在被选元素的内容前面插入内容 ::after 在被选元素的内容后面插入内容 ::selection 应用于文档中被用户高亮的部分 jQuery的基本选择器:id选择器...jQuery选择器匹配的元素 .add() 将元素添加到匹配元素的集合 .addSelf() 把堆栈之前的元素添加到当前集合 .children() 获取匹配元素集合每个元素的所有子元素 .closest...append() 向匹配元素集合的每个元素结尾插入由参数指定的内容 appendTo() 向目标结尾插入匹配元素集合的每个元素 attr() 设置或返回匹配元素的属性和值 before() 每个匹配的元素之前插入内容...HTML 内容或元素 wrapAll() 指定的 HTML 内容或元素中放置所有被选的元素 wrapInner() 方法使用指定的 HTML 内容或元素,来包裹每个被选元素的所有内容 (inner

    4.5K10

    jQuery基础系列

    选择一个上级元素的最后一个同类子元素 :empty 选择元素里面没有任何内容,这里没有内容指的是一点内容都没有 :not() 否定选择器 :first-line 用于选取指定选择器的首行 :first-letter...用于选取首字母 ::before 在被选元素的内容前面插入内容 ::after 在被选元素的内容后面插入内容 ::selection 应用于文档中被用户高亮的部分 jQuery的基本选择器:id选择器...jQuery选择器匹配的元素 .add() 将元素添加到匹配元素的集合 .addSelf() 把堆栈之前的元素添加到当前集合 .children() 获取匹配元素集合每个元素的所有子元素 .closest...append() 向匹配元素集合的每个元素结尾插入由参数指定的内容 appendTo() 向目标结尾插入匹配元素集合的每个元素 attr() 设置或返回匹配元素的属性和值 before() 每个匹配的元素之前插入内容...HTML 内容或元素 wrapAll() 指定的 HTML 内容或元素中放置所有被选的元素 wrapInner() 方法使用指定的 HTML 内容或元素,来包裹每个被选元素的所有内容 (inner

    2.6K20

    jQuery

    丰富的DOM选择器,jQuery选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定...jQuery没有这个问题。...,遍历jQuery集合元素 - 被称为隐式迭代的过程。...的for循环也是通过他们两个来跳出当此循环或者终止循环     伏笔... .data()     任意jQuery对象都有data方法,可以保存任意值,可以用来代替全局变量     匹配的元素集合的所有元素上存储任意相关数据或返回匹配的元素集合的第一个元素的给定名称的数据存储的值...$("div").data("k",100);//给所有div标签都保存一个名为k,值为100 .data(key): 取值,没有的话返回undefined     描述: 返回匹配的元素集合的第一个元素的给定名称的数据存储的值

    8.9K20

    JavaScript学习笔记(四)—— jQuery入门

    odd").css("background-color", "#bbbbff"); 子元素伪类选择器 子元素伪类选择器就是选择某一个元素下面的子元素的方式,jQuery,子元素伪类选择器分为两大类..."整数或odd或even" :only-child 选择元素唯一的子元素(该父元素只有一个子元素) 区分元素类型的 选择器 说明 :first-of-type 选择元素类型的第一个子元素 :last-of-type...” visiblity:hidden 内容伪类选择器 根据元素的文字内容或所包含的子元素特征来选择元素 选择器 说明 :contains(text) 选择包含给定文本内容的元素 :has(selector...");//设置HTML内容 }); }); 对元素的值进行操作 jQuery,使用val()方法返回或设置被选元素的value属性。...绑定与接触事件 绑定事件 绑定事件就是将页面元素事件类型与其收到该事件之后期望进行的操作联系到一起。

    11.2K50

    jQuery选择器大全(48个代码片段+21幅图演示)2

    属性过滤选择器 ——4.1 [attribute](取拥有attribute属性的元素) 下面的代码,最后一个a标签没有title属性,所以它仍然会带下划线 <script type="text/javascript...attribute ^= value], [attribute $= value]和[attribute *= value](attribute属性值以value开始,以value结束,或包含value值) <em>在</em>属性<em>选择</em>器<em>中</em>...举个例子:<em>div</em>:first返回的是整个DOM文档<em>中</em>第一个<em>div</em><em>元素</em>,而<em>div</em>:first-child是返回所有<em>div</em><em>元素</em>下的第一个<em>元素</em>合并后的集合。...这里有个问题:如果一个<em>元素</em><em>没有</em>子<em>元素</em>,:first-child和:last-child会返回null吗?...> 用户名: 密  码:

    1.6K80

    jQuery的基本操作

    //任何有效选择器 child //用以匹配元素选择器,并且它是第一个选择的子元素· //描述 匹配表单中所有的自己input元素 HTML代码 Name:...代码 $("li:first"): 结果 [list item 1]   :not(selector) //概述 //去除所有与给定时器匹配的元素 //jQuery1.3.已经支持复杂选择器了...//概述 匹配第一个子元素 类似的(:first)匹配第一个元素,而次选择符将为 每个父元素匹配一个子元素· 描述 每一个ul查找第一个li HTML代码 John...,而次选择符将为每一个父元素匹配到最后一个子元素· //描述 //每个ul查找最后一个li HTML代码 11111 22222</li...html内容·和个函数 不能用XML文档·但可以用于XHTML文档· //一个HTML文档,我们可以使用.html()方法来获取任意一个元素的内容·如果选择匹配多余一个的元素,那么只有第一个匹配元素

    7.5K20

    jQuery

    前面总结了JS相关知识的文章,对元素进行添加,修改,获取···操作很繁琐,代码多,但是jQuery 库可以通过一行简单的标记被添加到网页 jQuery 内容 选择器 筛选器 样式操作 文本操作 属性操作...文档处理 事件 动画效果 插件 each、data、Ajax jQuery语法 $符号事jQuery的重要标识 //JS可以通过获取先获取标签,然后去使用对应的方法,jQuery中一样,...可以先筛选元素(标签),然后再对该元素做出动态操作 格式:$(selector).action() selector:通过选择器获取元素 action:获取元素后的动作行为 jQuery对象 JSDOM...获取到的元素是DOM对象,那么jQuery获取到的元素属于jQuery对象,两者之间方法有差别,虽然 jQuery对象是包装 DOM对象后产生的,但是 jQuery对象无法使用 DOM对象的任何方法...,表单筛选器对此进行了简写''' # 属性筛选器获取type=text的input元素 $('input[type=text]') #表单筛选器获取 $(':text') # 表单筛选器的特例

    6.8K10
    领券