jQuery基本选择器(实例及表单域value的获取方法)


Posted in Javascript onMay 20, 2016

jQuery基本选择器包括 CSS选择器、层级选择器和、表单域选择器。

1.CSS选择器

(1)标签选择器

$("div")  $("p")  $("table") 等一系列 HTML 标签

(2)ID选择器

<input id="user" type="text">

获取该标记的值:$("#user").val();

(3)类选择器

<input type="text" class="t">

给该文本框添加样式:$(".t").css("border","2px solid blue");

(4)通用选择器

$("*").css("color","red"); //给所有元素设置样式

(5)群组选择器

$("div,span,p .styleClass").css("border","1px solid red"); //对所有div、span 及应用 styleClass 类的 p 元素设置边框属性

2.层级选择器

(1)子元素选择器

$("parent > child");

查找父元素下面的所有子元素,不包括孙元素等。

(2)后代元素选择器

$("ancestor descedant");

查找 ancestor 元素的所有子元素、孙元素、重孙元素等。

(3)紧邻同辈元素选择器

$("prev+next");

同辈,且紧跟在 prev 元素后面的元素 next 元素

(4)相邻同辈元素选择器

$("prev~siblings");

跟在 prev 后且同辈的所有 siblings 元素

3.表单域选择器

(1) :input 选择器

$(":input");

选择所有 input, textarea, select, button 元素。

(2) :text 选择器

$(":text");

选择所有单行文本框 (<input type="text"/>).

(3) :password 选择器

$(":password");

选择所有密码框 (<input type="password"/>).

(4) :radio 选择器

$(":radio");

选择所有单选按钮 (<input type="radio"/>).

(5) :checkbox 选择器

$(":checkbox");

选择所有复选框 (<input type="checkbox"/>).

(6) :file 选择器

$(":file");

选择所有文件域 (<input type="file"/>).

(7) :iamge 选择器

$(":iamge");

选择所有图像域 (<input type="iamge"/>).

(8) :hidden 选择器

$(":hidden");

选择所有隐藏域 (<input type="hidden"/>) 及 所有不可见元素(CSS display 属性值为 none)。

(9) :button 选择器

$(":button");

选择所有按钮 (<input type="button"/>) 和 <button>...</button>

(10) :submit 选择器

$(":submit");

选择所有提交按钮 (<input type="submit"/>) 和 <button>...</button>

(11) :reset 选择器

$(":reset");

选择所有重置按钮 (<input type="reset"/>) 和 <button>...</button>

对于表单域选择器,上述均为获取所有某一类型的元素。获取其中某个元素的值,在下面的实例中体现。该实例的运行效果图和代码如下:

jQuery基本选择器(实例及表单域value的获取方法)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="../js/jquery-1.7.2.js" type="text/javascript"></script>
  <title>表单域选择器应用示例</title>
  <script language="javascript" type="text/javascript">
    $(document).ready(function(){
        $(":text").attr("value","文本框");   //给文本框添加文本
        $(":password").attr("value","密码框"); //给密码框添加文本
        $(":radio:eq(1)").attr("checked","true");  //将第2个单选按钮设置为选中
        $(":checkbox").attr("checked","true");    //将复选框全部选中
       $(":image").attr("src","wedding.jpg"); //给图像指定路径
       $(":file").css("width","200px");       //给文件域设置宽度
        $(":hidden").attr("value","已保存的值");   //给隐藏域添加文本
        $("select").css("background","#FCF");     //给下拉列表设置背景色
        $(":submit").attr("id","btn1");        //给提交按钮添加id属性
        $(":reset").attr("name","btn");        //给重置按钮添加name属性
        $("textarea").attr("value","文本区域");     //给文本区域添加文字 
      });
      function submitBtn(){
        //下面两个语句用来获取复选框选中的所有值
        var checkbox = "";
        $(":checkbox[name='hate'][checked]").each(function(){
          checkbox += $(this).val() + " ";
        });
        alert($(":text").val()+"\n"
        +$(":password").val()+"\n"
        +$(":radio[name='habbit'][checked]").val()+"\n"
        +checkbox+"\n"
        +$(":file").val()+"\n"  //获得所选文件的绝对路径
        +$(":hidden[name='hiddenarea']").val()+"\n"
        +$("select[name='selectlist'] option[selected]").text()+"\n"
        +$("textarea").val()+"\n"
      );
      }

  </script>
</head>

<body>
<table width="730" height="145" border="1">
 <tr>
  <td width="113" height="23">文本框</td>
  <td width="209"><input type="text"/></td>
  <td width="93">密码框</td>
  <td width="287"><input type="password" /></td>
 </tr>
 <tr>
  <td height="24">单选按钮</td>
  <td>
    <input type="radio" name="habbit" value="是"/>是
    <input type="radio" name="habbit" value="否"/>否
  </td>
  <td>复选框</td>
  <td>
    <input type="checkbox" name="hate" value="水果"/>水果
    <input type="checkbox" name="hate" value="蔬菜"/>蔬菜
  </td>
 </tr>
 <tr>
  <td height="50">图像</td>
  <td><input type="image" width="50" height="50"/></td>
  <td>文件域</td>
  <td><input type="file" /></td>
 </tr>
 <tr>
  <td height="23">隐藏域</td>
  <td><input type="hidden" name="hiddenarea"/>(不可见)</td>
  <td>下拉列表</td>
  <td>
    <select name="selectlist">
      <option value="选项一">选项一</option>
      <option value="选项二" >选项二</option>
      <option value="选项三">选项三</option>
    </select>
  </td>
 </tr>
 <tr>
  <td height="25">提交按钮</td>
  <td><input type="submit" onclick="submitBtn()"/></td>
  <td>重置按钮</td>
  <td><input type="reset" /></td>
 </tr>
 <tr>
   <td valign="top">文本区域:</td>
   <td colspan="3"><textarea cols="70" rows="3"></textarea></td>
 </tr>
</table>

</body>
</html>

点击【提交】按钮之后弹出的对话框如下:

jQuery基本选择器(实例及表单域value的获取方法)

以上这篇jQuery基本选择器(实例及表单域value的获取方法)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 限制输入脚本大全
Nov 03 Javascript
JS扩展方法实例分析
Apr 15 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
JS匿名函数实例分析
Nov 26 Javascript
jquery实现轮播图效果
Feb 13 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
Vue formData实现图片上传
Aug 20 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 Javascript
原生js实现滑块区间组件
Jan 20 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 #Javascript
深入理解setTimeout函数和setInterval函数
May 20 #Javascript
JavaScript基础教程——入门必看篇
May 20 #Javascript
jQuery选择器及jquery案例详解(必看)
May 20 #Javascript
Jquery $when done then的用法详解
May 20 #Javascript
jQuery添加和删除输入文本框标签代码
May 20 #Javascript
jQuery通过deferred对象管理ajax异步
May 20 #Javascript
You might like
Zend的MVC机制使用分析(一)
2013/05/02 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
jquery属性过滤选择器使用示例
2013/06/18 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
关于axios如何全局注册浅析
2018/01/14 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
python实现名片管理系统项目
2019/04/26 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
Pycharm中如何关掉python console
2020/10/27 Python
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
出纳试用期自我鉴定范文
2014/09/16 职场文书
单位实习鉴定评语
2015/01/04 职场文书
三峡导游词
2015/01/31 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书
快速学习Oracle触发器和游标
2021/06/30 Oracle
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang