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

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-02 03:38 点击:

在上一节里,我们已经了解到了关于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" />

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    用户名: 验证码:点击我更换图片
    最新评论 更多>>

    推荐热点

    • Gb2312转utf-8编码的方法(vbs+js)
    • 如何使用Ajax技术开发Web应用程序(1)
    • js跳转路径问题
    • JavaScript模仿桌面窗口
    • 用js检测两个线段是否相交
    • 运用JavaScript构建你的第一个Metro式应用程序(on Windows
    • 我知道的JavaScript -- 设计模式(桥接)应用之 – 验证器
    • 我是如何去了解jquery的(六),案例之幻灯片轮换
    • Jquery封装幻灯片效果
    网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
    Copyright © 2008-2015 计算机技术学习交流网. 版权所有

    豫ICP备11007008号-1