<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <link rel="stylesheet" href="imooc.css" type="text/css">

    <style>

    input {

        display: block;

        margin: 10px;

        padding: 10px;

    }

    </style>

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>

<body>

    <h2>子元素筛选选择器</h2>

    <h3>enabled、disabled</h3>

    <form>

        <input type="text" value="未设置disabled" />

        <input type="text" value="设置disabled" disabled />

        <input type="text" value="未设置disabled" />

    </form>

    <script type="text/javascript">

        //查找所有input所有可用的（未被禁用的元素）input元素。

        $("input:enabled").css("border", "2px groove red");

    </script>

    <script type="text/javascript">

        //查找所有input所有不可用的（被禁用的元素）input元素。

        $("input:disabled").css("border", "2px groove blue");

    </script>

    <h3>checked、selected</h3>

    <form>

        <input type="checkbox" checked="checked">

        <input type="checkbox">

        <input type="radio" checked>

        <input type="radio">

        <select name="garden" multiple="multiple">

            <option>imooc</option>

            <option selected="selected">慕课网</option>

            <option>aaron</option>

            <option selected="selected">博客园</option>

          </select>

    </form>

    <script type="text/javascript">

         //查找所有input所有勾选的元素(单选框,复选框)

         //移除input的checked属性

        $("input:checked").removeAttr('checked')

    </script>

    <script type="text/javascript">

         //查找所有option元素中,有selected属性被选中的选项

         //移除option的selected属性

        $("option:selected").removeAttr('selected')

    </script>

</body>

</html>

注意：

在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素

jQuery选择器之表单对象属性筛选选择器的更多相关文章

  1. jQuery选择器之表单对象属性过滤选择器Demo

    测试代码: 08-表单对象属性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  2. jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、:selected

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  3. jquery 表单对象属性筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  4. jQuery表单对象属性过滤选择器

    jQuery表单对象属性过滤选择器 <div id="p1" attr="p1"> <input type="text" ...

  5. Jquery | 基础 | jQuery表单对象属性过滤选择器

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用jQuery表单对象属性 ...

  6. 009 jquery过滤选择器-----------（表单对象属性过滤选择器 与 表单选择器）

    1.表单对象属性选择器 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  7. jQuery选择器之表单元素选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  8. jquery选择器之表单选择\表单对象属性

    :input 匹配所有input标签 :text 匹配所有单行文本框 :password 匹配所有密码框 :radio  匹配所有单选扭 :checkbox 匹配所有复选框 :image 匹配所有图像 ...

  9. jQuery选择器之表单选择器Demo

    测试代码: 09-表单选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

随机推荐

  1. YTU 2455: Pefect 数字

    2455: Pefect 数字 时间限制: 1 Sec  内存限制: 128 MB 提交: 749  解决: 146 题目描述 小明和小林做数字游戏,他们的游戏规则如下: 小明说出一个数字n,小林说出 ...

  2. Javascript版五子棋

    Javascript版五子棋,无禁手.欢迎提出算法的改进意见.2. [代码]HTML     <!DOCTYPE html><html>    <head>    ...

  3. Python学习笔记_Mysql数据库、Excel

    一.操作mysql数据库 import pymysql # 1.连上数据库:账号,密码,ip,端口号,数据库 # 2.建立游标(去数据库拿东西的工人) # 3.执行sql # 4.获取结果 # 5.关 ...

  4. I.MX6 wpa_supplicant_8 编译问题

    /************************************************************************ * I.MX6 wpa_supplicant_8 编 ...

  5. 【矩阵---求A的1到N次幂之和】

    引例: Matrix Power Series: 题目大意,给定矩阵A,求A^+A^+A^+...A^N. 题解:已知X=a,可以通过以下矩阵求出ans=a^+a^+...a^=矩阵^(n+)后右上格 ...

  6. Struts2的各种标签库

    1 在JSP中使用taglib编译指令导入标签库 <%@ taglib prefix="s" uri="/struts-tags" %> ----- ...

  7. [SHOI 2013] 发微博

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4419 [算法] 用std :: set维护每个人的好友集合 当两人成为好友时将每人接 ...

  8. 平衡二叉树、B树、B+树、B*树、LSM树简介

    平衡二叉树是基于分治思想采用二分法的策略提高数据查找速度的二叉树结构.非叶子结点最多只能有两个子结点,且左边子结点点小于当前结点值,右边子结点大于当前结点树,并且为保证查询性能增增删结点时要保证左右两 ...

  9. bzoj1025 [SCOI2009]游戏——因数DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1025 这篇博客写得真好呢:https://www.cnblogs.com/phile/p/4 ...

  10. darwin Stream Server源码分析

    摘要 ​所谓的流式媒体简单的讲就是指人们通过网络实时的收看多媒体信息:如音频流.视频流等.与流式媒体对应的传统工作方式是下载+播放模式,即用户首先下载多媒体文件,然后再在本地播放,这种方法的一个主要缺 ...