zoukankan      html  css  js  c++  java
  • jQuery小测验

    1.div元素中,包含了一个<span>元素,通过has选择器获取<div>元素中的<span>元素的语法是? 提示使用has()

     

                  

    $(“div:has(span)”)

     

     

    2.<ul>元素中,添加了多个<li>元素,通过jquery选择器获取最后一个<li>元素的方法是?

     

                            $(“ul li:last”)

     

     

    3.在页面中有三个<div>元素,采用jQuery中的链式写法,隐藏第二个<div>元素,代码是? 提示使用hide()

           $(function(){

     

                       $(“div:eq(1)”).hide();

     

    })

     

    4.在三个<ul>元素中,分别添加多个<li>元素,通过jQuery中的子元素选择器,将这三个<ul>元素中的第一个 <li>元素隐藏,代码是? 提示使用first-child

                        $(function(){

                               $(“ulfirst-child(1)”)               

    })

    5.在页面的表单中增加了多个<input>类型的复选框元素,其中有的处于选中状态,通过jQuery选择器,将这些 选中状态的元素隐藏,代码为?

        

     $(“input:checked”).hide()

     

     

     

    6.如何获取列表框元素中被选中元素的的值,代码为:

              $(“select opten:selected”).val()

     

    7.使用attr方法,取消id号为test的复选框选中状态代码为:

     

    $(“text”).attr(“checked”,false)

     

     

    8.在三个<div>元素中,删除第二个元素的代码为?

     

        $(“div:eq(1)”).remove()

     

    9.移除已绑定元素事件的方法是?Bind()  unbind();

                       $(“#select”).bind(“click”,function(){})

               $(“#select”).unbind(“click”);//解除绑定   

     

    10.如何使用show方法以3秒的速度显示一个id号为testdiv元素,代码为?

     

                       $(“#text”).show(3000)

                       

     

     

    11.编程题

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

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

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

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

    $(function){

         $(“ul li:gt(5)”).hide();

    If($(“a”).text()==“更多”){

           $(“a”).click(function(){

                 $(this).text(“简化”);

                 $(“ul li:gt(5)”).show();

    else{

     $(“a”).click(function(){

                 $(this).text(“更多”);

                 $(“ul li:gt(5)”).hide();

    });

  • 相关阅读:
    Flutter实战视频-移动电商-35.列表页_上拉加载更多制作
    Flutter实战视频-移动电商-34.列表页_小BUG的修复
    Flutter实战视频-移动电商-33.列表页_子类和商品列表交互效果
    Flutter实战视频-移动电商-32.列表页_小类高亮交互效果制作
    Flutter实战视频-移动电商-31.列表页_列表切换交互制作
    Flutter实战视频-移动电商-30.列表页_商品列表UI界面布局
    Flutter实战视频-移动电商-29.列表页_商品列表数据模型建立
    Flutter实战视频-移动电商-28.列表页_商品列表后台接口调试
    Flutter实战视频-移动电商-27.列表页_现有Bug修复和完善
    Flutter实战视频-移动电商-26.列表页_使用Provide控制子类-2
  • 原文地址:https://www.cnblogs.com/sunbin123/p/6510064.html
Copyright © 2011-2022 走看看