xml地图|网站地图|网站标签 [设为首页] [加入收藏]

正规赌博十大app排名

当前位置:网上十大正规赌博平台 > 正规赌博十大app排名 > Bootstrap精简教程,详解JavaScript的表达式与运算符

Bootstrap精简教程,详解JavaScript的表达式与运算符

来源:http://www.nb-machinery.com 作者:网上十大正规赌博平台 时间:2019-07-14 21:39

先给大家展示下效果图,看看是不是亲想要实现的效果,如果还满意的话请查看本文详情,同时大家也可以下载源码哦。

       JavaScript脚本语言描述了一组用于操作数据值的运算符,包括一元运算符,布尔运算符,算术运算符,关系运算符,三元运算符,位运算符和赋值运算符。
       表达式是JavaScript语言的一个“短语”,包含变量名(或字面量)和运算符。最简单的表达式时字面量或变量名。当然也有合并简单的表达式来创建复杂的表达式。
一、一元运算符
(1)递增 和递减--

Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web开发更加快捷。[1]它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。[2] 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。

效果图:

var box1=100; 
  box1;//相当于box=box 1 
document.write("box1=" box1 "<br/>");//输出box1=101 
var box2=100; 
--box2;//相当于box=box2-1 
document.write("box2=" box2);//输出box2=99 

特点:

图片 1

前置和后置的区别

Bootstrap是基于HTML5和CSS3开发的,它在jQuery的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。

效果展示    源码下载.rar)

var box=100; 
var age=  box;//box先累加1为101,再赋值给age为101 
var height=box  ;//box先赋值给height为101,box再累加为102 
document.write("age=" age "<br/>");//输出age=101 
document.write("height=" height "<br/>");//输出height=101 
document.write("box=" box);//输出box=102,原因是box经过了两次累加,所以是102 

bootstrap 的学习非常简单,并且它所提供的样式又非常精美。只要稍微简单的学习就可以制作出漂亮的页面。

代码说明:

       在没有赋值操作,前置和后置是一样的。但在赋值操作时,如果递增或递减运算符前置,那么前置的运算符会先累加或累减再赋值,如果是后置运算符则先赋值再累加或累减。
(2)加和减运算符 用于取正或取负运算,也有把数字字符串转换为数值形式的功能。

bootstrap中文网:http://v3.bootcss.com/ 

仿百度百科右侧导航代码jquery插件,这个仿百科右侧导航js代码,在很久以前就像搞个用了,因为这个导航特别适合长篇文档使用,花了半天时间写了这个仿百科导航插件,不过和百度百科比起来还是有点弱,没有实现右侧导航区域滚动的功能,如果您的文档不是超级变态长,应该够用。

var box = "20"; 
document.write(typeof box "<br/>"); //输出string 
var age=-box; 
document.write(age "<br/>");//输出-20 
document.write(typeof age); //输出number 

bootstrap提供了三种类型的下载:

如果你的导航超级长,可能要用到侧边导航页可以滚动,一般情况下还是用不到,等过些时候有好的实现思路再搞吧,暂时没想到实现右侧导航区域和左侧内容的滚动并且联动的好办法。

二、算术运算符
       JavaScript语言中规定了五种算术运算符,即 ,-,*,/和%(取余)。如果在算术运算符的值不是数值,那么它会先使用Number()转型函数将其转换为数值(隐式转换)。


注意:var directoryNav = new DirectoryNav($("h2,h3"),{}); 中的"h2,h3"就是生成两级导航的内容节点

var box=100 "100"; 
document.write("box=" box "<br/>");//输出100100 
document.write(typeof box);//输出string 

用于生产环境的 Bootstrap

