jquery常用知识点

本文深入探讨了前端开发的关键技术和实战经验,包括HTML、CSS、JavaScript等基础语言的应用,以及Vue、React、Angular等现代框架的使用技巧。通过具体实例,展示了如何优化用户体验和网站性能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.跳转

$("a").attr("href", "")

2.取值

$("a").attr("value");

3.页面跳转+传参!!!!

$("#sub_z").attr("href","../zsg/t_zsg!add?id="+$('#id').attr('value')+"&name="+$('#name').attr('value')+"&pwd="+$('#pwd').attr('value')+"&score="+$('#score').attr('value'));

最好将一个&改成&&否则会乱码,不能正确传递

4.传递多个参数时注意加个‘’


onclick="gshow('${teA.teId}','${teA.teName}','${teA.tePwd}','${teA.score}')"

5.url乱码


action中加request.setCharacterEncoding("UTF-8");解决。。。

6.radio取值


<script type="text/javascript">
    function check(pid,currentPage){
       var allInput = document.getElementsByTagName("input"); //获得所有的input
       var loopTime = allInput.length; //获得数量
       var my_array = new Array();//存储选项的值
    var count=0;
    var countOfChecked=0;
       for(i = 0;i < loopTime;i++){
       if(allInput[i].type == "radio")//只对radio进行检查
       if(allInput[i].checked==true){ //如果被选择
                          my_array[count++]=allInput[i].value;//记录所选的值
                          countOfChecked++
                    }
       }
       if(countOfChecked==0){//都没选择
       alert("您还没有选择执行结果");
       }else{
       
        document.location="AddResultsServlet?status=all&pid="+pid+"¤tPage="+currentPage+"&array="+my_array;  
        }
    }
  </script>

这是我自己一个程序里的一段,你可以参考一下,一模一样
传到后台后
String array=request.getParameter("array");
  if(array!=null){
   array=new String(array.getBytes("ISO-8859-1"),("GBK"));
  }
String Tid[]=array.split(",");
传回去的需要分割
这样你就得到你要的选项的值了


例子:(代码直接复制保存,注意:先下载包jquery-1.3.2.min.js,放在同一目录下)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 页面上多组单选题时,怎么用JQuery确定各组单选的选中值 </TITLE>
<script src="jquery-1.3.2.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
// 为指定name的radio设置选中值
var param1=2;
var param2=1;
$(":radio[name=radio1] [value="+param1+"]").attr("checked","true");//指定value的选项为选中项
$(":radio[name=radio2][value="+param2+"]").attr("checked","true");

// 取值
$("#btn").click(function(){
var radio1Value=$(":radio[name='radio1']:checked").val();
var radio2Value=$(":radio[name='radio2']:checked").val();

//测试
alert("第一组单选值:"+radio1Value);
alert("第二组单选值:"+radio2Value);
});
});
</SCRIPT>
</HEAD>

<BODY>
<p>第一组选择</p>
<input type="radio" name="radio1" value="1">
<input type="radio" name="radio1" value="2">

<p>第二组选择</p>
<input type="radio" name="radio2" value="1">
<input type="radio" name="radio2" value="2">

<br/>
<button id="btn">选完后点击我测试</button>
</BODY>
</HTML>
 

7.json的问题:不执行success,执行complete和error

 
你的json格式不标准
response.getWriter().write("{'success':'true','msg':'用户名或者密码错误!'}");   
  1. response.getWriter().write("{'success':'true','msg':'用户名或者密码错误!'}");
     
fire_wang (中级程序员) 2011-10-29
你是不是要action处理之后不跳转到其他页面?你的action中应该是return null;
fire_wang (中级程序员) 2011-10-29
如果不行的话,你也可以试试getJSON
fire_wang (中级程序员) 2011-10-29
不用execute这个默认方法 自己取个方法名,用void 不要返回。
AngelAndAngel (资深架构师) 2011-11-02
dataType:'json' 这是,你服务器端传回来的只是个字符串,并不是JSON对象,。要么你就在服务器端用个JSON插件把String转成JSON,要么就在页面里用eval函数把字符串转成JSON对象,即data=eval(data); alert(data.msg);
tb4219003 (初级程序员) 2011-11-11
自己手动重写一次!(可能是tab 键或一些特别的东东我也出现过这样的问题)
yitian_web (初级程序员) 2011-11-1
 
架构师的可用,但返回不了返回值,于是修改如下
<result name="success" type="json">
    <param name="root">oo</param>
  </result>
这样就好了。。。。。。
 

 

 8、jquery自定义函数


function countDown(secs){
if(--secs>0){
setTimeout("countDown("+secs+")",1000);/*利用setTimeout每隔一秒调用一次*/
}else{
location.href="../main/toMain"/*这里是要跳转的页面*/
}
}

