JQuery 过滤、查找、串联

jQuery 元素过滤

html代码

<ul class="menu">
    <li>第一个</li>
    <li class="li2">第二个</li>
    <li><span>第三个</span></li>
    <li class="li4">第四个</li>
    <p>我是p标签</p>
</ul>

jQuery代码

• eq(index|-index) 根据索引获取集合中的某一个

	$(function () {
		//eq(index)  根据索引获取集合中的某一个
        console.log($("ul>li").eq(2));
        //eq 参数 index 正向从0开始  -index  反向从-1开始
        console.log($("ul>li").eq(-1));
	});

• first() 获取集合中的第一个元素

	$(function () {
		//eq(index)  根据索引获取集合中的某一个
        console.log($("ul>li").eq(2));
        //eq 参数 index 正向从0开始  -index  反向从-1开始
        console.log($("ul>li").eq(-1));
	});

• hasClass(class) 判断元素是否含有某个类

	$(function () {
		 //hasClass(class)  判断元素是否含有某个类
        //返回true 或 false
        console.log($("ul").hasClass("menu"));
	});

• filter(expr|obj|ele|fn) 过滤集合

	$(function () {
		//filter(expr|obj|ele|fn)  过滤集合  必须有参数才能过滤
        console.log($("ul>li").filter(".li2"));
        console.log($("ul>li").filter($(".li2")));
        $("ul>li").filter(function (index,html) {
             if ($(html).hasClass("li2")){
                 console.log(html);
             }
         });
	});

• is(expr|obj|ele|fn) 判断当前元素是否为某个值

	$(function () {
		console.log($("ul").is(".menu"));
        console.log($(".menu").is("ul"));
        console.log($("ul>li").eq(1).is(".li2"));
        console.log($("ul>li").is(function (index, html) {
            if ($(html).hasClass("li2")) {
                console.log(html);
                return html;
            }
        }));
	});

• map(callback) 必须有参数(回调函数)

	$(function () {
		//map(callback)   必须有参数  回调函数
        //将数组映射为一个新的集合  也可用来遍历
        var arr = $("ul>li").map(function (index, html) {
            console.log(index, html);
            return html
        });
        //get()方法  获取当前对象 返回值为js对象
        console.log(arr.get());//将jQuery对象转换为js对象
	});

• has(expr|ele) 子元素是否具有某些值 返回父元素

	$(function () {
		//has(expr|ele)  子元素是否具有某些值 返回父元素
        console.log($("ul").has("span"));
        console.log($("ul").has(".li2"));
	});

• not(expr|ele|fn) 筛选出集合中的某些元素 返回其他元素

	$(function () {
		 console.log($("ul>li").not(".li2"));
        console.log($("ul> ").not("li"));
        console.log($("ul>li").not(function (index, html) {
            console.log(index, html);
            if ($(html).hasClass("li4")) {
                return html;
            }
        }));
	});

• slice(start,[end]) 参数是start end 类似数据的slice 截断

	$(function () {
		 console.log($("ul>li").slice(0, 2));
	});

jQuery 元素查找

html代码

<ul>
    <li>第一个</li>
    <li class="li2">第二个</li>
    <li><span>第三个</span></li>
    <li>第四个</li>
    <span>我是span标签</span>
</ul>

jQuery代码

• children([expr]) 获取所有直接子集

	$(function () {
		 //children([expr])  获取所有直接子集
        //加入参数 可以作为简单过滤器
        console.log($("ul").children());
        //加入参数过滤
        console.log($("ul").children(".li2"));
	});

• find(e|o|e) 以某个条件查找所有子集

	$(function () {
		//find(e|o|e) 以某个条件查找所有子集
        console.log($("ul").find(".li2"));
        console.log($("ul").find("span"));
        console.log($("ul").find($(".li2")));
	});

• next([expr]) 获取当前匹配元素的下一个
• nextAll([expr]) 获取当前匹配元素之后的所有同级元素

	$(function () {
		//next([expr]) 获取当前匹配元素的下一个
        //nextAll([expr])  获取当前匹配元素之后的所有同级元素
        console.log($(".li2").next());
        //nextAll 加入参数之后可以简单过滤
        console.log($(".li2").nextAll());
        console.log($(".li2").nextAll("span"));
	});

• prev([expr]) 获取当前匹配元素的上一个
• prevAll([expr]) 获取当前匹配元素之前的所有同级元素

	$(function () {
        //prev([expr])  获取当前匹配元素的上一个
        //prevAll([expr])  获取当前匹配元素之前的所有同级元素
        console.log($(".li2").next());
        //prevAll 加入参数之后可以简单过滤
        console.log($(".li2").nextAll());
        console.log($(".li2").nextAll("span"));
	});

• offsetParent() 找到第一个被定位的父节点

	$(function () {
      console.log($(".li2").offsetParent());
	});

• parent([expr]) 获取匹配元素的直接父元素
• parents([expr]) 获取匹配元素的所有父元素

	$(function () {
      //parent([expr]) 获取匹配元素的直接父元素
        //parents([expr]) 获取匹配元素的所有父元素
        console.log($(".li2").parent());
        //parents 加入参数可以过滤父元素
        console.log($(".li2").parents("body"));
	});

• siblings([expr]) 获取所有同级元素

	$(function () {
      //siblings([expr])  获取所有同级元素
        console.log($(".li2").siblings());
        //加入参数 过滤
        console.log($(".li2").siblings("span"));
	});

jQuery 串联

html代码

<ul>
    <li>第一个</li>
    <li class="li2">第二个</li>
    <li><span>第三个</span></li>
    <li>第四个</li>
    <span>我是span标签</span>
</ul>
<p>我是p标签</p>

jQuery代码

• add() 将元素添加到表达式所匹配到的jQuery对象中去

	console.log($("ul>li"));
    //对象中添加p元素
    console.log($("ul>li").add("p"));
    console.log($("ul>li").add($("p")));
    console.log($("ul>li").add($(".p1")));

• contents() 获取当前元素的所有节点 包含文本

	console.log($("ul").contents());

• end() 回到上一次破坏性修改，即上一次修改jquery对象

	//执行过end方法后 jQuery对象会回到slice(0,3)这一步执行后的jQuery对象
	console.log($("ul").find("li").slice(0, 3).end());