我是如何去了解jquery的(二),复杂选择符
我是如何去了解jquery的(二),复杂选择符
作者：田想兵 博客地址:http://www.cnblogs.com/tianxiangbing
在上一节里，我们已经了解到了关于jquery的一些基础知识和基础查询DOM语句。今天，我们来聊聊稍微复杂的查询语句,说复杂了，其实也不复杂，还是在CSS3的标准上来的，重点说下我们日常工作中会比较常用的，其余和可以参考手册。欢迎前端工作者加入Q群：70210212
在说这个课题时，我觉得有必要讲另外一些上一次没讲到的东西，比如上一节有说到给段落添加class样式类用到的是addClass("even")，就有人说了，我只想写很简单的样式，没必要新加个class，这个时候我们就可以使用$("").css("color","red")这种写法了，很一目了然，如果有多个，你可以连续往后点下去，因为它都是返回的jquery对象，所以都有这个css()方法，代码如下：
这里有两种方法编写多个样式的，一种就是刚才说的连续点击加方法，还有一种就是以json格式，看上面这个例子，很容易看懂，它以大括号开始，然后是属性加冒号对应属性的值，多个用逗号分隔。这些都是设置html元素的style，如果我们要得到style里的值的话，应该这么写$("#id").css("fontsize")，这样就得到字体了，这就好像是一个动态参数，你如果只传第一个参数，它就是返回（getter）值，如果你传了第二个参数，它就是设置(setter)值。第二个参数还可以是一个函数，只要你返回正确的值就行了，如：
width: function(index, value) {
return parseFloat(value) * 1.2;//这里要记得return 值；
}
});
在jquery里的，只不是有返回字符串的，基本上都是可以连点方法名的，就是你可以$("#id").css(...).html(...).find(...)....这样一直点下去。
言归正传，说说今天的主题，关于复杂的匹配符有哪些呢，请看大屏幕↓
这里面应该有十几二十个吧，我就不一一列举了，我只说其中的三两个，首先要说的就是属性选择符，[]它以中括号括起来，里面是属性名='属性值'，比如你想要找type="button"的控件的值，你可以这样写：
val()方法就是取表单控件里的value或text值的，它只取第一个值，所以如果是集合的话，就要进行each循环了，既然是表单控件，所以jquery又有对表单更简约的写法:
这个冒号选择符也是很常见，这里它取的是input里的type属性，但如果我要根据其他属性查找控件的话，还是得用中括符，html是可以任意定义一些属性的，比如我的HTML里这样写:
这里的ref="xxx"就是我自己随便写的一个属性，如果我要查找页面里有ref这个属性的所有控件的话，可以这样写:
这样我们在firebug的控制台里就可以看到凡是包含ref属性的节点了，如果再继续加条件，比如，我要查找input控制里的ref等于xxx的并且class等myclassName的dom节点的话，就可以这样写:
甚至你可以把其他更多的条件加起来，比如我要满足以上条件的第一个节点，是不是越来越不顺眼了，要是能把这些条件像方法那样点出来该多好，正巧，jquery团队也是这么做的，它同样可以把它们以方法的形式展现出来：
代码是变长了，但更好理解了，你可以适当的把它写的刚好既好理解，又代码量不大，这个分寸就看你的把握了，这里的find是查找后代元素，filter是筛选出符合条件的元素，first()是取第一个jquery对象,和get(0)不一样，get(0)或[0]的意思是取出第一个dom对象，它就变成了"原生"的Js了，上一节里提到过原生的和jquery对象间的转换不要忘记了。
讲了这么多，也写了这么多代码，可能把你们也看糊涂了，这些东西有鸟用啊，我一直用$("#id")不就好了，反正我要写js的地方都会写上id，实则不然，下面我就演示一个全选和多选的例子，来说明下它的作用：
html:
<input ref='xxx' type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" id="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
<input type="text" id="mytxt" value="xxxx"/>
<input type="checkbox" value="全选/反选" name="checkAll"/>全选/反选
<input type="button" id="btn_first" value="第1个checkbox的值" onclick="alert($(':checkbox:eq(0)').val());console.log($(':checkbox').first().val())"/>
<input type="button" id="btn_select" value="选中checkbox的值" onclick="showArrValue($(':checkbox:checked'))"/>
</div>
JS:
$("[ref='xxx']").attr("title","这是TITLE")
//console.log($("#mytxt").val())
$("[name='checkAll']").click(checkAll)
function checkAll(){
$("[type='checkbox']:not([name='checkAll'])").each(function(){
$(this).attr("checked", !$(this).attr("checked"));
});
return true;
}
});
这里的全选checkbox是name='checkAll'，它点击后我们要把页面里的其他checkbox选中或反选, $("[type='checkbox']:not([name='checkAll'])")在这里，为什么我要这样去查，为什么会用:not去掉checkAll这个呢，你可以自己试下，如果不去掉的话，全选这个它自己就永远选不中。这个功能就算基本完成了，反选就是把它的checked的属性改成它自身相反的属性.
但这个功能是不是最优解决方案呢，显然不是，如果我先选中了其中的一些checkbox，再选中全选的话，它会把我选中的变成未选中，虽然合乎逻辑，但不合情理，所以我们要把它改善一下，变成只全选/反选勾上，就是全选，没勾就是反选。代码如下：
$(":checkbox").attr("checked", $("[name='checkAll']").attr("checked"));
return true;
}
这里没有用到each，是因为我们对象每一项都是用一样的值去填充，它内部会自动完成each的操作，这样是不是会比刚才好那么一点呢，或者你还觉得不够，还希望更进一步，只要选中所有的其他checkbox，全选就自动选中，或者只要选中一个或以上，全选就选中，再点就是反选，这些解决方案都不错，你可以自己动手试试。前端是一个为人服务的职业，只有更贴近人的习惯，才叫good，正所谓大家好才是真的好！
OK,今天就到此为止，大家有任何疑问都不要问我，请反复阅读这两篇文章！本文的案例请点击这里。
