前端及开发文章及欣赏

JQuery阻止事件冒泡

前端达人

冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。

我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点击里面的div我们希望处理这个div的事件,但是呢,我们不希望外层的div的事件也执行,这时候我们就要用到阻止冒泡。

通俗点来说吧,你在家里看电视,躲在自己的小房间,但是你不希望声音传到隔壁父母的耳朵里,这时候,你可能躲在被窝里,或者墙壁的隔音效果很好,阻隔声音可以理解为阻止冒泡。

复制代码
<style> #content{ width: 140px; border: 1px solid blue; } #msg{ width: 100px; height: 100px; margin: 20px; border: 1px solid red; } </style> 

<body>
<div id="content">
外层div
<div id="msg">
内层div
</div>
</div>


    

</body>

 
复制代码

显示结果

对应的jQuery代码如下:

复制代码
 <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 为内层div绑定click事件  $("#msg").click(function(){
            alert("我是小div");
        }); // 为外层div元素绑定click事件  $("#content").click(function(){
            alert("我是大div");
        }); // 为body元素绑定click事件  $("body").click(function(){
            alert("我是body");
        });
    }); </script>
复制代码

当点击小div时,会触发大div与body 的点击事件。点击大div时会触发body的点击事件。

如何防止这种冒泡事件发生呢?

修改如下:

复制代码
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 为内层div绑定click事件  $("#msg").click(function(event){
            alert("我是小div");
            event.stopPropagation(); // 阻止事件冒泡  }); // 为外层div元素绑定click事件  $("#content").click(function(event){
            alert("我是大div");
            event.stopPropagation(); // 阻止事件冒泡  }); // 为body元素绑定click事件  $("body").click(function(event){
            alert("我是body");
            event.stopPropagation(); // 阻止事件冒泡  });
    }); 
复制代码

event.stopPropagation(); // 阻止事件冒泡

 

有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话,就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。

html部分

复制代码
 <body> <form action="test.html"> 用户名:<input type="text" id="username" /> <br/> <input type="submit" value="提交" id="sub"/> </form> </body>
复制代码

复制代码
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){
            $("#sub").click(function(event){ //获取元素的值,val() 方法返回或设置被选元素的值。 var username = $("#username").val(); //判断值是否为空 if(username==""){ //提示信息 //alert("文本框的值不能为空");  $("#msg").html("<p>文本框的值不能为空.</p>"); //阻止默认行为 ( 表单提交 )  event.preventDefault();  
                }
            });
        }); </script>
复制代码
//阻止默认行为 ( 表单提交 ) event.preventDefault(); 

还有一种防止默认行为的方法就是return false。效果一样。

代码如下:

复制代码
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){
            $("#sub").click(function(event){ //获取元素的值,val() 方法返回或设置被选元素的值。 var username = $("#username").val(); //判断值是否为空 if(username==""){ //提示信息 //alert("文本框的值不能为空");  $("#msg").html("<p>文本框的值不能为空.</p>"); //阻止默认行为 ( 表单提交 ) //event.preventDefault();   return false; }
            });
        }); </script>
复制代码

 

同理,上面的冒泡事件也可以通过return false来处理。 
复制代码
 <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 为内层div绑定click事件  $("#msg").click(function(event){
            alert("我是小div"); //event.stopPropagation();    //  阻止事件冒泡 return false;
        }); // 为外层div元素绑定click事件  $("#content").click(function(event){
            alert("我是大div"); //event.stopPropagation();    //  阻止事件冒泡 return false;
        }); // 为body元素绑定click事件  $("body").click(function(event){
            alert("我是body"); //event.stopPropagation();    //  阻止事件冒泡 return false;
        });
    }); 

1

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:博客园

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

dataTable 表格头错位

前端达人

在开发中遇到这个问题,就是第一次加载的时候会错位,出现窄很多的现象,在网上找了一番后,发现http://blog.csdn.net/bugscode/article/details/53432069这篇博客中给出的原因是清晰的,但是解决方法我没怎么看明白,于是按照他所说的原因,即
这种情况是因为Datatables框架中使用到serverSide : true,// 服务器查询数据属性,它会使Table标签中多一个style=”width: xx px;”属性,这就导致了变化大小时标题对不齐现象。

