1 filter() 和 find() 的区别。前者是在已经被选择的元素集中进行过滤,而后者,却是在已经选择的元素集中更新当前元素集。
2 filter(),还可以给它传值一个函数,就像自定义过滤器。
3 过滤方法。expression接受css表达式。
• childern('expression')
• next('expression') • nextAll('expression')• parent('expression')
• parents('expression')
• prev('expression')
• prevAll('expression')
• siblings('expression') • closest('expression')
4 使用$()给当前dom创建新节点后,还可以对创建的新元素进行操作find(),操作完成后,可以使用end()结束find(),进而将安排这个新节点的位置,如下代码:
<!DOCTYPE html> <html> <body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function(){ var j = jQuery.noConflict(); j('<div><a></a></div>').find('a').text('jQuery').attr('href', 'http://www.jquery.com').end().appendTo('body'); })(); </script> </body> </html>
其实,是通过document.createElement DOM method 来实现的,所以,传值给j()的字符串就要是完整闭合的、友好结构的、元素包含关系正确的元素集。
5 remove() 其实,只是吧节点从dom中移出了,但是并未把它从jquery wrapper set中移出,所以,可以继续使用。如:
<!DOCTYPE html> <html> <body> <div>remove me</div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function(){ var j=jQuery.noConflict(); j('div').remove().html('<a href="http://www.jQuery.com">jQuery</a>').appendTo('body'); })(); </script> </body> </html>
6表单元素操作。
A 激活、失效按钮。
j(e).attr('disabled', 'disabled'); j(e).attr('disabled', ''); j(e).removeAttr('disabled');
B 选中、去选可选框、单选框。
j('input:checkbox,input:radio').attr('checked', 'checked'); j('input:checkbox,input:radio').attr('checked', ''); j('input:checkbox,input:radio').removeAttr('checked');
C 多选项。使用val设置。可以存放在一个数组对象中。
<!DOCTYPE html> <html> <body> <select size="4" multiple="multiple"> <option value="option1">option one</option> <option value="option2">option two</option> <option value="option3">option three</option> <option value="option4">option four</option> </select> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function(){ var j=jQuery.noConflict(); j('select').val(['option two', 'option4']); j('select').val().join('-'); //可以用作数据提交 })(); </script> </body> </html>
D select的操作。
var j=jQuery.noConflict();
// 向多选项最末位添加一个选项 j('select').append('<option value="">option</option>'); // 向多选项最开始位添加一个选项 j('select').prepend('<option value="">option</option>'); // 在特殊位置之后插入选项 j('select option:eq(n)').after('<option value="">option</option>'); // 在特殊位置之前插入选项 j('select option:eq(n)').before('<option value="">option</option>'); // 替换原有选项 j('select').html('<option value="">option</option><option value="">option</option>'); // 将一个特定的选项用某个新选项替代 j('select option:eq(n)').replaceWith('<option value="">option</option>'); // 将选中属性设置给选项n j('select option:eq(n)').attr('selected', 'selected'); // 删除最后一个选项 j('select option:last').remove(); // 使用过滤器选择某一个选项 j('#select option:first'); j('#select option:last'); j('#select option:eq(n)'); j('#select option:gt(n)'); j('#select option:lt(n)'); j('#select option:not(':selected')'); // 获取所有选项的text值 j('select option:selected').text(); // 获取某个选项的 value 属性的值 j('select option:last).val(); // 获取被选中选项的索引 PS: 不可以多个select元素一起用 j('select option').index(j('select option:selected'));
E 通过表单元素类型获取元素对象。j('input:*'); ,其实,这是j('eSelector[proName="str"]'); 的等效用法。
• :text • :password • :radio • :checkbox • :submit • :image • :reset • :file • :button
F 选中所有表单元素。
<!DOCTYPE html>
<html>
<body>
<input type="button" value="Input Button"/>
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
(function(){
var j=jQuery.noConflict();
alert(j(':input').length); // 13
alert(j('input').length); // 10
})();
</script>
</body>
</html>
注意区别。