/*
 *仿百度百科右侧导航代码 - 页面目录结构导航 v0.01
 * 只写了两级,无限级别也可以,是逻辑上的级别,html结构全是同一级别
 * 滑标动画用的css3过渡动画,不支持的浏览器就没动画效果了
 * 和百度百科比起来还是比较弱,没有实现右边也可以滚动的功能
 */
 function DirectoryNav($h,config){
  this.opts = $.extend(true,{
   scrollThreshold:0.5, //滚动检测阀值 0.5在浏览器窗口中间部位
   scrollSpeed:700,  //滚动到指定位置的动画时间
   scrollTopBorder:500, //滚动条距离顶部多少的时候显示导航
   easing: 'swing',  //不解释
   delayDetection:200,  //延时检测,避免滚动的时候检测过于频繁
   scrollChange:function(){}
  },config);
  this.$win = $(window);
  this.$h = $h;
  this.$pageNavList = "";
  this.$pageNavListLis ="";
  this.$curTag = "";
  this.$pageNavListLiH = "";
  this.offArr = [];
  this.curIndex = 0;
  this.scrollIng = false;
  this.init();
 }
 DirectoryNav.prototype = {
  init:function(){
   this.make();
   this.setArr();
   this.bindEvent();
  },
  make:function(){
   //生成导航目录结构,这是根据需求自己生成的。如果你直接在页面中输出一个结构那也挺好不用 搞js
   $("body").append('<div class="directory-nav" id="directoryNav"><ul></ul></div>>');
   var $hs = this.$h,
    $directoryNav = $("#directoryNav"),
    temp = [],
    index1 = 0,
    index2 = 0;
   $hs.each(function(index){
    var $this = $(this),
      text = $this.text();
    if(this.tagName.toLowerCase()=='h2'){
     index1  ;
     if(index1%2==0) index2 = 0;
     temp.push('<li class="l1">' index1 '. <a class="l1-text">' text '</a></li>');
    }else{
     index2  ;
     temp.push('<li class="l2">' index1 '.' index2 ' <a class="l2-text">' text '</a></li>');
    }
   });
   $directoryNav.find("ul").html(temp.join(""));
   //设置变量
   this.$pageNavList = $directoryNav;
   this.$pageNavListLis = this.$pageNavList.find("li");
   this.$curTag = this.$pageNavList.find(".cur-tag");
   this.$pageNavListLiH = this.$pageNavListLis.eq(0).height();
   if(!this.opts.scrollTopBorder){
    this.$pageNavList.show();
   }
  },
  setArr:function(){
   var This = this;
   this.$h.each(function(){
    var $this = $(this),
     offT = Math.round($this.offset().top);
    This.offArr.push(offT);
   });
  },
  posTag:function(top){
   this.$curTag.css({top:top 'px'});
  },
  ifPos:function(st){
   var offArr = this.offArr;
   //console.log(st);
   var windowHeight = Math.round(this.$win.height() * this.opts.scrollThreshold);
   for(var i=0;i<offArr.length;i  ){
    if((offArr[i] - windowHeight) < st) {
     var $curLi = this.$pageNavListLis.eq(i),
      tagTop = $curLi.position().top;
     $curLi.addClass("cur").siblings("li").removeClass("cur");
     this.curIndex = i;
     this.posTag(tagTop this.$pageNavListLiH*0.5);
     //this.curIndex = this.$pageNavListLis.filter(".cur").index();
     this.opts.scrollChange.call(this);
    }
   }
  },
  bindEvent:function(){
   var This = this,
    show = false,
    timer = 0;
   this.$win.on("scroll",function(){
    var $this = $(this);
    clearTimeout(timer);
    timer = setTimeout(function(){
     This.scrollIng = true;
     if($this.scrollTop()>This.opts.scrollTopBorder){
      if(!This.$pageNavListLiH) This.$pageNavListLiH = This.$pageNavListLis.eq(0).height();
      if(!show){
       This.$pageNavList.fadeIn();
       show = true;
      }
      This.ifPos( $(this).scrollTop() );
     }else{
      if(show){
       This.$pageNavList.fadeOut();
       show = false;
      }
     }
    },This.opts.delayDetection);
   });
   this.$pageNavList.on("click","li",function(){
    var $this = $(this),
     index = $this.index();
    This.scrollTo(This.offArr[index]);
   })
  },
  scrollTo: function(offset,callback) {
   var This = this;
   $('html,body').animate({
    scrollTop: offset
   }, this.opts.scrollSpeed, this.opts.easing, function(){
    This.scrollIng = false;
    //修正弹两次回调 蛋疼
    callback && this.tagName.toLowerCase()=='body' && callback();
   });
  }
 };
 //调用实例化
 var directoryNav = new DirectoryNav($("h2,h3"),{
  scrollTopBorder:0 //滚动条距离顶部多少的时候显示导航,如果为0,则一直显示
 });

       这是为什么呢?JavaScript语言中的做算术运算时,只要其中一个是字符串,那么结果就会转换为字符串。相当于字符串连接符,不能再算作是加法算术运算符。

  编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。

在写百度百科右侧导航js代码的时候有个想法,就是让右侧导航区域的滚动条和左侧内容的滚动条用一个计算公式让他们关联起来,实现同步滚动。

var box="100"-10; 
document.write("box=" box "<br/>");//输出90 
var age=5/4; 
document.write("age=" age "<br/>");//输出1.25 
var height=("你的年龄是:" (10 10));//括号强制优先级 
document.write(height);//输出你的年龄是:20 

Bootstrap 源码

