DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jQuery設置與獲取HTML,文本和值的簡單實例
jQuery設置與獲取HTML,文本和值的簡單實例
編輯:JavaScript綜合知識     

 本篇文章主要是對jQuery設置與獲取HTML,文本和值的簡單實例進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助

 代碼如下: <script type="text/javascript">  //<![CDATA[   $(function(){       //獲取<p>元素的HTML代碼       $("input:eq(0)").click(function(){             alert(  $("p").html() );       });       //獲取<p>元素的文本       $("input:eq(1)").click(function(){             alert(  $("p").text() );       });       //設置<p>元素的HTML代碼       $("input:eq(2)").click(function(){              $("p").html("<strong>你最喜歡的水果是?</strong>");       });            //設置<p>元素的文本       $("input:eq(3)").click(function(){              $("p").text("你最喜歡的水果是?");       });         //設置<p>元素的文本       $("input:eq(4)").click(function(){              $("p").text("<strong>你最喜歡的水果是?</strong>");       });         //獲取按鈕的value值       $("input:eq(5)").click(function(){              alert( $(this).val() );       });          //設置按鈕的value值       $("input:eq(6)").click(function(){             $(this).val("我被點擊了!");       });     });   //]]>   </script>  代碼如下: <script type="text/javascript">  //<![CDATA[   $(function(){       $("#address").focus(function(){         // 地址框獲得鼠標焦點             var txt_value =  $(this).val();   // 得到當前文本框的值             if(txt_value=="請輸入郵箱地址"){                   $(this).val("");              // 如果符合條件,則清空文本框內容             }        });       $("#address").blur(function(){          // 地址框失去鼠標焦點               var txt_value =  $(this).val();   // 得到當前文本框的值             if(txt_value==""){                 $(this).val("請輸入郵箱地址");// 如果符合條件,則設置內容             }        })         $("#password").focus(function(){             var txt_value =  $(this).val();             if(txt_value=="請輸入郵箱密碼"){                 $(this).val("");             }        });       $("#password").blur(function(){               var txt_value =  $(this).val();             if(txt_value==""){                 $(this).val("請輸入郵箱密碼");             }        })   });   //]]>   </script>    代碼如下: <script type="text/javascript">  //<![CDATA[   $(function(){       $("#address").focus(function(){         // 地址框獲得鼠標焦點             var txt_value =  $(this).val();   // 得到當前文本框的值             if(txt_value==this.defaultValue){                   $(this).val("");              // 如果符合條件,則清空文本框內容             }        });       $("#address").blur(function(){          // 地址框失去鼠標焦點               var txt_value =  $(this).val();   // 得到當前文本框的值             if(txt_value==""){                 $(this).val(this.defaultValue);// 如果符合條件,則設置內容             }        })         $("#password").focus(function(){             var txt_value =  $(this).val();             if(txt_value==this.defaultValue){                 $(this).val("");             }        });       $("#password").blur(function(){               var txt_value =  $(this).val();             if(txt_value==""){                 $(this).val(this.defaultValue);             }        })   });   //]]>   </script>    代碼如下: <script type="text/javascript">  //<![CDATA[   $(function(){       //設置單選下拉框選中       $("input:eq(0)").click(function(){             $("#single").val("2");       });       //設置多選下拉框選中       $("input:eq(1)").click(function(){             $("#multiple").val(["選擇2號", "選擇3號"]);       });       //設置單選框和多選框選中       $("input:eq(2)").click(function(){              $(":checkbox").val(["check2","check3"]);             $(":radio").val(["radio2"]);       });         });   //]]>   </script>     代碼如下: <script type="text/javascript">  //<![CDATA[   $(function(){       //設置單選下拉框選中       $("input:eq(0)").click(function(){             $("#single option").removeAttr("selected");  //移除屬性selected             $("#single option:eq(1)").attr("selected",true); //設置屬性selected       });       //設置多選下拉框選中       $("input:eq(1)").click(function(){             $("#multiple option").removeAttr("selected");  //移除屬性selected             $("#multiple option:eq(2)").attr("selected",true);//設置屬性selected             $("#multiple option:eq(3)").attr("selected",true);//設置屬性selected       });       //設置單選框和多選框選中       $("input:eq(2)").click(function(){             $(":checkbox").removeAttr("checked"); //移除屬性checked             $(":radio").removeAttr("checked"); //移除屬性checked             $(":checkbox[value=check2]").attr("checked",true);//設置屬性checked             $("[value=check3]:checkbox").attr("checked",true);//設置屬性checked             $("[value=radio2]:radio").attr("checked",true);//設置屬性checked       });      });   //]]>   </script>   :checkbox 表示屬性為checkbox  
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved