澳门网络娱乐游戏平台-澳门电子游戏娱乐网址-官方直营

jquery操作CSS样式全记录,jquerycss全记录

本篇为完成篇。首要描述怎样造出轮子的高档本性。

jquery操作CSS样式全记录,jquerycss全记录

$(this).click(function(){
  if($(this).hasClass(“zxx_fri_on”)){
    $(this).
removeClass(“zxx_fri_on”);
  }else{
    $(this).
addClass(“zxx_fri_on”);
  }
  return false;
});

 

jquery操作CSS样式全记录,jquerycss全记录。增加或删除成分会集的class name

  1. 使用addClass()方法

 addClass(namesState of Qatar 增添names钦定的四个或多个class name给wrapped set。假若有多少个name,使用空格分开,不问可以预知names是个字符串。

归来原来的wrapped set以开展JQuery链式操作。 

注意:假如在抬高的体制表明中有再一次申明,什么人的预先级更加高啊? 请参阅这里看CSS的权重分配。 

 

  1. 使用removeClass()方法

removeClass(namesState of Qatar 去除names钦赐的一个或多少个class name。假使有七个names,使用空格分开。

回去原本的wrapped set以开展JQuery链式操作。

  1. 使用toggleClass()方法

toggleClass(nameState of Qatar 此番只好有叁个class name作为参数。要是该class已经存在,则去除之;若无则加多之。

归来原本的wrapped set以开展JQuery链式操作。

获取或设置CSS样式

1. 使用css(name, value)方法

以此格局用来设置css样式给wrapped set中的每二个要素。

name正是css样式的习性名称;

value能够是(string|number|function卡塔尔(قطر‎ ,近似于上节涉及的attr(name, value卡塔尔方法,value要是是function,则传给function的参数时成分在wrappsed set中的序号,function内部使用this指向正在被操作的Javascript DOM成分(够强)。function的重返值就是要设置的 css属性的值了。

比如:

$('div').css('font-size', function(n){
        return (n+1)+'em';

    });

将页面中div依据现身的风度翩翩少年老成依次加大字体大小。 

2. 使用css(properties)方法

参数properties是叁个object,在那之中定义了class属性名称和值对。这样一次就足以实行三个css属性的安装了。

回来的依然是wrapped set以便于JQuery链式操作。

如:

$('div:eq(0)').css({

    'font-size' : '2em',

    'color' : '#cc00ff'

}); 

正如烦躁的是,那些Object的性质名必得用引号引起来作为叁个字符串,不然是不能够被浏览器度和胆识别的,attr(卡塔尔国相似的主意就无需那样。

没有差距于Object中也能够包涵function,如:

    $('div').css({
        'font-size': function(n)
            {
                return (n+2) + 'em';
            }

澳门平台登陆网址,        });

3. 使用css(name)方法

这么些方法再次回到由name内定的css 属性的值,再次回到的值是三个字符串,由此有些处境必要改变一下。那一个措施只可以回去wrapped set中率先个成分的钦点css属性值。

如:$('#firstDiv'卡塔尔(قطر‎.css('font-size'卡塔尔或者回到三个字符串 '16PX'。

顺便说一下,假诺想得到钦赐成分的class名称(若是钦赐的话),使用Javascript标准措施,如:

$('#firstDiv')[0].className

4.使用width()和height()方法

1)不带参数的width(卡塔尔(قطر‎和height(卡塔尔方法重返wrapped set中第一个因素的宽和高,这里直接再次来到三个number(单位为px),没有必要从字符串调换了。

2卡塔尔 带参数的witdh(value卡塔尔和height(value卡塔尔国 给wrapped set中各类成分钦命由value代表的宽高。再次回到wrapped set。

value的值能够是number恐怕是字符串。如若是number则单位是px。

如:$('div').width(600);    //600px

$('div') .width('400mm'); //400mm

hasClass(name)方法

看清wrapped set中是还是不是有别的二个成分满含了name钦定的class name, name也得以是一个用空格分开的五个class names组成的字符串。重临true | false; 

注意:class name和class property name的区别:

-- class name内定义style的css名称,多个style定义会蕴藏非常多class property.举个例子定义三个叫 ownStyle的体裁。

-- class property name指css标准中的css属性名。比如 font-size,color等等。

借使想赢得一个成分的兼具class names,使用attr('className'卡塔尔国方法照旧Javascript DOM属性className。注意在细分再次来到的字符串时,首先推断字符串是不是为空。如:

$.fn.getClassNames = function() {
    if (name = this.attr("className")) {
        return name.split(" ");
    }
    else {
        return [];
    }
};

 这段代码为JQuery加多了扩充函数getClassNames(卡塔尔用来获得成分的class name数组。

风华正茂. css情势的高端操作

先看本文第风度翩翩有的所讲的dQuery css方法

//css方法
dQuery.prototype.css=function(attr,value){
    if(arguments.length==2){//当参数个数为2时,使用设置css的方法
        var i=0;
        for(i=0;i<this.elements.length;i++){
            this.elements[i].style[attr]=value;
        }
    }else{//只有一个参数时获取样式
        return getStyle(this.elements[0],attr);
    }
};

在这一个法子里,只好叁遍生龙活虎行,且只能设置壹本性能。功用还超矮。未来尝试通过设置相似$d('#div1').css({width:'200px',height:'200px',background:'red'})诸有此类的措施,向css方法传入三个json对象。允许二回性设置四个css样式。恐怕允许链式操作。

上面包车型大巴jQuery代码应怎排除css样式?懂行的进!

正规写法是把这几个css样式在CSS里设置成贰个class。然后用jquery addClass(卡塔尔(قطر‎removeClass(卡塔尔国.
雷同不认为奇的css样式纠正不要写在js代码里。有助于CSS代码的汇聚和复用。试想一下若是你在js里设置了许多这种css样式代码,某天你乍然以为颜色要改一下,那么既难找,全体制校正动工作量又大。
<script type="text/javascript" src="ajax.googleapis.com/...min.js"></script>
<style>
.p_style{
color:white;
background-color:#98bf21;
font-family:Arial;
font-size:20px;
padding:5px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#btn01").click(function(){
$("p").addClass("p_style")
});
$("#btn02").click(function(){
//$("p").unbind(".css");
$("p").removeClass("p_style");
});
});
</script>
</head>

<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button id="btn01" type="button">改造段落的体制</button>
<button id="btn02" type="button">恢复段落的体制</button>
</body>
</html>  

1. 传入json数据

盛传json实质上是一个参数。所以唯有一个参数时,不仅是获得,还大概是流传了json数据。供给对传播八个参数时,实行归类研讨


jquery怎对目的组织设立置css样式

$("input[type=submit]").css({height:"30px",width:"40px"});
jquery中文手册里讲的很清楚。
有关你说的找不到type,那么您可以为input设置id恐怕class,那样就足以在css里面安装它的属性。  

$(this).click(function(){ if($(this).hasClass(zxx_fri_on)){ $(this). removeClass (zxx_fri_on); }else{ $(this). addClass (zxx_fri...

json与for-in循环
var json={width:'200px',height:'200px',background:'red'};
var i=0;

for(i in json){
    alert(i+':'+json[i]);
}

这段程序能够依次弹出i(json属性):json数据的窗口。


同理,在dQuery的css方法中也能够那样做。

//css方法
dQuery.prototype.css=function(attr,value){
    if(arguments.length==2){//当参数个数为2时,使用设置css的方法
        var i=0;
        for(i=0;i<this.elements.length;i++){
            this.elements[i].style[attr]=value;
        }
    }else if(arguments.length==1){//只有一个参数时获取样式,或传入json
        if(typeof attr=='string'){//attr为纯文字时,设置样式
            return getStyle(this.elements[0],attr);
        }else{//传入json,批量设置css样式
            for(i=0;i<this.elements.length;i++){
                var j='';

                for(j in attr){
                    this.elements[i].style[j]=attr[j];
                }
            }
        }
    }
};

测量检验成功。

#### (2)链式操作

函数链式操作原理:再次回到函数自身。
function show(str){
    alert(str);
    return show;//关键
}
show('abc')('bcd');

这段代码将弹出三个框,abc,和bcd。只要您想,能够Infiniti地写下去。


链式操作是jquery的十分重要特征。实践完一个办法之后,又回到到该目的。所以只必要在css函数的结尾,补上return this。就达成了。依照那些思虑,能够给各类方法加上return this,那么您的js库就足以完结完全的链式操作。

二. attr设置越发——removeClass和addClass的贯彻

前边聊起attr方法本质上和css方法相像的。所以attr也得以用临近的措施设置——

//attr方法和css方法类似。
dQuery.prototype.attr=function(attr,value){
    if(arguments.length==2){//设置属性
        var i=0;

        for(i=0;i<this.elements.length;i++){
            this.elements[i][attr]=value;
        }
    }else if(arguments.length==1){//获取属性
        if(typeof attr=='string'){
            return this.elements[0][attr];
        }else{
            for(i=0;i<this.elements.length;i++){
                var j='';

                for(j in attr){
                    this.elements[i][j]=attr[j];
                }
            }
        }
    }
    return this;
}

这段attr方法已经能够贯彻链式操作和摄取json数据。现在亟待接纳attr方法完成增加class和移除class的效果。
jquery中,addClassremoveClass的基本效能是:给addClass方法传入二个字符串,指标成分的class尾巴部分追加这段字符串,给removeClass传入字符串,就把该字符串从指标成分的字符串中去除掉。
用文字描述之后,完结就总结不菲了。

//addClass和removeClass的实现
dQuery.prototype.addClass=function(str){
    var i=0;

    for(i=0;i<this.elements.length;i++){
        if(this.elements[i].className==''){
            this.elements[i].className+=str;
        }else{
            this.elements[i].className+=' '+str;
        }
    }
    return this;
}

dQuery.prototype.removeClass=function(str){
    var i=0;

    for(i=0;i<this.elements.length;i++){ 
        var _className=this.elements[i].className
        if(!str){//如果不传参,所有class都被清空。
            this.elements[i].className='';
        }else if(_className!=''){
            var arr=_className.split(' ');
            var j=0;

            for(j=0;j<arr.length;j++){
                if(arr[j]==str){
                    arr.splice(j,1);//从数组第j个起删除1个(移除arr[j])
                    this.elements[i].className=arr.join(' ');//把数组重新转化为字符串,并用空格分开。最后赋值给当下对象的className。
                }
            }
        }
    }
    return this;
}

在乎,此段代码有局限性,前提是操作者html操作正确时技术见到效果,雷同$d('.div1').addClass('div1').removeClass('div1')纵然也能品尝精晓操作者意思并容错。可是<div class="div1 div1 div2">这么错误的class标记使用removeClass会产生错误。

3.阻挠冒泡及暗中同意事件

右键菜单(contextmenu)为例——jquery阻止私下认可事件,冒泡的建制是

$(function(){
    $(document).bind('contextmenu',function(){//对document绑定contextmenu事件,并执行函数。
        return false;
    })
})

return false在原生js中只管理阻止默许事件,但jquery能够两样都阻挡。
先是,dQuery未有bind方法。加上去就能够。所谓绑定事件的框架超级轻便,实际上和dQuery此外事件的框架是大同小异的。

//绑定事件的方法:
dQuery.prototype.bind=function(sEv,fn){
    var i=0;

    for(i=0;i<this.elements.length;i++){
        myAddEvent(this.elements[i],sEv,fn);
    }
}

万后生可畏你在页面上右键点击,就能够触发函数。但是还不完善。

$d(function (){
    $d(document).bind('contextmenu', function (){
        return false;
    });
});

那边增添了return false,但右击,不能阻止任何事件。
究其深层原因,可以窥见,回调函数是透过myAdd伊夫nt(卡塔尔(قطر‎那些函数落成的。
这就滑稽了。在myAddEvent(State of Qatar中,无论return什么都还未有意思。所以要促成,完整的myAdd伊夫nt(卡塔尔代码是:

//可重复调用的加载函数
function myAddEvent(obj,sEv,fn){
    if(obj.attachEvent){
        obj.attachEvent('on'+sEv,function(){
            if(false==fn.call(obj)){//当调用return false的时候
                event.cancelBubble=true;//阻止冒泡
                return false;
            } 
        });
    }else{
        obj.addEventListener(sEv,function(ev){
            if(false==fn.call(obj)){
                ev.cancelBubble=true;//阻止冒泡
                ev.preventDefault();//火狐、chrome下用于阻止默认事件的语句
            } 
        },false);
    }
}

这样,在三大浏览器下,已经落到实处了平地风波的绑定调用return false无暗许事件。况兼阻止冒泡。

本文由澳门网络娱乐游戏平台发布于Web前端,转载请注明出处:jquery操作CSS样式全记录,jquerycss全记录

相关阅读