zoukankan      html  css  js  c++  java
  • 修改css样式+jq中的效果+属性操作+元素操作

        :checked    选框选中的

       一、修改css样式:

        1.参数只写属性名,则返回属性值

          $(this).css( ' color ');   //300px

        2.参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号

          $(this).css(" color "," red ") ; //设置当前元素的字体颜色是红色

        3.参数可以是对象形式,方便设置多组样式,属性名和属性值用冒号隔开,属性可以不加引号,如果是复合属性必须采用驼峰法命名:

          $(this).css({

            color : " red ",

            width : "300px",

            backgroundColor : " pink "  //复合属性采用驼峰法命名

          })

        二、jq中的效果:

          show():显示   hide():隐藏    toggle():切换

          slideDown():下滑显示    slideUp():上滑隐藏    slideToggle():滑入滑出切换

          fadeIn():淡入效果    fadeOut():淡出效果    fadeToggle():淡入淡出效果    fadeTo():修改透明度

         三、属性操作:

            常用的获取属性值的语法:

             prop( ):获取元素本身固定的属性值    // $("a").prop("href") ;  //获取 a 标签中 href 的属性值

             prop("href","#");   // 给href属性赋值 #

             attr( ): 获取自定义的属性值        //   $( "div" ).attr("data-index") ;    //  获取div中自定义的index的属性值 

             attr("index",2) ;   //  给index赋值是2 

         

             data( ):数据缓存 data(),数据是存放在元素的内存里面    // data("uname","Tom");

             $("div").data("index");   //这个方法获取data-index  h5自定义属性 :不用写data-  而且返回的是数字型

            四、元素操作:

          1,遍历

            第一种方式遍历 

               each(function(index,element));

            第二种方式遍历:

              $.each(object,function(index,element){ xxx; })

                1.$each( )方法可用于遍历任何对象,主要用于数据处理,比如数组,对象

                2.里面的函数有2个参数:index是每个元素的索引号;element遍历内容

              var   arr=["红色","绿色","蓝色"];

              $.each(arr,function(i,ele){

                console.log(i);   //索引号

                console.log(ele);   //值

              })

              例2:

              <ul><li>周一</li><li>周二</li><li>周三</li></ul>

              $.each($("ul li"),function(i,ele){

                console.log(i);    // 获取 li 中的索引号

                console.log(ele);  //获取li中的每个值

              })

          2,创建

            var li =$("<li>创建一个新元素</li>");

            var  div  =$("<div>创建一个新的</div>")

            //  内部添加  append 

             $("ul").append(li);  //  内部添加并且放到内容的最后面

            //  内部添加   prepend

             $("ul").prepend(li)  //  内部添加并且放到内容的最前面

            //  外部添加   after

             $(".test").after(div);  //   外部添加并且放到内容的最后面

            //  外部添加   before

             $(".test").before(div);  //   外部添加并且放到内容的最前面

            <ul>

              <li>原先的li</li>

            </ul>

            <div class="test">

              div元素

            </div>

          3,删除元素

              //  remove

            $("ul").remove();  //   删除匹配的元素    自杀

              //   empty

            $("ul").empty();   //   删除匹配元素里面的子节点    孩子

              //   html(" ")

            $("ul").html(" ");   //   删除匹配元素里面的子节点    孩子

  • 相关阅读:
    hive匹配中文
    修改GIT密码
    Oracle中文排序问题
    redis-cli显示中文
    iOS应用图标AppIcon
    Flink开发环境搭建(maven)
    Flink安装部署
    java连Oracle连接字符串写法
    centos设置路由route
    Android 手机卫士--xutils说明与下载方法使用
  • 原文地址:https://www.cnblogs.com/qtbb/p/11332681.html
Copyright © 2011-2022 走看看