当前位置: 首页 > 编程笔记 >

基于jQuery选择器之表单对象属性筛选选择器的实例

邵正雅
2023-03-14
本文向大家介绍基于jQuery选择器之表单对象属性筛选选择器的实例,包括了基于jQuery选择器之表单对象属性筛选选择器的实例的使用技巧和注意事项,需要的朋友参考一下

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <link rel="stylesheet" href="imooc.css" rel="external nofollow" 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选择器之表单对象属性筛选选择器实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍jQuery选择器之属性筛选选择器用法详解,包括了jQuery选择器之属性筛选选择器用法详解的使用技巧和注意事项,需要的朋友参考一下 在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="che

  • 我试图为一个问题找到一个解决方案,在这个问题上,我需要根据多个标准来细化结果。我有多个选择标准: 水果-苹果橙子葡萄 蔬菜-番茄土豆西兰花 坚果-核桃花生杏仁 谷物-玉米小麦大米 香料-肉桂姜椒 用户只能从每个组中选择一个标准,例如,您可以选择苹果,但不能选择橘子或葡萄。参见jsfiddle。 然后我有多个篮子,里面有不同的物品。 但问题是,这些结果必须基于多个标准进行精炼。例如,我选择了苹果,然

  • 我希望,如果我选择“mammals”,动物选择选项只显示值为1的选项data-animal_class。 我知道如何获得哺乳动物值,但我不知道如何使用过滤器 这是我的代码:

  • 在HTML中,可以通过元素各种各样的属性,来给元素增加很多附加信息。如通过 width 属性,可以指定元素的宽度;通过 id 属性,可以区分不同的元素,并通过Javascript来控制这些元素的内容和状态。 以往的CSS中,大量使用类选择器来定义样式。由于类选择器并不能说明什么样式服务于什么元素。因此,对于一个大型网站,CSS代码比较庞大,若要修改某个样式,就成为非常头疼的事情。 CSS的属性选择

  • 具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id。 注意:IE7和IE8需声明!DOCTYPE才支持属性选择器!IE6和更低的版本不支持属性选择器。 属性选择器 下面的例子是把包含标题(title)的所有元素变为蓝色:[title] { color:blue; } 属性和值选择器 下面的实例改变了标题title='runoob'元素的边框样式:[title=r

  • 主要内容:jQuery 选择器jQuery 选择器 请使用我们的 jQuery 选择器检测器 来演示不同的选择器。 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") class="intro" 的所有元素 .class,.class $(".intro,.demo") class 为 "intro" 或 "demo"