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

 更新时间:2017年09月19日 08:18:53   作者:喵嘻嘻  
下面小编就为大家带来一篇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 animate easing使用方法图文详解

    jQuery animate easing使用方法图文详解

    这篇文章主要介绍了jQuery animate easing使用方法详解的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • jQuery实现页面内锚点平滑跳转特效的方法总结

    jQuery实现页面内锚点平滑跳转特效的方法总结

    通过jQuery实现页面内锚点平滑跳转的方法很多,可以通过插件hovertreescroll实现,也可以简单的通过animate方法实现,下面介绍这2种比较简单的方法。
    2015-05-05
  • jQuery双向列表选择器select版

    jQuery双向列表选择器select版

    这个是select版的,若想美化某些样式是不支持得,大家可以使用div模拟版,下面小编给大家介绍下jQuery双向列表选择器select版,感兴趣的朋友一起看看吧
    2016-11-11
  • jQuery实现滚动到底部时自动加载更多的方法示例

    jQuery实现滚动到底部时自动加载更多的方法示例

    这篇文章主要介绍了jQuery实现滚动到底部时自动加载更多的方法,涉及jQuery基于ajax动态操作页面元素相关实现技巧,需要的朋友可以参考下
    2018-02-02
  • jQuery实现区域打印功能代码详解

    jQuery实现区域打印功能代码详解

    这篇文章主要介绍了jQuery实现区域打印功能代码详解的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • 了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)

    了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)

    这个jQuery选择器实验室非常酷,它能在线免费使用,当然你也能下来到本地离线使用。这个测试页面包含复杂的HTML组合字段,然后你能尝试预定义使用各种jQuery选择器。如果这还不够你也可以自定义选择器
    2012-02-02
  • jquery插件实现扫雷游戏(1)

    jquery插件实现扫雷游戏(1)

    这篇文章主要为大家详细介绍了jquery插件实现扫雷游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • jQuery实现图片左右滚动特效

    jQuery实现图片左右滚动特效

    这篇文章主要介绍了jQuery合作伙伴左右滚动特效,功能实现非常简单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-08-08
  • 修改Jquery Dialog 位置的实现方法

    修改Jquery Dialog 位置的实现方法

    下面小编就为大家带来一篇修改Jquery Dialog 位置的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 高效的jQuery代码编写技巧总结

    高效的jQuery代码编写技巧总结

    好的代码会带来速度的提升,快速渲染和响应意味着更好的用户体验。本文主要总结了如何高效的编写jQuery代码的技巧,对提升你的jQuery和javascript代码具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02

最新评论