三目运算符能使我们的代码更为简洁，因而包括小编的我也很是青睐它，不过有时候我们给予它更多的希望，小编处于学习阶段，先从笔记开始：

 (3>1)?console.log(1):console.log(2);//

 //expression？expression1:expression2

3>1为true吗?为true的是就执行expression1，否则就执行expression2；

三目嵌套：

 (5>4)?alert(1):((2>1)?alert(2):((4>5)?alert(0):alert(9)));

三目嵌套。表达式1，5>4吗?大于就alert(1)，否则就执行表达式2 ，2>1吗?大于就alert(2)，否则就执行表达式3,4>5吗?大于就alert(0)，否则就alert（9）；

来个三目小demo：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>三目运算符的运用</title>

     <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>

 </head>

 <style>

 .red{

     background-color: red;

 }

 .green{

     background-color: green;

 }

 .red:hover{

     background-color: orange;

 }

 .green:hover{

     background-color: cyan;

 }

 </style>

 <body>

     <button class="close">关闭</button>

     <button class="open">开启</button>

 </body>

 <script>

 $('button').click(function(){

     ($(this).html()=='关闭')?$(this).html('开启').addClass('green').removeClass('red'):$(this).html('关闭').addClass('red').removeClass('green');

 })

 </script>

 </html>

有时候我们有这样的需求，点击一个按钮，给按钮加一个类，同时删除一个类，同时还要在这个元素上变化很多，为了逻辑清晰，最好还是用if（）else（）

三目强化：多个值的改变 json方式 必须先声明 否则会报undfined

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>三目运算符的运用</title>

     <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>

 </head>

 <style>

 .red{

     background-color: red;

 }

 .green{

     background-color: green;

 }

 </style>

 <body>

     <button class="close">关闭</button>

     <span id="box">这是一段小飞写的文字...</span>

 </body>

 <script>

 $('button').click(function(){

     var obj={status:'',color:'',size:''};

     ($(this).html()=='关闭')?obj={font:'开启',color:'green',size:'20px'}:obj={font:'关闭',color:'red',size:'12px'};

     $('#box').css({

         color:obj.color,

         fontSize:obj.size

     });

     $(this).html(obj.font);

 })

 </script>

 </html>

说下这个需求，点击按钮切换span标签里的内容的字体大小和字体颜色，同时切换按钮里的内容。

三目双重判断：个人喜好这么叫





 $(window).scroll(function(event){

     $('#box')[$(window).scrollTop()>300?"fadeIn":"fadeOut"]($(window).scrollTop()>300?300:500);

     console.log($(window).scrollTop());

 });






 


												


											