然后在 datatable中加入了 serverSide 设置,

$('#charging_table').dataTable({
    serverSide : false,
    ......}) 
  • 1
  • 2
  • 3

既然是因为 serverSide 的原因,那我把它 设置为 false 结果问题还真解决了!


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

dataTable tab栏切换时错位解决办法 – 漆黑小T – 博客园

前端达人

做后台管理类网站肯定要写列表,首选dataTable,功能强大

最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了!

resize,m_fill,w_1600,h_290#

主要时因为当table被隐藏后,table的header宽度会计算错乱,解决方案就是在table切换的时候重新调整列的宽度,找到好多解决方案,不过最简单的是下面这种:

var table = $.fn.dataTable.fnTables(true);

if ( table.length > 0 ) {

$(table).dataTable().fnAdjustColumnSizing();

}

但是

使用时要注意姿势,一定要让DOM渲染结束后把这一坨给粘贴过去:

 
                                                                    
  1. $("#li_certificate").click(function () {
  2. $(this).parent().addClass("selected").siblings().removeClass("selected");
  3. $("#div_record").hide();
  4. $("#div_certificate").show();
  5. //这个位置写那个重新适应宽度的代码
  6. });
1

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

前端达人

input输入框在获得或失去焦点时隐藏或显示文字,这样的焦点效果想必很多朋友在填写form表格的时候都曾见识过吧,本文使用jquery实现以下,感兴趣的朋友可以参考下哈

大家可以看效果图的搜索输入框,默认显示着“用户名/Email”的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离开这个 input 输入框时,输入框内又再次显示“用户名/Email”的提示。是不是很常见?很多搜索、登录、表单都会用到这个效果,但是我看了N多个网站,有90%以上是这么实现的: 

<input type="text" value="搜索关键字" onfocus="if(this.value == '搜索关键字') this.value = ''" onblur="if(this.value =='') this.value = '搜索关键字'" /> 

我是非常反对把 javascript 写在 html 标签里的,这和 style 写在 html 标签里一样,虽然不违反 W3C 标准,但也不推荐这么写。因为: 
1.完全没有复用性可言,如果是个表单,输入框很多,每个都需要这样的效果,那就每个都这么处理吗? 
2.如果要修改其中的提示文字,费时费力又不好维护。 
3.我们倡导结构(html)、表现(css)、行为(javascript)三者分离,这才是一个好的页面。 
那要怎么写才能实现这个效果,而且既有复用性,又好维护,又不需要把 js 写进 html 里呢? 
具体方法如下: 
首先肯定是引入jQuery 
Html代码: 

<div><input type="text" value="提示测试" class="input_test" /></div> 
<div><input type="text" value="请输入搜索关键" class="input_test" /></div> 

jQuery代码: 

复制代码
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> $(function(){ 
$('.input_test').bind({ 
focus:function(){ if (this.value == this.defaultValue){ this.value=""; 
} 
}, 
blur:function(){ if (this.value == ""){ this.value = this.defaultValue; 
} 
} 
}); 
}) </script> 
复制代码

只要在实现的input输入框加上”input_test”这个class就可以轻松实现了 




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:博客园

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

jquery控制元素的隐藏和显示的几种方法

前端达人

使用jquery控制div的显示与隐藏,一句话就能搞定,例如:

 

方法一

显示:

$("#id").show()表示为display:block,

隐藏:

$("#id").hide()表示为display:none;

 

方法二

$("#id").toggle();

切换元素的可见状态。如果元素是可见的,切换为隐藏的;

如果元素是隐藏的,则切换为可见的。

 

方法三

显示:

$("#id").css('display','block');//显示

隐藏:

$("#id").css('display','none');//隐藏

或者

$("#id")[0].style.display='none';

display = none 控制对象的隐藏

display = block控制对象的显示

 

方法四:

元素显示:

$("#id").css('visibility','visible');//元素显示

元素隐藏:

