JQuery实现对勾事件代码
1.JQuery选择器中使用变量实现动态选择解决方案：
<table>
<tr>
<th>用户名</th>
<th>状态</th>
<tr>
<tr>
<td>张三</td>
<td data-uid="10000">正常</td>
<tr>
<tr>
<td>李四</td>
<td data-uid="10001">冻结</td>
<tr>
<tr>
<td>王二麻子</td>
<td data-uid=10002>冻结</td>
<tr>
</table> <script type="text/javascript">
$(document).ready(function(){
var uid = 1001;
$("td[data-uid = "+ uid +"]").html('正常');
}
</script>
2.JQuery中单引号和双引号的使用：
// 错误语法
$("ul li a").filter(":contains("佳能"),:contains("松下"),:contains("卡西欧")").css("color","red"); // 正确语法
$("ul li a").filter(":contains('佳能'),:contains('松下'),:contains('卡西欧')").css("color","red");
jQuery中单引号和双引号都是一样的，平时使用的时候尽量用单引号，只有碰到嵌套的时候才会同时用两种引号。即外面是单引号的时候里面就要用双引号，外面是双引号的时候里面就要用单引号，总之不能同时用双引号或者是单引号。
3. jQuery中$(this)对象
我们知道在JAVA语言中，this代表的是谁在调用它，它就代表谁。用到jQuery中，也是基于这个思想，示例如下：
$("#btnConfirm").click(function(){
alert($(this).val()); //这里，this代表的其实就是这个ID为btnConfirm的按钮,因为你现在点击的是ID为btnConfirm的按钮,那么this就是它
});
$("ul li").each(function(){
alert( $(this).text()); //这里的this代表的是迭代的每个li元素,因为每次迭代，得到的都是一个<li>元素,那么这个时候this 就代表着这个当前的<li>元素
})
$this只是个自定义的变量；
$(this)是将当前don对象转换成jquery对象 ；
一般定义jquery变量习惯$开头，提高可读性而已。
$(this)是把DOM对象封装成jquery对象，其相当于一个集合。用法如下：
<a href="http://IP/q/1010000000125418" target="_blank" data-id="1010000000125418">jQuery</a>
$('a').click(function(){
this.innerHTM==$(this).html()=='jQuery';//三者是一样的.
this.getAttribute('href')==this.href==$(this).attr('href')//三者是一样的;
this.getAttribute('target')==this.target==$(this).attr('target')//三者是一样的;
this.getAttribute('data-id')==$(this).attr('data-id')//二者是一样的;
});
4.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0"/>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="Content-Language" content="zh-cn" />
<meta name="MobileOptimized" content="100%">
<title>全民财富</title>
<link rel="stylesheet" media="screen and (max-width: 320px)" href="css/common.css" />
<link rel="stylesheet" media="screen and (min-width: 320px)" href="css/common.css" />
<link rel="stylesheet" media="screen and (min-width: 320px)" href="css/myWealth.css"/>
<link href="css/public.css" rel="stylesheet" type="text/css">
<link href="css/ticket.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/verification.js"></script>
<div id='wx_pic' style='margin:0 auto; display:none;'>
<img src='images/pic300.jpg' />
</div>
</head>
<body>
<!--整体布局部分-->
<div class="redGift">
<div class="publicBox">
<div class="inside">
<input class="public_inputText" style="width:72%" type="text" value="" placeholder="请输入兑换码" id="activity_code">
<input type="button" class="public_btn" style="width:20%; float:right; border:1px solid #D23131; -webkit-appearance:none" value="兑换" id="exchangeCode">
</div>
</div>
<div class="ht10">
</div>
<div class="noticTicket">
<img src="data:images/icon_arrowToTop.png" class="arrow_toTop" style="width:4%">
<em id="ticketTip">温馨提示：理财金只能用于投资季理财产品。投资到期后，理财金本金不会返还，收益可直接提现。</em>
</div>
<div class="ht15">
</div>
<div class="redGiftSelect" id="redGiftSelect">
<div class="select_l active" id="tiyanjin_tab">理财金券</div>
<div class="select_r" id="jiaxi_tab">加息券</div>
</div>
<div class="ht10">
</div>
<div class="redGiftList" id="ticketList">
</div>
</div>
<div style="display:none" id="templates">
<!--加息券-->
<div class="ticket_JiaxiBox" id="jiaxi_ticketTemplate">
<div class="giftInfo light" id="info_">
<div class="part_l" style="width:20%;">
<img src="data:images/ued03.png" width="100%">
</div>
<div class="part_l" style="width:45%;">
<h1 class="ticket_jiaXi">加息券</h1>
<h1 class="jiaXiLv">+<em id="ticket_amount">0</em><span class="f18">%</span></h1>
<p class="rewardTime">有效期：<span id="beginTime"></span>至<span id="endTime"></span></p>
</div>
<div class="part_r">
<div class="ticket_status" id="useStatus"> </div>
</div>
</div>
</div>
<!-- 理财金 -->
<div class="ticket_expGoldBox" id="tiyan_ticketTemplate">
<div class="giftInfo light" id="info_">
<div class="part_l" style="width:20%;">
<img src="data:images/ued05.png" width="100%">
</div>
<div class="part_l" style="width:45%;">
<h1 class="jiaXiLv" id="rewardName"></h1>
<h1 class="ticket_jiaXi"><span style="font-size:1.7rem;" >￥</span><em id="ticket_amount"></em></h1>
<p class="rewardTime">有效期：<span id="beginTime"></span>至<span id="endTime"></span></p>
</div>
<div class="part_r">
<div class="ticket_status" id="useStatus">
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/verification.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
if(getSessionData("customerId")==null){
window.location.href="./login.html";
} else {
$('#tiyanjin_tab').click(function() {
showData(2);
$(this).addClass('active'); //$(this)是一个jQuery对象,代表选择到的$('#tiyanjin_tab')
$('#jiaxi_tab').removeClass('active');
});
$('#jiaxi_tab').click(function() {
showData(3)
$(this).addClass('active');
$('#tiyanjin_tab').removeClass('active');
});
showData(2); // 默认设置
$('#exchangeCode').click(exchangeCode); //点击兑换执行函数
}
}); // 显示数据
function showData(ticketType) {
if (ticketType == 2) {
$('#ticketTip').text('温馨提示：理财金只能用于投资季理财产品。投资到期后，理财金本金不会返还，收益可直接提现。');
} else {
$('#ticketTip').text('温馨提示：加息券只能用于投资季理财产品。单笔投资仅能使用一张加息券，单张加息券不可重复使用。');
}
//M054, 用户优惠券明细查询
$.ajax({
type : "POST",
contentType : 'application/json',
url : getBaseUrl(),
timeout:60000,
data : setRequestData(
"M054",getSessionData("customerId"),
new Array(
['type','status'],
[ticketType, 1]
)
),
success: function(data){
if('0000'==data.responseCode){
$('#ticketList').empty(); //移除id=ticketList的所有内容。
var oldChooseTicket = getSessionData('chooseTicket'); var dataList = data.data.list; for (var i = 0;i < dataList.length;i++) {
var clone = null;
if (ticketType == 2) {// 理财金
clone = $('#tiyan_ticketTemplate').clone(); // 克隆整个理财金区域
} else if (ticketType == 3) {//加息劵
clone = $('#jiaxi_ticketTemplate').clone();
}
if (clone) {
$(clone).attr("id", null).css('display', '');
$(clone).find('#ticket_amount').text(Number(dataList[i].amount).toFixed(1).toString());
$(clone).find('#rewardName').text(dataList[i].activityName);
var beginDate = dataList[i].beginDate.substring(0,4)+"/"+dataList[i].beginDate.substring(4,6)+"/"+dataList[i].beginDate.substring(6,10);
$(clone).find('#beginTime').text(beginDate);
var endDate = dataList[i].endDate.substring(0,4)+"/"+dataList[i].endDate.substring(4,6)+"/"+dataList[i].endDate.substring(6,10);
$(clone).find('#endTime').text(endDate); if (dataList[i].status == 0) {//0可用,1已用,2失效
var chooseTicket = dataList[i].id + '_' + dataList[i].amount +'_' + ticketType;
$(clone).find(".giftInfo").attr('canUse','yes').attr('chooseTicket', chooseTicket);
if (oldChooseTicket && (oldChooseTicket == chooseTicket)) {
$(clone).find(".ticket_status").html('<img src="data:images/ued06_right.png" width="65%">');
}
} else if (dataList[i].status == 1) {
$(clone).find('.ticket_status').html('<div class="ticket_status"><img style="width:95px" src="data:images/icon_redGift_used.png"></div>');
} else if (dataList[i].status == 2) {
$(clone).find('.ticket_status').html('<img style="width:95px" src="data:images/icon_redGift_unused.png">');
}
$(clone).appendTo('#ticketList');
}
} $('div[canUse="yes"]').click(function() {
var oldTicketId = getSessionData('chooseTicket'); var chooseTicket = $(this).attr('chooseTicket');
//alert("oldTicketId is:"+oldTicketId + "chooseTicket is:"+chooseTicket); if (oldTicketId) {
if (oldTicketId == chooseTicket) {
$('div[chooseticket="'+chooseTicket+'"]').find('.ticket_status').html('');
removeSessionData('chooseTicket');
pagePrev();
} else {;
setSessionData('chooseTicket', chooseTicket);
$(this).find('.ticket_status').html('<img src="data:images/ued06_right.png" width="65%">');
pagePrev();
}
} else {
setSessionData('chooseTicket', chooseTicket); $(this).find('.ticket_status').html('<img src="data:images/ued06_right.png" width="65%">');
pagePrev();
}
});
} else {
showErrorTips(data.responseMsg);
}
},
error : function(XMLHttpRequest){
showErrorTips("网络错误，请稍后再试！");
}
});
}
// 兑换数据 兑换码的 兑现
function exchangeCode() {
var activity_code = $.trim($('#activity_code').val());
if(activity_code == '') {
showErrorTips("请输入您的兑换码！");
return false;
}
$.ajax({
type : "POST",
contentType : 'application/json',
url : getBaseUrl(),
timeout:60000,
data : setRequestData(
"M055",getSessionData("customerId"),
new Array(
['code'],
[activity_code]
)
),
success: function(data){
$('#activity_code').val('');
if('0000'==data.responseCode){
if (data.data.type == 2) {
$('#jiaxi_tab').removeClass('active');
$('#tiyanjin_tab').addClass('active');
} else {
$('#jiaxi_tab').addClass('active');
$('#tiyanjin_tab').removeClass('active');
} showData(data.data.type);
} else {
showErrorTips(data.responseMsg);
}
},
error : function(XMLHttpRequest){
showErrorTips("网络错误，请稍后再试！");
}
});
}
</script>
</html>
JQuery实现对勾事件代码的更多相关文章
- Jquery的点击事件，三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- HTML Select 标签选择后触发jQuery事件代码实例
页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...
- 使用JS或jQuery模拟鼠标点击a标签事件代码
原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" ...
- js便签笔记（6）——jQuery中的ready()事件为何需要那么多代码？
前言: ready()事件的应用,是大家再熟悉不过的了,学jQuery的第一步,最最常见的代码: jQuery(document).ready(function () { }); jQuery(fun ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- jQuery on 绑定的事件触发多次
jquery用on绑定事件,在代码执行过程中,可能会遇到多次执行的情况. 解决方案是在on的事件前面加上一个off,再on. $('#btnBind').off('click').on('click' ...
- jQuery源码解读-事件分析
最原始的事件注册 addEventListener方法大家应该都很熟悉,它是Html元素注册事件最原始的方法.先看下addEventListener方法签名: element.addEventList ...
- JQuery Checkbox的change事件
JQuery Checkbox的change事件 参考 http://blog.csdn.net/hbhgjiangkun/article/details/8126981 $(functio ...
- jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 01- Shell脚本学习--入门
简介 Shell是一种脚本语言,那么,就必须有解释器来执行这些脚本. Unix/Linux上常见的Shell脚本解释器有bash.sh.csh.ksh等,习惯上把它们称作一种Shell.我们常说有多少 ...
- Java程序员的日常——存储过程知识普及
存储过程是保存可以接受或返回用户提供参数的SQL语句集合.在日常的使用中,经常会遇到复杂的业务逻辑和对数据库的操作,使用存储过程可以进行封装.可以在数据库中定义子程序,然后把子程序存储在数据库服务器, ...
- Java程序员的日常 —— 注册工厂的妙用
注册工厂是一种很常用的框架书写方法,它适合于快速创建相同类型的对象. 举个栗子 比如一个家具工厂,有沙发.椅子.茶几等等,正常的编程模式是这样的: //创建 class 沙发{} class 椅子{} ...
- [数据库连接池二]Java数据库连接池--C3P0和JDNI.
前言:上一篇文章中讲了DBCP的用法以及实现原理, 这一篇再来说下C3P0和JDNI的用法. 1.1.C3P0数据源 C3P0是一个开源的JDBC连接池,它实现了数据源和JNDI绑定,支持JDBC3规 ...
- Web信息架构——设计大型网站（第3版）（久负盛名经典再现，信息架构设计领域基石之作！）
Web信息架构——设计大型网站(第3版)(久负盛名经典再现,信息架构设计领域基石之作!) [美]]Peter Morville(彼得·莫维尔) Louis Rosenfeld(路易斯·罗森菲尔德) ...
- C#学习系列-类与结构的区别
参考:http://www.microsoftvirtualacademy.com/Content/ViewContent.aspx?et=9851&m=9830&ct=31038 如 ...
- html_02之表单、其它
1.表单属性action:处理表单数据服务器端处理程序地址,默认提交本页: 2.表单属性method:①get:明文,数据显示地址栏,长度<2KB,向服务器请求数据时使用:②post:密文,提交 ...
- 国内常用的三种框架：ionic/mui/framework7对比
国内常用的三种框架:ionic/mui/framework7对比 原文连接:http://zhihu.com/question/19558750/answer/91179040
- android NDK 生成so 文件流程-ecplice
1:生成jni目录 首先说一句网上,大部分博客这么写的:打开控制台,进入项目目录,运行javah -classpath bin/classes -d jni com.example.hellojni. ...
- BrowserSync - 浏览器同步测试工具
背景: 之前在学gulp的时候,使用gulp-livereload来实时自动刷新页面省时开发,但一直比较难用,现在找到新的替代神器. 安装: // 使用淘宝镜像会快些 npm install -g ...