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/ ...
随机推荐
- WindowManager 实现悬浮窗 详解
WindowManager 实现悬浮窗 详解 一:对于想直接看效果的,可以看看我的demo app. 链接:http://sj.qq.com/myapp/detail.htm?apkName=com. ...
- Zabbix安装部署
zabbix服务器端配置:(10.27.98.29服务器端) 1.安装lamp环境 yum -y install autoconf curl-devel gcc gcc-c++ httpd httpd ...
- 实现步骤: 推送&传感器&UIDynamic
一.本地通知基本使用: #01.请求授权(8.0以前默人授权) #02.创建本地通知 #03.设置通知内容 #04.设置通知时间(多久后发通知) #05.发送通知 二.本地通知而外设置: #01.设置 ...
- Pycharm远程调试
1.在pycharm的安装目录中找到pycharm-debug.egg,将其拷贝到目标主机的/usr/lib/python2.7/dist-packages目录下: 执行: sudo easy_ins ...
- redis + 主从 + 持久化 + 分片 + 集群 + spring集成
Redis是一个基于内存的数据库,其不仅读写速度快,每秒可以执行大约110000的写操作,81000的读取操作,而且其支持存储字符串,哈希结构,链表,集合丰富的数据类型.所以得到很多开发者的青睐.加之 ...
- 微软BI 之SSIS 系列 - 使用 SQL Profilling Task (数据探测) 检测数据源数据
开篇介绍 SQL Profilling Task 可能我们很多人都没有在 SSIS 中真正使用过,所以对于这个控件的用法可能也不太了解.那我们换一个讲法,假设我们有这样的一个需求 - 需要对数据库表中 ...
- Control Flow 如何处理 Error
在Package的执行过程中,如果在Data Flow中出现Error,那么Data Flow component能够将错误行输出,只需要在组件的ErrorOutput中进行简单地配置,参考<D ...
- PHP获取图片宽度高度、大小尺寸、图片类型、用于布局的img属性
//php自带函数 getimagesize()$img_info = getimagesize('tomener.jpg'); echo '<pre>'; print_r($img_in ...
- Java 集合系列目录(Category)
下面是最近总结的Java集合(JDK1.6.0_45)相关文章的目录. 01. Java 集合系列01之 总体框架 02. Java 集合系列02之 Collection架构 03. Java 集合系 ...
- Android监听来电和去电
要监听android打电话和接电话,只需下面2步骤1.第一步,写一个Receiver继承自BroadcastReceiver import android.app.Service; import an ...