$("#id").css('visibility','hidden');//元素隐藏

CSS visibility 属性规定元素是否可见。
visible 元素可见。 
hidden 元素不可见。 
collapse 在表格元素中使用时,此值可删除一行或一列,但它不影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。 
inherit 从父元素继承 visibility 属性的值。

注意:

display:none和visible:hidden都能把网页上某个元素隐藏起来,在视觉效果上没有区别,但是在一些DOM操作中两者有区别:

display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。

visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,即它仍然具有高度、宽度等属性,通俗来说就是看不见但摸得到。


  1. //第1种方法 ,给元素设置style属性
  2. $("#hidediv").css("display", "block");
  3. //第2种方法 ,给元素换class,来实现隐藏div,前提是换的class样式定义好了隐藏属性
  4. $("#hidediv").attr("class", "blockclass");
  5. //第3种方法,通过jquery的css方法,设置div隐藏
  6. $("#blockdiv").css("display", "none");
  7. $("#hidediv").show();//显示div
  8. $("#blockdiv").hide();//隐藏div
 


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

js 获取当前元素的父元素的父元素的id

前端达人

情景一:用onclick触发的函数


  1. html代码:
  2. <div id="0" style="border-bottom:1px solid #000;margin:0 auto;">
  3. <div>1111</div>
  4. <div class="original">
  5. <div id="chartx1" class="chartstyle"></div>
  6. <div id="charty1" class="chartstyle" ></div>
  7. <button onclick="getDetail(this);" style="width:100%;height:30px;">查看信息</button>
  8. </div>
  9. </div>
  10. <script>
  11. function getDetail(obj){
  12. alert(obj.parentNode.parentNode.id); //1
  13. }
  14. </script>

运行结果:

情景二:直接用click触发的函数


  1. html代码:
  2. <div id="0" style="border-bottom:1px solid #000;margin:0 auto;">
  3. <div>1111</div>
  4. <div class="original">
  5. <div id="chartx1" class="chartstyle"></div>
  6. <div id="charty1" class="chartstyle" ></div>
  7. <button class="info_detail" style="width:100%;height:30px;">查看信息</button>
  8. </div>
  9. </div>
  10. <script>
  11. $(".info_detail").click(function(){
  12. id=$(this).parent().parent().attr('id');
  13. })
  14. </script>

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:csdn   作者:

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务





jquery 延迟执行方法

前端达人

setTimeout方法使用时需注意: 

复制代码
//以下两种方式都行: setTimeout(function () { test(); }, 2000); //或者 setTimeout('test()',2000);
function test(){
 alert("aaaa");
} //以下是错误示例 setTimeout(test(),2000); //会马上执行,没有延迟效果
复制代码

 




jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

语法:

$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeToggle() 方法:

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


echarts自定义图例组件

前端达人

效果图如下
在这里插入图片描述

//图例组件
        legend: {
          top: 'center',
          right: 30,
          data: [],
          width: "auto",
          itemWidth: 10,  // 小方块尺寸
          itemHeight: 10,
          textStyle: {
            color:'#90CCFF',
            lineHeight:20,
            // 通过rich自定义尺寸,加宽度使百分比及数值各自对齐
            rich:{
              a:{
                width:100,
                align:'left'
              },
              b:{
                width:40,
                align:'right'
              }
            }
          },
          orient: 'vertical',      // 竖向排列
          // 通过formatte自定义格式
          // 因为formatter的参数里只有name一个参数,所以需要通过获取的数据匹配显示
          // 这里的optionData是获取到的数据,格式为
          // optionData:[
          //  { value: 47.01, name: "水果" },
          //  { value: 31.67, name: "蔬菜" },
          //  { value: 12.51, name: "禽畜" },
          //  { value: 8.24, name: "禽蛋" },
          //  { value: 7.27, name: "水产品" },
          //  { value: 6.32, name: "其他" }
          // ],
          formatter: (name) => {
            var total = 0;
            var tarValue;
            this.optionData.forEach((item,i) => {
              total += Number(item.value)
              if (item.name == name) {
                tarValue = Number(item.value ? item.value : 0)
              }
            });
            var percent = ((tarValue / total) * 100).toFixed(2)
            let arr = [
              '{a|'+name+" : "+percent+'%}'+'{b|'+tarValue+'张}'
            ]
            return arr
          }
        }  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51

