clay-core
Version:
Provide a more friendly web-side drawing interface!
154 lines (148 loc) • 7.12 kB
HTML
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../../libs/easycss-1.3.1.min.css">
<link rel="stylesheet" href="../../libs/prettify.css">
<link rel="stylesheet" href="../../doc.css">
<script src="../../libs/prettify.js"></script>
</head>
<body onload="prettyPrint()">
<header>
基本的结点操作
</header>
<p>
结点操作主要是指挂载在clay对象上的方法集合，是clay.js的基础API，如果你选择浏览器绘图而不是node.js的话。
</p>
<h2>
创建clay对象
</h2>
<p>
clay对象是指维护了一些结点集合，并挂载了一些快捷方法来操作维护的结点的一个js对象，其中的快捷方法可以帮助你在屏蔽不同浏览器和不同结点类型的差异的情况下操作结点。
</p>
<pre class='prettyprint lang-js'>// 获取clay对象
var clayObject=$$(selector[,context]);</pre>
<p>
$$或clay是一个挂载在window或global全局对象上的方法，传递一个选择器就可以获得一个clay对象，其中selector表示一个类似css选择器的字符串。
</p>
<p>
第二个参数context是可选的，默认在全局查找，你也可以通过传递一个dom结点指定查找上下文（id选择器一定在全局查找），记住，不可以传递clay对象。
</p>
<h4>
selector选择器
</h4>
<ul>
<li>第一类：单一选择器，包括#id、.class、tagName和[attr='value']；</li>
<li>第二类：组合选择器，第一类选择器的任意组合；</li>
<li>第三类：全部选择器，也就是传递一个字符串'*'会选中页面全部结点；</li>
<li>第四类：模板选择器，也就是一个标签字符串，比如"<div></div>"；</li>
<li>第五类：clay对象，你当然也可以传递一个clay对象；</li>
<li>第六类：结点集合，一个数组，数组的成员是DOM结点。</li>
</ul>
<p>
需要注意的是，tagName元素选择器如果使用，必须在开头，且只可以使用一个；属性选择器可以不指定值；模板选择器必须有一个大的标签包裹全部。下面看看几个例子：
</p>
<pre class="prettyprint lang-js error">$$('[name="data"]line')、$$('<line></line><line></line>')</pre>
<pre class="prettyprint lang-js bingo">$$('line[name="data"]')、$$('[name]')、$$('<g><line></line><line></line></g>')</pre>
<p>
至此，我们就知道如何创建一个clay对象了，余下的就是使用其上的快捷方法，这是非常容易的。
</p>
<h2>
查找结点
</h2>
<p>
虽然创建clay对象的时候可以传递一个选择器查找结点，但是在实际开发中，有时需要在此基础上继续查找。
</p>
<pre class="prettyprint lang-js">var newClayObject=clayObject.find(selector);</pre>
<p>
这会把当前维护的第一个结点作为上下文查找，返回新的clay对象。
</p>
<pre class="prettyprint lang-js">var newClayObject=clayObject.eq(0);</pre>
<p>
返回一个新的clay对象，其中只维护了原对象维护的第一个结点。有时候，你可能会需要获取某个维护的结点（不是clay对象），比如你想获取维护的第8个结点：
</p>
<pre class="prettyprint lang-js">var dom=clayObject[7];</pre>
<p>
上面的方法可能会出现错误，如果clayObject维护的结点个数少于8个的话，你可以通过下面的方法获取对象维护的结点个数：
</p>
<pre class="prettyprint lang-js">var domNum=clayObject.length;</pre>
<p>
还有一种情况，比如你之前查找了页面上全部的line标签，此刻页面line标签有了一些改变，你可以通过下面的方法更新一下维护的结点：
</p>
<pre class="prettyprint lang-js">clayObject.refresh();</pre>
<h2>
结点编辑
</h2>
<p>
结点的编辑主要包括三类：结点自身、结点属性和样式。
</p>
<h4>
结点自身
</h4>
<p>
删除clay对象维护的全部结点：
</p>
<pre class="prettyprint lang-js">clayObject.remove();</pre>
<p>
把当前维护的全部结点追加到指定结点内部：
</p>
<pre class="prettyprint lang-js">clayObject.appendTo(selector);</pre>
<h4>
结点属性
</h4>
<pre class="prettyprint lang-js">clayObject.attr(attr[, val]);</pre>
<p>
之前应该在教程系列中的数据和结点操作一节中有看过这个方法，该方法是和数据与结点绑定有关系的方法，在设置属性的时候可以使用结点记录的数据来计算。
</p>
<pre class="prettyprint lang-js">var name=clayObject.attr('name');</pre>
<p>
如果该方法只传递一个参数，表示获取该属性的值，比如上面获取name属性的值。
</p>
<pre class="prettyprint lang-js">clayObject.attr('name','新的name值');</pre>
<p>
如果第二个参数是一个字符串，比如这里，表示设置name属性的值为'新的name值'。
</p>
<pre class="prettyprint lang-js">clayObject.attr('name',function(data, index, target){
//里面需要返回一个值，表示为name属性设置的新值
});</pre>
<p>
上面这种方法就是沟通数据和结点的关键用法之一，其中data表示结点绑定的数据，index表示结点序号，target表示当前结点。
</p>
<h4>
样式css
</h4>
<pre class="prettyprint lang-js">clayObject.css(key[, style]);</pre>
<p>
css方法有一部分和attr是一样的，下面是使用模板：
</p>
<pre class="prettyprint lang-js">// 获取样式值
var val=clayObject.css('key');
//设置样式值
clayObject.css('key', 'value');
// 通过json设置样式值
clayObject.css({
"key":"value",
...
});</pre>
<p>
因为考虑到样式，比如色彩，可能需要根据数据的大小来改变，因此也提供了类似attr的方法：
</p>
<pre class="prettyprint lang-js">clayObject.css('key',function(data, index){
//里面需要返回一个值，表示为key属性设置的新值
});</pre>
<p>
因为设置样式值的时候，第一个参数可能是json，此时为了和数据联系起来，你应该这样设置：
</p>
<pre class="prettyprint lang-js">clayObject.css({
"key":"value",
...
},function(data, index, key, value){
//里面需要返回一个值，表示为key属性设置的新值
});</pre>
<p>
上面的形参key和value分别表示设置的样式和对应的值，因为json设置方式设置的样式很多，计算的时候需要知道此刻面对的是哪个属性。
</p>
</body>
</html>