jquery1.4 教程一便利的设置函数

2020-05-12 我要评论

便利的设置函数
jquery1.4的大部分设置值对方法都可以设置第二个参数为回调函数。比如：.css(), .attr(), .val(), .html(), .text()。
这说法很抽象，来看示例 http:/https://img.qb5200.com/download-x/demo.jb51.net/js/jquery1.4/jquery_1.htm

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>便利的设置函数</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<link href="basic.css" rel="stylesheet" type="text/css" /> 
<link href="demo.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript"> 
$(function(){ 
    $("#btn1").click(function(){ 
        $('#a1').html(function(i,html){ 
            return html.replace(/。/g,'！已经被替换'); 
        });         
    }) 
    $("#btn2").click(function(){ 
        $('#a1').attr("title",function(i,title){ 
            return title + " (已经被替换)"; 
        });         
    })     
}) 
</script> 
</head> 
<body> 
<h1 class="left_h1">改进一：jquery1.4的大部分设置值对方法都可以设置第二个参数为回调函数。比如：.css(), .attr(), .val(), .html(), .text()。</h1> 
<p></p> 
<h4>看下面的demo</h4> 
<p><a href="" id="a1" title="测试">这是一个链接。</a></p> 
<p>现在使用回调函数中直接对衔接中的文字进行替换。以前的方法是先取a的htnl，然后再使用正则匹配，最后进行替换。</p> 
<p>1.4一步搞定，来看代码：</p> 
<p><code> 
        $('#a1').html(function(i,html){ 
            return html.replace(/。/g,'！已经被替换'); 
        });     
</code> 
<input name="btn1" id="btn1" type="button" value="点此替换" /> 
你会发现，衔接的"。"被替换为"！已经被替换"。 
</p> 
<p>是不是比以前方便多了？</p> 
<p>同样适用于其他设置值对方法，比如attr()，可以试着第二个参数改变成函数看看。</p> 
<p>这次替换链接的title属性：</p> 
<p><code> 
        $('#a1').attr("title",function(i,title){ 
            return title + " (已经被替换)"; 
        });         
</code></p> 
<p> 
<input name="btn2" id="btn2" type="button" value="点此替换" /> 
</p> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

1.4之前想要对某对象进行文本替换的代码如下：

复制代码代码如下:

<a href="" id="a1" title="测试">这是一个链接。</a>
var _html = $('#a1').html();
var _newHtml = html.replace(/。/g,'！已经被替换');
$('#a1').html(_newHtml);

而1.4只要如此：

复制代码代码如下:

$('#a1').html(function(i,html){return html.replace(/。/g,'！已经被替换');});

一行代码搞定！重要的是可以遍历多个对象，进行分别处理。
来看下回调函数的二个参数：
第一个参数为索引值，在对遍历对象进行分别处理时就很有用
第二个参数为旧的html值。
此回调函数务必有返回值！
这种处理方式，不止可应用于html()，其他的设置值对方法基本上都可以。详细列表如下：
.css(), .attr(), .val(), .text(), .append(), .prepend(), .before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass(), .toggleClass()
下一期将重点讲解jquery1.4在ajax方面的改进。

jquery1.4 教程一便利的设置函数

相关文章

猜您喜欢

今日热门

jquery1.4 教程一 便利的设置函数

相关文章

猜您喜欢

今日热门

jquery1.4 教程一便利的设置函数