【汇总】jquery 运用

 -------------  下拉框 ajax

<select name="restatus" id="restatus" style="height:25px" onchange="changeustatus(this.options[this.options.selectedIndex].value,<!--{$ll.rid}-->,<!--{$eventnum}-->)">&nbsp;
      <!--{foreach from=$estatus_arr item=e name=e}-->
      <option value="<!--{$e.id}-->" <!--{if $e.id eq $ll.statusinfo}-->selected<!--{/if}--> ><!--{$e.name}--></option>
      <!--{/foreach}-->
     </select>

 

 

 

<script type="text/javascript">
<!--
function changeustatus(rsid,rid,eventnum)
{
 var url = genurl('callcenter/changeustatus');
 $.get(url, {rsid:rsid,rid:rid,eventnum:eventnum}, function(ret){
  if(ret.flag == 'Y') {
   location.reload(true);
   //$('.statusBtn').removeClass('statusBtnCur').show();
   //$(obj).addClass('statusBtnCur');
  }
 }, 'json');
 return false;
}
//-->
</script>

 

 

 

---------------- jquery 交替背景效果

 

 

 

 

table., td{
 /*font:100% Arial, Helvetica, sans-serif; */
}
.datatable{width:100%;border-collapse:collapse;margin:0 0 1em;}
.datatable th, .datatable td{text-align:left;padding:.5em;border:1px solid #fff;}
.datatable th{background:#328aa4 url(tr_back.gif) repeat-x;color:#fff;}
.datatable td{background:#e5f1f4;}
.datatable th a {color:#FFFFFF;font-weight:bold;}

/* tablecloth styles */

.datatable tr.even td{background:#e5f1f4;}
.datatable tr.odd td{background:#f8fbfc;}

/*
.datatable th.over, .datatable tr.even th.over, .datatable tr.odd th.over{background:#4a98af;}
.datatable th.down, .datatable tr.even th.down, .datatable tr.odd th.down{background:#bce774;}
.datatable th.selected, .datatable tr.even th.selected, .datatable tr.odd th.selected{}
*/

.datatable td.over, .datatable tr.even td.over, .datatable tr.odd td.over{background:#ecfbd4;}
.datatable td.down, .datatable tr.even td.down, .datatable tr.odd td.down{background:#bce774;color:#fff;}
.datatable td.selected, .datatable tr.even td.selected, .datatable tr.odd td.selected{background:#bce774;color:#555;}

/* use this if you want to apply different styleing to empty table cells*/
.datatable td.empty, .datatable tr.odd td.empty, .datatable tr.even td.empty{background:#fff;}

<table class="datatable fixwidth">
   <tr>
    <th width="4%"><input type="checkbox" class="checkbox" onclick="checkall('boxs[]')" id="chkall" name="chkall"></th>
    <th width="7%">ID</th>
    <th width="">帐号</th>
    <th width="18%">姓名</th>
    <th width="15%">手机</th>
    <th width="20%">Email</th>
    <th width="15%">操作</th>
   </tr>
   <!--{foreach from=$dlist name=d item=d}-->
   <tr>
    <td><input type="checkbox" class="checkbox" name="boxs[]" value="<!--{$d.uid}-->" ></td>
    <td><!--{$d.uid}--></td>
    <td><!--{$d.username}-->
    <!--{if $d.status eq 'S'}-->
    (禁用)
    <!--{/if}--></td>
    <td><!--{$d.nickname}--></td>
    <td><!--{$d.mobile}--></td>
    <td><!--{$d.email}--></td>
    <td>
     <a href="<!--{genurl q='callcenter/cmembers'}-->?act=edit&uid=<!--{$d.uid}-->">编辑资料</a>&nbsp;
     <a href="<!--{genurl q='callcenter/cmembers'}-->?act=editpwd&uid=<!--{$d.uid}-->">修改密码</a>&nbsp;
    </td>
   </tr>
   <!--{/foreach}-->
  </table>

 

 

 

 

 

--------------------------

 

 

location.reload(true);

var sex =  $("input[name='csex']:checked").val();

 

 

-------------

<form id="decorationFormedit" onsubmit="return add_submit_check();" action="#"  method="POST">

<input type="text" id="email" name="email" value="" size="30" onchange="getemailstr();" />

<input type="text" name="mobile" id="mobile" value="" onchange="getpwdstr();"  size="30" />

 <input class="btn" type="button" name="cancel" value="取消" onclick="window.history.go(-1);">

 

function getpwdstr()
{
 var mobile = $('#mobile').val();
 
 if(!isMobile(mobile) || mobile.length<11) {
  alert('请输入正确手机号码');
  return false;
 }
 allnum = mobile.length;
 start = allnum - 4;
 ss = mobile.substr(start,4);
 document.getElementById("password").value = ss;
 return true;
}

 

function getemailstr()
{
 var email = $('#email').val();
 if(!isEmpty(email) && !checkEmail(email)) {
  alert('请输入正确邮箱地址');
  return false;
 }
 return true;
}

 

 

function add_submit_check() {
 var username = $('#username').val();
 if(isEmpty(username)) {
  alert('请输入帐号');
  return false;
 }
 var mobile = $('#mobile').val();
 if(!isMobile(mobile) || mobile.length<11) {
  alert('请输入正确手机号码');
  return false;
 }
 var email = $('#email').val();
 if(!isEmpty(email) && !checkEmail(email)) {
  alert('请输入正确邮箱地址');
  return false;
 }
 return true;
}

 

 

 

function checkEmail(email) {
 if (email != '') {
  var testStr = email;
  if (/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(testStr)) {
   return true;
  } else {
   return false;
  }
 }
 return false;
}

 

 

 

function isEmpty(str) {
 if (str.trim()=='') return 1;
 var regex= "^((\&nbsp;)|(\<br\>)|(\<div\>)|(\<\/div\>)|(\<p\>)|(\<\/p\>)|(\s)|(\u3000)|( ))+$";
 regex = new RegExp(regex, 'ig');
 if (str.match(regex)) return 1;
 return 0;
}
function isMobile(str) {
 var reg=/(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/;
 if(str != '' && reg.test(str)){
  return 1;
 }
 return 0;
}
function isNum(s) {
 if(s!=null){
        var r,re;
        re = /\d*/i;
        r = s.match(re);
        return (r==s)?true:false;
    }
    return false;
}

--------获取radio选中的值

 

$("input[name='csex']:checked").val();

 

 

 

-----------实时排序功能

<td><input name="<?=$val['id']?>" type="text" value="<?=$val['sorts']?>" onblur="do_sorts(this)" size="5" /></td>

 

function do_sorts(obj)
            {
                $.post(
                        '/bcwwnimda/manage/index.php',
                        'pos=right&mod=yicai_consulting_language&op=sorts&sorts='+obj.value+'&id='+obj.name,
                        function(request) {

                            if(request == 'ok') {
                                location.reload();
                                return true;
                            }else
                            {
                            location.reload();
                                return false;
                            }
                      }
                 )
            }

 

 

 

function yicai_consulting_language_sorts() {

   global $db;

     if( ! func::get_and_post('id') ) {
        echo "err";
        exit;
    }
    $consulting_language = new consulting_language($db);
    $id = func::get_and_post('id');
    $sorts = func::get_and_post('sorts');
    $ret = $consulting_language->edit_sorts($id,$sorts);

    if( $ret ) {
        echo "ok";
    }else {
        echo "err";
    }


}

 

 

 

 

---------- 取值

var name = $('#name').val();

var folder = $('#folder').val();  input

 

var langid = $("#langid").val();  下拉框 select 的值

var langname = $("#langid option:selected").text();  下拉框 select 的 nam

 

 

---------- 赋值

$("#name").value =  "new value";

 

 $('.my_info').html('<p class="login_info">尊敬的用户,您还没有登录。</p>');

 

------------ // 监听输入并清除报错信息

    $('#langid'). change(function(e){

       $('#langidmsg').html('');

    });

    $('#name'). keyup(function(e){

       $('#namemsg').html('');

    });

 

 

 -------------------------phpmaos中的应用

$(document).ready(function(){
       
            $("#dim").css("height", $(document).height());
            $("#dim").css("width", $(document).width());
           
            $("#dim2").css("height", $(document).height());
            $("#dim2").css("width", $(document).width());
            //$("#dim").css("width", $(window).width());
           
            $(".alert").click(function(){
                $("#dim").fadeIn();
                return false;
            });
           
            $(".alert2").click(function(){
                var writter = $('.writter').val();
                if(writter=='')
                {
                    alert("请输入作者");
                    exit;
                }
                $("#dim2").fadeIn();
                $(".sear").html("");
               
                $.get("ajax.php?act=writter", {keys:writter}, function(text){
                $(".sear").append(text);
                //alert(text);
                    });
                return false;
            });
           
            $(".close").click(function(){
                $("#dim").fadeOut();
                return false;
            });
           
            $(".close2").click(function(){
                $("#dim2").fadeOut();
                return false;
            });
           
            $(".type").click(function(){
                var items=$(".type"); //type的所有复选框
                //var items = $("input[name='type[]']:checked");已选中的复选框
                $(".show").html('');
                for(var i = 0 ; i < items.length ; i++)
                 {
                      if(items[i].checked == true)
                      {
                        var mes = "<input type='checkbox' checked='true' value='"+ items[i].value +"' >" + items[i].nextSibling.nodeValue;
                        $(".show").append(mes);
                      }
                 }
            });
           
            $(".submit").click(function(){
                var title = $('.title').val();
                var type = $("input[name='type[]']:checked");
                var zone = $('.zone').val();  
               
                var writter = $('.writter').val();
                var ss_writter = $(".ss_writter").attr("value");
                if(!ss_writter)
                {
                    ss_writter=writter;
                }
               
                var model = $('.model').val();
                if(title=='' || type.length==0 || zone=='' || ss_writter=='' || model=='')
                {
                    alert("请检查是否输入作品名称，类型分类，地区分类，作者,书籍模型");
                    return false;
                }
                return true;
            });
           
           
        });

 

 

 

 --------------------JQUERY load方法

 

 调用load方法的完整格式是：load( url, [data], [callback] ),其中

    * url：是指要导入文件的地址。
    * data：可选参数；因为Load不仅仅可以导入静态的html文件，还可以导入动态脚本，例如PHP文件，所以要导入的是动态文件时，我们可以把要传递的参数放在这里。
    * callback：可选参数；是指调用load方法并得到服务器响应后，再执行的另外一个函数。
一：如何使用data
1.加载一个php文件，该php文件不含传递参数$("#myID").load("test.php");
//在id为#myID的元素里导入test.php运行后的结果
2. 加载一个php文件，该php文件含有一个传递参数
$("#myID").load("test.php",{"name" : "Adam"});
//导入的php文件含有一个传递参数，类似于：test.php?name=Adam
3. 加载一个php文件，该php文件含有多个传递参数。注：参数间用逗号分隔
$("#myID").load("test.php",{"name" : "Adam" ，"site":"61dh.com"});
//导入的php文件含有一个传递参数，类似于：test.php?name=Adam&site=61dh.com
4. 加载一个php文件，该php文件以数组作为传递参数
$("#myID").load("test.php",{'myinfo[]', ["Adam", "61dh.com"]});
//导入的php文件含有一个数组传递参数。
注意：使用load，这些参数是以POST的方式传递的，因此在test.php里，不能用GET来获取参数。
二：如何使用callback
比如我们要在load方法得到服务器响应后，慢慢地显示加载的内容，就可以使用callback函数。代码如下：
$("#go").click(function(){
$("#myID").load("welcome.php", {"lname" : "Cai", "fname" : "Adam", function(){
$("#myID").fadeIn('slow');}
);
});
 
防止jQuery Load使用缓存的方法
缓存这东西，在一定程度上加快了页面的装载，但是也常常给我们带来麻烦。我在上篇文章里简单介绍了jQuery中Load方法的使用。在实际运用中，我们可能会碰到浏览器缓存的问题。比如我就在IE7里碰到这个问题。
jQuery Load样本代码：
$(document).ready(function(){ $("#labels").load("/blog/categories/labels.html"); //在页面装载时，在ID为#labels的DOM元素里插入labels.html的内容。 });

当我更新了labels.html以后，在IE7里load方法仍旧在使用旧的labels.html，就算我按刷新键也不管用。好在jQuery提供一个防止ajax使用缓存的方法，把下面的语句加在head的javascript文件里，就可
以解决问题。$.ajaxSetup ({ cache: false //关闭AJAX相应的缓存 });
此外我再介绍几种方法解决缓存的方法。注意：我没有在jQuery load的问题上测试过，这些方法仅供参考！
1.更改文件名，比如把labels.html改成lables_new.html，但是这是没有办法的办法，一般没有人这么做。
2.在labels.html后加上特定时间，比如lables.html?20081116。在实际工作中，在我更新css/javascript文件后，我都是用这种办法来防止文件被缓存。
3.在labels.html文件的顶部加入以下声明：
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Expires" CONTENT="-1">
4.load函数不仅可以调用HTML，也可以调用script，比如labels.php，可以在php文件里使用header函数：
<?php header("Cache-Control: no-cache, must-revalidate"); ?>
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---------------------------------jQuery API 中与事件相关的函数

jQuery bind(String type,Object data,Function fn) 为每一个匹配元素的特定事件（像click ）绑定一个事件处理器函数。

jQuery blur() 触发每一个匹配元素的blur 事件。

jQuery blur(Function fn) 在每一个匹配元素的blur 事件中绑定一个处理函数。

jQuery change(Function fn) 在每一个匹配元素的change 事件中绑定一个处理函数。

jQuery click() 触发每一个匹配元素的click 事件。这个函数会调用执行绑定到click 事件的所有函数。

jQuery click(Function fn) 在每一个匹配元素的click 事件中绑定一个处理函数。

jQuery dblclick(Function fn) 在每一个匹配元素的dblclick 事件中绑定一个处理函数。

jQuery error(Function fn) 在每一个匹配元素的error 事件中绑定一个处理函数。

jQuery focus() 触发每一个匹配元素的focus 事件。

jQuery focus(Function fn) 在每一个匹配元素的focus 事件中绑定一个处理函数。

jQuery hover(Function over,Function out) 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法.

jQuery keydown(Function fn) 在每一个匹配元素的keydown 事件中绑定一个处理函数。

jQuery keypress(Function fn) 在每一个匹配元素的keypress 事件中绑定一个处理函数。

jQuery keyup(Function fn) 在每一个匹配元素的keyup 事件中绑定一个处理函数。

jQuery load(Function fn) 在每一个匹配元素的load 事件中绑定一个处理函数。

jQuery mousedown(Function fn) 在每一个匹配元素的mousedown 事件中绑定一个处理函数。

jQuery mousemove(Function fn) 在每一个匹配元素的mousemove 事件中绑定一个处理函数。

jQuery mouseout(Function fn) 在每一个匹配元素的mouseout 事件中绑定一个处理函数。

jQuery mouseover(Function fn) 在每一个匹配元素的mouseover 事件中绑定一个处理函数。

jQuery mouseup(Function fn) 在每一个匹配元素的mouseup 事件中绑定一个处理函数。

jQuery one(String type,Object data,Function fn) 为每一个匹配元素的特定事件（像click ）绑定一个事件处理器函数（只执行一次）。

jQuery ready(Function fn) 当DOM 载入就绪可以查询及操纵时绑定一个要执行的函数。

jQuery resize(Function fn) 在每一个匹配元素的resize 事件中绑定一个处理函数。

jQuery scroll(Function fn) 在每一个匹配元素的滚动事件中绑定一个处理函数。

jQuery select() 触发每一个匹配元素的select 事件。

jQuery select(Function fn) 在每一个匹配元素的select 事件中绑定一个处理函数。

jQuery submit() 触发每一个匹配元素的submit 事件。

jQuery submit(Function fn) 在每一个匹配元素的submit 事件中绑定一个处理函数。

jQuery toggle(Function even,Function odd) 每次点击时切换要调用的函数。

jQuery trigger(String type,Array data) 在每一个匹配的元素上触发某类事件。

jQuery unbind(String type,Function fn) 反绑定，从每一个匹配的元素中删除绑定的事件

jQuery unload(Function fn) 在每一个匹配元素的unload 事件中绑定一个处理函数。

 

 

 

--------------------- 获取

 

1. /* 获得TEXT.AREATEXT 的值*/
2.    var textval = $ ( " #text_id " ) . attr ( " value " ) ;
3. // 或者
4.    var textval = $ ( " #text_id " ) . val () ;
5. /* 获取单选按钮的值*/
6.    var valradio = $ ( " input[@type=radio][@checked] " ) . val () ;
7. /* 获取一组名为(items) 的radio 被选中项的值*/
8.    var item = $ ( ' input[@name=items][@checked] ' ) . val () ;
9. /* 获取复选框的值*/
10. var checkboxval = $ ( " #checkbox_id " ) . attr ( " value " ) ；
11. /* 获取下拉列表的值*/
12.    var selectval = $ ( ' #select_id ' ) . val () ;
13.  
14. // 文本框，文本区域：
15. $ ( " #text_id " ) . attr ( " value " , '' ) ; // 清空内容
16. $ ( " #text_id " ) . attr ( " value " , ' test ' ) ; // 填充内容
17. // 多选框checkbox ：
18. $ ( " #chk_id " ) . attr ( " checked " , '' ) ; // 使其未勾选
19. $ ( " #chk_id " ) . attr ( " checked " , true ) ; // 勾选
20. if ( $ ( " #chk_id " ) . attr ( ' checked ' ) == true ) // 判断是否已经选中
21.  
22. // 单选组radio ：
23.  
24. $ ( " input[@type=radio] " ) . attr ( " checked " , ' 2 ' ) ; // 设置value=2 的项目为当前选中项
25.  
26. // 下拉框select ：
27. $ ( " #select_id " ) . attr ( " value " , ' test ' ) ; // 设置value=test 的项目为当前选中项
28. $ ( " <option value='test'>test</option><option value='test2'>test2</option> " ) . appendTo ( " #select_id " ) // 添加下拉框的option
29. $ ( " #select_id " ) . empty () ； // 清空下拉框
30.  
31. 获取一组名为 ( items ) 的 radio 被选中项的值
32. var item = $ ( ' input[@name=items][@checked] ' ) . val () ; // 若未被选中 则val() = undefined
33. 获取 select 被选中项的文本
34. var item = $ ( " select[@name=items] option[@selected] " ) . text () ;
35. select 下拉框的第二个元素为当前选中值
36. $ ( ' #select_id ' )[ 0 ] . selectedIndex = 1 ;
37. radio 单选组的第二个元素为当前选中值
38. $ ( ' input[@name=items] ' ) . get ( 1 ) . checked = true ;
39.  
40. // 重置表单
41. $ ( " form " ) . each ( function (){
42.    . reset () ;
43. }) ;