- js轉jq

                   //得到js物件

                             var input = document.getElementById("i1");

                             //把js轉成jq物件

                            // var jq = $(input);

                            // alert(jq.val());

                             alert($(input).val());

- jq

                   //得到jq物件

                             var jq = $("#i1");

                             //把jq轉成js  第一種

                             var js1 = jq[0];

                            //把jq轉成js  第二種

                             var js2 = jq.get(0);

十四、jq的文件操作

1. 建立元素

         var jq = $("<div id='xxx'>abc</div>");

2. 新增元素

- 新增到最後面

         $("body").append(元素)

- 新增到最前面

         $("body").prepend(元素)

3. 插入元素

- 插入到兄弟元素的後面

         兄弟元素.after(新元素);

- 插入到兄弟元素的前面

         兄弟元素.before(新元素);

4. 刪除元素

         元素.remove();

5. 樣式相關

         $("#xxx").css("width","200px");

         var width = $("#xxx").css("width");

         //設定多個樣式

         $("div").css({"background-color":"yellow",

                                               "width":"200px"});

6. 屬性相關

         $("#xxx").attr("屬性名","屬性值");//給元素新增屬性

         var str = $("#xxx").attr("屬性名");//獲取屬性值

7. 文字相關 innerText

         $("#xxx").text("abc");//給元素文字賦值

         var str = $("#xxx").text(); //獲取元素的文字內容

8. html相關  innerHTML

         $("#xxx").html("<h1>xxx</h1>"); //給元素新增html內容

         var str = $("#xxx").html(); //獲取元素的html內容

十五、事件模擬

         //模擬按鈕的點選事件

         $("input").trigger("click");

1、hover()

- 格式 hover(fn1,fn2); 等效 onmouseover+onmouseout

                   //給所有div 新增移入移出事件

                   $("div").hover(function(){

                            $(this).css("color","blue");

                   },function(){

                            $(this).css("color","red");

                   })

2、動畫

                            if($(this).val()=="隱藏"){

                                     $("img").hide(3000);

                            }else if($(this).val()=="顯示"){

                                     $("img").show(2000,function(){

                                               $("img").hide(2000,function(){

                                                        $("img").show(1000);

                                               });

                                     });

                            }else if($(this).val()=="上滑"){

                                     $("img").slideUp(3000);

                            }else if($(this).val()=="下滑"){

                                     $("img").slideDown(3000);

                            }else if($(this).val()=="淡出"){

                                     $("img").fadeOut(3000);

                            }else if($(this).val()=="淡入"){

                                     $("img").fadeIn(3000);

                            }else{

                                     $("img").animate({"left":"250px"},1000)

                                     .animate({"top":"250px"},1000)

                                     .animate({"left":"0"},1000)

                                     .animate({"top":"0"},1000)

                                     .animate({"width":"400px","height":"300px"},1000)

                                     .animate({"width":"200px","height":"150px"},1000);

                            }