现在的位置: 首页 > 综合 > 正文

jQuery study note 3

2018年04月14日 ⁄ 综合 ⁄ 共 3604字 ⁄ 字号 评论关闭

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>

注意区别。

抱歉!评论已关闭.