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

如何在jQuery中获得作为<p>的span的第一个父级?

在jQuery中,要获取作为<p><span>的第一个父级,可以使用.parent()方法。首先,你需要确保已经加载了jQuery库。然后,你可以使用以下代码来获取<span>的第一个父级:

代码语言:javascript
复制
$(document).ready(function() {
  $("span").parent("p").first();
});

这段代码首先等待文档加载完成,然后查找所有<span>元素,接着查找它们的父级<p>元素,最后返回第一个匹配的元素。

在这个例子中,我们使用了.parent()方法来查找<span>元素的直接父级,然后使用.first()方法来获取第一个匹配的父级。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JS和JQuery获取当前元素兄弟及等元素方法

这个方法和 children() 区别就在于,包括空白文本,也会被作为一个 jQuery 对象返回, children() 则只会返回节点 jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点...,而 jQuery.find(),返回结果,不会有初始集合内容,比如 $("p").find("span") ,是从 元素开始找 ,等同于 $("p span") JS获取:...var chils= s.childNodes;  //得到s全部子节点 var par=s.parentNode;   //得到s节点 var ns=s.nextSibling;   //获得...s下一个兄弟节点 var ps=s.previousSibling;  //得到s上一个兄弟节点 var fc=s.firstChild;   //获得s第一个子节点 var lc=s.lastChild...;   //获得s最后一个子节点 JS获取节点,子元素:JS方法会比JQUERY麻烦很多,主要则是因为FF、谷歌浏览器会把你换行也当作DOM元素:空text元素,目前IE也是这样 <div

12.5K10

21.jQuery

jQuery兼容各种主流浏览器,IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。...,第一层 $("div").find("span") //div包含所有span元素,子子孙孙 $("p").next()    //紧邻p元素后一个同辈元素 $("p")....test2'之间所有的元素,掐头去尾 $("div").siblings() //所有的同辈元素,不包括自己 1.next(紧邻同级下一个元素) 11 22<...,直到遇到匹配那个元素为止 offsetParent 返回第一个匹配元素用于定位节点 parents 取得一个包含着所有匹配元素祖先元素元素集合(不包含根元素)。...可以用可选表达式进行筛选 eq 获取当前链式操作第N个jQuery对象,返回jQuery对象 first 获取第一个元素 last 获取最后个元素 filter

