美文网首页
jquery选择器大全(3)

jquery选择器大全(3)

作者: 诺奕 | 来源:发表于2017-03-15 21:15 被阅读34次

书接上回...

四、表单选择器

1. :input(取input,textarea,select,button元素)。

:input元素这里就不再多说了,前面的一些例子中也已经囊括了。

2. :text(取单行文本框元素)和:password(取密码框元素)

这两个选择器分别和属性选择器$('input[type=text]')、$('input[type=password]')等同。

<body>
    <fieldset style="width: 300px;">
        <legend>账户登录</legend>
        <div>
            <label>用户名:</label><input type="text"/>
        </div>
        <div>
            <label>密  码:</label><input type="password"/>
        </div>
    </fieldset>
</body>
<script src="jquery.js"></script>
<script>
    $(':text').css('border', '1px solid #FF0000');
    $(':password').css('border', '1px solid #0000FF');
    // 等效代码
    //$('input[type=text]').css('border', '1px solid #FF0000');
    //$('input[type=password]').css('border', '1px solid #0000FF');
</script>

如图:


3. :radio(取单选框元素)

:radio选择器和属性选择器$('input[type=radio]')等同

<body>
    你现在工作的企业属于:
    <input type="radio" name="radio" checked="checked" value="外企"/>外企
    <input type="radio" name="radio" value="国企"/>国企
    <input type="radio" name="radio" value="民企"/>民企
</body>
<script src="jquery.js"></script>
<script>
    $(':radio').each(function() {
        alert($(this).val());
    });
    // 等效代码
    /*
     $('input[type=radio]').each(function() {
     alert($(this).val());
     });
     */
</script>
5. :submit(取提交按钮元素)

:submit选择器和属性选择器$('input[type=submit]')等同

6. :reset(取重置按钮元素)

:reset选择器和属性选择器$('input[type=reset]')等同

7. :button(取按钮元素)

:button选择器和属性选择器$('input[type=button]')等同

8. :file(取上传域元素)

:file选择器和属性选择器$('input[type=file]')等同

9. :hidden(取不可见元素)

:hidden选择器和属性选择器$('input[type=hidden]')等同
注:此文章来自:http://www.jb51.net/article/57753.htm 并由本人优化

相关文章

  • jquery选择器大全(3)

    书接上回... 四、表单选择器 1. :input(取input,textarea,select,button元素...

  • jQuery基础知识

    一 : jQuery选择器 jQuery可以支持CSS3的选择器,在不支持CSS3的情况下,jQuery也可以兼容...

  • jquery选择器书目录

    jquery选择器-基本选择器 jquery选择器-层级选择器 jquery选择器-基本过滤选择器 jquery选...

  • JQUERY一

    jQuery 元素选择器 jQuery 属性选择器 jQuery CSS 选择器 jQuery 事件 jQuery...

  • jQuser有选择器

    jQuery基本选择器 jQuery过滤选择器 jQuery层级选择器 jQuery筛选选择器(方法)

  • 选择器

    jQuery 元素选择器 jQuery 属性选择器 jQuery CSS 选择器

  • jQuery 基础

    jQuery jQuery操作DOM jQuery的选择器 基本选择器 层级选择器 过滤选择器 jQuery操作样...

  • jQuery

    jQuery jQuery操作DOM jQuery的选择器 基本选择器 层级选择器 过滤选择器 jQuery操作样...

  • jQuery 选取元素概要

    用选择器选取元素 如: jQuery 支持的选择器包括: CSS 1-3 定义的选择器。 jQuery 自定义的选...

  • jQuery笔记

    1. jQuery 介绍 2. jQuery 的基本使用 3. jQuery 选择器 4. jQuery 样式操...

网友评论

      本文标题:jquery选择器大全(3)

      本文链接:https://www.haomeiwen.com/subject/uuyrnttx.html