老季博客

标签： Javascript

  • jQuery获取append添加html内容后的动态元素：live()和on()

    jQuery获取append添加html内容后的动态元素：live()和on()

    jquery通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）

    $("ul").append("<li class='name'>名称</li>");

    错误方法：

    $(“.name”).click(function (){
    alert(“获取到append后的节点”);
    })

    正确方法：

    $(".name").live("click", function() {
    alert("获取到了");
});

    jquery 1.7+之后用on代替live,on()方法在被选元素及子元素上添加一个或多个事件处理程序

    <div id=”one”></div>
    $(‘#one’).append(“<p id=’two’>test1</p>”);
    append后结果：
    $(‘#one’).append(“<p id=’two’>test1</p>”);

    错误示例：

    $("#two").on("click",function(data){
    alert(data);
});

    正确方法：

    $("body").on("click","#two",function(data){
    alert(data);
});
  • 微信小程序开发 批量选择上传图片 代码实例

    微信小程序开发 批量选择上传图片 代码实例

    最近在做微信开发，下面记录一下wx.chooseImage 、wx.uploadImage接口上传多张图片的代码实例。

    JAVASCRIPT代码实例：

    $(function(){
    wx.config({
	debug: false,
	appId: '<?php echo $signPackage["appId"];?>',
	timestamp: <?php echo $signPackage["timestamp"];?>,
	nonceStr: '<?php echo $signPackage["nonceStr"];?>',
	signature: '<?php echo $signPackage["signature"];?>',
	jsApiList: [
	    'checkJsApi',
	    'chooseImage',
	    'previewImage',
	    'uploadImage',
	    'downloadImage'
	]
    });
    wx.ready(function () {    
        var localIds = [];
	$(".weui_uploader_input").click(function(){
	    var that = $(this);
	    wx.chooseImage({
		count: 9,
		sourceType: ['camera', 'album'], 
		success: function (res) {
		    localIds = res.localIds;
		    syncUpload(that);		
		}
	    });
	});
	
        function syncUpload() {
            if (!localIds.length) {
                console.log('上传成功!');
            } else {
                var localId = localIds.pop();
                var select_name = that.attr('select_name');
                wx.uploadImage({
                    localId: localId,
                    success: function() {
                        syncUpload();
                    }
                });
            }
        }
    });
});

    localIds 为上传图片队列。

  • jQuery全文检索表格 特定文字变色高亮红色 图文教程

    jQuery全文检索表格 特定文字变色高亮红色 图文教程

    下面我们记录一下如何在table中检索每个文字，如果遇到我们设置的关键字设置为红色。不多说废话，直接上代码。

    jQuery Javascript代码：

    $(function () {        
        var redKey = '未审核';
        $('table.tbl_list tr').find("td").each(function(){
            if( $(this).html() == redKey ){
              console.log( $(this).html());
              $(this).css("color",'red');
            }
        });
});

    HTML代码：

    <table class="tbl_list">
    <tr>
        <td>文字1</td>
        <td>未审核</td>
        <td>文字1</td>
        <td>文字1</td>
    </tr>
    <tr>
        <td>文字1</td>
        <td>未审核</td>
        <td>文字1</td>
        <td>文字1</td>
    </tr>
</table>

    这里我们检索的时候是以td为单位进行检索的。如果是其他div等大家可以自由发挥。

  • ECharts图表中的XY轴长度过大如何截取？

    ECharts图表中的XY轴长度过大如何截取？

    前面我们记录了ECharts图表中XY轴数据过多导致重叠显示不全问题如何解决 图文教程，下面我们记录一下如果XY轴长度过大如何截取只显示一部分内容。

                axisLabel : { 
                formatter: function (params){ //标签输出形式 ---请开始你的表演 
                    var my_length = 36;
                    if( params.length > my_length) return params.substring(0,my_length); 
                    else return params; 
                }, 
            },

    在xAxis或者yAxis中设定一下长度，如下图：

    这里我们限定的字符长度是36，可以根据需求自行决定长度。

  • ECharts图表点击柱状打开a链接

    ECharts图表点击柱状打开a链接

    昨天我们记录了 ECharts图表中XY轴数据过多导致重叠显示不全问题如何解决 图文教程 ，今天我们记录一下在Echarts图标中我们点击柱状图的时候打开链接的需求，当然这里需要我们在传送过来的数组中要求链接才行。

    JAVASCRIPT代码

    var myChart = echarts.init(document.getElementById('yday_runtime_slow_10'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart.on('click',function(e){
//    console.log(e);//调试的时候可以打开，根据实际情况来设定。
    window.open(e.name);
});

  • jQuery实现简约的对联广告效果 代码实例

    利用jquery实现可关闭、可随屏幕滚动的简约对联广告 ??,兼容各个浏览器

    HTML:

    <!--对联广告HTML Start-->
 <div class="duilian duilian_left">
     <div class="duilian_con"><a href="http://laoji.org" target="_blank"><img src="Jidinghe.jpg"></a></div>
     <a href="#" class="duilian_close">关闭</a>
 </div>
 <div class="duilian duilian_right">
     <div class="duilian_con"><a href="http://laoji.org" target="_blank"><img src="Jidinghe.jpg"></a></div>
     <a href="#" class="duilian_close">关闭</a>
 </div>
<!--对联广告HTML End-->

    css:

     /*下面是对联广告的css代码*/
 .duilian{top:200px;position:absolute; width:150px; overflow:hidden; display:none;}
 .duilian_left{ left:6px;}
 .duilian_right{right:20px;}
 .duilian_con{border:#ddd solid 1px; width:150px; height:210px; overflow:hidden;}
 .duilian_close{ width:100%; height:24px; line-height:24px; text-align:center; display:block; font-size:13px; color:#555555; text-decoration:none;background-color:#eee;}

    Jquery:

     $(document).ready(function(){
     var duilian = $("div.duilian");
     var duilian_close = $("a.duilian_close");     
     var window_w = $(window).width();
     if(window_w>1000){duilian.show();}
     $(window).scroll(function(){
         var scrollTop = $(window).scrollTop();
         duilian.stop().animate({top:scrollTop+200});
     });
     duilian_close.click(function(){
         $(this).parent().hide();
         return false;
     });  
 });

    这个例子还用多解释么。。
WeChat
↑