jQuery学习总结（一）

关于 jQuery 操作 DOM 的内容完了吗？不，还没有，还有更多！
    1、尽可能的用 #id和属性选择器
    在选择 DOM 元素时， jQuery 的选择器无疑提供了非常多的功能，除了特性选择器外，对文档元素的查找操作，我觉得还是 #id 和 [attribute] 最为实用，当然这不是否定其它的选择器。我这样说是有原因的。
    在实际开发中，程序员一般是以模块为单位进行功能开发，那么从前台到后台都是一个人在做。而页面的美化工作可能会交给美工（也可能是前台开发人员）来完成，如果需要对 DOM 的结构进行调整或重新布局，这时，当脚本中使用了 CSS 选择器或位置选择器，这时，你能保证不会对功能有影响吗？难道还要和开发人员进行沟通，这里不能这样写，那里需要调整。可是一个系统中的页面会只有一两个吗？这样改下来，得要多少时间？这时有人会说了，你设计没做好，设计之初就应该考虑好，样式布局就应该做好。那么就不会出现这样的问题。是的，设计很重要，设计的好坏决定项目成败。但是，我要告诉你，世上没有绝对的事情，我们所做的一切都是以客户为出发点，客户不满意了，要你改，你能不改吗？
    使用 ID 的好处显而易见，给元素加上 ID ，通过 ID 获得该元素对象，然后进行相应操作，不管结构如何变化，代码不用修改。请一定注意， ID 不能重复了。
    可是 ID 只能对单一元素进行操作（这是相对的，后面有讲到对 ID 也可以批量操作），如果有多个元素怎么办呢？这里就要用到属性选择器了。帮助文档里罗列了各种属性选择器，而且有说明和示例。不过例子太简单了，会让很多人没有感觉，对它没有引起足够的重视，在这里大象用几个实例来说明一下它们的用法。
    a)

