jQuery——十分钟了解如何获取元素

jQuery——10分钟了解如何获取元素

实例：获取所有span标签，将颜色改为红色

$("span").css("color","red");

$("#demo").css("color","red");

$(".demo").css("backgroundColor"，"red");

一次性获取多个元素
说明：可以一次性获取完全不相关的以标签名或者以id名和类名为标识的元素
标识之间用","分隔。
实例：获取类名为demo，id为test和所有的p标签，将背景颜色改为红色

$("p ,#test,.demo").css("backgroundColor","red");

1）.祖先子孙
实例：将form表单中所有的input标签颜色改为红色
说明：受影响的是from表单内所有的input标签

$("from input").css("color",red);

2).父子实例
实例：将form标签内的子lable标签改为红色
说明：受影响的是form表单内的子节点lable的背景颜色，他们之间不可以间隔多个元素。

$("form>lable").css("color","red");

3).前后实例
实例：将lable标签后的input标签颜色改为红色
说明：即前lable后input的模式会受到影响

$("lable+input").css("color","red");

4).兄弟实例
实例：改变与form在同一层级的lable边框
说明:只能是同级，包含与被包含都不可以改变

$("form~lable").css("border","1px solid red");

1).获取拥有指定属性的元素
实例：获取所有拥有id属性的p标签

$("p[id]").css("color","red");

2).获取拥有属性并且与指定的值一致的元素
实例：获取id为test的p标签，更改背景颜色

$("p[id=test]").css("color","red");

3).获取拥有指定属性并且与指定值不相同的元素
实例：获取所有拥有id属性，并且id值不为test的元素

$("p[id!=test]").css("color","red");

说明：通过过滤器的方法来获取元素主要是用于操作集合类型的标签，尤其适合操作列表标签的情况下。

通过指定元素名 和过滤器名来使用这种方法

实例：获取第一个p标签并更改颜色

$("p:first").css("color","red");

常用的过滤器有：

:first(获取第一个元素)
:last(获取最后一个元素)
:not(filter)(获取除了指定元素外的其他元素)
:even(获取偶数序号的元素)
:odd（获取奇数序号的元素）
:eq(index)(获取指定序号的元素)
还有其他的不常用,不再补充

:input(获取所有的表单元素)
:text(获取text属性的元素)
:password(获取password属性的元素)
:radio(获取单选按钮元素)
:checkbox(获取多选的按钮元素)
:button(获取button的元素)
等等.....

实例1：获取所有的input标签

$(":input").css("color","red");

实例2：获取所有的text标签

$(":text").css("color","red");

语法：

eq(index)

实例：操作序号为2号的p元素

$("p").eq(2).css("color","red");

ibuyi

发布了123 篇原创文章 · 获赞 74 · 访问量 2万+

私信关注