概要
到此为止，我们已经学习了如何使用库来自定义。但是JavaScript的库很多，而且都很便利。其中最有名的是jQuery。
jQuery是可以让JavaScript的代码变得更加简洁的库。具体怎么简洁呢？我就摘取前面学过的代码，用jQuery改写后，对比一下有什么区别(^^♪
使用Cybozu CDN
使用jQuery 的时候，您可以从官网下载 文件之后，跟以往的做法一样上传到kintone。不过，这次要使用比这个更便利的 Cybozu CDN (^^♪
从刚才提到的页面的库 中拷贝任意jQuery版本的URL，如下图在"通过JavaScript / CSS自定义"页面通过URL添加，然后保存。下面是使用jQuery 1.11.2的URL的范例。
在要使用jQuery库的应用中所需要的设置仅仅就这些，是不是超级便利～＼(^o^)／
调用jQuery
首先，我们拿第 1篇 中学过的代码来试试看。(^^♪
就是使用记录列表事件弹出警告的简单脚本。对于已经学到这里的同学们来说这个写法已经是耳濡目染了吧。用JavaScript写的话就是这样滴。
(function() {
"use strict";
kintone.events.on('app.record.index.show', function(event) {
window.alert('记录列表事件');
});
})();用jQuery的话就是像下面这样写。
jQuery(function($) {
"use strict";
kintone.events.on('app.record.index.show', function(event) {
window.alert('记录列表事件用jQuery!');
});
});单看这段代码的话，不一样的就第一行和最后一行而已。虽说是使用jQuery，也只是说如果要再追加代码的时候可以使用jQuery，并不一定要把之前用JavaScript写的代码全部换掉哦＼(*^▽^*)ノ
开头部分有很多种写法，不过你只要记住”是这样写滴“就错不了。想了解更多的同学可以查看 jQuery( callback ) 等（*^_^*）
试着用jQuery 操作一下DOM
接着我们再拿第 2篇 最后的代码范例来试试(^^♪
为了尽量保持和原来的样子一致，就像直译一样一行行替换成jQuery。请务必认真对比一下原来的代码。
jQuery(function($) {
"use strict";
kintone.events.on('app.record.index.show', function(event) {
if ($('#my_index_button')[0]) {
return;
}
var $myIndexButton = $("<button>", {
id: 'my_index_button',
text: '列表的按钮'
}).click(function() {
var myHeaderSpace = kintone.app.getHeaderSpaceElement();
// 字符串元素
var $myListHeaderDiv = $("<div>", { text: '你按了吧！按了才出来的的的的...'}).css({
"width": '100%',
"height": '35px',
"text-align": 'center',
"font-size": '30px',
"font-weight": 'bold',
"background-color": '#ffd78c'
});
// 在菜单栏的下方空白处显示文字
$(myHeaderSpace).html($myListHeaderDiv);
});
$(kintone.app.getHeaderMenuSpaceElement()).append($myIndexButton);
});
});对比下来感想如何？
看$myListHeaderDiv 等的写法就可以知道，要输出的HTML标签的各属性可以通过数组形式进行批量设置，"width"等CSS属性名称可以在后面直接使用，这是最大的区别！
顺便来点花样。上面代码的第23行写成下面这样后执行看看。
// 在菜单栏的下方空白处显示文字
$(myHeaderSpace).hide().html($myListHeaderDiv).slideDown("slow");这么样，比之前更加有动感了吧＼(^o^)／
这个是使用jQuery标准特效功能的一个小小例子。使用jQuery的话，可以轻松地实现类似这样的效果哦！
试着用jQuery 来控制处理
最后，拿第 5篇最后的改变信号灯颜色的脚本来改写看看(^^♪
这里也是尽量”直译式“的改写，主要改了循环和条件分歧部分，请务必对比看看。
jQuery(function($) {
'use strict';
kintone.events.on('app.record.index.show', function(event) {
if (!event.size) {
return;
}
var signalColorParts = kintone.app.getFieldElements('信号颜色');
$.each(event.records, function(i, record) {
// DOM元素取得
var $part = $(signalColorParts[i]);
// 根据值分开显示
switch (record.信号颜色.value) {
case '红':
$part.css({
"font-weight": 'bold',
"color": '#ffffff',
"background-color": '#ff0000'
});
break;
case '蓝':
$part.css({
"font-weight": 'bold',
"color": '#ffffff',
"background-color": '#0000ff'
});
break;
case '黄':
$part.css({
"font-weight": 'bold',
"color": '#ffffff',
"background-color": '#ffd700'
});
break;
}
});
});
});原来 for语句的地方用jQuery.each()改写，if语句用switch()改写。
仅仅改写了这些，因为减掉了不必要的变量，整体看上去更加好懂了吧？
顺便也加点东西玩玩看。只有一行不一样。请试试看效果会怎么样。
case '黄':
$part.css({
"font-weight": 'bold',
"color": '#ffffff',
"background-color": '#ffd700'
});
setInterval(function(){$part.fadeToggle(500)}, 500); // ← 追加了这行
break;
使用标准JavaScript的setInterval和jQuery的特效功能，实现了和真实信号灯一样黄色会闪烁的效果了吧。
更加耀眼了吧・・・・(+ω+;)
使用jQuery的话，类似更改可以更加轻松实现！大家是不是进一步理解了？
最后
和以往一样，这里只是简单介绍JavaScript及jQuery的写法和使用方法，至于其详细的内容在此不作说明。单单看这里的例子的话，可能有人会想：”一开始说可以缩短代码，也没有怎么缩短嘛“ (苦笑)
但是，在实际运用中需要写大段大段代码的时候，应该就能明白与JavaScript的真正区别、体会到jQuery的重要性了。这里只是举了几个代码范例而已，为了能真正体会到这种感觉，还请大家也动手改写一下之前学过的范例吧(^^)
另外，要说使用jQuery的好处，当属以jQuery UI 为首的众多强大且丰富的插件、库集。使用这些，不管是外观还是操作上都可以轻轻松松地实现丰富的UI。 其中一个例子就是 使用Sortable对记录进行排序 （暂无中文页面）。
那么，下次再见（*^_^*）
Let’s kintone customize＼(^o^)／
该Tips在2015年4月中进行过确认。
<< 第 11篇 使用REST API更新记录 | 第13篇 (准备中) >>