jQuery或者js如何获得div后面的标签或标签内容

jQuery或者js如何获得div后面的标签或标签内容,第1张

可以使用next()

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

html代码如下

<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

Jquery获取

$("p")next()

结果获取标签

<p>Hello Again</p>, <div><span>And Again</span></div>

获取标签内容

$("p")next("eq:(0)")html() //Hello Again

1、新建html文档,在body标签中添加p标签,然后在head标签中引入jQuery文件:

2、在body标签中添加script标签,用jQuery选择器获取p标签,然后用html方法获取标签里面的内容并将结果输出:

3、用浏览器打开html文档,打开浏览器的控制台,可以看到标签中的内容已经被获取到了:

有两种方法可以实现获取span下第一个i标签:

1、使用css选择器: first-child 或nth-child(1),具体代码为:$("spanlabel i:first-child") 或  $("spanlabel i:nth-child(1)")

2、使用遍历方法:first()、eq()等,具体代码为:

$("spanlabel")each(function() {

$(this)find("i:eq(0)")   // 或者$(this)find("i")first()

});

下面进行实例演示:为所有span的第一个i标签的元素都添加红色样式:

1、新建一个HTML文件,为了演示需要假设如下的HTML结构:

<div id="test">

    <span class='label'><i>1-1</i>&nbsp;&nbsp;<i>1-2</i></span><br>

    <span class='label'><i>2-1</i>&nbsp;&nbsp;<i>2-2</i></span><br>

    <span class='label'><i>3-1</i>&nbsp;&nbsp;<i>3-2</i></span>

</div>

<input type="button" id="btn" value="设置">

2、在上面新建文件的开头部分添加如下jquery代码:主要逻辑为在点击按钮时相应一个 *** 作,即获取span下第一个i标签(下面注释部分给出了4种方法都是可行的,可以根据需要进行选择)。为了演示效果,使用addClass()函数为获取到的span下第一个i标签添加红色的样式。

<script>

$(function(){

    $("#btn")click(function() { // 点击按钮就相应下面的 *** 作

        // $("spanlabel i:first-child")addClass('red'); // 方法1,使用first-child选择器

        // $("spanlabel i:nth-child(1)")addClass('red');  // 方法2,使用nth-child(1)选择器

        $("spanlabel")each(function() {

            // $(this)find("i:eq(0)")addClass('red');   // 方法3,遍历后使用eq()方法

            $(this)find("i")first()addClass('red');      // 方法4,遍历后使用first()方法

        });

    });

});

</script>

3、保存文件,使用浏览器打开,点击按钮后效果如下:

1、$("form :input") 返回form中的所有表单对象,包括textarea、select、button等

2、 $("form input")返回form中的所有input标签对象

3、form input 是属于层级选择器(将每一个选择器匹配到的元素合并后一起返回)

4、form :input是属于表单选择器(匹配所有<input>、<textarea>、<select>、<button>元素)

jquery怎么取得form表单的url路径,并提交;

<script type="text/javascript"> function uimage monkeyuploadFile"h",type:"image"function(path) alert(path);

$("#ren")append("<img src=" + "/Images/Upload/" + path + id='sctp'style='width:500px;height:500px'/>");

</script></head><body> <input type="file" name="h" id="h" onchange="uimage;"/> <div id="ren"></div></body>

扩展资料

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。

jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档 *** 作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。

jQuery兼容各种主流浏览器,如IE 60+、FF 15+、Safari 20+、Opera 90+等。

参考资料

jQuery-百度百科

1、新建一个html文件,命名为testhtml,用于讲解。

2、在testhtml文件内,在p标签内,使用a标签创建一个链接,同时设置id为mylink,主要用于下面通过该id获得a对象。

3、在testhtml文件内,给a标签添加title属性,属性值为“这是测试的链接”。

4、在testhtml文件内,使用button标签创建一个按钮,按钮名称为“获得title内容”。

5、在testhtml文件中,给button按钮绑定onclick点击事件,当按钮被点击时,执行getitle()函数。

6、在js标签内,创建getitle()函数,在函数内,通过id(mylink)获得a对象,使用attr()方法获得title属性值,即title的内容,最后,使用alert()方法将获得的内容输出。

7、在浏览器打开testhtml文件,点击按钮,查看实现的效果。

直接获取label对应的input对象就行,因为label会触发其对应的input对象,触发形式有两种,你这里用label将input对象包裹起来的写法是隐式触发,另一种显示触发是为label加上for属性,属性值指向input对象的id,无论采取哪种方法,label标签的点击事件都会传递到input对象上,所以这里可以这样获取:

// 点击触发,获取当前点击那个值就行

$('btn-groupbtn-overlapbtn-corner')find(':radio')click(function() {

consolelog($(this)val());

})

// 直接获取,获取哪个选中

var rdovalue = $('btn-groupbtn-overlapbtn-corner')find(':radio:checked')val();

consolelog(rdovalue);

jquery获取标签名称:

jquery tagName prop()

如果想看某个元素是什么元素类型,只需要使用:

[object]attr("tagName")便可获取。

可以通过很多方式获取:id,name,class等都可以获取

$("#id")attr("自定义属性")

$("input[name="名称"]")attr("自定义属性")

$("class")attr("自定义属性")

模式就是这样的

以上就是关于jQuery或者js如何获得div后面的标签或标签内容全部的内容,包括:jQuery或者js如何获得div后面的标签或标签内容、jquery中 怎样获得h1标签中的内容、jquery 怎么获取span下第一个i标签等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9325171.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-27
下一篇 2023-04-27

发表评论

登录后才能评论

评论列表(0条)

保存