自定义legend的方式就是这样,遇到格式不同的可以参考上面的方式自定义

单独定义echarts中每个图例的样式,自定义图例的点击方法

 

//用不同样式的图例用数组写对应图例的样式
                legend:[{
                    top: "15%",
                    right: "24%",
                    textStyle: {
                        color: "#3BAEFE",
                        fontSize: 14,
                        fontFamily: "微软雅黑"
                    },
                    itemWidth: 27,
                    itemHeight: 16,
                    data:[{
                        name: "农药",
                        icon: "circle"
                    },{
                        name: "LOL",
                        icon: "rect"
                    }]
                },{
                    top: "15%",
                    right: "15%",
                    textStyle: {
                        color: "#3BAEFE",
                        fontSize: 14,
                        fontFamily: "微软雅黑"
                    },
                    itemWidth: 33,
                    itemHeight: 16,
                    data:[{
                        name: "农药+LOL",
                        icon: "image:///soyking/static/image/echarts/merge.png"  //引用自定义的图片
                    }]
                },{
                    top: "15%",
                    right: "15%",
                    textStyle: {
                        color: "#3BAEFE",
                        fontSize: 14,
                        fontFamily: "微软雅黑"
                    },
                    data:["\n","\n","\n","农药占比","LOL占比"]
                }],

 

结果:

 

自定义图例的方法 (点击图例,显示图例的选中结果) 

var bar = echarts.init(document.getElementById("barDiv"));

//自定义图例的方法
            bar.on("legendselectchanged",function(obj){
                //获取图例选择的结果
                var selected = obj.selected;
                for(var i in selected){
                    alert(selected[i]);
                }
            });


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



Echarts中关于自定义legend图例、文字

前端达人

代码如下

 var data = [ { name: "一次检验数/条", value: 150 }, { name: "多次检验数/条", value: 80 } ]; 
 var option = { legend: { show: true, left: "center", top: "245", itemHeight: 13, itemWidth: 13, itemGap: 35, icon: "circle", data: data, formatter: function(name) { var total = 0; var target; var value; for (let i = 0, l = data.length; i < l; i++) { value = data[i].value; total += data[i].value; if (data[i].name == name) { target = data[i].value; } } var arr = ["{a|" + name + "}", "{b|" + target + "}"]; return arr.join("\n"); }, textStyle: { rich: { a: { color: "#B6B6B6", verticalAlign: "top", align: "center", fontSize: 12, padding: [0, 0, 28, 0] }, b: { align: "left", fontSize: 18, padding: [0, 10, 10, 0], lineHeight: 25, color: "#181818" } } } }, 
    

echarts legend 自定义图例

legend: {

                    selectedMode: true,
                    top: 0,
                    right: 0,
                    orient: 'vertical', // itemWidth: 24, // itemHeight: 2,  textStyle: {
                        fontFamily: 'ABBvoiceCNSG-Regular',
                        fontSize: 12,
                    }, // icon: 'rect',  data: [
                        {
                            name:"高严重等级报警",
                            icon:'rect',
                        },
                        {
                            name:"低严重等级报警",
                            icon: 'rect' },
                        {
                            name:"健康度",
                            icon: 'line' }
                    ]
                },

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



JavaScript对象、内置对象、值类型和引用类型详解

前端达人

对象

JS中的对象是属性行为结合体,其中属性是对象的静态特征,行为又称方法,是对象的动态特征。

JavaScript中的对象主要分为三大类:

  • 内置对象
    由ES标准中定义的对象 在任何的ES的实现中都可以使用,比如Math String Number Boolean Function Object
  • 宿主对象
    由JS的运行环境提供的对象,目前来讲主要是浏览器提供的对象,比如BOM DOM
  • 自定义对象
    由开发人员自己创建的对象

对象的定义

