select框操作
获取值
$('#select').val()
设置值为xx的项为选中
$('#select').val(xx)
设置文本信息为yy的项为选中
$('#select option[text="yy"]').attr("selected", true);
radio box 操作
获取值
$('input[name="xx"]:checked').val()
设置值为xx的为选中
$('input[name="xx"]:radio[value="yy"]').attr('checked', 'checked');
在使用jquery时，很多时候都需要获取当前节点的父节点，包括直接父节点和祖先父节点。用的最多的方法是parent([expr])和parents([expr])。从方法的名字上就可以判断前一个方法是单数，也就是返回一个真正的父节点，后面是返回所有的祖先节点集合（不包含根节点）。假设需要获取当前节点的祖父节点（父节点的父节点），其有属性class=”pp”，那么获取的方法为：
$('#cur').parent().parent();
或
$('#cur').parent().parent('.pp');
或
$('#cur').parent('.pp');
上述操作在理想情况下，都没有问题。例如后来修改页面，在当前节点上又加了一个父节点，那么前两种获取的到的节点就不是当初节点；另外如果其祖先节点中还有属性class=”pp” 的节点，第三种获取的节点也不是自己想要的。
现在介绍另外一个获取父节点的方法closest([expr])。closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。否则返回一个空的jquery对象。
$('#cur').closest('.pp');
使用上述操作获取含义特定属性的祖父节点相对要安全一些，即使在当前节点和祖父节点中增加或者减少节点，只要增加的节点没有相同的属性，已有的js代码可能都不需要进行修改。
最后说一下closest和parents的主要区别是：
通过js获取页面两个数字输入框的值，并对其进行大小比较。此时出来的结果可能让你迷惑不解，例如代码：
var v1 = $('#input1').val();
var v2 = $('#input2').val();
alert(v1 > v2);
假如input1中输入10，input2中输入2。10肯定是大于2的，所以上面的alert框应该弹出true，但实际上给出的是false。原因何在？对应数字10大于2是毫无疑问的，如果是作为字符串比较，那么结果刚好相反。而上述从页面获取值得到的类型是String。
如果明确是要进行数字比较，则需要显示的转化为数字，例如使用parseInt、parseFloat；还有一种方法是使用减法运算符，如：v1 – v2 > 0，此时js在运算前内部会进行类型转换。
另外由于加法运算符同时支持数字和字符串，使用这个时候也要小心。例如 a + b ,如果其中一个是字符串类型，一个是数字类型，在执行运算前会把另外一个转化为字符串类型，所以实际是进行字符串链接操作，而不是想要的算术运算。在确定是要做算术运算的情况下，对于未知类型的参数，保险的情况下还是使用parseInt进行类型转换。
在http://www.ruanyifeng.com/blog/2011/04/quicksort_in_javascript.html这篇文章中详细描述了快速排序的原理，同时也给出了javascript的实现，其具体代码如下：
function quickSort(arr) {
if (arr.length <= 1) {
return arr;
}
var pivotIndex = Math.floor(arr.length / 2);
var pivot = arr.splice(pivotIndex, 1)[0];
var left = [];
var right = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < pivot) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
return quickSort(left).concat([pivot], quickSort(right));
}
上述代码也是比较通俗易懂，自己生成一个随机数组测试，排序正确，所以功能上也没有问题。但上述代码还是有一个隐藏的小bug，当对同一个数组调用两次quickSort，发现第二次条用后出来的元素数量会比原始数据少一个。导致这个问题是根源是arr.splice(pivotIndex, 1)[0]，它会把arr中指定位置的元素删掉。其操作是针对该方法的参数，但是同时影响到了传给方法的实际数组，所以结论是javascript中数组参数的是传引用（地址），而非传值。
为了不影响原始数组数据，可以对上述代码进行一个小修改，修改后的代码如下：
function quickSort(arr) {
if (arr.length <= 1) {
return arr;
}
var pivotIndex = Math.floor(arr.length / 2);
var pivot = arr[pivotIndex];
var left = [];
var right = [];
for (var i = 0; i < arr.length; i++) {
if (i == pivotIndex) {
continue;
}
if (arr[i] < pivot) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
return quickSort(left).concat([pivot], quickSort(right));
}
当使用js来操作html，经常遇到需要处理多行字符串的问题，如果采用一行或多行拼接的方式都不好维护。像python、php中提供多行字符串的定义方式，真是方便不少。例如：
python
pstr = '''
line1
line2
line3
line4
'''
php
$pstr = <<<eof
line1
line2
line3
line4
eof
上述定义完全保留字符串中的所有字符，包括回车换行已经引号等。
js本身没有提供类似的定义方式，但是可以通过多行注释(/* */)，已经借助function的方式来达到多行字符的定义，例如代码：
var jstr = function() {
var fun = function() {
/*line1
line2
line3
line4*/
}
var lines = new String(fun);
return lines.substring(lines.indexOf("/*") + 3,
lines.lastIndexOf("*/"));
}
一个简单的页面在加载的时候种植一个cookie，其他浏览器都能成功写入，测试IE 6时始终无法写入。由于是本地指定的一个测试三级子域，一度以为是域名长度问题，通过测试其他域名，排除了此问题。后来发现这个域名中使用了下划线，查了一下域名命名规范，规范规定域名只能是字母、数字和-（中划线）的组合，显然这不是一个规范的域名，IE 6自身机制拒绝种植cookie，所以导致失败。
想起曾经也碰到过IE 6通过js的方法无法在domain字符串少于5个字符的情况。也是源于IE 6自身的安全机制考虑的，可能在开发IE 6的时候还没有例如cn、uk、au之类的域名，其想当然的认为域名至少超过5个字符吧。
由于现在AJAX的流行，页面的上a标签的功能可能不仅仅是作为一个链接跳转，还可能是用作触发一个ajax请求，即用上a标签的onclick事件。a标签是通过属性href来指定链接地址的，如果用做ajax的button，可能会把href的属性值设置为#，例如：
<a href="#" onclick="doAjax()">Btn</a>
这样做其实是没有错的，但是当点击此链接后，页面会跑到顶端，特别的，当页面设置了 时候，会跳出另外一个页面，所以在用户体验上不是很好。
如何解决这样的问题呢？其实很简单，给href属性赋值一个javascript空函数即可，例如：
<a href="javascript:void(0)" onclick="doAjax()">Btn</a>
html中使用form来提交信息到服务器，方式可以是POST或GET。你通过firebug、httpfox等类似工具查看提交的信息，可能会注意到，你的提交按钮也作为信息的一部分给提交给服务器，这个信息我想绝大部分是不会使用到的。
那如何在提交表单的时候让浏览器不发送这个信息呢？其实非常简单，只需要把不想发送信息的input的name属性去掉就可以了。例如：
<input type="submit" value="登陆">
这样，你就不会看到提交的信息中有”登陆”了。
调试js代码最直接最简单的方式是使用alert，对于一般的小问题用它就足以解决。但如果需要调试类似于鼠标事件，例如mousemove、mouseover等，可能就有点力不从心了，搞不好都无法关闭弹出的alert框，最后只能通过结束浏览器进程的方式退去。对于这类问题的调试可以采取在页面放一个div，然后通过innerHTML的方式把想跟踪的结果输入到div中，缺点是调试结束后需要清理这些辅助的div。最近看到一个网站会动态修改页面的title，方式当然是js，这给我一点灵感，其实调试的时候我们也可以把结果放到title上，这样也很直观，使用window.document.title = ‘result’即可。
另外一个不能忽视的问题是异常，当异常发生在你插入调试代码以前，你调试的结果永远不会出现，这个时候就需要用上try catch了。
firefox下的firebug提供了一个对js脚本调试的功能，可以自由的设置断点，单步执行等，功能非常强大。可以说是调试、学习别人js的终极武器了。
目前很多网站的页面上在右下角都提供了一个“回到顶部”的按钮。今天无事决定自己写一个，代码其实很简单，经过几次修改后，效果还算满意。重要的是全部使用js来实现，不需要在html、css中增加任何内容，甚至都不需要图片，只要引用js即可。而且全面兼容IE6。由于考虑兼容性问题，如何获取滚动条的高度和按钮停留在右下角是难点。这两个问题可以参考：js如何获取滚动条的高度,兼容各个浏览器的右下角提示框代码。
代码如下：
(function() {
var btnId = '__gotop';
var isIE = !!window.ActiveXObject && /msie (\d)/i.test(navigator.userAgent) ? RegExp['$1'] : false;
function $() {
return document.getElementById(arguments[0]);
}
function getScrollTop() {
return ('pageYOffset' in window) ? window.pageYOffset
: document.compatMode === "BackCompat"
&& document.body.scrollTop
|| document.documentElement.scrollTop ;
}
function bindEvent(event, func) {
if (window.addEventListener) {
window.addEventListener(event, func, false);
} else if (window.attachEvent) {
window.attachEvent('on' + event, func);
}
}
bindEvent('load',
function() {
var css = 'background-color:#999;width:50px;height:50px;position:fixed;right:100px;bottom:30px;border-radius:10px;cursor:pointer;display:none;';
if (isIE && isIE < 7) {
css += '_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-30-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))';
var style = document.createStyleSheet();
style.cssText = '*html{background-image:url(about:blank);background-attachment:fixed;}';
}
var html = '<div style="height: 0;width: 0;border:14px solid #999999;border-top: 0 none;border-bottom:14px solid #fff;position: relative;margin:12px 0 0 11px;"><div style="width:8px;height:7px;position:absolute;top:14px;left:-4px;background-color:#fff;overflow: hidden;"></div></div>';
var el = document.createElement('DIV');
el.id = btnId;
el.style.cssText = css;
el.innerHTML = html;
document.body.appendChild(el);
el.onclick = function() {
(function() {
var top = getScrollTop();
if (top > 0) {
window.scrollTo(0, top / 1.2)
setTimeout(arguments.callee, 10);
}
})();
};
el.onmouseover = function() {
$(btnId).firstChild.style.borderBottom = '14px solid #ddd';
$(btnId).firstChild.firstChild.style.backgroundColor = '#ddd';
};
el.onmouseout = function() {
$(btnId).firstChild.style.borderBottom = '14px solid #fff';
$(btnId).firstChild.firstChild.style.backgroundColor = '#fff';
};
}
);
bindEvent('scroll',
function() {
var top = getScrollTop(), display = 'none';
if (top > 0) {
display = 'block';
}
if ($(btnId)) $(btnId).style.display = display;
});
})();
效果见本blog。