$(function(){ $("[name=ctrRadio]").each(function(){ $(this).click( function(){ // click事件代码 } ); }); }); <input type="radio" name="ctrRadio" /> // 有很多个单选按钮，组成一个单选按钮组

页面数据列表一般采取分页显示，每页 10 条、 15 条或更多，每一行都添加了一个单选按钮，在初始化时，我们给每个单选按钮绑定一个 click 事件，所以这里我们使用 [ attribute=value ] 形式的属性选择器来实现我们的需求。另外 name 值如果定义好了，我们也不会轻易再去改动它，调整单选按钮的位置也不会影响到代码。比如现在位于每行的第一列是单选按钮，后来客户要求，要将它放到最后一列去，或是将 type 改成 button ，这都不会影响原来实现的代码。除非你要把它改成 checkbox ，那么，这应该算是需求变更了吧？
    b)

$(function(){ $("[name$='chk']").attr("checked","checked").click( function(){ var chkbox = $(this); // this是当前的复选框对象，$(this)是获得该复选框的jQuery对象 if(chkbox.attr("checked")){ alert("选择: "+chkbox.val()); }else{ alert("取消: "+chkbox.val()); } } ); }); <div><input type="checkbox" name="stationchk" value="a" />1</div> <div><input type="checkbox" name="stationchk" value="b" />2</div> <div><input type="checkbox" name="intervalchk" value="c" />3</div> <div><input type="checkbox" name="intervalchk" value="d" />4</div> <div><input type="checkbox" name="commonchk" value="e" />5</div> <div><input type="checkbox" name="commonchk" value="f" />6</div>

文档初始化时，通过属性选择器查找所有 name 名称以 chk 结尾的 DOM 元素，并将它设为选中状态，同时给它绑定 click 事件。这里可以在 [name$='chk'] 前面加上 input ，缩小搜索范围。当然，你得确保以 chk 结尾的都是你想操作的 checkbox ，避免出现让自己困惑的 BUG 。因此在做之前，充分的思考很有必要，这会大大提高你的开发效率和减少出现错误的机率。虽然表面看起来多花了一点时间，但是你会觉得这是很值得的。
     [attribute^=value] 和 [attribute$=value] 是相对的一组选择器，前者是匹配指定的属性以某些值开始的元素，后者刚好相反， 匹配给定的属性是以某些值结尾的元素，请一定记住 attribute 是属性，比如上面的 type 、 name 、 value 等等。在项目中大量的通过 id 、 name 属性来批量的操作 DOM 元素。
    我说下怎么通过 ID 获得多个集合，其实很简单，在设置 ID 值的时候，给它定义一个字符串再加上其它的唯一标识就能够实现这一功能。
<c:forEach var="info" items="${infos}"> <input name="modinfo" id="modInfo_${info.parent_id}_${info.f_id}" type="checkbox" value="${info.f_id},${info.parent_id}" /> </c:forEach>

 在数据库中f_id 是主键标识，因此它具有唯一性， parent_id 是父 ID ，它们和 modInfo_ 组合起来就可以成为 id 属性的唯一标识。 forEach 循环会产生多个 checkbox ，所以我们就使用 $( "[id^='modInfo_']" ) 表达式来取得结果集。有人会问有 name 不就行了吗？为什么还要设置 id ？而且还要将两种 ID 值与字符串拼接成复选框的 id 属性值。这是由于功能需要，不光要用到 name ，还要用到 id ，而且 checkbox 上还绑定了 click ，事件处理中还会用到 value 中的值。有时我们的业务需求确实很复杂，这时我们就可以采取这种方式来区分彼此之间存在一些联系而又独立的 DOM 集合。
    在实际项目当中如何组合，还是得具体问题具体分析。另外，我们也不能忘掉那些特性选择器，它们同样很有用。
     c)

$(function(){ $("[name^='station']:checkbox").attr("checked","checked").click( function(){ if($(this).attr("checked")){ alert("选择: "+$(this).val()); }else{ alert("取消: "+$(this).val()); } } ); }); <div><input type="checkbox" name="stationchk" value="a" />1</div> <div><input type="checkbox" name="stationchk" value="b" />2</div> <div><input type="checkbox" name="intervalchk" value="c" />3</div> <div><input type="checkbox" name="intervalchk" value="d" />4</div> <div><input type="checkbox" name="commonchk" value="e" />5</div> <div><input type="checkbox" name="commonchk" value="f" />6</div> <div><input type="radio" name="stationrad" value="g" />7</div> <div><input type="radio" name="stationrad" value="h" />8</div>

 这个例子在b) 的基础上作了一些修改，它表示在文档初始化时，通过属性选择器查找所有 name 名称以 station 开头并且 type 为 checkbox 的 DOM 元素，同时绑定 click 事件。如果将 :checkbox 去掉会不会有变化呢？答案是肯定的，单选按钮组也被绑定了事件。再看几个例子：

$("[name=ctrRadio]:checked").attr("checked",""); //取消已选中的单选框 $("[id^='modInfo_']").is(":hidden"); //如果表达式中的集合只要有一个不可见，就返回true $("select[name='contract_kind'] option:eq(0)").attr("selected","selected"); //选中第一条记录

2、jQuery 属性 —— 很好，很强大
    attr 、addClass 、 removeClass 、 css 、 html 、 text 、 val 、 height 、 width 这些命令在实际应用中的使用频率非常高，应该把它们全部掌握。这些属性都有赋值与取值的方法，为我们操作 DOM 提供了很方便的支持。举几个例子说明一下 ：

$(":button").addClass("button1"); //给所有的按钮添加样式 $("#ctr_info").attr("src","${ctx}/BaseAction.do?method=list"); //给id为ctr_info的iframe的src属性设置地址 $("#stationchk").attr("checked"); //获得复选框是否选中，选中为true，否则为false $("#sum").css("ime-mode","disabled"); //屏蔽输入法 $("[name='stationchk']").parent().html("哈哈"); //返回包含匹配表达式的唯一父元素的元素集合 $("#ctr_info").load(function(){ var ifr_height = $(this).contents().find("#ctr_other").height(); //通过ID重新计算iframe的高度 ifr_height = ifr_height < 400 ? 350 : ifr_height; $(this).height(ifr_height); });

 这些属性的运用技巧需要多做才能加深理解，对于以前使用原生 JavaScript 来编写脚本的程序员而言，无疑是一件很幸福的事，极大的简化了代码，减少了很多的工作量。
    3、丰富的文档处理功能
    从帮助文档中，我们可以看到， jQuery 提供了一套很完备的文档处理函数。基本上需要有的都包含了。大象目前也只是使用了其中一部分，当然这跟应用环境也有关。来看个例子 ：
$(function(){ $("#btn_add").click( function(){ $("<div name='_info'& gt;<input type='text' name='info'/>   & lt;input name='btndel' type='button' value='删除' /></div>").find(":button").click( function(){ var index = jQuery("[name='btndel']").index(this); //this是删除按钮这个对象，index是获得该按钮在这组集合中的索引值 $("[name='_info']:eq("+index+")").remove(); } ).end().appendTo("#div_info"); } ); }); <div><input id="btn_add" type="button" value="增加" /></div> <div id="div_info"></div>

 这段很少的代码却帮我们做了相当多的事情，详细分析一下 ：
    在文档初始化的时候，对增加按钮绑定事件，当点击增加时，我们创建一个文本框和一个删除按钮的 div ，然后使用查找功能 (find) 在刚创建的 html 中找到 button 按钮 (:button) ，这时会返回 <input name='btndel' type='button' value=' 删除 ' /> 这个 DOM 元素的 jQuery 对象 ，接着给这个按钮绑定事件，使之，当我们点击某个删除按钮时，删除对应的元素。随后我们退回 (end) 到创建的 div 。最后把这个新增的元素追加到 div_info 元素之后，运行这个示例看看效果。PS： 创建DOM时，如果比较复杂，可以用变量来拼接字符串，最后再放到$()里面。
    这个例子充分体现了jQuery链的强大，一条语句就完成了这么多的功能，请大家充分利用jQuery链。牢记： jQuery对象与DOM对象的区别。
    在删除的时候使用的是 remove() 而没有使用 empty() ，这两个方法执行后都会返回 jQuery 集合，不同的是， remove() 会将元素从页面 DOM 中删除，而 empty() 只是删除匹配集合中的子节点（包括文本），但 仍保留其在 DOM 中所占的位置。示例 ：

$(function(){ $("#btn_del").click( function(){ $("p").empty(); //$("p").remove(); } ); }); <input id="btn_del" type="button" value="删除" /> <p>hello</p> jquery <p>welcome</p>

用 Firefox 来运行示例，启动 Firebug 工具可以看到文档加载完成时的情况 ：

http://www.blogjava.net/bolo/archive/2010/02/24/313412.html