最近開發用到了jquery，做個總結，不斷更新

?

$(document).ready(function(){

});

$(function(){

?

});

?

1 取值

?? <input type="text" name="name" id="name" value="測試" >

?

?? var value=$("#name").val(); //取值

?? $("#name").val("測試 測試"); //設置值

?

???var valueTrim=?jQuery.trim(value); //去掉左右空格

?? //或 var valueTrim= $.trim(value);

?

? //去掉頁面中所有文本框中的空格

? $("input:text").each(function(){
????????????? var v=$(this).val().replace(/[ ]/g,"");? //去掉所有空格
????????????? $(this).val(v);
???? });

?

?

2 操作內容

?? 1）<span id="test"><font color="red">測試</font></span>

?

??????? var rs=$("#test").test();? //取內容

??????? $("#test").test(" 測試 測試 測試"); //設置內容

?

???????? var rs=$("#test").html(); //取html內容

??????? $("#test").html("<font color="red">測試</fong>"); //設置html內容

?

?? 2）<select name="test" id="test" style="width:180px">

?????????????? <option value="">全部</option>

???????????????<option value="test1">測試一</option>

???????????????<option value="test2">測試二</option>

?

????????? var rs=$("#test").find("option:selected").text(); //取得被選中的內容

?

?? 3) 設置下拉框根據條件默認選中（使用2)中的select）

??????? var length=$("#test option").length;

????????for (var i=0;i<length;i++){

??????????????? if ($("#test").get(0).options[i].value=="測試二"){

?????????????????????? $("#test").get(0).options[i].selected=true;?//將下拉框，內容為"測試二"的選項選中
?????????????????????? break;

??????????????? }

??????? }

?4) 刪除下拉框選項和新增下拉框選中

? ? ??$("#test option").each(?
? ? function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?if($(this).val() == 111){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$(this).remove();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ? }
? ? );

? ? ? ?$("#test").append("<option value=''>請選擇</option");

3 禁用啟用文本框

???? <input type="text" name="name" id="name" value="測試" >

?

???? $("#name").attr({'disabled':'disabled'}); //禁用

???? $("#name").removeAttr("disabled"); //啟用

?

4.1?復選框操作

???????? <input type="checkbox" name="test" value="test1" >

???????? <input type="checkbox" name="test" value="test2" >

???????? <input type="checkbox" name="test" value="test3" >

?

?????? var num=0; //統計被選中的個數

???????var ids=null;? //統計被選中的值

????? $("input[name='test']:checkbox").each(function(){
?????????? ?if($(this).attr("checked")){
??????????????? num+=1;
??????????????? ids=ids+$(this).val()+",";
??????????? }
?????? });

?????? alert(num);

?????? alert(ids);

?

4.2?單選按鈕取值方法?

????? <input?type="radio" name="test" value="test1"/>

????? <input?type="radio" name="test" value="test2"/>

????? <input?type="radio" name="test" value="test3"/>

?

????? $("input[type=radio]").bind("click",function(){
?????????????? var value = $("input[name='test'][type='radio'][checked]").val();
????????????? ?alert(value);
????? ?});

?

4.3 ?單選按鈕默認選中

????? <input?type="radio" name="test" value="test1"/>

????? <input?type="radio" name="test" value="test2"/>

????? <input?type="radio" name="test" value="test3"/>

?

???? $("input[name='test']:radio").each(function(){
????????????? if($(this).attr("value")=="test2"){
???????????????? $(this).attr('checked','checked');
????????????? }
???????? });?

?

5?事件綁定

?????? <input type="button" value="測試" id="test" />

?

?????? $("#test").bind("click",function(){?

??????????????? alert("做我想做的");

?????? });

??????? //其中事件真對不同的元素有不同的事件，包括 blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,

mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error

?

6?ajax??

?

???? var param="name=zhangshan,age=30"l

????$.ajax({
?????? url: '${ctx}/scoreMngAction.do?method=relScore',
?????? type: 'POST',
?????? dataType:'html',
?????? timeout: 2000000,//超時時間設定
?????? data:param,//參數設置
?????? error: function(){alert('error:不能連接遠程服務器');},//錯誤處理，隱藏進度條
?????? success: function(data){
?????? ????? alert(data);
???????}?????
?????});??

?

???? 后臺取值

???? String name=request.getParameter("name");

???? String age=request.getParameter("age");

?????后臺返回值

???? PrintWriter out = response.getWriter();

???? out.print("操作成功!");

?

7 操作元素屬性

? <input type="text" name="test1" id="test"?value="測試" />

?

? $("#test").attr("name","test2"); //設置元素中name屬性中的內容，將test1改為test2

? alert($("#test").attr("name")); //取得元素name屬性中的內容

?

?

8?表單提交

?? <form? id="form1">

????????? <input? type="button"? id='submit'? value="提交"/>

?? </form>

?

?? $("#submit").bind("click",function(){
??????? $("#form1").attr("action","xx.action");
??????? $("#form1").attr("method","post");
??????? $("#form1").submit();
?? });