您可能感兴趣的文章:

  • jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
  • JQuery右键菜单插件ContextMenu使用指南
  • jQuery 实现侧边浮动导航菜单效果
  • jQuery插件PageSlide实现左右侧栏导航菜单
  • jquery实现浮动的侧栏实例
  • jquery实现鼠标滑过显示二级下拉菜单效果
  • jquery实现左右滑动菜单效果代码
  • jquery实现右侧栏菜单选择操作

       取余

  Less、JavaScript 和 字体文件的源码,并且带有文档。需要 Less 编译器和一些设置工作。

var box=10%3; 
document.write("box=" box);//输出1 

Sass

三、关系运算符        用于进行比较的运算符称作为关系运算符:<(小于),>(大于),<=(小于等于),>=(大于等于),==(相对),!=(不等),===(恒等或全等),!==(不全等或不恒等)。关系运算符大多数返回的是一个布尔值。
       和其他运算符一样,当关系运算符操作非数值时要遵循以下规则:
       1两个操作符都是数值,则数值比较
       2两个操作数都是字符串,则比较两个字符串对应的字符编码值
       3两个操作数有一个是数值,则将另一个转换为数值,在进行数值比较
       4两个操作数有一个是对象,则先调用value()方法或toString()方法,再用结果比较。

  这是 Bootstrap 从 Less 到 Sass 的源码移植项目,用于快速地在 Rails、Compass 或 只针对 Sass 的项目中引入。

var box1=3>2; 
document.write(box1 "<br/>");//输出true 
var box2="3">22; 
document.write(box2 "<br/>");//输出false 
var box3="3">"22"; 
document.write(box3 "<br/>");//输出true 
var box4="a">"B";//a为97,B为66 
document.write(box4 "<br/>");//输出true 
var box5= "Blue"<"alpha";//Blue的第一个字母是B,alpha的第一个字母是a,a为97,B为66 
document.write(box5) //输出true 

       在相等和不等的比较上,如果操作数是非数值,则遵循以下规则:
       1一个操作数是布尔值,则比较之前将其转换为数值,false转成0,true转成1。
       2一个操作数是字符串,则比较之前将其转成为数值再比较。
       3一个操作数是对象,则先调用value()方法或toString()方法再比较。
       4不需要任何转换的情况下,null和undefined是相等的
       5一个操作数是NaN,则==返回false,!=返回true,并且NaN和自身不等
       6两个操作数都是对象,则比较它们是否是同一个对象,如果都指向同一个对象,则返回true,否则返回false
       7在全等和全不等的判断上,比如值和类型都相等,才返回true,否则返回fasle。

其实我们不用下载bootstrap也可以使用它:

var box1='2'==2; 
document.write(box1 "<br/>");//输出true,比较的只是数值 
var box2={}=={}; 
document.write(box2 "<br/>");//输出false,因为比较的是它们的地址,每个新创建对象的引用地址都不同。 
var box3=null==undefined; 
document.write(box3 "<br/>");//输出true,因为均为空数值 
var box4='2'===2; 
document.write(box4 "<br/>");//输出false,两个操作数的数据类型不相等 
var box5=null===undefined; 
document.write(box5);//输出false,两个操作数的数据类型不相等 

Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务,访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。

四逻辑运算符
       JavaScript语言中的逻辑运算符通常作用于布尔值的操作,一般和关系运算符配合使用,有三个逻辑运算符:&&(逻辑与),||(逻辑或)和!(逻辑非)。
       (1)&&表示两边都必须是true,才返回true。        如果两边的操作数有一个操作数不是布尔值的情况下,与运算就不一定返回布尔值,此时遵循下面的规则:
       1第一个操作数是对象,则返回第二个操作数
       2第二操作数是对象,则第一个操作数返回true,才返回第二个操作数,否则返回false
       3一个操作数是null,则返回null
       4一个操作数是undefined,则返回undefined
       5如果一个运算数是对象,另一个是 Boolean 值,返回该对象
      逻辑与运算符属于短路操作,如果有第一个操作数返回的是false,第二个不管是true还是false都返回false。

base.html

var box1={}&&(5>4); 
document.write(box1 "<br/>");//输出true 
var box2=(5>4)&&{}; 
document.write(box2 "<br/>");//输出[object Object] 
var box3=(3>4)&&{}; 
document.write(box3);//输出false 
<!DOCTYPE html>
<html lang="zh-CN">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
  <title>Bootstrap 101 Template</title>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
 </head>
 <body>
  <h1>你好,bootstrap!</h1>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="http://www.nb-machinery.com/uploads/allimg/190714/2139361060-1.jpg"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="http://www.nb-machinery.com/uploads/allimg/190714/21393CW5-2.jpg"></script>
 </body>
</html>

本文由网上十大正规赌博平台发布于正规赌博十大app排名,转载请注明出处:Bootstrap精简教程,详解JavaScript的表达式与运算符

关键词: ag电子游艺