博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery基本选择器 (实例及表单域 value 的获取)
阅读量:6209 次
发布时间:2019-06-21

本文共 2454 字,大约阅读时间需要 8 分钟。

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>

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

1  2  3  4     
5 6 表单域选择器应用示例 7 39 40 41 42
43
44
45
46
47
48
49
50
51
55
56
60
61
62
63
64
65
66
67
68
69
70
71
78
79
80
81
82
83
84
85
86
87
88
89
文本框 密码框
单选按钮 52 是53 否54 复选框 57 水果58 蔬菜59
图像 文件域
隐藏域 (不可见) 下拉列表 72 77
提交按钮 重置按钮
文本区域:
90 91 92

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

 

转载地址:http://jpzja.baihongyu.com/

你可能感兴趣的文章
CentOS 中使用yum出现的“UnicodeDecodeError: &#39;ascii&#39; codec”问题解决方法
查看>>
【知识整理】这可能是最好的RxJava 2.x 教程(完结版)
查看>>
【Android】定位与解决anr错误记录
查看>>
Virtex6 PCIe 超简版基础概念学习(二)
查看>>
Hive 内建操作符与函数开发——深入浅出学Hive
查看>>
rsyslog学习
查看>>
最近项目中代码管理学习
查看>>
他山之石、能够攻玉 - 我的2015年总结
查看>>
Android 完整开源应用大全,完整开源项目
查看>>
java怎样将一个List传入Oracle存储过程
查看>>
基本的数据类型分析----java.lang.Number类及其子类分析
查看>>
EditPlus v4.5 简体中文
查看>>
&lt;二代測序&gt; 批量下载 NCBI sra 文件
查看>>
web.xml中load-on-startup标签的含义
查看>>
Azure IOT 设备固件更新技巧,看这一篇就够了
查看>>
Excel中输入身份证后3位变成0,怎么办?
查看>>
js学习笔记32----new
查看>>
FFmpeg基础知识之————H264编码profile & level控制
查看>>
PyCharm中按住Alt键,可以选择一个指定列表,然后对这个数列进行操作,比如删除,增加等等...
查看>>
mysql中的case when 与if else
查看>>