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>