JQuery过滤选择器练习-1

在页面中,添加一个<ul>元素,里面放置多个(至少7个以上)的<li>元素,此外,再添加一个<a>元素.

初始时:<ul>元素中仅显示5个<li>元素,其中包含还包括最后一个<li>元素,<a>元素中的显示"更多"字符.

当点击"更多"链接时,自身内容变为"简化",同时,<ul>元素中显示全部的<li>元素.

当点击"简化"链接时,自身内容变为"更多",同时,<ul>元素中仅显示包含最后一个<li>元素在内的5个元素.

        <ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
        <a href="#">更多</a>
        <script>
            $("li:gt(3):not(:last)").hide();
           $("a").click(function(){
            var a =$("a").html();   
            if(a =="更多") {
                $("a").html("简化");
                $("li").show();
                return;
            } 
            $("a").html("更多");
                 $("li:gt(3):not(:last)").hide();
                return;
            });
        </script>
时间: 2024-10-13 16:01:54

JQuery过滤选择器练习-1的相关文章

jQuery 过滤选择器

jQuery 选择器(一) 1.ID选择器根据控件ID获取jQeruy,相当于javascript的getelementById.使用方法:$("#myid"),获取ID等于myid的jquery对象. 2.标签选择器使用标签名称获取jQuery,相当于javascript的getElementsByTagName_r().使用方法:$("p"),获取所有p标签.3.class选择器class为元素的定义样式,根据class名称获取jquery对象.如:$(&quo

jQuery过滤选择器:not()方法使用介绍

在jQuery的早期版本中,:not()筛选器只支持简单的选择器,说明我们传入到:not这个filter中的selector可以任意复杂,比如:not(div a) and :not(div,a) <p class="a">sdfsdfs</p> <p class="b">sdfsdfs</p> <p class="c">sdfsdfs</p> $("p:not(.

10分钟-jQuery过滤选择器

1.:first过滤选择器 本次我们介绍过滤选择器,该类型的选择器是根据某过滤规则进行元素的匹配,书写时以":"号开头,通常用于查找集合元素中的某一位置的单个元素. 在jQuery中,如果想得到一组相同标签元素中的第1个元素该怎样做呢? 在下面的示例代码中你可能注意到我们会使用 $("li:first") 注意:书写时以":"号开头. 例子:鉴于:first和:last功能相近,使用:last给最后的li标签文字添加红色: <div>

Jquery过滤选择器,选择前几个元素,后几个元素,内容过滤选择器等

一.基本过滤选择器(重点掌握下列八个):first 选取第一个元素 $("div:first").css("color","red");:last 选取最后一个元素 $("div:last").css("color","red");:not 除去指定的选择器外的元素 $("div:not").css("color","red")

jQuery过滤选择器详解

基本过滤选择器 选取第一个元素(:first) //选择第一个div元素. $('#btn1').click(function(){ $('div:first').css("background","#bfa"); }) 选取最后一个元素(:last) //选择最后一个div元素. $('#btn2').click(function(){ $('div:last').css("background","#bfa"); }) 去

jQuery过滤选择器

要点: 基本过滤器 内容过滤器 可见性过滤器 子元素过滤器 其他方法 一.基本过滤器 <ul> <li>item1</li> <li>item2</li> <li class="item3">item3</li> <li>item4</li> <li>item5</li> <li>item6</li> </ul> 1.获

jquery过滤选择器-----------(表单对象属性过滤选择器 与 表单选择器)

1.表单对象属性选择器 2.程序 3.表单选择器

jquery过滤选择器-----------(屬性过滤选择器)

1.介紹 2.程序 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <style type="text/css"> 7 div, span, p { 8 width: 140px; 9 height: 140px; 10 margin:

基础2.Jquery过滤选择器

                     1.基础选择器: 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的名称选择, $("a") 选择所有<a>元素 .class 根据元素的css类选择 $(".bgRed") 选择所用CSS类为bgRed的元素 * 选择所有元素 $("*")选择页面所有元素 selector1, selector2, s