zoukankan      html  css  js  c++  java
  • JQuery能够高效地操作页面元素

    关于DOM和CSS的页面元素选择:

      $("span");     //全部span元素

      $("#elem");   //id为elem的元素

      $(".classname");  //类为classname的元素

      $("div#elem");  //id为elem的<div>元素

      $("ul li a.menu");  //类为”menu”的<a>标签

      $("p>span");  //p的直接子元素span

      $("input[type=password]");  //指定类型的input元素

      $("p:first");  //页面的第一个段落  

      $("p:even");  //全部偶数段落

      $(":header");  //标题元素(h1到h6)

      $(":button");  //全部按钮元素

      $(":radio");

      $(":checkbox");  

      $(":checked");   //选中状态的 选择框或段选框

    • html()  获取元素或者一组元素的HTML内容,类似与JavaScript的innerHTML,会获得全部的HTML(包括文本)。
    var htmlContent=$("#elem").html();
    $("#elem").html("<p>Here is some new content.</p>");
    /*修改内容*/
    •  text() 仅获取元素的文本内容,获取及修改内容如下:
    1
    2
    3
    var textContent=$("#elem").text();
    $("#elem").text("new content");     //修改内容
    $("#elem").append("<p>Here is some new content.</p>")   //添加文本内容
    • attr() 返回一个元素特定的属性值,当用于一组时,返回第一个元素的值。
    1
    2
    3
    var title=$("#elem").attr("title");    //返回属性值
     
    $("#elem").attr("title","new title");    //修改属性值
    • show()    //显示元素     $("div").show();
    • hide()     //   隐藏元素  ,slow的值大约是600毫秒

         $("#elem").hide("slow",function(){

                //隐藏后的操作

             }); 


     元素动画

      1.淡入淡出,如:

      $("#elem").fadeOut("slow",funtion(){

         //淡出后的操作

      });

      

      $("#elem").fadeIn(500,function(){

         //淡入后的操作  

      });

      

      $("#elem").fadeTo(3000,0.5,function(){

          //淡入或淡出后的操作,0.5表示不透明度,表示最终不透明度淡入或者淡出为0.5

      });

      2.滑动,类似淡入淡出

      slideDown();

      slideUp();

      slideToggle();

      3.动画

      animate()可以应用于很多的CSS样式。如把元素高度宽度改变后再淡出隐藏。

    1
    2
    3
    4
    5
    6
    7
    8
    $("#elem").animate(
        {
            400px;
            height:400px;
           },1500,function(){
                   $(this).fadeOut("slow");
                    }
      );

     命令链 

      jQuery命令链的长度没有什么限制,可以对同一组元素连续进行很多的操作:

      $("#elem").text("Hello from jQuery").fadeOut().fadeIn();

  • 相关阅读:
    17-Flutter移动电商实战-首页_楼层区域的编写
    16-Flutter移动电商实战-切换后页面状态的保持AutomaticKeepAliveClientMixin
    15-Flutter移动电商实战-商品推荐区域制作
    AndroidStudio中Flutter打包APK
    windows下dos窗口实现持续ping显示时间保存至日志
    14-Flutter移动电商实战-ADBanner组件的编写
    13-Flutter移动电商实战-ADBanner组件的编写
    12-Flutter移动电商实战-首页导航区域编写
    11-Flutter移动电商实战-首页_屏幕适配方案和制作
    10-Flutter移动电商实战-使用FlutterSwiper制作轮播效果
  • 原文地址:https://www.cnblogs.com/lizhenlin/p/7069795.html
Copyright © 2011-2022 走看看