Skip to content
Browse files

[doc] 增加Array的链式DEMO

RT
  • Loading branch information...
1 parent eb62bee commit b35811e180881decf9dd9610ed689eb4db02ca38 @zhanghongyan committed
View
51 demos/baidu.array().contains()/default.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta name="description" content="baidu.array().contains() 示例" />
+ <title>baidu.array().contains() 示例</title>
+ <link rel="stylesheet" href="../../demos/public.css" type="text/css" />
+ <script type="text/javascript" src="../../demos/tangram2.0-all.js"></script>
+ <script type="text/javascript" src="../../demos/public.js"></script>
+ </head>
+ <body>
+ <div class="demo" id="demo">
+ <h1 class="ac-h1"><strong>baidu.array().contains()</strong> 示例</h1>
+ <p class="ac-des">
+ 判断一个数组中是否包含某一项
+ </p>
+
+ <ul class="ac-ul">
+ <li>语法: baidu.array().contains(item)</li>
+ <li>参数1: {Any} item 被包含项</li>
+ <li>返回: {Boolean} 是否包含</li>
+ </ul>
+ <div class="pannel">
+ <div class="pannel-title">
+ <span>判断一个数组中是否包含某一项</span>
+ </div>
+ <div class="pannel-content">
+ <div class="pannel-content-tool">
+ <a class="button" id="demo_btn_1">点击运行</a>判断数组:['a',function(){console.log(1)},'身边','新知','1','','d'], 是否包含指定的项
+ <select id="param0">
+ <option value="1">1</option>
+ <option value="a">a</option>
+ <option value="c">c</option>
+ </select>
+ </div>
+ <div class="pannel-show">
+ 运行结果:<span id="demo_execute_result_1"></span>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </body>
+ <script>
+ baidu('#demo_btn_1').on('click',function(e){
+ var arr = ['a',function(){console.log(1)},'身边','新知','1','','d'],
+ value=baidu('#param0').val();
+ baidu('#demo_execute_result_1').html(value + '' + baidu.array(arr).contains(value));
+ });
+ </script>
+</html>
View
27 demos/baidu.array().each()/default.html
@@ -2,47 +2,46 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="description" content="baidu.array.each 示例" />
- <title>baidu.array.each 示例</title>
+ <meta name="description" content="baidu.array().each() 示例" />
+ <title>baidu.array().each()</title>
<link rel="stylesheet" href="../../demos/public.css" type="text/css" />
<script type="text/javascript" src="../../demos/tangram2.0-all.js"></script>
<script type="text/javascript" src="../../demos/public.js"></script>
</head>
<body>
<div class="demo" id="demo">
- <h1 class="ac-h1"><strong>baidu.array.each</strong> 示例</h1>
+ <h1 class="ac-h1"><strong>baidu.array().each()</strong> 示例</h1>
<p class="ac-des">
枚举数组的每一项,作为指定函数执行的参数
</p>
+
<ul class="ac-ul">
- <li>语法: baidu.array.each(iterator, context)</li>
- <li>参数1: {Function} iterator(item, index, array)</li>
- <li>参数2: {Object} context</li>
- <li>返回: {TangramArray}</li>
+ <li>语法: baidu.array().each(iterator, context)</li>
+ <li>参数1: {Function} iterator(item, index, array) 枚举器,函数</li>
+ <li>参数2: {Object} context 方法作用域</li>
+ <li>返回: {TangramArray} 数组</li>
</ul>
<div class="pannel">
<div class="pannel-title">
- <span>枚举数组</span>
+ <span>枚举数组的每一项,作为指定函数执行的参数</span>
</div>
<div class="pannel-content">
- <!--DemoViewStart-->
<div class="pannel-content-tool">
- <a class="button" id="demo_btn_1">点击此处,枚举数组:["a", "b", "c", "d", "e"], 并给出索引值</a>
+ <a class="button" id="demo_btn_1">点击运行</a>枚举数组:['a',function(){console.log(1)},'身边','新知',1,'','d'], 并给出索引值
</div>
<div class="pannel-show">
运行结果:<span id="demo_execute_result_1"></span>
</div>
- <!--DemoViewEnd-->
</div>
</div>
-
</div>
</body>
<script>
baidu('#demo_btn_1').on('click',function(e){
+ var arr = ['a',function(){console.log(1)},'身边','新知',1,'','d'];
baidu('#demo_execute_result_1').html('');
- baidu.array.each(["a", "b", "c", "d", "e"], function(item, index){
- baidu('#demo_execute_result_1').html(baidu('#demo_execute_result_1').html() + index + ":" + item + " ; ");
+ baidu.array(arr).each(function(item, index){
+ baidu('#demo_execute_result_1').html(baidu('#demo_execute_result_1').html() + index + ':' + item + ';');
});
});
</script>
View
43 demos/baidu.array().empty()/default.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta name="description" content="baidu.array().empty() 示例" />
+ <title>baidu.array().empty() 示例</title>
+ <link rel="stylesheet" href="../../demos/public.css" type="text/css" />
+ <script type="text/javascript" src="../../demos/tangram2.0-all.js"></script>
+ <script type="text/javascript" src="../../demos/public.js"></script>
+ </head>
+ <body>
+ <div class="demo" id="demo">
+ <h1 class="ac-h1"><strong>baidu.array().empty()</strong> 示例</h1>
+ <p class="ac-des">
+ 清空数组
+ </p>
+ <ul class="ac-ul">
+ <li>语法: baidu.array().empty()</li>
+ <li>返回: {Array} 空数组</li>
+ </ul>
+ <div class="pannel">
+ <div class="pannel-title">
+ <span>清空数组</span>
+ </div>
+ <div class="pannel-content">
+ <div class="pannel-content-tool">
+ <a class="button" id="demo_btn_1">点击运行</a>清空数组['a',function(){console.log(1)},'身边','新知',1,'','d'];
+ </div>
+ <div class="pannel-show">
+ 运行结果:<span id="demo_execute_result_1"></span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+ <script>
+ baidu('#demo_btn_1').on('click',function(e){
+ var arr = ['a',function(){console.log(1)},'身边','新知',1,'','d'];
+ baidu.array(arr).empty();
+ baidu('#demo_execute_result_1').html('数组清空后长度为:' + arr.length + ',内容为' + arr.join(','));
+ });
+ </script>
+</html>
View
46 demos/baidu.array().every()/default.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta name="description" content="baidu.array().every() 示例" />
+ <title>baidu.array().every() 示例</title>
+ <link rel="stylesheet" href="../../demos/public.css" type="text/css" />
+ <script type="text/javascript" src="../../demos/tangram2.0-all.js"></script>
+ <script type="text/javascript" src="../../demos/public.js"></script>
+ </head>
+ <body>
+ <div class="demo" id="demo">
+ <h1 class="ac-h1"><strong>baidu.array().every()</strong> 示例</h1>
+ <p class="ac-des">
+ 遍历数组每一项,判断是否全部符合指定的条件
+ </p>
+
+ <ul class="ac-ul">
+ <li>语法: baidu.array().every(iterator[, context])</li>
+ <li>参数1: {Function} iterator 用于做对比的函数</li>
+ <li>参数2: {Object} context 方法作用域</li>
+ <li>返回: {Boolean} 是否全部满足条件</li>
+ </ul>
+ <div class="pannel">
+ <div class="pannel-title">
+ <span>遍历数组每一项,判断是否全部符合指定的条件</span>
+ </div>
+ <div class="pannel-content">
+ <div class="pannel-content-tool">
+ <a class="button" id="demo_btn_1">点击运行</a>判断数组 ['a',function(){console.log(1)},'身边','新知',1,'','d'] 中的每一项是否满足指定条件isNaN
+ </div>
+ <div class="pannel-show">
+ 运行结果:<span id="demo_execute_result_1"></span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+ <script>
+ baidu('#demo_btn_1').on('click',function(e){
+ var arr = ['a',function(){console.log(1)},'身边','新知',1,'','d'],
+ result = baidu.array(arr).every(function (item, index) {return isNaN(item);});
+ baidu('#demo_execute_result_1').html(''+result);
+ })
+ </script>
+</html>
View
51 demos/baidu.array().filter()/default.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta name="description" content="baidu.array().filter() 示例" />
+ <title>baidu.array().filter() 示例</title>
+ <link rel="stylesheet" href="../../demos/public.css" type="text/css" />
+ <script type="text/javascript" src="../../demos/tangram2.0-all.js"></script>
+ <script type="text/javascript" src="../../demos/public.js"></script>
+ </head>
+ <body>
+ <div class="demo" id="demo">
+ <h1 class="ac-h1"><strong>baidu.array().filter()</strong> 示例</h1>
+ <p class="ac-des">
+ 过滤数组
+ </p>
+
+ <ul class="ac-ul">
+ <li>语法: baidu.array().filter(iterator[, context])</li>
+ <li>参数1: {Function} iterator 用于做对比的函数</li>
+ <li>参数2: {Object} context 方法作用域</li>
+ <li>返回: {Array} 已经过滤后的数组</li>
+ </ul>
+ <div class="pannel">
+ <div class="pannel-title">
+ <span>过滤数组</span>
+ </div>
+ <div class="pannel-content">
+ <div class="pannel-content-tool">
+ <a class="button" id="demo_btn_1">点击运行</a>过滤数组 ['a',function(){console.log(1)},'身边','新知',1,'','d'],筛选符合指定条件的项
+ <select id="param0">
+ <option value="isNaN(item)">不是数字</option>
+ <option value="item.length &gt; 1">长度大于1</option>
+ </select>
+ </div>
+ <div class="pannel-show">
+ 运行结果:<span id="demo_execute_result_1"></span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+ <script>
+ baidu('#demo_btn_1').on('click',function(e){
+ var value=baidu('#param0').val(),
+ arr = ['a',function(){console.log(1)},'身边','新知',1,'','d'],
+ result = baidu.array(arr).filter(function (item, index) {return eval(value);});
+ baidu('#demo_execute_result_1').html( '条件:' + value + ';结果:' + result);
+ })
+ </script>
+</html>
View
53 demos/baidu.array().find()/default.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta name="description" content="baidu.array().find() 示例" />
+ <title>baidu.array().find() 示例</title>
+ <link rel="stylesheet" href="../../demos/public.css" type="text/css" />
+ <script type="text/javascript" src="../../demos/tangram2.0-all.js"></script>
+ <script type="text/javascript" src="../../demos/public.js"></script>
+ </head>
+ <body>
+ <div class="demo" id="demo">
+ <h1 class="ac-h1"><strong>baidu.array().find([fn])</strong> 示例</h1>
+ <p class="ac-des">
+ 从数组中寻找符合条件的第一个元素,找不到时返回null
+ </p>
+
+ <ul class="ac-ul">
+ <li>语法: baidu.array().find([fn])</li>
+ <li>参数1: {Function} iterator 用于做对比的函数</li>
+ <li>返回: {Object} 匹配的项</li>
+ </ul>
+ <div class="pannel">
+ <div class="pannel-title">
+ <span>从数组中寻找符合条件的第一个元素</span>
+ </div>
+ <div class="pannel-content">
+ <div class="pannel-content-tool">
+ <a class="button" id="demo_btn_1">点击运行</a>从数组['a',function(){console.log(1)},'身边','新知',1,'','d'],寻找符合条件的第一个元素
+ <select id="param0">
+ <option value="isNaN(item)">不是数字</option>
+ <option value="item.length &gt; 1">长度大于1</option>
+ <option value="typeof(item)=='number'">是数字</option>
+ <option value="item.length &gt; 3">长度大于3</option>
+ <option value="item.length &lt; 1">长度小于1</option>
+ </select>
+ </div>
+ <div class="pannel-show">
+ 运行结果:<span id="demo_execute_result_1"></span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+ <script>
+ baidu('#demo_btn_1').on('click',function(e){
+ var value=baidu('#param0').val(),
+ arr = ['a',function(){console.log(1)},'身边','新知',1,'','d'],
+ result = baidu.array(arr).find(function (item, index) {return eval(value);});
+ baidu('#demo_execute_result_1').html( '条件:' + value + ';结果:' + result);
+ })
+ </script>
+</html>

0 comments on commit b35811e

Please sign in to comment.
Something went wrong with that request. Please try again.