JQuery--过滤器

最新推荐文章于 2024-01-13 22:21:09 发布

飞飞翼

最新推荐文章于 2024-01-13 22:21:09 发布

阅读量299

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/qq_36935391/article/details/78713278

版权

Jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

body

<p class="a">哈喽</p>
<p class="b">刚好</p>
<p class="c"><a class="q">as</a><a>as</a>地方</p>
<p class="d">a新地址</p>
<p class="e">水电费</p>

3.1.1类过滤

根据元素的雷属性进行过滤

	   if($("p:eq(0)").hasClass("a")){   
		   alert("有class=a");
		   }                        //选中第一个p标签通过hasClass函数判断是否用。class=a,如果是的，就返回true，就行对话框提示

3.1.2 下表过滤

//下表过滤
	   	$("p:eq(1)").css("background","red");   //选中第二个p标签并将背景设置为红色

3.1.3 表达式过滤

根据需要自定义表达式来过滤

    $("p").filter(".e").css("background","blue");   //选中p标签并且p标签使用class=e  ，进北京设置Wie蓝色

注意filter参数前面加点

$("p").filter(function(index) {

            return $("a",this).length==2
        }).css("background","yellow")      选中所有p元素，p标签中含有2个a标签的话，返回true，并设置为背景黄色

3.1.4has方法过滤

专门负责保留包含特定后代的元素，去掉那些不包含特定厚底阿德元素。

$("p").has("a.q").css("background","#09f"); //匹配所有的p元素   过滤出p标签包含的a变迁并且a标签使用了class=q

3.1.4 判断

返回值为true

if($("p").is(".a")){
			alert("有d元素");
			}                          //单个条件

f($("p").is(".a,.b")){//多个
			alert("有d元素");
			}	                    //多个条件

3.1.5 映射

<!DOCTYPE html>
<html>
<head>
  <style>p { color:red; }</style>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
<form method="post" action="">
  <fieldset>
    <div>
      <label for="two">2</label>
      <input type="checkbox" value="2" id="我去v" name="number[]">
    </div>
    <div>
      <label for="four">4</label>
      <input type="checkbox" value="4" id="sad" name="number[]">
    </div>
    <div>
      <label for="six">6</label>
      <input type="checkbox" value="6" id="啊的是v" name="number[]">
    </div>
    <div>
      <label for="eight">8</label>
      <input type="checkbox" value="8" id="的v" name="number[]">
    </div>
  </fieldset>
</form>

<p><b>Values: </b></p>

<script>
  $("p").append($(':checkbox').map(function() {
    return this.id;
  }).get().join(','));
</script>

</body>
</html>   //this 引用每次迭代的当前 DOM 元素。该函数可返回单独的数据项

结果

我们能够获得复选框 ID 组成的逗号分隔的列表：

Values: 我去v,sad,啊的是v,的v

3.1.6清洗

body

<ul id="meny">
<li class="home">水电费</li>
<li>
<li>山东</li><li>地方</li><li>地方</li>
</li>
<li>水电费</li>
</ul>

$("#meny li").not(".home").css("color","red");	//通过not排除ul中的li使用了class=home的元素，为其他元素设置字体颜色红色

3.1.7截取

$("#meny li").slice(1,2).css("color","red");//通过slice方法截取第二个li元素，并为第二个元素设置字体颜色红色

注意

slice 先输入国为负数，说明是从后面起

3.2查找

3.2.1向下查找后代元素

children仅能查找子元素

.$("#meny").children().css("text-decoration","underline");//查找ul下的li元素

$("#meny").children(".home").css("color","red");//可以适当在children中加过滤元素

$("#meny").contents().css("color","red");//不仅可以获取子元素，还可以获取文本节点，注释节点等，返回jquery对象
       3.alert($("body>ul").find("li").length)

3.2.2向上查找祖先元素

1.parents函数

$("li").parents().css("background","#0F0");//找li元素的所有父元素
alert($("li").parents().length);//结果是4   分别是   html   body   div  ul

2.parent函数：

可以匹配一个包含所有匹配元素的唯一父元素的元素集合

                $("li").parent().css("background","#CCC");//查找所有匹配的父元素
				$("li").parent().each(function() {
                    alert(this.nodeName);  //获取元素   div和ul两个父元素
                });

3。parentsUntil()方法

对于匹配到的父元素划定范围

                $("li").parentsUntil("div").css("background","#CCC");//选中div下一级的li的父元素
				$("li").parentsUntil("div").each(function() {
                    alert(this.nodeName);
                });                            //结果   ul为li的父元素

4.offsetParent（）方法

能够查找到当前元素的第一个定位祖先元素

5.closest(expr,[context])

参数一：可以使字符串也可以是数组，用以过滤元素的表达式

参数二：是一个可选择参数表示一个元素，用来设置带查找的DOM元素集

3.2.3向上查找兄弟元素

<h1>回乡偶书</h1>
    <h2>贺知章</h2>
    <p class="blue">少小离家老大回</p>
    <p>乡音无该笔冒水</p>
    <p class="red">儿童相见不相识</p>
    <p>笑问客从何处来</p>

1.prev

仅能匹配上一个相邻的元素

			$(".red").prev().css("background","red");

2.prevAll

不仅能匹配上一个相零的元素，也可匹配与上一个元素同级的相同的元素

			$(".red").prevAll("p").css("background","red");

3.prevUntil
能匹配指定范围的同级元素，同级的任何元

  $(".red").prevUntil("h1").css("background","red");

3.2.4向下查找兄弟元素

1.next方法

 $(".blue").next("p").css("color","red");//匹配到使用class=blue的元素的相邻下一个p元素

【 //nextSibling 匹配下一个任意元素】
2.nextall方法

$(".red").nextAll("p").css("color","blue");//匹配 使用class=red的元素的下面的同级的p元素，如果参数为空则匹配下面所有同级元素

4. //nextUntil方法

 $(".blue").nextUntil(".red").css("color","red");//查找类名尾blue的p元素，然后使用.nextUntil(".red")方法查找类名为red的元素前面的所有元素

3.2.5 查找兄弟元素

1.siblings方法

 //找所有兄弟元素,并将查找到的兄弟元素字体变为黄色，但并不包括自己
      $(".blue").siblings("p").css("color","yellow");

2.添加查找对象（add（方法））

 $(".blue").siblings("p").add("h1,h2").css("color","yellow");//不仅查找使用类blue元素的同级p元素，还查找同级的h1,h2元素

3.3串联

<body  style="padding:100px;">
<h1>回乡偶书</h1>
    <h2>贺知章</h2>
    <p class="blue">少小离家老大回</p>
    <p>乡音无该笔冒水</p>
    <p class="red">儿童相见不相识</p>
    <p>笑问客从何处来</p>


</body>

这句话只能讲div中的p元素的背景变为红色，

 $("body").find("p").css("background","red");

如果想讲body的背景也变为红色，

$("body").find("p").andSelf().css("background","red");

还有一个方法（+end）

$("body").find("p").css("background","red").end().css("background","red");//也可以将body背景变为红色

飞飞翼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery--过滤器

body哈喽刚好asas地方a新地址水电费3.1.1类过滤根据元素的雷属性进行过滤 if($("p:eq(0)").hasClass("a")){ alert("有class=a"); } //选中第一个p标签通过hasClass函数判断是否用。class=a,如果是的，就返回true，就行对话框
复制链接

扫一扫