动态生成的DOM做点击事件无效

阅读(76)

有时候我们的标签都是从后台获取的数据,然后利用JS添加到页面上,当我们写生成的标签的点击事件(click)时没有效果。

例如:

<section>
测试动态生成的DOM点击事件
<br />
</section> 
<script src="jquery-1.11.2.min.js"></script>
<script> 
$(function () {
$.ajax({
type: "post",
url: "Handler1.ashx",
data: {},
success: function (data) {
$("section").append(data); //把获取的标签动态添加到页面中
}
})
});
$("#test").click(function () {
alert("Smile");
})
</script>

生成页面,点击A标签无效果。

这里只介绍两种解决方法。

①把事件写在生成的字符串当中,感觉很low


里面什么方法名外面就声明一个(需要带参就传参)。

②我一般喜欢在JS里面直接写点击事件,不喜欢在标签里面写事件

我们直接写这个标签的点击事件是没效果的,我们就换个写法,利用On来完成。

这样也可以完成点击事件。

另附:a标签的href也是可以执行脚本的,点击事件也会执行脚本,点击事件优先,然后在执行href链接。

下载一般都是把A标签的Href给个一般处理程序的链接(参数就用?传值)。但我这个下载的参数是动态生成的,在后台生成字符串的时候没有参数。需要在前台根据用户选择的来进行传递参数。所以需要我们动态生成Href的链接。

//下载
$("#uploadInfo").click(function () {
var uids = "";
$(":checkbox[name='A']:checked").each(function (i, item) {
uids += $(item).attr("data-id") + ",";
})
if (uids === "") {
NewAlertBox("warning","请最少选择一项",2000);
} else {
var urls = "GroupTeamUserListDocUpload.ashx?CaseID=" + CaseID + "&UID=" + uids;
$(this).attr("href", urls); //执行完了点击事件,把Href赋值,然后自动跳转href链接
}

});

移动端-仿京东秒杀倒计时

阅读(125)

京东秒杀倒计时

HTML代码:

 <div class="jd_secKill_left">
    <span class="ms_icon"></span>
    <h4 class="ms_name fl">掌上秒杀</h4>
    <div class="ms_time fl">
        <span class="num fl">0</span>
        <span class="num fl">0</span>
         <span class="str fl">:</span>
         <span class="num fl">0</span>
        <span class="num fl">0</span>
        <span class="str fl">:</span>
        <span class="num fl">0</span>
        <span class="num fl">0</span>
    </div>
 </div>
<div class="jd_secKill_right fr">
   <a href="">更多></a>
</div>

css代码:

.jd_secKill{
}
.jd_secKill .jd_secKill_left{
    float: left;
}
.jd_secKill .jd_secKill_left .ms_icon{
    background: url("../images/seckill-icon.png") no-repeat;
    background-size: 16px 20px;
    width: 16px;
    height: 20px;
    display: block;
    float: left;
    margin-left: 8px;
    margin-top: 6px;
}
.jd_secKill .jd_secKill_left .ms_name{
    font-size: 15px;
    color: #d8505c;
    font-weight: inherit;
    margin-left: 8px;
    line-height:30px;
}
.jd_secKill .jd_secKill_left .ms_time{
    margin-top: 6px;
    margin-left: 8px;
}
.jd_secKill .jd_secKill_left .ms_time span{
    margin-right: 3px;
    display: block;
    line-height:20px;
}
.jd_secKill .jd_secKill_left .ms_time .num{
    width: 15px;
    height: 20px;
    text-align: center;
    background: #333;
    color:#fff;
}
.jd_secKill .jd_secKill_left .ms_time .str{
    width: 4px;
    height: 15px;
    text-align: center;
}
.jd_secKill_right a{
    line-height:32px;
    margin-right: 10px;
}

js代码:

/*秒杀倒计时*/
var secondKill = function() {
  /*复盒子*/
  var parentTime = document.getElementsByClassName('ms_time')[0];
   /*span时间*/
  var timeList = parentTime.getElementsByClassName('num');
  console.log(timeList.length);
  var times = 7 * 60 * 60;
  var timer;
  timer = setInterval(function () {
  times--;
  var h = Math.floor(times / (60 * 60));
  var m = Math.floor(times / 60 % 60);
  var s = times % 60;

  //console.log(h + '-' + m + "-" + s);

  timeList[0].innerHTML = h > 10 ? Math.floor(h / 10) : 0;
  timeList[1].innerHTML = h % 10;

  timeList[2].innerHTML = m > 10 ? Math.floor(m / 10) : 0;
  timeList[3].innerHTML = m % 10;

  timeList[4].innerHTML = s > 10 ? Math.floor(s / 10) : 0;
  timeList[5].innerHTML = s % 10;
  if (times <= 0) {
      clearInterval(timer);
  }
 }, 1000);
}
secondKill();

