zoukankan      html  css  js  c++  java
  • jQuery 属性与CSS操作

    属性
    1.属性
        1.1 attr(name|properties|key,value|key,fn)
            1) 获取属性值    $("img").attr("src");
            2) 设置属性值    $("img").attr("title","你好");$("img").attr({src:"img1.png",alt:"img1"})
            3) 设置属性值  $("img").attr("alt",function(index,value){return value + index}) //index为当前元素的索引,value为"alt"原先的属性值
        1.2 removeAttr(name)
            删除一个属性    $("img").removeAttr("alt");
        1.3 prop(name|properties|key,value|key,fn)
             $("input[type='checkbox']").prop("checked", true);
            $("input[type='checkbox']").prop("checked", function( i, val ) {    return !val;    });
        1.4 removeProp(name)
            用来删除由.prop()方法设置的属性集
        1.5 attr() 与 prop() 的区别
            具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()
    2.css类
        2.1 addclass(class|fn)
            $("p").addClasss("active focus");
            $("ul li").addClass(function(i,class){return class+i})
        2.2 removeClass([name|fn])
            $("p").removeClass("active");
            $("p").removeClass(function(){return  $(this).attr("class")})
        2.3 toggleClass(class|fn)
            $("p").toggleClass("active");
            $(".class").toggleClass(function(){
                if($(this).parent().is(".myClass"))
                {
                    return "classone";
                   }
                else
                {
                    return "classtwo";
                }
               })
    3.HTML代码|文本|值
        3.1 html([val|fn])    
            获取内容  $("div").html()    取得第一个匹配元素的html内容
            设置内容      $("div").html("<p><span>htmlhtmlhtml</span></p>");        
            $("div").html(function(index,html){return html+index})
        3.2 text([val|fn])
            获取内容    $("p").text()
            设置内容    $("p").text("texttexttext")
                    $("p").text(function(index,text){return index+text})
        3.3 val([val|fn|arr])
            获取值    $("input").val();
            设置值    $("input").val("2222222");
                    $("input").val(function(index,value){return index + value})
            用于 check/select 的值    //数组操作
                $("input").val(["check2", "radio1"]);
    CSS
    1.css
        1.1 css(name|pro|[,val|fn])
            获取样式属性值        $("p").css("color")
            设置样式属性值        $("p").css("color","red")
                            $("p").css({color:"red","100px"})
                            $("p").css({
                                            function(index,value){return parseFloat(value) * 1.2;},
                                            height:function(index,value){return parseFloat(value) * 1.2;}
                                        })
        1.2 jQuery.cssHooks
    2.位置
        2.1 offset([coordinates]) 获取匹配元素在当前视口的相对偏移
            获取偏移值    $("p").offset()
            设置偏移值    $("p").offset({top:100,left:100})
                        $("p").offset(function(i,c){    //c代表选择器的当前坐标
                            newPos=new Object();
                            newPos.left=c.left+100;
                            newPos.top=c.top+100;
                            return newsPos;
                        })
        2.2 position() 获取匹配元素相对父元素的偏移。
            $("p").position()
        2.3 scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移。
            获取        $("p").scrollTop()
            设置        $("p").scrollTop(500)
        2.4 scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移。
            获取        $("p").scrollLeft()
            设置        $("p").scrollLeft(500)
    3.尺寸
        3.1 height([val|fn])
            获取        $("p").height()
            设置        $("p").height(500)
                    $("p").height(function(i,c){return c+200;})
        3.2 width([val|fn])
            获取        $("p").width()
            设置        $("p").width(500)
                    $("p").width(function(i,c){return c+200;})    
        3.3 innerHeight() 获取第一个匹配元素内部区域高度(包括补白(padding)、不包括边框)。    
            $("p").innerHeight();
        3.4 innerWidth() 获取第一个匹配元素内部区域宽度(包括补白(padding)、不包括边框)。    
            $("p").innerWidth();
        3.5 outerHeight([options]) 获取第一个匹配元素外部高度(默认包括补白和边框)。
            如果 options 值为true 则计算边距(margin)在内,默认值为false
        3.6 outerWidth([options]) 获取第一个匹配元素外部宽度(默认包括补白和边框)。
            如果 options 值为true 则计算边距(margin)在内,默认值

  • 相关阅读:
    性能测试工具---loadrunner
    数据库Mysql监控及优化
    数据库基础----Mysql
    常见的性能问题及定位方法
    中间件
    JVM学习篇章(二)
    PhpStorm 配置本地断点调试
    TCP连接 三次握手 四次挥手
    https 的理解
    使用GatewayWorker 开发个即时聊天demo
  • 原文地址:https://www.cnblogs.com/ricesm/p/5019721.html
Copyright © 2011-2022 走看看