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中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
jquery 3D球状导航的文章分类
Jul 06 Javascript
JS下拉缓冲菜单示例代码
Aug 30 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 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
php开发过程中关于继承的使用方法分享
2011/06/17 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
广告切换效果(缓动切换)
2009/05/27 Javascript
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
教你如何用node连接redis的示例代码
2018/07/12 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
python爬虫之百度API调用方法
2017/06/11 Python
Django数据库操作之save与update的使用
2020/04/01 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
《曹刿论战》教学反思
2014/03/02 职场文书
人力资源总监工作说明
2014/03/03 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
电气工程师岗位职责
2015/02/12 职场文书
博士导师推荐信
2015/03/25 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
Python jiaba库的使用详解
2021/11/23 Python