• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jquery表单对象属性过滤选择器实例分析

jquery表单对象属性过滤选择器实例分析

作者:永远爱好写程序 字体:[增加 减小] 来源:互联网

永远爱好写程序 通过本文主要向大家介绍了jquery,表单对象,属性过滤,选择器等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

本文实例讲述了jquery表单对象属性过滤选择器用法。分享给大家供大家参考。具体分析如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单对象属性过滤选择器</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
 //=========举例1===========================
 //:enabled 用法: $(”input:enabled”) 返回值 集合元素
 //说明: 匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,
 //当然就为enabled啦.
 $("input:enabled").val("我是有效的按钮");
 //=========举例2===========================
 //:disabled 用法: $(”input:disabled”) 返回值 集合元素
 //说明: 匹配所有不可用元素.与上面的那个是相对应的.
 $("input:disabled").val("我是无效的按钮");
 //=========举例3===========================
 //:checked 用法: $(”input:checked”) 返回值 集合元素
 //说明: 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option).这话说起来有些绕口.
 //...<1> 提取所有选中的name='love'的复选框
 $("#btnTest").click(function () {
 ShowElements($("input[name='love']:checked")); //第一种写法
 //ShowElements($("[name='love']:checked"))  //第二种写法
 });
 //=========举例4===========================
 //:selected 用法: $(”select option:selected”) 返回值 集合元素
 //说明: 匹配所有选中的option元素.
 //...<1> 所有name='city'的下拉框的选中项
 $("#btnTest2").click(function () {
  ShowElements($("select[name='city'] option:selected"));
 });
 //...<2> 所有name='prov'的下拉框的选中项
 //$("#btnTest2").click(function () {
 // ShowElements($("select[name='prov'] option:selected"));
 //});
});
function ShowElements(arr) {
 //alert(arr.length);
 var output = "";
 for (var i = 0; i < arr.length; i++) {
  if (output == "") {
   output = arr.eq(i).val();
  }
  else {
   output += "," + arr.eq(i).val();
  }
 }
 alert(output);
}
</script>
</head>
<body>
<input type="button" disabled="disabled" value="button1" />
<input type="button" value="button2" />
<input type="button" value="button3" />
<input type="button" disabled="disabled" value="button4" />
<input type="button" id="btnTest" value="点击我检查复选框" />
<input type="checkbox" name="love" value="1" />足球
<input type="checkbox" name="love" value="2" />篮球
<input type="checkbox" name="love" value="3" />排球
<input type="checkbox" name="Other" value="3" />非爱好类<br />
我是下拉框<input type="button" id="btnTest2" value="点击我检查下拉框" />
<select name="city">
<option value='beijing'>北京</option>
<option value='shanghai'>上海</option>
<option value='shenzhen'>深圳</option>
</select>
<select name="prov">
<option value='jiangxi'>江西省</option>
<option value='shichuan'>四川省</option>
<option value='guangdong'>广东省</option>
</select>
</body>
</html>

更多关于jquery选择器相关内容感兴趣的读者可查看本站专题:《jquery选择器用法总结》

希望本文所述对大家的jQuery程序设计有所帮助。

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • jQuery用户头像裁剪插件cropbox.js使用详解
  • jquery自动完成插件(autocomplete)应用之PHP版
  • 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
  • jquery+css3问卷答题卡翻页动画效果示例
  • jquery 回车事件实现代码
  • jquery解析XML字符串和XML文件的方法说明
  • javascript制作2048游戏
  • jQuery获取checkboxlist的value值的方法
  • jQuery中:header选择器用法实例
  • jQuery+ajax实现实用的点赞插件代码

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jquery动态添加删除一行数据示例
    • 基于Jquery的动态添加控件并取值的实现代码
    • juqery 学习之五 文档处理 包裹、替换、删除、复制
    • jQuery实现返回顶部效果的方法
    • jQuery中 delegate使用的问题
    • 基于jQuery实现照片墙自动播放特效
    • JQuery上传插件Uploadify使用详解及错误处理
    • jQuery操作DOM_动力节点Java学院整理
    • jQuery.uploadify文件上传组件实例讲解
    • 自制基于jQuery的智能提示插件一枚

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有