jquery學習

 

jquery選擇器、常用、ajax、json

神木都是浮雲，留下寫腳印
下面是對jquery的一些學習總結
剛剛進入項目組的時候對用js對table進行操作，遇到了瀏覽器的兼容問題。於是改變思路使用jquery來實現
方法一：
使用動態給table添加行，這樣設計代碼會變的比較長

     //獲取table
     var agentTable = $("#agentTable");
     var tr = $("#agentTable tr");
     i = tr.length - 1;
     //構造一個tr
     var row = $("#<tr>");
     row.attr("id","tr"+i);
     var col1 = $("#<td>");
     //構造一個input
     var radio = $("#<input type='radio' οnclick='radioClick()'>");
     radio.attr("id","radio" + i);
     radio.val(i);
     
     //添加cell
     col1.append(radio);
     //添加列
     row.append(col1);
     //添加行
     agentTable.append(row);

方法二：
可以採用模板的方式來 先定義一個模板

<div id="templateDiv" style="display: none;">
        <tr height="100%">
                <c:forEach begin="1" end="${suiteNumShow}">  
                        <td> <br/> </td>
                </c:forEach>
        </tr>
</div>

jquery 來給table插入新行

var tr = $("#templateDiv");
//可以增加屬性 如：id  name等
$(“#tableId”).append(tr.html());

下面是jquery 的
一些常用的命令 選擇器

//jquery 的選擇器 優點是可以很快的定位到你要操作的元素。提高編程效率。而且易學。。下面是幾個比較基本的選擇器使用方法
$("tr");//標記選擇器 表示選擇所有的 tr標記
$("#trId");//id 選擇器
//還有一些項目中比較適用的選擇器 可以很快定位哦 下面就列舉了幾個還有很多可以快速定位
$(":radio");//就得到了所有的<input type="radio" > 
$(":checkbox");//就得到了所有的<input type="checkbox" > 
$(":hidden");//就得到了所有的<input type="hidden" > 
$(":checked");//項目中如有需要radio 和checkbox選擇的元素

//下面的一些用法 就不解釋了
$("#agentTable tr:not(:hidden)");
$("#contain input[name=stateFlagRadio]:checked")
$("td[id^='suite'][id$='true']");
$(this).find("tr:last");

下面是jquery的其他一些用法總結 遍歷




//jquery對於遍歷頁面元素超方便。
$(this).parent().parent().hide();//父親節點
$("div").children(".selected");//孩子節點
$("div").siblings(".selected");//所有兄弟節點
$("p").next(".selected")//兄弟節點（後面同輩元素）
$("p").prev(".selected")//兄弟節點（前面的元素）

下面就列舉些改變元素屬性和css樣式的方法了 特效

//下面就列舉些改變元素屬性和css樣式的方法了
$(":radio").attr("checked","checked");
$("#agencyAdd").attr("disabled",true);//改變屬性值
$("#agencyAdd").css("background-color","#E8F6F1");//設置css樣式

$(".highlight");//class 選擇器, 選擇了class是highlight 的標記集合
$("div").toggleClass("highlight"); //作用是切換樣式
$("td").find("div[class^='highlight']//find方法可以一結果集裏面繼續查詢
$("#messageSpan").fadeIn().delay(2000).fadeOut("slow");//隱藏和顯示dom元素、實現的效果是顯示2秒後隱藏。
$('a',$(this)).stop().animate({'marginLeft':'-80px'},200);
$("td").show();//顯示元素 以前的js的寫法是改變元素的 style="display: block;"
$("td").hide();//隱藏元素 style="display: none;"

還有和事件有關的好玩的方法

$("div").children(":first").trigger("click");//觸法點擊事件 用於在js中動態的觸法綁定在元素的事件
//給元素動態的綁定事件
$("#imgs_next").click(function(event){
   event.stopPropagation();
   return false;
  }); 
$("td[id^='suite'][id$='false']").bind('click', click_event);
哎，只是把平常 常用的列出來下，也列了這麼多

下面是等等。。。。。

//each 用於遍歷數組
tablediv5.each(function (){
$(this).width(maxWidth);
});
$.trim($("#name").val()//這兩個方法也比較常用 一個是trim() 去除空格,一個是val()獲得value值
tr.html()//獲取html的值

ifram 一些操作

$(window.parent.document).find("#ifrm_contactUs").attr("src"); //獲取iframe的src
$(window.parent.document).find("#content").height(resultDiv.height() + 65); //改變父頁面的高度

其實我感覺 jquery 讓我吸引的地方還在於他的ajax 和後臺交互還是很爽滴。現在就來揭開他的神祕的面紗
下面是簡單的例子 使用的是struts2 傳輸數據用的是json
先列下前臺jsp的簡單的幾行代碼 看下面是不是代碼很簡短呀




//一種方式：
      $.ajax({
       url:"chenshiying.action",
       data:params,
//如果頁面是utf-8的,tomcat的字符集編碼也是uft-8的則不需要轉碼 ，
//不然要對params參數進行下encode,後臺decode下
       type:"post",
       dataType:'json',
       success:function(data)
       {
        //jQuery.parseJSON(data); //返回的json對象要進行轉換下
       },
       error: function()
       {
        //doing thing
       }
      });

//下面是另一種方式：
$.getJSON("chenshiying.action", function(obj){
       //var json =jQuery.parseJSON(obj);
       //或者通過下面方法解析json對象
       // var json = eval("("+obj+")");
});

下面是params,兩種寫法




//第一種寫法 和以前的傳遞參數是一個寫法
var params = "userBean.regtype=online&userBean.name=chenshiying";
params = encodeURI(params );
//第二種寫法 構造一個json對象
var params = 
              {
               "userBean.userName":userName,
               "userBean.phone":phone,
               "userBean.email":email,
               "userBean.country":country,
               "userBean.message":message,
               "message":"你懂得"
              }
params = encodeURI(params );

個人強烈推薦第二種寫法 優點的話自己想去
接下來是講action的部分 在講之前先做寫準備 要引入json-lib包
我引入的版本是json-lib-2.1-jdk15.jar

//除了要引入json-lib-2.1-jdk15.jar 還需要引入幾個相關的包滴。這點很重要，缺包的後果是程序沒什麼效果。
具體引什麼包得在他的官方網站下查詢
//還有要注意的就是struts2 要支持json的話也要引入包，
//這就得重struts源碼中的lib下拷貝咯。。和struts2的版本有關滴

下面就講下action中的操作咯




//將後臺的實體bean對象轉換爲json對象 //很簡潔把 看起來很舒服把。。。。
    public String reserve()
    {
        try
        {
            this.userBean = userManager.doRegister(userBean);
            JSONObject jsobj = new JSONObject();
            jsobj = JSONObject.fromObject(userBean);
            result = jsobj.toString();
        }
        catch (Exception e)
        {
            logger.error("註冊失敗", e);
            result = "false";
        }
        return SUCCESS;
    }

還要在struts2裏面加點東西哦

//讓包繼承下
<package name="struts2" extends="json-default">
//action配置如下:
<action name="reserve" class="mediaAction" method="reserve">
  <result name="success" type="json">
                <!-- 此處將reslut的值返回給客戶端，root的值對應要返回的值的屬性result
                      注意：root爲固定寫法，否則不會把result的值返回給客戶端 -->
           <param name="root">result</param> 
        </result>
</action>

還有一種方式使用anotation的方式在action中聲明哪個屬性要回傳到頁面去