?

9?填加和移除樣式

? <style type="text/css">

???? .focus {
????????? border: 1px solid #f00;
????????? background: #fcc;
????? }

?</style>

?

? <input id="username" type="text" />

? <input id="pass" type="password" />

? <textarea id="msg" rows="2" cols="20"></textarea>

?

<script type="text/javascript">
??? $(function(){
???????$(":input").focus(function(){??//文本框獲得焦點時增加樣式
??????????????? $(this).addClass("focus");?
????????? ?}).blur(function(){ //文本框失去焦點時移除樣式
?????????????? ?$(this).removeClass("focus");
????????? ?});
??? })
??? </script>

?

10?遍歷指定無素

?? <input type="text" name="test1" id="test1" />

?? <input type="text" name="test2" id="test2" />

??? <input type="text" name="test3" id="test3" />

?

?? function disableText(){
?????????$("input[type='text']").each(function(){?//遍歷所有text元素
????????????????$(this).attr({'disabled':'disabled'});?//增加禁用屬性

??????????????? //$(this) 為當前所遍歷到的元素對象
???????? });
????}

?

???? //$(":input").attr({'disabled':'disabled'});? 該方法可以默認禁用所有input元素

?

11 顯示隱藏指定元素

??? <span id="test"? style="display: none">測試</span>

?

?? $("#test").show(); //顯示

?? $("#test").hide();? //隱藏

?

12 文本框獲得焦點

???? <input type="text"? id="test1" value="" />

?

???? $("#test1")[0].focus();

?

?

13 表格操作

???? <table id="tab1">

???????? <thead>

?????????????? <tr id="testTr1">

?????????????????? <td>測試一</td>

?????????????????? <td>測試二</td>

?????????????????? <td>測試三</td>

?????????????????? <td>測試四</td>

??????????????? </tr>

???????? </thead>

???????? <tbody>

????????????? <tr id="testTr1">

???????????????? <td><input type="radio" name="test1" id="test1" value="測試1"?></td>

????????????????? <td>test2</td>

????????????????? <td><input type="checkbox" name="test3" id="test3" οnclick="checkSelect(this)" value="測試3"></td>

????????????????? <td><input type="button" id="add"?value="添加下一行" /></td>

?????????????????? <td><input type="button" id="del"?value="刪除下一行" /></td>

????????????? </tr>

????????????? <tr id="testTr2">

????????????????? <td><input type="radio" name="test1" id="test1" value="測試11" checked="checked"></td>

??????????????????<td>test22</td>

????????????????? <td><input type="checkbox" name="test3" id="test3" οnclick="checkSelect(this)" value="測試3"></td>

????????????????? <td><input type="button" id="addLast"?value="添加表格最后行" /></td>

??????????????????<td>test4</td>

?????????????? </tr>

??????????</tbody>

???? <table>

?

????? //改變表中的第某行中列的內容1

????? var tr=$("#testTr1");

????? tr.find("td").get(0).innerHTML="con1"

????? tr.find("td").get(0).innerHTML="con2"

?

????? //改變表中的第某行中列的內容2

????? var td1=$('#conTab > tbody > tr :radio:checked').parents("td"); //取得單選按鈕所在的列

????? var td2=td1.next(); //取得下一列

????? var con=td2.text();? //取得下一列的內容

?

????? //點擊單選按鈕所在行，選中本行單選按鈕

????? $('#tab1 > tbody > tr').bind("click",function(){
????????? $(this).find(':radio').attr('checked',true);
????? });

?

???? //點擊復選框所在行，控制復選框是否選中( 增加此功能后單擊復選框，將不起作用，所以復選框增加onclick方法checkSelect(this)) ?

????? $('#tab1 > tbody > tr').bind("click",function(){
??????????? if ($(this).find(':checkbox').attr('checked')){
????????????????? $(this).find(':checkbox').attr('checked',false);
??????????? }else{
????????????????? $(this).find(':checkbox').attr('checked',true);
??????????? }
?????? });

?

?????? //點擊復選框，控制復選框是否選中
??????? function checkSelect(obj){
?????????? ?if ($(obj).attr('checked')){
???????????????? $(obj).attr('checked',false);
??????????? }else{
???????????????? $(obj).attr('checked',true);
??????????? }
?????????}

?

??????? //添加下一行

????????$('#add).?("click",function(){
?????????????? $(this).parent().parent().after("<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>");

?????????});???

?

??????? //刪除下一行

?????????$('#del).?("click",function(){
?????????????? $(this).parent().parent().next().remove(); //刪除下一行

?????????????? $(this).parent().parent().remove(); //刪除本行?

?????????});??

?

???????? //添加表格最后一行

??????????$('#addLast).?("click",function(){
??????????????? $("#tab1").append("("<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>");

????????? });??

總結

以上是生活随笔為你收集整理的jquery 开发总结(不断更新)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。