SQL中Group By的使用

阅读(53)

声明:本文为转载,欢迎大家支持原作者。

1、概述

“Group By”从字面意义上理解就是根据“By”指定的规则对数据进行分组,所谓的分组就是将一个“数据集”划分成若干个“小区域”,然后针对若干个“小区域”进行数据处理。

2、原始表

3、简单Group By

示例1

select 类别, sum(数量) as 数量之和
from A
group by 类别

返回结果如下表,实际上就是分类汇总。

这里纠正一下,笔者实践结果如下:

select 类别, count(数量) as 数量之和 from A group by 类别

因此:大家在实践的时候如果发现没有得到想要的结果的时候,可以把sum换成count试试。

4、Group By 和 Order By

示例2

select 类别, sum(数量) AS 数量之和
from A
group by 类别
order by sum(数量) desc

返回结果如下表

在Access中不可以使用“order by 数量之和 desc”,但在SQL Server中则可以。

5、Group By中Select指定的字段限制

示例3

select 类别, sum(数量) as 数量之和, 摘要
from A
group by 类别
order by 类别 desc

示例3执行后会提示下错误,如下图。这就是需要注意的一点,在select指定的字段要么就要包含在Group By语句的后面,作为分组的依据;要么就要被包含在聚合函数中。

6、Group By All

示例4

select 类别, 摘要, sum(数量) as 数量之和
from A
group by all 类别, 摘要

示例4中则可以指定“摘要”字段,其原因在于“多列分组”中包含了“摘要字段”,其执行结果如下表

“多列分组”实际上就是就是按照多列(类别+摘要)合并后的值进行分组,示例4中可以看到“a, a2001, 13”为“a, a2001, 11”和“a, a2001, 2”两条记录的合并。

SQL Server中虽然支持“group by all”,但Microsoft SQL Server 的未来版本中将删除 GROUP BY ALL,避免在新的开发工作中使用 GROUP BY ALL。Access中是不支持“Group By All”的,但Access中同样支持多列分组,上述SQL Server中的SQL在Access可以写成

select 类别, 摘要, sum(数量) AS 数量之和
from A
group by 类别, 摘要

7、Group By与聚合函数

在示例3中提到group by语句中select指定的字段必须是“分组依据字段”,其他字段若想出现在select中则必须包含在聚合函数中,常见的聚合函数如下表:

函数 作用 支持性
sum(列名) 求和
max(列名) 最大值
min(列名) 最小值
avg(列名) 平均值
first(列名) 第一条记录 仅Access支持
last(列名) 最后一条记录 仅Access支持
count(列名) 统计记录数 注意和count(*)的区别

示例5:求各组平均值

select 类别, avg(数量) AS 平均值 from A group by 类别;

示例6:求各组记录数目

select 类别, count(*) AS 记录数 from A group by 类别;

示例7:求各组记录数目

8、Having与Where的区别

  • where 子句的作用是在对查询结果进行分组前,将不符合where条件的行去掉,即在分组之前过滤数据,where条件中不能包含聚组函数,使用where条件过滤出特定的行。
  • having 子句的作用是筛选满足条件的组,即在分组之后过滤数据,条件中经常包含聚组函数,使用having 条件过滤出特定的组,也可以使用多个分组标准进行分组。

示例8

select 类别, sum(数量) as 数量之和 from A
group by 类别
having sum(数量) > 18

示例9:Having和Where的联合使用方法

select 类别, SUM(数量)from A
where 数量 gt;8
group by 类别
having SUM(数量) gt; 10

9、Compute 和 Compute By

select * from A where 数量 > 8

执行结果:

示例10:Compute

select *
from A
where 数量>8
compute max(数量),min(数量),avg(数量)

执行结果如下:

compute子句能够观察“查询结果”的数据细节或统计各列数据(如例10中max、min和avg),返回结果由select列表和compute统计结果组成。

示例11:Compute By

select *
from A
where 数量>8
order by 类别
compute max(数量),min(数量),avg(数量) by 类别

执行结果如下:

