20130422 jquery

最新推荐文章于 2025-09-10 19:44:49 发布

weixin_30426957

最新推荐文章于 2025-09-10 19:44:49 发布

阅读量53

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/peng14/articles/3035742.html

本文详细介绍了如何使用jQuery进行HTML元素操作，包括输入类型设置、全选input元素、nth-child选择器应用以及判断元素关系的方法。通过实例演示了在不同浏览器环境下实现这些功能的技巧。

1.创建一个 <input> 元素必须同时设定 type 属性。因为微软规定 <input> 元素的 type 只能写一次。

jQuery 代码:

// 在 IE 中无效:
$("<input>").attr("type", "checkbox");
// 在 IE 中有效:
$("<input type='checkbox'>");

2.用jquery全选所有的input的写法。

$("[name='checkbox']").attr("checked",'true');//全选

$("[name='checkbox']").removeAttr("checked");//取消全选

3.nth-child(index/even/odd/equation)

匹配其父元素下的第N个子或奇偶元素。区别eq():

':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。

:nth-child从1开始的，而:eq()是从0算起的！

可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)

如：在每个 ul 查找第 2 个li

HTML 代码:

<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>

$("ul li:nth-child(2)")

4.jQuery判断一个元素是否为另一个元素的子元素(或者其本身)

比较简单的jQuery判断一个元素是否为另一个元素的子元素(或者其本身)的两个扩展：

//判断:当前元素是否是被筛选元素的子元素
jQuery.fn.isChildOf = function(b){
return (this.parents(b).length > 0);
};
//判断:当前元素是否是被筛选元素的子元素或者本身
jQuery.fn.isChildAndSelfOf = function(b){
return (this.closest(b).length > 0);
};

使用起来也非常方便：

$(document).click(function(event){
alert($(event.target).isChildOf(".floatLayer"));
});

或者：

$(document).click(function(event){
alert($(event.target).isChildAndSelfOf (".floatLayer"));
});

转载于:https://www.cnblogs.com/peng14/articles/3035742.html