jQuery 处理网页内容的实现代码

2016-02-19 13:46 3 1 收藏

下面是个简单易学的jQuery 处理网页内容的实现代码教程，图老师小编详细图解介绍包你轻松学会，喜欢的朋友赶紧get起来吧！

【 tulaoshi.com - Web开发】

jQuery提供两种实现这种功能的方法 – text()和html()。text()是对纯文本的处理；html()和text()相似，不同的是它还支持HTML代码。

代码如下：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）
//设置ID为"b5_a"段落的内容为"这是新加入的文本信息";
$('#b5_a").text("这是新加入的文本信息");
//在ID为"b5_b"的div里加入一段html代码；
$("#b5_b").html("p新加入一个html段落/p");

有时我们要读取页面的内容，这也可以用text()和html()来实现。同样，使用text()得到的是纯文本；使用html()得到的是html代码。

代码如下：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）
//点击第二个按钮查看相关元素的文本内容
$("button:eq(1)").click(function(){
alert($('#b5_a').text());
});
//点击第四个按钮查看相关元素的HTML内容
$("button:eq(3)").click(function(){
alert($('#b5_a').html());
});

注意：text()和html()返回值得类型都是字符串型（string）。如果我们要对返回值进行算术运算，我们可以使用原始的JavaScript 函数：parseInt 或者 parseFloat 先把字符串转换成整形或者浮点型。

代码如下：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）
ul id="u2"
li12.3/li
li1.5/li
/ul
//通过下面的jQuery代码，可以对上述列表求和
$("button:eq(4)").click(function(){
var sum = 0;
$('li').each(function(index){
sum += parseFloat($(this).text());
});
alert(sum);
});

来源:http://www.tulaoshi.com/n/20160219/1605189.html

上一篇：正则表达式优先级顺序
下一篇：在Word2010中创建极限和对数公式

看过《jQuery 处理网页内容的实现代码》的人还看了以下文章更多>>

jquery 锁定弹出层实现代码

标签： Web开发

基于jquery的锁定弹出层这个东西也是随手总结出来的，引用了一些js框架jquery的方法。 div遮盖其他控件的方法参考了对于需要遮盖flash的，请将flash控件的WMode变量值设置为Transparent 使用方法：代码如下： script src="jquery.js"/script script src="effect/maskDiv.js"/script script //配置模块 var moduleEvent = [{"i...

jQuery 全选效果实现代码

标签： Web开发

多选效果如下图代码如下: 代码如下: script type="text/javascript"!-- $(document).ready(function() { $("#selectall").click(selectAll); }); function selectAll() { var checked = $("#selectall").attr("checked"); $(".selectable").each(function() { var subchecked = $(this).attr("checked"); if (subchecked != ch...

JQuery 网站换肤功能实现代码

标签： Web开发

从那以后，我找到了很多可以让访客通过鼠标点击某个地方切换样式表的方法。但最近我要写一篇如何使用jQuery编写简单代码实现它的教程。我将向你们逐步解说整个的过程，不仅仅因为要展示jQuery代码的简介，同时也要揭示jQuery库中的若干高级特性。首先，代码代码如下: $(document).ready(function() { $('.styleswitch').click(funct...

Jquery 弹出层插件实现代码

标签： Web开发

直接看代码：代码如下: %@ Page Language="C#" AutoEventWireup="true" CodeFile="Layer.aspx.cs" Inherits="Layer" % !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head runat="server" title/title scri...

jquery tabs的实现代码

标签： Web开发

关键代码：代码如下: $(function(){ $(".tabs li").eq(0).css("background","#499AFF"); $(".tabs div").eq(0).show(); $(".tabsulli").click(function(i){ $(this).css("background","#499AFF").siblings().css("background","#ffffff"); $(".tabs div").eq($("li").index(this)).show().siblings("div").hide(); return false; }) ...

查看更多精彩>>