zoukankan html css js c++ java

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')//二者是一样的;
});

<!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- 320px)" href="css/common.css" />
<link rel="stylesheet" media="screen and (min- 320px)" href="css/common.css" />
<link rel="stylesheet" media="screen and (min- 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="72%" type="text" value="" placeholder="请输入兑换码" id="activity_code">
                <input type="button" class="public_btn" style="20%; float:right; border:1px solid #D23131; -webkit-appearance:none" value="兑换" id="exchangeCode">
            </div>
        </div>   
        <div class="ht10">
        </div>       
        <div class="noticTicket">
            <img src="images/icon_arrowToTop.png" class="arrow_toTop" style="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="20%;">
                    <img src="images/ued03.png" width="100%">
                </div>
                <div class="part_l" style="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="20%;">
                    <img src="images/ued05.png" width="100%">
                </div>
                <div class="part_l" style="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="images/ued06_right.png" width="65%">');
                                        }
                                } else if (dataList[i].status == 1) {
                                        $(clone).find('.ticket_status').html('<div class="ticket_status"><img style="95px" src="images/icon_redGift_used.png"></div>');
                                } else if (dataList[i].status == 2) {
                                        $(clone).find('.ticket_status').html('<img style="95px" src="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="images/ued06_right.png" width="65%">');                                    
                                    pagePrev();                                    
                                }
                            } else {
                                setSessionData('chooseTicket', chooseTicket);            
                            
                                $(this).find('.ticket_status').html('<img src="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>

查看全文

相关阅读:
黄聪：WordPress wp_head()优化：去除不必要的元素标签（转）
黄聪：IE6下用控制图片最大显示尺寸
 黄聪：wordpress wp_head()函数浏览器顶部空白28px 解决办法（转）
黄聪：在Photoshop中创建多种样式的网格背景图案（转）
黄聪：如何WP中获取文章分类名称、分类ID、归档分类链接
 黄聪：Wordpress如何不显示(只显示)置顶文章
 黄聪：淘宝用户在宝贝详情页想看到什么
 黄聪：Windows7立体声混音设置方法（stereo mix）（转）
黄聪：wordpress博客用Slimbox2实现lightbox效果（免插件）（转）
黄聪：tor 解决连接中继目录failed 没有可用的链路

原文地址：https://www.cnblogs.com/RunForLove/p/4689017.html