jQuery之筛选&文档处理

目录

在jQuery对象数组中，筛选出一部分元素：

过滤：first()：获取匹配的第一个元素

last()：获得匹配的最后一个元素

eq(N)：获取匹配的第N或-N个元素

filter(selector)：筛选出与指定表达式匹配的元素集合

has(selector)：筛选出包含特定特点的元素的集合

not(selector)：筛选出不包含特定特点的元素的集合

在jQuery对象数组中，根据选择器查找孩子、父母、兄弟标签 

查找：

children()：子标签中找

find()：后代标签中找

parent()：父标签

prevAll()：前面所有的兄弟标签

nextAll()：后面所有的兄弟标签

siblings()：前后所有的兄弟标签

文档处理的增删改查

增(内、外部两种类型)：

内部插入（前后两种类型插入方式）

内部插入（在元素之前或者之后两种类型插入方式）：

删（两种方法）：

改（replaceWith）与克隆（clone）：

城市选择案例：

效果图：

 代码如下 ：

内容图：

​

---

在jQuery对象数组中，筛选出一部分元素：

过滤：
first()：获取匹配的第一个元素

// 获取ul中所有的li元素，然后找到第一个元素
    // $("ul>li").first().css("background","red");
    // $("ul>li:first").css("background","yellow");
    // $("ul>li:eq(0)").css("background","yellow");
    // $("ul>li:lt(1)").css("background","yellow");

last()：获得匹配的最后一个元素

// 找到最后一个元素
    // $("ul>li").last().css("background","red");

eq(N)：获取匹配的第N或-N个元素

// 找到指定的某一个元素，例如第3个
    // $("ul>li").eq(2).css("background","pink")

filter(selector)：筛选出与指定表达式匹配的元素集合

//--过滤出指定表达式匹配的元素集合
    // 1.找到属性title为a的元素
	// $("ul>li").filter("[title=a]").css("background","green")
	// 2.筛选除有title属性或者title属性不等于b的元素集合
	// $("ul>li").filter("[title][title=a]").css("background","orange");
	// 3.筛选出有title属性的元素集合
	// $("ul>li").filter("[title]").css("background","green");

has(selector)：筛选出包含特定特点的元素的集合

// 筛选出有<span>标签的元素集合  has
    // $("ul>li").has("span").css("background","pink")

not(selector)：筛选出不包含特定特点的元素的集合

// 筛选出没有title属性的元素集合
    // $("ul>li").not("[title]").css("background","black");

在jQuery对象数组中，根据选择器查找孩子、父母、兄弟标签 

查找：

children()：子标签中找

// 1.查找ul的所有子标签
    // $("ul").children().css("color","red");
	// 2.查找ul的第一个子标签,并且指定为li子标签
	// $("ul").children("li").first().css("color","red");
	// 3.查找ul的第四个子标签,并且指定为li子标签
	// $("ul").children("li").eq(3).css("color","red");
	// 4.通过下标 返回的是js对象
	// console.log($("ul").children("li")[2])
	// $($(