定义非空对象

 // 非空对象: var 对象名 = { 属性名: 值, ... 方法名: function([参数]){ 方法体语句; } ... } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
 var p1 = { color: '黑色',//给对象添加属性 weight: '188g',//属性之间用逗号隔开 screenSize: 6.5, call: function(name){//给对象添加方法 console.log("打出电话:"+name); }, sendMassage: function(msg){ console.log("发出的信息是:"+msg); }, playVideo: function(){ console.log("播放视频"); }, playMusic: function(){ console.log("播放音乐"); } } console.log("手机颜色:"+p1['color']);//也可以使用 对象['属性']来输出属性值 console.log("手机重量:"+p1.weight); console.log("屏幕尺寸:"+p1.screenSize); p1.call("张三");//调用对象的发方法 p1["sendMassage"]("helo"); p1.playVideo(); p1.playMusic(); console.log(p1); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

使用new Object()创建对象

 var p = new Object(); // 创建一个空对象p 
  • 1
 p2.name = '刘备'; p2.sex = '男'; p2.age = 32; p2.sayHello = function(){ console.log('Hello'); } p2.sayHello();//调用对象的方法 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

可以使用构造函数来创建对象:
语法: new 构造函数名( )

 function Student(name,sex,age){ this.name = name;//这里的this指向的是构造函数新创建的对象 this.sex = sex; this.age = age; this.show = function(){ console.log("姓名:"+this.name) console.log("姓别:"+this.sex) console.log("年龄:"+this.age) } } var s1 = new Student('乔峰','男',28);//s1为构造函数创建的新对象 即实例 s1.show(); var s2 = new Student('段誉','男',23); s2.show(); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

注意:"构造函数"可以有参数,也可以没有参数,如果没有参数小括号可以省略

遍历对象的成员

遍历对象的属性和方法:使用for…in循环

 for(var 变量名 in 对象名){ 循环语句 } 
  • 1
  • 2
  • 3
 function Student(name,sex,age){ this.name = name; this.sex = sex; this.age = age; this.show = function(){ console.log("姓名:"+this.name) console.log("姓别:"+this.sex) console.log("年龄:"+this.age) } } // s2是要遍历的对象 var s2 = new Student('段誉','男',23); for(var k in s2){ console.log(k);//依次输出 name sex age show() console.log(s2[k]);//依次输出 段誉 男 23  } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

in运算符
判断成员(属性)在对象中是否存在,存在返回true;不存在返回false。

JS内置对象

JavaScript提供了很多常用的内置对象,包括数学对象Math、日期对象Date、数组对象Array以及字符串对象String等。

Math对象

Math对象:用来对数字进行与数学相关的运算,不需要实例化对象,可以直接使用其静态属性和静态方法.

 Math对象:不需要实例化
            Math.PI:算数常量PI Math.abs(x):返回x的绝对值
            Math.max(args...):返回最大数
            Math.min(args...):返回最小数
            Math.pow(x,y):返回x的y次方
            Math.sqrt(x):返回x的算术平方根
            Math.random():返回0.01.0之间的随机数
            Math.round(x):返回最接近x的整数
            Math.floor(x):返回一个小于等于x 并且与它最接近的整数
            Math.ceil(x):返回一个大于等于x 并且与它最接近的整数 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

Date对象

Date对象:需要使用new Date()实例化对象才能使用,创建一个对象 Date()是一个构造函数,可以给该构造函数传递参数生成一个日期对象。
在这里插入图片描述
在这里插入图片描述

 // 1.创建一个Date对象 没有参数 var date1 = new Date(); console.log(date1); // 2.传入年 月 日 时 分 秒 创建一个指定日期时间的Date对象 // 月份是 0-11 var date2 = new Date(2021,4,22,10,17,55); console.log(date2); // 3.传入一个日期和时间字符串创建一个Date对象 var date3 = new Date("2021-5-22 18:19:25"); console.log(date3); console.log(date3.getMonth())//4 console.log(date3.getTime())//表示Date对象距离1970年1月1日午夜之间的毫秒数 console.log(date1.toLocaleDateString())//2021/6/14 console.log(date1.toLocaleString())//2021/6/14 下午11:17:36 console.log(date1.getFullYear())//2021 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

数组对象

数组:是一些类型相同的数据的集合,它和普通的对象功能类似,也是用来存储一些值,数组是使用数字来作为索引操作内部的元素。
数组的创建

  • 使用字面量
 var arr=[]//创建一个空数组 
  • 1
  • 使用new Array创建
var arr = new Array();//定义一个空数组 
  • 1

判断一个对象是不是数组的两种方法:

  • isArray(对象名)
  • instanceof: 对象名 instanceof Array
 var arr = []; var obj = {}; console.log(Array.isArray(arr));//true console.log(Array.isArray(obj));//false console.log(arr instanceof Array);//trrue 
  • 1
  • 2
  • 3
  • 4
  • 5

在这里插入图片描述
关于数组的其他方法之前的文章要有详细介绍,这里不多做解释。

String对象

String对象:字符串对象,必须使用new String()来创建

字符串常用方法

 - charAt(n) 返回n位置上的字符串 - concat(s1,s2,...) 连接多个字符串 - charCodeAt(n) 返回n位置上的ASCII- split('分隔符') 将字符串按给定的分隔符 转换成字符串数组 - substr(start,length) 从start开始提取length个字符构成一个新串 - substring(from,to) 提取from和to之间的字符串构成一个新串 - toLowerCase() 将串中的大写字符转换成小写 不影响原字符串 返回一个新字符串 - toUpperCase() 将串中的所有小写转换成大写 不影响原字符串 返回一个新字符串 - replace(str1,str2) 使用str2替换字符串中的str1 返回替换结果 不影响原字符串 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

字符串对象练习

 // 输入一个由字母组成的字符串,统计串中每个字母出现的次数 var str = 'abBSdXbdea'; var lower = new Array(26);// 存放26个小写字母各自出现的次数 var upper = new Array(26);// 存放26个大写字母各自出现的次数 // 初始化两个数组 for(var i=0;i<lower.length;i++){ lower[i] = 0 upper[i] = 0 } for(var k=0;k<str.length;k++){ if(str.charAt(k)>='a' && str.charAt(k)<='z'){ lower[str.charCodeAt(k)-97]++ }else if(str.charAt(k)>='A' && str.charAt(k)<='Z'){ upper[str.charCodeAt(k)-65]++ } } console.log(lower); console.log(upper); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
 /* 输入一个十进制整数和一个数制(2、8、16)将该十进制整数转换成
        对应的数值格式输出
            取余法:
               m=15 k=8
               m%k 将余数存放在数组中
        */ var m = parseInt(prompt('请输入一个整数:')); var k = parseInt(prompt('请输入一个数制(2~16)')); var result = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']; var arr = new Array();//存放数制转换的结果 var i = 0; while(m!=0){//对m进行数制转换 将余数放在arr数组里 arr[i] = m%k; m = parseInt(m/k); i++; } var str = ''; if(k==8){ str = '0'; }else if(k==16){ str = '0x'; } for(var i=arr.length-1;i>=0;i--){ str += result[arr[i]]; } console.log('转换的结果为:'+str); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

值类型和引用类型

值类型: 简单的数据类型(字符串,数值型,布尔型,undefined,null)
引用类型: 复杂数据类型(对象) 变量中保存的是引用的地址

注意: 引用类型的特点是,变量中保存的仅仅是一个引用的地址,当对变量进行赋值时,并不是将对象复制了一份,而是将两个变量指向了同一个对象的引用。

下面对内存中的栈和堆进行分析
栈(stack):会自动分配内存空间,会自动释放,简单数据类型存放到栈里面。
堆(heap):动态分配的内存,大小不定也不会自动释放,复杂数据类型存放到堆里面。

在这里插入图片描述
由此可见存放在堆内存中的对象,变量实际保存的是一个指针,这个指针指向另一个位置,通过这个指针来寻找堆中存储的对象的属性和值,并且每个空间大小不一样,要根据情况开进行特定的分配。




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png
转自csdn博客


分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档