jquery +ajax
$(function(){
$('#jiaojuan').click(function(){
var count=0;
var score=0;

for(var i=1;i<=$('#size').val();i++){
score+=parseInt($(":radio[name='option"+i+"']:checked").val());
   }
   $.ajax({
    type:"POST",
    url:"countTest!ok",
    data:{"score":score},
    dataType:'JSON',
    /**complete:function(){
    alert("hicom");
    $("#scorediv").show();
    $("#score").text(score);
    },*/
    success:function(data){
    $("#scorediv").show();
    $("#score").text(score);
    countDown(5);
    },
    error:function(){
    alert("cuowu");
    }
   });
});


})
 

9、jQuery实现可编辑的表格(原文)

  1. html代码如下:     
  1. <body>  
  2.         <div align="center">  
  3.             <table border="1px">  
  4.                 <thead>  
  5.                     <tr>  
  6.                         <th>  
  7.                             姓名  
  8.                         </th>  
  9.                         <th>  
  10.                             性别  
  11.                         </th>  
  12.                         <th>  
  13.                             年龄  
  14.                         </th>  
  15.                     </tr>  
  16.   
  17.                 </thead>  
  18.                 <tbody>  
  19.                     <tr>  
  20.                         <td>redarmy7</td>  
  21.                         <td>M</td>  
  22.                         <td>22</td>  
  23.                     </tr>  
  24.                     <tr>  
  25.                         <td>redarmy6</td>  
  26.                         <td>M</td>  
  27.                         <td>22</td>  
  28.                     </tr>  
  29.                     <tr>  
  30.                         <td>redarmy5</td>  
  31.                         <td>M</td>  
  32.                         <td>22</td>  
  33.                     </tr>  
  34.                     <tr>  
  35.                         <td>redarmy4</td>  
  36.                         <td>M</td>  
  37.                         <td>22</td>  
  38.                     </tr>  
  39.                     <tr>  
  40.                         <td>redarmy3</td>  
  41.                         <td>M</td>  
  42.                         <td>22</td>  
  43.                     </tr>  
  44.                     <tr>  
  45.                         <td>redarmy2</td>  
  46.                         <td>M</td>  
  47.                         <td>22</td>  
  48.                     </tr>  
  49.                 </tbody>  
  50.             </table>  
  51.         </div>  
  52.     </body>  


JS代码如下:

[javascript] view plain copy
  1. $(document).ready(function() {  
  2.     // 首先实现 表格的各行换色  
  3.     // even返回的是偶数 但是在表格中实际代表的是奇数行  
  4.     // 匹配所有索引值为偶数的元素,从 0 开始计数  
  5.     $("tbody>tr:even").css("background-color""antiquewhite");  
  6.     // odd返回的是奇数 但是在表格中实际代表的是偶数行  
  7.     // 匹配所有索引值为奇数的元素,从 0 开始计数  
  8.     $("tbody>tr:odd").css("background-color""aquamarine");  
  9.   
  10.     // 找到 tbody中所有的td操作  
  11.     var $tds = $("tbody td");  
  12.     // 给$tds注册点击事件  
  13.     $tds.click(function() {  
  14.                 // 获取被点击的td  
  15.                 var $td = $(this);  
  16.                 // 检测此td是否已经被替换了,如果被替换直接返回  
  17.                 if ($td.children("input").length > 0) {  
  18.                     return false;  
  19.                 }  
  20.   
  21.                 // 获取$td中的文本内容  
  22.                 var text = $td.text();  
  23.   
  24.                 // 创建替换的input 对象  
  25.                 var $input = $("<input type='text'>").css("background-color",  
  26.                         $td.css("background-color")).width($td.width());  
  27.                 // 设置value值  
  28.                 $input.val(text);  
  29.   
  30.                 // 清除td中的文本内容  
  31.                 $td.html("");  
  32.                 $td.append($input);  
  33.   
  34.                 // 处理enter事件和esc事件  
  35.                 $input.keyup(function(event) {  
  36.                             // 获取当前按下键盘的键值  
  37.                             var key = event.which;  
  38.                             // 处理回车的情况  
  39.                             if (key == 13) {  
  40.                                 // 获取当当前文本框中的内容  
  41.                                 var value = $input.val();  
  42.                                 // 将td中的内容修改成获取的value值  
  43.                                 $td.html(value);  
  44.                             } else if (key == 27) {  
  45.                                 // 将td中的内容还原  
  46.                                 $td.html(text);  
  47.                             }  
  48.                         });  
  49.             });  
  50.   
  51. });  


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值