QQ技术群:5678537,70210212,77813547 个人网站:http://www.lovewebgames.com 邮箱:55342775@qq.com

我是如何去了解jquery的(二),复杂选择符

我是如何去了解jquery的(二),复杂选择符

作者:田想兵 博客地址:http://www.cnblogs.com/tianxiangbing

上一节里,我们已经了解到了关于jquery的一些基础知识和基础查询DOM语句。今天,我们来聊聊稍微复杂的查询语句,说复杂了,其实也不复杂,还是在CSS3的标准上来的,重点说下我们日常工作中会比较常用的,其余和可以参考手册。欢迎前端工作者加入Q群:70210212

本文的案例请点击这里

在说这个课题时,我觉得有必要讲另外一些上一次没讲到的东西,比如上一节有说到给段落添加class样式类用到的是addClass("even"),就有人说了,我只想写很简单的样式,没必要新加个class,这个时候我们就可以使用$("").css("color","red")这种写法了,很一目了然,如果有多个,你可以连续往后点下去,因为它都是返回的jquery对象,所以都有这个css()方法,代码如下:

$(":button").css({"background-color":"gray","color":"white"}).css("font-size","24px").addClass("even");

这里有两种方法编写多个样式的,一种就是刚才说的连续点击加方法,还有一种就是以json格式,看上面这个例子,很容易看懂,它以大括号开始,然后是属性加冒号对应属性的值,多个用逗号分隔。这些都是设置html元素的style,如果我们要得到style里的值的话,应该这么写$("#id").css("fontsize"),这样就得到字体了,这就好像是一个动态参数,你如果只传第一个参数,它就是返回(getter)值,如果你传了第二个参数,它就是设置(setter)值。第二个参数还可以是一个函数,只要你返回正确的值就行了,如:

$(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;//这里要记得return 值;
      }
});

在jquery里的,只不是有返回字符串的,基本上都是可以连点方法名的,就是你可以$("#id").css(...).html(...).find(...)....这样一直点下去。

言归正传,说说今天的主题,关于复杂的匹配符有哪些呢,请看大屏幕↓ 

 这里面应该有十几二十个吧,我就不一一列举了,我只说其中的三两个,首先要说的就是属性选择符,[]它以中括号括起来,里面是属性名='属性值',比如你想要找type="button"的控件的值,你可以这样写:

$("[type='button']").val();

  val()方法就是取表单控件里的value或text值的,它只取第一个值,所以如果是集合的话,就要进行each循环了,既然是表单控件,所以jquery又有对表单更简约的写法:

$(":button").val()

  这个冒号选择符也是很常见,这里它取的是input里的type属性,但如果我要根据其他属性查找控件的话,还是得用中括符,html是可以任意定义一些属性的,比如我的HTML里这样写:

 <input ref='xxx' type="checkbox" name="newsletter" value="Hot Fuzz" />

 这里的ref="xxx"就是我自己随便写的一个属性,如果我要查找页面里有ref这个属性的所有控件的话,可以这样写:

console.log($("[ref]"))

 这样我们在firebug的控制台里就可以看到凡是包含ref属性的节点了,如果再继续加条件,比如,我要查找input控制里的ref等于xxx的并且class等myclassName的dom节点的话,就可以这样写:

console.log($("input[ref='xxx'].myclassName:eq(0)"));

 

甚至你可以把其他更多的条件加起来,比如我要满足以上条件的第一个节点,是不是越来越不顺眼了,要是能把这些条件像方法那样点出来该多好,正巧,jquery团队也是这么做的,它同样可以把它们以方法的形式展现出来:

$("*").find("input").filter("[ref='xxx']").filter(".myclassName").first()

代码是变长了,但更好理解了,你可以适当的把它写的刚好既好理解,又代码量不大,这个分寸就看你的把握了,这里的find是查找后代元素,filter是筛选出符合条件的元素,first()是取第一个jquery对象,和get(0)不一样,get(0)或[0]的意思是取出第一个dom对象,它就变成了"原生"的Js了,上一节里提到过原生的和jquery对象间的转换不要忘记了。

讲了这么多,也写了这么多代码,可能把你们也看糊涂了,这些东西有鸟用啊,我一直用$("#id")不就好了,反正我要写js的地方都会写上id,实则不然,下面我就演示一个全选和多选的例子,来说明下它的作用:

html:

<div id="mydiv">
  <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:

$(function(){
$("[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,再选中全选的话,它会把我选中的变成未选中,虽然合乎逻辑,但不合情理,所以我们要把它改善一下,变成只全选/反选勾上,就是全选,没勾就是反选。代码如下:

function checkAll(){
        $(":checkbox").attr("checked", $("[name='checkAll']").attr("checked"));
        return true;
    }

这里没有用到each,是因为我们对象每一项都是用一样的值去填充,它内部会自动完成each的操作,这样是不是会比刚才好那么一点呢,或者你还觉得不够,还希望更进一步,只要选中所有的其他checkbox,全选就自动选中,或者只要选中一个或以上,全选就选中,再点就是反选,这些解决方案都不错,你可以自己动手试试。前端是一个为人服务的职业,只有更贴近人的习惯,才叫good,正所谓大家好才是真的好!

OK,今天就到此为止,大家有任何疑问都不要问我,请反复阅读这两篇文章!本文的案例请点击这里

posted @ 2011-11-10 15:42 田想兵 阅读(...) 评论(...) 编辑 收藏
联系QQ:55342775,QQ技术群:5678537,70210212,77813547 个人网站:http://www.lovewebgames.com 邮箱:55342775@qq.com