Study JavaScript(Day11)

- js转jq

                   //得到js对象

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

                             //把js转成jq对象

                            // var jq = $(input);

                            // alert(jq.val());

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

- jq转js

                   //得到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);

                            }