span标签实例（jquery如何获取span的文本）

本文目录

• jquery如何获取span的文本
• span一般在什么时候用举下例子！
• 关于PHP动态增加标签实现菜单标题变颜色问题
• jquery 怎么获取span下第一个i标签
• css 中的li 里面默认的黑色点如何换成红色的，然后圆圈变大
• jquery如何获取脚本中数组的值
• css如何实现table里放置色块
• js怎么获取名字中的内容:名字

jquery如何获取span的文本

jquery提供了两个获取对象内容的方法：

• text()     设置或返回所选元素的文本内容

• html()    设置或返回所选元素的内容（包括 HTML 标记）

下面实例演示：获取《span》标签文本

1、HTML结构

《span id="test"》我是span的文本《/span》《br》《input type=’button’ value=’span标签的内容’/》

2、jquery代码

$(function(){$("input").click(function() {alert($("span#test").text());});});

3、效果演示

span一般在什么时候用举下例子！

/*html我是一行《span class="red"》红色的《/span》和《span class="black"》黑色的《/span》组合。。//span是行内元素,DIV是块元素。。简单的说span加在内容里，还是一行显示，DIV加进去了，就会换行。。DIV自己要占用一行的。。如果不设置DIV的宽度的话

关于PHP动态增加标签实现菜单标题变颜色问题

《ul id="menu" class="menu"》《li》《a class="menuON" href="#" title="#"》标题一《/a》《/li》《li》《a class="menuON" href="#" title="#"》标题二《/a》《/li》《li》《a class="menuON" href="#" title="#"》标题三《/a》《/li》《li》《a class="menuON" href="#" title="#"》标题四《/a》《/li》《/ul》《style》.menuON{}.menuON:hover{}《/style》

jquery 怎么获取span下第一个i标签

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

1、使用css选择器： first-child 或nth-child(1)，具体代码为：$("span.label i:first-child") 或  $("span.label i:nth-child(1)")

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

$("span.label").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》《i》1-2《/i》《/span》《br》

    《span class=’label’》《i》2-1《/i》《i》2-2《/i》《/span》《br》

    《span class=’label’》《i》3-1《/i》《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() { // 点击按钮就相应下面的操作

        // $("span.label i:first-child").addClass(’red’); // 方法1，使用first-child选择器

        // $("span.label i:nth-child(1)").addClass(’red’);  // 方法2，使用nth-child(1)选择器

        $("span.label").each(function() {

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

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

        });

    });

});

《/script》

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

css 中的li 里面默认的黑色点如何换成红色的，然后圆圈变大

上述样式一般通过取消默认的list标记，然后以图片的形式实现；但是，也可以直接设置li的样式实现，思路是在li标签下嵌套span标签，然后将li的样式设置为红色，字号较大，而span为正常的样式。下面给出后者的实例演示：

1. 创建Html元素

   《div class="box"》《span》通过设置li及其子元素span的不同样式将li默认的黑色标记改为红色，且显示较大：《/span》《br》《div class="content"》《ul class="test"》  《li》《span》Glen《/span》《/li》  《li》《span》Tane《/span》《/li》  《li》《span》John《/span》《/li》  《li》《span》Ralph《/span》《/li》《/ul》《/div》《div class="content"》《ul》  《li》Glen《/li》  《li》Tane《/li》  《li》John《/li》  《li》Ralph《/li》《/ul》《/div》《/div》

2. 设置css样式

   div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}div.box》span{color:#999;font-style:italic;}div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}li{margin:5px 0;}ul.test li{color:red;font-size:30px;}ul.test li span{display:inline-block;color:black;font-size:16px;}

3. 观察对比效果

jquery如何获取脚本中数组的值

jquery提供了map()方法，把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。由于返回值是 jQuery 封装的数组，使用 get() 来处理返回的对象以得到基础的数组。最后，使用 join() 函数将数组链接为字符串，便于输出。关键代码为

$("span a").map(function() { return $(this).html();}).get().join(" ");

实例演示：获取所有span标签下的超链的名称

1. 创建Html元素

   《div class="box"》《span》实例演示：获取所有span标签下的超链的名称《/span》《br》《div class="content"》《span》《a href="#"》无线上网《/a》《/span》《span》《a href="#"》可以刷卡《/a》《/span》    《/div》《input type="button" value="获取"》《/div》

2. 设置css样式

   div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}div.box》span{color:#999;font-style:italic;}div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}input{height:30px;margin:10px;padding:5px 10px;}

3. 编写jquery代码

   $(function(){ $(":button").click(function() {text = $("span a").map(function() {return $(this).html();}).get().join(" ");alert(text);});});

4. 观察效果

css如何实现table里放置色块

《table width="226" height="136"》 《tr》  《td width="134"》衣服颜色《br /》《div style="background:#FC9; width:60px; height:20px; display:block;"》《/div》 《/td》  《td width="80"》价格：xxx元《/td》 《/tr》《/table》

这样

js怎么获取名字中的内容:名字

思路：根据标签名称获取所有span对象，然后根据类名筛选出目标对象，最后使用 innerHTML 属性获取文本。实例演示如下：

1、HTML结构

《span class="xing"》姓氏《/span》《span class="name"》名字《/span》《span class="sheng"》籍贯《/span》 《br》《input type=’button’ value=’获取class=name的span’ onClick="fun()"/》

2、javascript代码

function fun(){obj = document.getElementsByTagName("span");class_name = "name";for(i in obj){if(obj.className == class_name){alert(obj.innerHTML);return}}}

3、效果演示