首页 博客列表 精选博客 智能问答 chat-GPT 关于我
【汇总】jquery 运用
发布日期：2021-11-08 08:45:14 浏览次数：26 分类：技术文章

本文共 12371 字，大约阅读时间需要 41 分钟。

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

<select name="restatus" id="restatus" style="height:25px" οnchange="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" οnclick="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" οnsubmit="return add_submit_check();" action="#"  method="POST">

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

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

 <input class="btn" type="button" name="cancel" value="取消" οnclick="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']?>" οnblur="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 为每一个匹配元素的特定事件（像click ）绑定一个事件处理器函数。

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

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

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

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

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

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

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

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

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

jQuery 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法.

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

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

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

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

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

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

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

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

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

jQuery 为每一个匹配元素的特定事件（像click ）绑定一个事件处理器函数（只执行一次）。

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

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

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

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

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

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

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

jQuery 每次点击时切换要调用的函数。

jQuery 在每一个匹配的元素上触发某类事件。

jQuery 反绑定，从每一个匹配的元素中删除绑定的事件

jQuery 在每一个匹配元素的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. }) ;

 

 

 

 

 

 

 

 

 

 

转载地址：https://blog.csdn.net/zhengdl126/article/details/83430446 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：改变互联网的PHP程序
下一篇：web架构设计经验分享

发表评论

最新留言

网站不错 人气很旺了 加油
[***.192.178.218]2024年03月31日 03时48分30秒

关于作者

    喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！

推荐文章

spring boot 与 Ant Design of Vue 实现新增用户(二十八) 2019-04-27
spring boot 与 Ant Design of Vue 实现修改用户(二十九) 2019-04-27
spring boot 与 Ant Design of Vue 实现删除用户(三十) 2019-04-27
spring boot 与 Ant Design of Vue 鉴权体系登录的实现(三十一) 2019-04-27
spring boot 与 Ant Design of Vue 鉴权体系获取用户信息的实现(三十二) 2019-04-27
Druid连接池实现自定义场景的多数据库的连接 2019-04-27
CentOs7命令行(静默)的方式安装oracle数据库 2019-04-27
基于VMware安装CentOs7的镜像 2019-04-27
PL/SQL数据库管理工具的使用 2019-04-27
史上最简单的spring-boot集成websocket的实现方式 2019-04-27
带你玩转属于自己的spring-boot-starter系列（一） 2019-04-27
带你玩转属于自己自己的spring-boot-starter系列（二） 2019-04-27
带你玩转属于自己的spring-boot-starter系列（三） 2019-04-27
基于SnowFlake算法如何让分库分表中不同的ID落在同一个库的算法的实现 2019-04-27
基于springboot的ShardingSphere5.X的分库分表的解决方案之分库解决方案(二) 2019-04-27
基于springboot的ShardingSphere5.X的分库分表的解决方案之分表解决方案（一) 2019-04-27
基于springboot的ShardingSphere5.X的分库分表的解决方案之关联查询解决方案（三） 2019-04-27
基于springboot的ShardingSphere5.X的分库分表的解决方案之基于seata的分布式事务的解决方案(十五) 2019-04-27
Linux文件管理参考 2019-04-27
FTP文件管理项目（本地云）项目日报（一） 2019-04-27
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 307925721 位访客
访问时间: 2024-04-26 00:26:54 访问IP: 3.17.6.75     Copyright © 2020 - 2023 blog.css8.cn 京ICP备2021015314号-1 手机版