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 读取xml,写入xml 实现代码
Jul 10 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
JavaScript中数组对象的那些自带方法介绍
Mar 12 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
深入探讨javascript中的数据类型
Mar 04 Javascript
使用js实现的简单拖拽效果
Mar 18 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
javascript的setTimeout()使用方法总结
Nov 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
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
php下获取http状态的实现代码
2014/05/09 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
JS简单计算器实例
2015/01/20 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
Python调用C++程序的方法详解
2017/01/24 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
Python装饰器语法糖
2019/01/02 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
澳洲的服装老品牌:SABA
2018/02/06 全球购物
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
出资证明书范本(标准版)
2014/09/24 职场文书
党员评议思想汇报
2014/10/08 职场文书
健康状况证明模板
2014/10/23 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
起诉意见书范文
2015/05/19 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
编写python程序的90条建议
2021/04/14 Python