jQuery基本选择器(获取表单字段值的示例和方法)

JQuery基本选择器包括CSS选择器、层次选择器和表单字段选择器。

1.CSS选择器。

(1)标签选择器。

一系列HTML标记，如$(“div”)$(“p”)$(“table”)。

(2)标识选择器。

输入id='user '类型='text '

获取标记的值：$('#user ')。val()；

(3)类别选择器。

输入类型='text' class='t '

向文本框添加样式：$('。t’)。CSS('边框'，' 2px纯蓝')；

(4)通用选择器。

$('*').css('color '，' red ')；//为所有元素设置样式。

(5)组选择器。

$(“div，span，p .styleClass”)。css('边框'，' 1px纯红')；//为应用styleClass类的所有div、span和p元素设置边框属性。

2.电平选择器。

(1)子元素选择器。

$(“父子”)；

查找父元素下的所有子元素，不包括子元素。

(2)后代元素选择器。

$(“祖先描述符”)；

查找祖先元素的所有子代、孙代和曾孙代。

(3)靠近对等元素选择器。

$(“上一个下一个”)；

下一个元素，它是同一代的元素，紧接在前一个元素之后。

(4)相邻对等元素选择器。

$(' prev ~兄弟')；

上一个之后的所有兄弟元素都是同一代的。

3.表单域选择器。

(1):输入选择器。

$(' : input ')；

选择所有输入、文本区域、选择、按钮元素。

(2):文本选择器。

$(' : text ')；

选择所有单行文本框(输入类型='text'/)。

(3):密码选择器。

$(' : password ')；

选择所有密码框(输入类型='password'/)。

(4):收音机选择器。

$(' : radio ')；

选择所有单选按钮(输入类型='单选'/)。

(5):复选框选择器。

$(' : checkbox ')；

选中所有复选框(输入类型='checkbox'/)。

(6):文件选择器。

$(' : file ')；

选择所有文件字段(输入类型='file'/)。

(7):图像选择器。

$(' : iam ge ')；

选择所有图像字段(输入类型='iamge'/)。

(8):隐藏选择器。

$(' : hidden ')；

选择所有隐藏字段(输入类型='hidden'/)和所有不可见元素(CSS显示属性值为无)。

(9):按钮选择器。

$(' : button ')；

选择所有按钮(输入类型='button'/)和按钮./button。

(10) :submit选择器。

$(' : submit ')；

选择所有提交按钮(输入类型='提交'/)和按钮./button。

(11):复位选择器。

$(' : reset ')；

选择所有重置按钮(输入类型='重置'/)和按钮./button。

对于表单域选择器，上面是获取某个类型的所有元素。获取其中一个元素的值，如下例所示。该示例的运行渲染和代码如下：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML head meta http-equiv=' Content-Type ' Content=' text/HTML；charset=utf-8 '/脚本src=' http :/js/jquery-1。7 .2 .js ' type=' text/JavaScript '/脚本标题表单域选择器应用示例/title脚本语言=' JavaScript '类型=' text/JavaScript ' $(文档)。ready(function(){ $(':text ')).attr('值','文本框');//给文本框添加文本$(':password ').attr('值','密码框');//给密码框添加文本$(':radio:eq(1)').attr('checked '，' true ')；//将第2个单选按钮设置为选中$(“:复选框”).attr('checked '，' true ')；//将复选框全部选中$(':image ').attr('src '，'天气。jpg’)；//给图像指定路径$(':file ').css('width '，' 200px ')；//给文件域设置宽度$(' :隐藏').attr('值','已保存的值');//给隐藏域添加文本$("选择")。css(“”背景，' # FCF ')；//给下拉列表设置背景色$(':submit ').attr('id '，' BTN 1 ')；//给提交按钮添加编号属性$(':reset ').attr('姓名'，' BTN ')；//给重置按钮添加名字属性$(“文本区域”).attr('值','文本区域');//给文本区域添加文字});函数submitBtn(){ //下面两个语句用来获取复选框选中的所有值定义变量复选框=' ';$(“: checkbox[name=”讨厌][选中]).每个（函数(){ checkbox=$(this)).val()' '；});警报($(':text ').val() '\n' $(':password ').val()' \ n ' $(' : radio[name=' habbit '][checked]').val() '\n '复选框\n' $(':file ').val() '\n' //获得所选文件的绝对路径$(' :隐藏[name=' hiddenarea ']').val() '\n' $('选择[name='selectlist']选项[选中].text()' \ n ' $(“text area”).val()' \ n ')；}/script/head dytable width=' 730 ' height=' 145 ' border=' 1 ' tr TD width=' 113 ' height=' 23 '文本框/TD TD TD宽度=' 209 '输入类型=' text '/TD TD TD宽度=' 93 '密码框TD/TD宽度='287 '输入类型='密码'/TD/tr TD高度='24 '单选按钮TD TD TD输入类型='收音机'名称='habbit '值='是'/是输入类型='收音机'名称='habbit '值='否'/否运输署/运输署复选框TD TD TD输入类型='复选框'名称='讨厌'值='水果'/水果输入类型='复选框'名称='讨厌'值='蔬菜'/蔬菜/TD/tr/tr高度='50 '图像TD/TD输入类型='图像'宽度='50 '高度=' 50 '/TD文件域/TD TD TD输入类型=' 文件'/TD/tr TD高度='23 '隐藏域/TD TD输入类型='隐藏区域'名称='隐藏区域'/(不可见)/td td下拉列表TD/TD选择名称='selectlist '选项值='选项一'选项一/option选项值='选项二' 选项二/option选项值='选项三'选项三/option /select /td /tr tr td高度='25 '提交按钮TD/TD输入类型=' submit ' onclick=' submit BTN()'//TD重置按钮/TD TD TD输入类型='复位'/TD/tr TD值gn='顶部'文本区域：/TD TD col span=' 3 '文本区域cols=' 70 '行=' 3 '/文本区域/TD/tr/表格/正文/html点击【提交】按钮之后弹出的对话框如下：

以上这篇框架基本选择器（实例及表单域价值的获取方法)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。