Chrome插件-JavaScript-JQuery选择器基本操作-类操作-属性编辑

  Chrome浏览器CRX插件采用JS语言作为开发语言，在开发插件过程中，需要操作文档树中的节点，本文介绍采用JQuery操作文档节点的常用方法：

1.基本选择器

  ID选择器，类选择器和标签选择器，源码如下所示：

$("#id");//获取指定ID的元素
$(".class");//获取同一类class的元素
$("div");//获取同一类标签的所有元素

2.布尔选择器

  并集选择器和交集选择器

$("div,p,li");//使用逗号分隔，只要符合条件之一就可。
$("div.redClass");//获取class为redClass的div元素

3.层级选择器

  子代选择器和后代选择器

$("ul>li");//使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
$("ul li");//使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

4.过滤（部分）选择器

  序号，奇偶，子选择器，查找，兄弟，父，下一个，上一个

$(“li:eq(2)”).css(“color”, ”red”);//获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
$(“li:odd”).css(“color”, ”red”);//获取到的li元素中，选择索引号为奇数的元素
$(“li:even”).css(“color”, ”red”);//获取到的li元素中，选择索引号为偶数的元素
$(“ul”).children(“li”)//相当于$(“ul>li”)，子类选择器
$(“ul”).find(“li”);//相当于$(“ul li”),后代选择器
$(“#first”).siblings(“li”);//查找兄弟节点，不包括自己本身。
$(“#first”).parent();//查找父亲
$(“li”).eq(2);//相当于$(“li:eq(2)”),index从0开始
$(“li”).next()//找下一个兄弟
$(“li”).prev()//找上一次兄弟

5.类操作

  增加类，移除类，判断类和切换类。

$("li").addClass("aa");//增加类
$("li").removeClass("aa");//移除类
$("li").hasClass("aa");//判断类 返回布尔值
$("li").toggleClass("aa");//需求：判断是否有aa类，有就删除aa，没有就添加aa

6.属性操作

  单个属性，多个属性和获取属性。

$("img").attr("alt","1111");//设置单个属性
$("img").attr({"title":"京剧","alt":"2222"});//设置多个属性
$("img").attr("title")//获取属性

7.作者答疑

  代码长度过长，如需全部项目或有疑问，请留言。

提示： 作者知了-联系方式1 提示： 作者知了-联系方式2