关于javascript三目的更多相关文章
	

    
								
  1. ng-class结合三目运算
		
    ng-class文档:https://docs.angularjs.org/api/ng/directive/ngClass 但是在实际项目中可能会用到三目运算,实例如下: <ul> &l ...
    
		
    2. 
						
  2. angularjs的三目运算
		
    前言:前几天写代码的时候遇到一个问题,有一个按钮,有"已关注"和"+关注"两种状态,需要对这两种状态的按钮的背景颜色进行区分,单后点击"已关注&quo ...
    
		
    3. 
						
  3. 【Python全栈笔记】03 [模块二]  16-17 Oct Set 集合，三目运算
		
    Set 集合 set - unordered collections of unique elements 创建一个set/一个空set # create a new set set1 = {1,2, ...
    
		
    4. 
						
  4. python函数，lambda表达式，三目运算，列表解析，递归
		
    一.自定义函数 定义函数时,函数体不执行:只有在调用函数时,函数体才执行.函数的结构: 1. def 2. 函数名 3. 函数体 def func_name(): 函数体 4. 返回值 如果没有声明返 ...
    
		
    5. 
						
  5. JavaScript 三种绑定事件方式之间的区别
		
    JavaScript三种绑定事件的方式: 1. <div id="btn" onclick="clickone()"></div> // ...
    
		
    6. 
						
  6. 从头开始学JavaScript (三)——数据类型
		
    原文:从头开始学JavaScript (三)--数据类型 一.分类 基本数据类型:undefined.null.string.Boolean.number 复杂数据类型:object object的属 ...
    
		
    7. 
						
  7. 三目运算的使用&bytes类型转str类型
		
    一.三目运算的使用 就像c语言中有三目运算符一样,python中也有三目运算符,废话不多说直接上代码 a=3 c=4 b=a if a>c else c print(b) 意思就和 if a&g ...
    
		
    8. 
						
  8. 三目运算：and/or 技巧
		
    三目运算:and/or 技巧 and, or 联合起来有个小技巧: print 2 < 3 and True or False 说明:     如果  2 小于 3 了,则输出 True ,   ...
    
		
    9. 
						
  9. js switch判断 三目运算 while 及 属性操作
		
    三 目运算:如var a = 10: var b= 12: c = a>b ?a:b; 若成立执行a否则执行b var isHide = true; 若用if判断语句如下 if(isHide)  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. DevExpress皮肤样式
			
    [时间] 2016-02-15 11:41:11 天气晴 没有雾霾难得的好天气!!! [工具] (1)Visual Studio 2015 (2)DevExpress15.2.3 [感言] 一直以来都 ...
    
			
    2. 
						
  2. PowerDesigner ---- 数据库设计（物理模型CDM和概念模型PDM）
			
    前言 上一篇介绍了个PowerDesigner工具的安装和汉化,现在我就说一下怎么用这个PowerDesigner建数据库吧.   内容 第一种方法:概念模型转物理模型 1.首先新建模型--选择概念模 ...
    
			
    3. 
						
  3. mysql全备和增量备份以及恢复过程（percona工具）
			
    实验环境 系统环境,内核版本和xtrabackup工具版本 [root@linux-node1 mysql]# cat /etc/redhat-release CentOS Linux release ...
    
			
    4. 
						
  4. 单节点 Elasticsearch 出现 unassigned shards 原因及解决办法
			
    根本原因: 是因为集群存在没有启用的副本分片,我们先来看一下官网给出的副本分片的介绍: 副本分片的主要目的就是为了故障转移,正如在 集群内的原理 中讨论的:如果持有主分片的节点挂掉了,一个副本分片就会 ...
    
			
    5. 
						
  5. yum和编译两种方式升级or降级Centos内核
			
    http://blog.51cto.com/renzhiyuan/1882599 今天探讨用yum和编译两种方式升级或者降级内核版本: 升级:比如玩kvm,docker等虚拟化,centos内核则升级 ...
    
			
    6. 
						
  6. 简单的user-based协同过滤算法示例代码
			
    #构造一份打分数据集1 users = {"小明": {"中国合伙人": 5.0, "太平轮": 3.0, "荒野猎人" ...
    
			
    7. 
						
  7. Linux下vim基本操作和清空文件内容的常用方法
			
    以前都是用的很土的办法,大概有以下几种.1.直接删除,创建一个新的同名文件(这种方法的弊端是有可能这个文件带着权限或者是属性,那么你新建这个文件后有可能会导致权限不正确或者丢失属性).2.使用vim编 ...
    
			
    8. 
						
  8. Hanlp自然语言处理工具的使用演练
			
    Hanlp是由一系列模型与算法组成的工具包,目标是普及自然语言处理在生产环境中的应用.Hanlp具备功能完善.性能高效.架构清洗.语料时新.可自定义的特点:提供词法分析(中文分词.磁性标注.命名实体识 ...
    
			
    9. 
						
  9. sparkSQL以JDBC为数据源
			
    一.环境准备 安装oracle后,创建测试表.数据: create table test ( username varchar2(32) primary key , password varchar2 ...
    
			
    10. 
						
  10. Spring Cloud Eureka 服务发现与消费
			
    服务发现与消费,其服务发现的任务是由Eureka的客户端完成,而服务的消费任务由Ribbon.JerseyClient等完成,Ribbon是一个基于HTTP和TCP的客户端负载均衡器:使用Jersey ...
    
			
    11.