示例11与示例10相比多了“order by 类别”和“… by 类别”,示例10的执行结果实际是按照分组(a、b、c)进行了显示,每组都是由改组数据列表和改组数统计结果组成,另外:

  • compute子句必须与order by子句用一起使用
  • compute…by与group by相比,group by 只能得到各组数据的统计结果,而不能看到各组数据

在实际开发中compute与compute by的作用并不是很大,SQL Server支持compute和compute by,而Access并不支持。

原文地址:https://www.cnblogs.com/jingfengling/p/5962182.html,请支持原创作者。

开启woocommerce的用户注册功能

阅读(69)

wordpress有个商城插件——woocommerce,我们都知道wordpress有用户注册登录的,可是我们在折腾wooocommerce的时候,通常是进去买东西,直到走到checkout页面那里才出现用户填写信息,然后结算,在这里用户才能接触到用户注册的机会。

笔者在对一个基于wordpress的商城网站做了一些处理,比如只有登录的用户才能看到价格,才能加入购物车,才能进入到结算页面,因此,如果没有账户的用户。是没有机会看到价格的,如果没有供用户注册的地方,估计用户永远也买不到东西,什么鬼?都什么时候了,买个东西为啥这么艰难。起码给用户一个注册的机会。没有开启的情况是这样的。

正确的做法如下:

1.woocommerce是有开启用户注册登录的地方的,只是我们安装这个插件后,默认是没有开启的,直接去后台开启即可。

2.来到woocommerce的settings那里,然后找到Accounts那个栏目,勾选启用注册功能,如下图:

3.我们再次来到用户账户登录页面。

最后,用户就可以先登录在查看价格了,如果没有账号就可以当场进行注册,注册完毕直接登录即可。

 

锚点链接点击缓慢移动到目标位置

阅读(94)

锚点链接点击缓慢移动到目标位置,而不是直接瞬间跳转到目标地址,这样提样不是很好,期待的样子应该是点击锚点链接后,有个稍微缓慢的移动过程,如何实现呢?

方案:采用jquery

demo:

<!DOCTYPE> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>js平滑滚动到顶部、底部、指定地方</title> 
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script> 
<style> 
.box{ height:200px; width:100%; background:#ccc; margin:10px 0;} 
.location{ position:fixed; right:0; bottom:10px; width:20px; background:#FFC; padding:5px; cursor:pointer;color:#003}; 
</style> 
</head> 
<body> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box a">产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box bottom"></div> 
<div class="location"> 
<p class="scroll_top">返回顶部</p> 
<p class="scroll_a">产品介绍</p> 
<p class="scroll_bottom">滑到底部</p> 
</div> 
<script type="text/javascript"> 
jQuery(document).ready(function($){ 
$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 
$('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);}); 
$('.scroll_bottom').click(function(){$('html,body').animate({scrollTop:$('.bottom').offset().top}, 800);}); 
}); 
</script> 
</body> 
</html>

[转]php中的->和=>的用法和说明

阅读(48)

在学习PHP中,遇到了->和=>这两个符号。

刚遇到这两个符号的时候不知道它们代表的含义,在经过百度后才发这两个符号的秘密。

下面来看一下在PHP中->的秘密,如下代码。

<?php
class Car {
public $speed = 0;
//增加speedUp方法,使speed加10
public function speedUp(){
$this->speed+=10;
}

}
$car = new Car();
echo $car->speed;
$car->speedUp();
echo "<br>";
echo $car->speed;

?>

在这个里面,我们可以看到在类里面定义了一个speedUp的方法,在此方法中可以看到$this->speed+=10,这行代码。->代表什么呢?

在经过百度后,我自己认为他代表的是汉字中“的”这个字的含义,比如这行代码,翻译过来就是$this的speed等于speed加10。当然这只代表本人的观点,如果有错请多指教。

接下来就是=>了,简单来说就是=>符号来分隔键和值,左侧表示键,右侧表示值。来看段代码吧。

<?php
//从数组变量$arr中,读取键为apple的值
$arr = array('apple'=>"苹果",'banana'=>"香蕉",'pineapple'=>"菠萝");
$arr0 = $arr["apple"];
if(isset($arr0)) {
print_r($arr0);
}
?>

在此代码中,先声明一个arr数组,然后声明一个arr0等于苹果的键,接下来用IF来判断他是否存在,如果存在则输出数组中,此键右侧的值。

简单来说就是给别人起一个外号,用外号来代表某个人,提起他的外号,就可以知道他是谁的意思。

本文转自:https://blog.csdn.net/qq_38275944/article/details/75576963