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

前端之家收集整理的这篇文章主要介绍了jQuery基本选择器(实例及表单域value的获取方法)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

1.CSS选择器

(1)标签选择器

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

(2)ID选择器

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

(3)类选择器

给该文本框添加样式:$(".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");

选择所有单行文本框 (

(3) :password 选择器

$(":password");

选择所有密码框 (

(4) :radio 选择器

$(":radio");

选择所有单选按钮 (dio"/>).

(5) :checkBox 选择器

$(":checkBox");

选择所有复选框 (Box"/>).

(6) :file 选择器

$(":file");

选择所有文件域 (

(7) :iamge 选择器

$(":iamge");

选择所有图像域 (

(8) :hidden 选择器

$(":hidden");

选择所有隐藏域 (属性值为 none)。

(9) :button 选择器

$(":button");

选择所有按钮 (...

(10) :submit 选择器

$(":submit");

选择所有提交按钮 (...

(11) :reset 选择器

$(":reset");

选择所有重置按钮 (...

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

dio" name="habbit" value="是"/>是 dio" name="habbit" value="否"/>否 Box" name="hate" value="水果"/>水果 Box" name="hate" value="蔬菜"/>蔬菜 文件域