3K90
  • 继续死磕前端

    jquery long long ago ~ 人们发现了一个好用工具,它涵盖了常用所有功能,还提供了很多相当方便设计( Ajax)。...因此,它面世,星星之火燎原之势迅猛发展,以至于微软公司把它作为官方库。 这个小小 js 文件,你可以说他是插件,也可以称其为框架,随你喜欢,只要知道一点,它很好用就可以了。...3.选择所有的 p 标签(类比标签选择器) $('p') 4.选择 id 为 mylist 元素下所有 li 标签下 span 元素(类比层级选择器) $('#mylist li span') 5...,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象对象传播,从里到外,直至它被处理(对象所有同类事件都将被激活),或者它到达了对象层次最顶层...答:事件冒泡允许多个操作被集中处理(把事件处理器添加到一个元素上,避免把事件处理器添加到多个子元素上),它还可以让你在对象层不同级别捕获事件。

    2.8K10

    比较实用jQuery代码段

    如何为任何与选择器相匹配元素设置事件处理程序: $('button.someClass').live('click', someFunction); //注意,在jQuery 1.4.2,delegate...第一个运行结果 9bacaf 这个只是替换了第一个 "abacacf".replace(/a/g,'9') //第二个运行结果 9b9c9f 这个能实现js全部替换功能 11....如何在一段时间之后自动隐藏或关闭元素(支持1.4版本): //这是1.3.2我们使用setTimeout来实现方式 setTimeout(function() { $('.mydiv').hide...在jQuery如何测试某个元素是否可见 if($(element).is(':visible') == 'true') { //该元素是可见 } 16....如何使用closest来取得元素: closest() 方法获得匹配选择器第一个祖先元素,从当前元素开始沿 DOM 树向上。

    1.7K41

    JQuery基础

    "):选取第一个元素第一个元素 $("ul li:first-child"):选取每个元素下第一个元素 $("[href]"):选取所有带有href元素 $("a...(适用于表单字段)发生改变时),focus(元素获得焦点),blur(元素失去焦点)事件; 文档/窗口事件:load(元素已加载触发,在jQuery1.8废除。...4.遍历--过滤 first():返回被选元素第一个元素 last():返回被选元素最后一个元素 eq():返回被选元素带有指定索引号元素;索引号从0开始;:$('p').eq(1):返回第二个...noConflict() jQuery使用$作为jQuery简写。...所以存在一个问题:如果其它js框架使用了$符号,或者书写js代码定义了$作为变量或者函数名,这时候就会产生冲突。

    4.6K51

    学习zepto.js(Hello World)

    :'span-ele', css: { color: 'red' } })/*创建一个id为span-ele,显示值为hello,红色span标签*//*以上为作为选择器使用方法*/...该方法接收最多三个参数,   第一个为html值,可以只是一个标签,(“”)、或一个html片段,(“hello”);   第二个为一个标识符,用来确定标签类型,该变量主要用于对表格类元素进行一些特殊处理...接下来在数组containers循环查找看该标签是否为表格类标签,如果不是就给一个【*】,【*】临时容器为div。   ...方法接收两个参数,上下文,选择器;   $()方法如果不传入上下文的话,默认是这样调用 zepto.qsa(document,selector)   默认将document作为上下文传入;   作为一个看美剧十句话能听懂三句的人...方法,该选择器不包含子选择器并且选择器开头是个#号,这说明人家要是个ID:XXX标签       如果满足这种情况,就调用getElementById并将返回结果放入一个数组,这也是为什么获得jQuery

    3.5K80

    Python全栈之jQuery笔记

    选择div元素后面的第一个p元素 closest("from") $("div").closest("form"); 选择离div最近那个form元素 ================...). 1.jQuery遍历-祖先: parent() 返回被选元素直接元素,该方法只会向上一对 DOM 树进行遍历....$("div").find("*"); 返回 所有后代 3.jQuery遍历-同胞(siblings) 同胞拥有相同元素.通过jQuery,您能够在DOM树遍历元素同胞元素...,那么此事件就会调用这个处理程序, 如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象对象传播,从里到外,直至它被处理(对象所有同类事件都将被激活), 或者它到达了对象层次最顶层...事件冒泡作用: 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个元素上,避免把事件处理器添加到多个子元素上),它还可以让你在对象层不同级别捕获事件.

    5.5K40

    JQuery最全常用方法指南

    查找所有div子节点p,添加样式 $(”input:radio”, document.forms[0]) 在当前页面的第一个表单查找所有的单选按钮 $.extend(prop) prop是一个jquery...(”background”); end() 结束当前操作,回到当前操作前一个操作 找到所有p元素其中span元素集合,然后返回p元素集合,添加css属性 $(”p”).find(”span”).end...”) $(”div span: first - child”) 匹配元素第1个子元素 $(”div span: last - child”) 匹配元素最后1个子元素 $(”div button...使用jqueryjQuery.noConflict(); 方法即可把变量$控制权让渡给第一个实现它那个库或之前自定义$方法。...jQuery.noConflict(); // 开始使用jQuery jQuery("div p").hide(); // 使用其他库 $() $("content").style.display

    11K31

    浅谈JavaScript

    prop方法来完成 获取和设置元素value属性可以通过val方法来完成,更加方便 jQuery事件 1、常用事件 click()鼠标点击 blur()元素失去焦点 focus()元素获得焦点 mouseover...()鼠标进入(进入子元素也触发) mouseout()鼠标离开 ready()DOM加载完成 示例代码请私信作者哦 事件代理 1、事件代理介绍 事件代理就是利用事件冒泡原理(事件冒泡就是事件会向它传递...),把事件加到上,通过判断事件来源,执行相应子元素操作,事件代理首先可以极大减少事件绑定次数,提高性能;其次可以让新加入子元素也可以拥有相同操作。...p2">哈哈 JavaScript对象 1、JavaScript对象介绍 JavaScript所有事物都是对象...数组格式: 数据格式json数据,使用一对括号([]),括号里面的数据使用逗号分隔。

    3.2K30

    jQuery 基本语法

    jQuery代码及功能: function jq(){     $(":text:first").hide();  } 运行:当点击id为test元素时,隐藏form1表单type为text第一个...ancestors ()  一依次以匹配结点节点内容为对象,根节点除外(有点不好理解,看看下面例子就明白了) one two </span...alert($(f).eq(i).html());} } 第一个对象是以节点内容为对象,[ two ] 第一个对象是以节点节点(div)内容为对象,[one...$("#ch").children(“#sp”)过滤得到[three ] parent ()  parent (expr)取匹配对象节点。...插件 随着jQuery广泛使用,已经出现了大量jQuery插件,thickbox,iFX,jQuery-googleMap等,简单引用这些源文件就可以方便使用这些插件。

    3.8K40

    jQuery基本操作

    ]  (*)匹配所有元素  HTML代码: DIV SPAN P jQuery代码: $("*") 结果: [DIV</...siblings元素 prev //任何有效选择器 siblings //一个选择器,并且它作为第一个选择器同辈 //描述 //找到所有与表单同辈(inout)元素 HTML代码 <form...,那将会被匹配· //如果元素中含有其他元素,那将 不会被匹配·(注:这里其它元素并不包含文本节点,:网页,用$('p img:only-child')是可以匹配)...properties 作为属性"名、值对"对象 key,value 1·属性名称 2·返回属性值函数·第一个参数为当前元素索引值·第二个参数为原先属性值· 参数name描述 选中复选框为,...元素index是:"+n; })   val([val|fn|arr]) //概述 //获得匹配元素的当前值 //jQuery 1.2,可以 返回任意值了.包括select.如果多选,将返回一个数组

    7.5K20

    jQuery选择器(满足你所有业务)

    $("ul li:first") //选取第一个 元素第一个 元素 $("ul li:first-child")//选取每个 元素第一个 元素 $("div...#intro .head") //id="intro" 元素所有 class="head" 元素 $("*") //所有元素 类别选择器 $(".intro")...intro") //id="intro" 元素 后代选择器 $("p span") //选取元素里所有的元素(注:后代选择器选择元素所有指定选择元素,不管是儿子,还是孙子...) 子选择器 $("p>span") //选择元素下所有元素 (注:子选择器只选择直属于元素子元素) 同辈选择器 $(".intro+p") //选取class为intro...>元素第一个元素 $("p:last") //选取所有元素中最后一个元素 $("input:not(.myClass)")//选取class不是myClass元素

    89720

    前端之jquery函数库

    微软公司甚至把jQuery作为他们官方库。...2、正则表达式写法: var re=new RegExp('规则', '可选参数'); var re=/规则/参数; 3、规则字符  1)普通字符匹配: :/a/ 匹配字符 ‘a’,/a,b/...,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象对象传播,从里到外,直至它被处理(对象所有同类事件都将被激活),或者它到达了对象层次最顶层...事件冒泡作用  事件冒泡允许多个操作被集中处理(把事件处理器添加到一个元素上,避免把事件处理器添加到多个子元素上),它还可以让你在对象层不同级别捕获事件。...,把事件加到上,通过判断事件来源子集,执行相应操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入子元素也可以拥有相同操作。

    5.2K20

    jQuery中常用函数和属性详细解析

    相当于在body写了一段html代码 $(elems) 获得DOM上某个元素 $(function(){……..}); 执行一个函数 $("div > p").css("border", "1px...solid gray"); 查找所有div子节点p,添加样式 $("input:radio", document.forms[0]) 在当前页面的第一个表单查找所有的单选按钮 jQuery为开发插件提拱了两个方法...queue( ) 取得第一个匹配元素动画序列引用(返回一个内容为函数数组) queue( callback ) 在每一个匹配元素事件序列末尾添加一个可执行函数,作为此元素事件函数 queue...("background"); end( ) 结束当前操作,回到当前操作前一个操作 找到所有p元素其中span元素集合,然后返回p元素集合,添加css属性 $("p").find("span")....") $("div span:first-child")匹配元素第1个子元素 $("div span:last-child") 匹配元素最后1个子元素 $("div button:only-child

    2.6K10
    领券