JQuery(入门二)

最新推荐文章于 2021-09-25 15:07:58 发布

快乐的程序媛

最新推荐文章于 2021-09-25 15:07:58 发布

阅读量680

点赞数

分类专栏： JQuery 文章标签： JQuery

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

主要内容
1）掌握jQuery九类选择器及应用
2）掌握jQuery常用Method-API
3）掌握jQuery常用Event-API

一）jQuery九类选择器【参见jQueryAPI.chm手册】
目的：通过九类选择器，能定位web页面（HTML/JSP/XML）中的任何标签
（1）基本选择器【参见01_selector.html】

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"div1ID"</span>></span>div1<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"div2ID"</span>></span>div2<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"myClass"</span>></span>span<span class="hljs-tag"></<span class="hljs-title">span</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">p</span>></span>p<span class="hljs-tag"></<span class="hljs-title">p</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">

    <span class="hljs-comment">//1)查找ID为"div1ID"的元素个数</span>
    <span class="hljs-comment">//alert( $("#div1ID").size() );</span>

    <span class="hljs-comment">//2)查找DIV元素的个数</span>
    <span class="hljs-comment">//alert( $("div").length );</span>

    <span class="hljs-comment">//3)查找所有样式是"myClass"的元素的个数</span>
    <span class="hljs-comment">//alert( $(".myClass").size() );</span>

    <span class="hljs-comment">//4)查找所有DIV,SPAN,P元素的个数</span>
    <span class="hljs-comment">//alert( $("DIV,span,p").size() );</span>

    <span class="hljs-comment">//5)查找所有ID为div1ID,CLASS为myClass,P元素的个数</span>
    alert( $(<span class="hljs-string">"#div1ID,.myClass,p"</span>).size() );

    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>

  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span> </code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li></ul><div class="save_code tracking-ad" data-mod="popu_249" style="display: none;"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li></ul>

（2）层次选择器【参见02_selector.html】

<code class="hljs xml has-numbering"> <span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>
    <span class="hljs-comment"><!-- 
    <input type="radio" value="z"/>
    <input type="radio" value="e"/>
    <input type="radio" value="y"/>
    --></span>
    <span class="hljs-tag"><<span class="hljs-title">form</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"a"</span>/></span>      
        <span class="hljs-tag"><<span class="hljs-title">table</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">td</span>></span>
                    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"b"</span>/></span>
                <span class="hljs-tag"></<span class="hljs-title">td</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>           
        <span class="hljs-tag"></<span class="hljs-title">table</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">form</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"radio"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"ccccccccc"</span>/></span>
    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"radio"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"d"</span>/></span>
    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"radio"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"e"</span>/></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">

    <span class="hljs-comment">//1)找到表单form里所有的input元素的个数</span>
    <span class="hljs-comment">//alert( $("form input").size() );</span>

    <span class="hljs-comment">//2)找到表单form里所有的子级input元素个数</span>
    <span class="hljs-comment">//alert( $("form>input").size() );</span>

    <span class="hljs-comment">//3)找到表单form同级第一个input元素的value属性值</span>
    <span class="hljs-comment">//alert( $("form+input").val() );</span>

    <span class="hljs-comment">//4)找到所有与表单form同级的input元素个数</span>
    alert( $(<span class="hljs-string">"form~input"</span>).size() );

    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span>
</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li></ul>

（3）增强基本选择器【参见03_selector.html】

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">ul</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span>></span>list item 1<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span>></span>list item 2<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span>></span>list item 3<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span>></span>list item 4<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span>></span>list item 5<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">checked</span>/></span>
    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">checked</span>/></span>
    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span>/></span>

    <span class="hljs-tag"><<span class="hljs-title">table</span> <span class="hljs-attribute">border</span>=<span class="hljs-value">"1"</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">tr</span>></span><span class="hljs-tag"><<span class="hljs-title">td</span>></span>line1[0]<span class="hljs-tag"></<span class="hljs-title">td</span>></span><span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">tr</span>></span><span class="hljs-tag"><<span class="hljs-title">td</span>></span>line2[1]<span class="hljs-tag"></<span class="hljs-title">td</span>></span><span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">tr</span>></span><span class="hljs-tag"><<span class="hljs-title">td</span>></span>line3[2]<span class="hljs-tag"></<span class="hljs-title">td</span>></span><span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">tr</span>></span><span class="hljs-tag"><<span class="hljs-title">td</span>></span>line4[3]<span class="hljs-tag"></<span class="hljs-title">td</span>></span><span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">tr</span>></span><span class="hljs-tag"><<span class="hljs-title">td</span>></span>line5[4]<span class="hljs-tag"></<span class="hljs-title">td</span>></span><span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">tr</span>></span><span class="hljs-tag"><<span class="hljs-title">td</span>></span>line6[5]<span class="hljs-tag"></<span class="hljs-title">td</span>></span><span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">table</span>></span>    

    <span class="hljs-tag"><<span class="hljs-title">h1</span>></span>h1<span class="hljs-tag"></<span class="hljs-title">h1</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">h2</span>></span>h2<span class="hljs-tag"></<span class="hljs-title">h2</span>></span> 
    <span class="hljs-tag"><<span class="hljs-title">h3</span>></span>h3<span class="hljs-tag"></<span class="hljs-title">h3</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">p</span>></span>p<span class="hljs-tag"></<span class="hljs-title">p</span>></span>


    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
        <span class="hljs-comment">//1)查找UL中第一个LI元素的内容</span>
            <span class="hljs-comment">//html()要用于html/jsp，不能用在xml</span>
            <span class="hljs-comment">//text()既能用于html/jsp，且能用于xml</span>
            <span class="hljs-comment">//alert( $("ul li:first").text() );</span>

        <span class="hljs-comment">//2)查找UL中最后个元素的内容</span>
            <span class="hljs-comment">//alert( $("ul li:last").text() );</span>

        <span class="hljs-comment">//4)查找表格的索引号为1、3、5...奇数行个数，索引号从0开始</span>
            <span class="hljs-comment">//alert( $("table tr:odd").size() );</span>

        <span class="hljs-comment">//5)查找表格的索引号为2、4、6...偶数行个数，索引号从0开始</span>
            <span class="hljs-comment">//alert( $("table tr:even").size() );</span>

        <span class="hljs-comment">//6)查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式</span>
            <span class="hljs-comment">//html()：强调的是标签中的内容，即便标签中的子标签，也会显示出来</span>
            <span class="hljs-comment">//text()：强调的是标签中的文本内容，即便标签中的子标签，也只会显示出文本内容，不会显示子标签</span>
            <span class="hljs-comment">//alert( $("table tr:eq(1)").text() );</span>

        <span class="hljs-comment">//7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大</span>
            <span class="hljs-comment">//alert( $("table tr:gt(0)").size() );</span>

        <span class="hljs-comment">//8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小</span>
            <span class="hljs-comment">//alert( $("table tr:lt(3)").size() );</span>

        <span class="hljs-comment">//9)给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色</span>
            <span class="hljs-comment">//$(":header").css("background-color","red").css("color","#ffff33");</span>

        <span class="hljs-comment">//3)查找所有[未]选中的input为checkbox的元素个数</span>
            alert( $(<span class="hljs-string">":checkbox:not(:checked)"</span>).size() );

    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>

  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li></ul>

（4）内容选择器【参见04_selector.html】

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span>></span><span class="css">
        <span class="hljs-class">.myClass</span><span class="hljs-rules">{
            <span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"><span class="hljs-number">44</span>px</span></span>;
            <span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value">blue
        </span></span></span>}
    </span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">div</span>></span><span class="hljs-tag"><<span class="hljs-title">p</span>></span>John Resig<span class="hljs-tag"></<span class="hljs-title">p</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span>></span><span class="hljs-tag"><<span class="hljs-title">p</span>></span>George Martin<span class="hljs-tag"></<span class="hljs-title">p</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span>></span>Malcom John Sinclair<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span>></span>J. Ohn<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">p</span>></span><span class="hljs-tag"></<span class="hljs-title">p</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">p</span>></span><span class="hljs-tag"></<span class="hljs-title">p</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">

        <span class="hljs-comment">//1)查找所有包含文本"John"的div元素的个数</span>
            <span class="hljs-comment">//alert( $("div:contains('John')").size() );</span>

        <span class="hljs-comment">//2)查找所有p元素为空的元素个数</span>
            <span class="hljs-comment">//alert( $("p:empty").size() );</span>

        <span class="hljs-comment">//3)给所有包含p元素的div元素添加一个myClass样式</span>
            <span class="hljs-comment">//$("div:has(p)").addClass("myClass");</span>

        <span class="hljs-comment">//4)查找所有含有子元素或者文本的p元素个数,即p为父元素</span>
            alert( $(<span class="hljs-string">"p:parent"</span>).size() );

    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>

  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li></ul>

（5）可见性选择器【参见05_selector.html】

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">table</span> <span class="hljs-attribute">border</span>=<span class="hljs-value">"1"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"center"</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">tr</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"display:none"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">td</span>></span>Value 1<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
      <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">td</span>></span>Value 2<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
      <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">td</span>></span>Value 3<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
      <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">table</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
        <span class="hljs-comment">//1)查找隐藏的tr元素的个数</span>
        <span class="hljs-comment">//alert( $("table tr:hidden").size() );</span>

        <span class="hljs-comment">//2)查找所有可见的tr元素的个数</span>
        <span class="hljs-comment">//alert( $("table tr:NOT(:hidden)").size() );</span>
        alert( $(<span class="hljs-string">"table tr:visible"</span>).size() );<span class="hljs-comment">//提倡</span>
    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>

  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span> </code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li></ul>

（6）属性选择器【参见06_selector.html】

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">div</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">p</span>></span>Hello!<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"test2"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"newsletter"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"Hot Fuzz"</span>/></span>
    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"myID"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"newsletter"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"Cold Fusion"</span> /></span>
    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"newsaccept"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"Evil Plans"</span> /></span>

    <span class="hljs-comment"><!-- 
    <input type="checkbox" name="letternews" value="Hot Fuzz"/>
    <input id="myID" type="checkbox" name="letnewster" value="Cold Fusion" />
    <input type="checkbox" name="accNEWSept" value="Evil Plans" />
    --></span>

    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">

        <span class="hljs-comment">//1)查找所有含有id属性的div元素个数</span>
        <span class="hljs-comment">//alert( $('div[id]').size() );</span>

        <span class="hljs-comment">//2)查找所有name属性是newsletter的input元素，并将其选中</span>
        <span class="hljs-comment">//$("input[name='newsletter']").attr("checked","checked");</span>

        <span class="hljs-comment">//3)查找所有name属性不是newsletter的input元素，并将其选中</span>
        <span class="hljs-comment">//$("input[name!='newsletter']").attr("checked","true");</span>
        <span class="hljs-comment">/*
            请问：在JS中如下符号表示什么意思
            1)=/==/===
            2)!=/!==
            明天讲解
         */</span>
        <span class="hljs-comment">//4)查找所有name属性以'news'开头的input元素，并将其选中</span>
        <span class="hljs-comment">//$("input[name^='news']").attr("checked","checked");</span>

        <span class="hljs-comment">//5)查找所有name属性以'letter'结尾的input元素，并将其选中</span>
        <span class="hljs-comment">//$("input[name$='letter']").attr("checked","checked");</span>

        <span class="hljs-comment">//6)查找所有name属性包含'news'的input元素，并将其选中</span>
        <span class="hljs-comment">//$("input[name*='news']").attr("checked","checked");</span>

        <span class="hljs-comment">//7)找到所有含有id属性，并且它的name属性是以"letter"结尾的input元素，并将其选中</span>
        $(<span class="hljs-string">"input[id][name$='letter']"</span>).attr(<span class="hljs-string">"checked"</span>,<span class="hljs-string">"true"</span>);

    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>

  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li></ul>

（7）子元素选择器【参见07_selector.html】

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">ul</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">li</span>></span>John<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">li</span>></span>Karl<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">li</span>></span>Brandon<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">ul</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">li</span>></span>Glen<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">li</span>></span>Tane<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">li</span>></span>Ralph<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">ul</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">li</span>></span>Marry<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">ul</span>></span>
      <span class="hljs-tag"><<span class="hljs-title">li</span>></span>Jack<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>


    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">

        <span class="hljs-comment">/*1)迭代[each]每个ul中第1个li元素中的内容,索引从1开始
        $("ul li:first-child").each(function(){
            alert( $(this).text() );
        });
        */</span>

        <span class="hljs-comment">/*2)迭代每个ul中最后1个li元素中的内容,索引从1开始
        $("ul li:last-child").each(function(){
            alert( $(this).text() );
        });
        */</span>

        <span class="hljs-comment">/*4)迭代每个ul中第2个li元素中的内容,索引从1开始
        $("ul li:nth-child(2)").each(function(){
            alert( $(this).text() );
        });*/</span>

        <span class="hljs-comment">//3)在ul中查找是唯一子元素的li元素的内容</span>
        $(<span class="hljs-string">"ul li:only-child"</span>).each(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
            alert( $(<span class="hljs-keyword">this</span>).text() );
        });
  </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li></ul>

（8）表单选择器【参见08_selector.html】

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">form</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"Input Button"</span>/></span><span class="hljs-tag"><<span class="hljs-title">br</span>/></span>
        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span>/></span>
        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"file"</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span>/></span>
        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"hidden"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"id"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"123"</span>/></span><span class="hljs-tag"><<span class="hljs-title">br</span>/></span>
        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"image"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../images/lb.jpg"</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"25px"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"25px"</span>/></span><span class="hljs-tag"><<span class="hljs-title">br</span>/></span>
        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"password"</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span>/></span>
        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"radio"</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span>/></span>
        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"reset"</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span>/></span>
        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"submit"</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span>/></span>
        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span>/></span>
        <span class="hljs-tag"><<span class="hljs-title">select</span>></span><span class="hljs-tag"><<span class="hljs-title">option</span>></span>Option<span class="hljs-tag"></<span class="hljs-title">option</span>></span><span class="hljs-tag"></<span class="hljs-title">select</span>></span><span class="hljs-tag"><<span class="hljs-title">br</span>/></span>
        <span class="hljs-tag"><<span class="hljs-title">textarea</span>></span><span class="hljs-tag"></<span class="hljs-title">textarea</span>></span><span class="hljs-tag"><<span class="hljs-title">br</span>/></span>
        <span class="hljs-tag"><<span class="hljs-title">button</span>></span>Button<span class="hljs-tag"></<span class="hljs-title">button</span>></span><span class="hljs-tag"><<span class="hljs-title">br</span>/></span>
    <span class="hljs-tag"></<span class="hljs-title">form</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">

        <span class="hljs-comment">//1)查找所有input元素的个数</span>
        <span class="hljs-comment">//alert( $("input").size() );//10，找input标签</span>
        <span class="hljs-comment">//alert( $(":input").size() );//13，找input标签和select/textarea/button</span>

        <span class="hljs-comment">//2)查找所有文本框的个数</span>
        <span class="hljs-comment">//alert( $(":text").size() );</span>

        <span class="hljs-comment">//3)查找所有密码框的个数</span>
        <span class="hljs-comment">//alert( $(":password").size() );</span>

        <span class="hljs-comment">//4)查找所有单选按钮的个数</span>
        <span class="hljs-comment">//alert( $(":radio").size() );</span>

        <span class="hljs-comment">//5)查找所有复选框的个数</span>
        <span class="hljs-comment">//alert( $(":checkbox").size() );</span>

        <span class="hljs-comment">//6)查找所有提交按钮的个数</span>
        <span class="hljs-comment">//alert( $(":submit").size() );</span>

        <span class="hljs-comment">//7)匹配所有图像域的个数</span>
        <span class="hljs-comment">//alert( $(":images").size() );</span>

        <span class="hljs-comment">//8)查找所有重置按钮的个数</span>
        <span class="hljs-comment">//alert( $(":reset").size() );</span>

        <span class="hljs-comment">//9)查找所有普通按钮的个数</span>
        <span class="hljs-comment">//alert( $(":button").size() );</span>

        <span class="hljs-comment">//10)查找所有文件域的个数</span>
        <span class="hljs-comment">//alert( $(":file").size() );</span>

        <span class="hljs-comment">//11)查找所有input元素为隐藏域的个数</span>
        <span class="hljs-comment">//alert( $(":input:hidden").size() );</span>
    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span> </code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li></ul>

（9）表单对象属性选择器【参见09_selector.html】

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">form</span>></span>

      <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"email"</span> <span class="hljs-attribute">disabled</span>=<span class="hljs-value">"disabled"</span> /></span>
      <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"password"</span> <span class="hljs-attribute">disabled</span>=<span class="hljs-value">"disabled"</span> /></span>
      <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"id"</span> /></span>

      <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"newsletter"</span> <span class="hljs-attribute">checked</span>=<span class="hljs-value">"checked"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"Daily"</span> /></span>
      <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"newsletter"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"Weekly"</span> /></span>
      <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"newsletter"</span> <span class="hljs-attribute">checked</span>=<span class="hljs-value">"checked"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"Monthly"</span> /></span>

      <span class="hljs-tag"><<span class="hljs-title">select</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"provinceID"</span>></span>
          <span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"1"</span>></span>广东<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
          <span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"2"</span> <span class="hljs-attribute">selected</span>=<span class="hljs-value">"selected"</span>></span>湖南<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
          <span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"3"</span>></span>湖北<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
      <span class="hljs-tag"></<span class="hljs-title">select</span>></span>

    <span class="hljs-tag"></<span class="hljs-title">form</span>></span>



    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
        <span class="hljs-comment">//1)查找隐藏的tr元素的个数</span>
        <span class="hljs-comment">//alert($("table tr:hidden").size());</span>

        <span class="hljs-comment">//2)查找所有可见的tr元素的个数</span>
        <span class="hljs-comment">//alert($("table tr:not(:hidden)").size());</span>
        alert($(<span class="hljs-string">"table tr:visible"</span>).size());
    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>

  <span class="hljs-tag"></<span class="hljs-title">body</span>></span> 
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li></ul>

注意：项目中，通常是多种选择器一起使用

jQuery常用Method-API
目的：对web页面（HTML/JSP/XML）中的任何标签，属性，内容进行增删改查
（1）DOM简述与分类
（A）DOM是一种W3C官方标准规则，可访问任何标签语言的页面(HTML/JSP/XML)
（B）DOM是跨平台(window/linux/unix)，跨语言(JavaScript/Java)，
跨浏览器(ie/firefox/Chrome)的标准规则
（C）我们只需要按照DOM标准规则，针对主流浏览器(ie/firefox/Chrome)编程
（D）JS/jQuery按照DOM的标准规则，既可以操作HTML/JSP，也能操作CSS
（E）DOM标准规则不是JS的专属，其它语言，也能适用，例如:VBScript，Java语言等

（2）DOM标准规则下的jQuery常用API，注意：以下方法均由jQuery对象调用

each()：是jQuery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象
append()：追加到父元素之后
prepend()：追加到父元素之前
after()：追加到兄弟元素之后
before()：追加到兄弟元素之前
attr(name)：获取属性值
attr(name,value)：给符合条件的标签添加key-value属性对
$(“

HTML代码

“)：创建元素，属性，文本
remove()：删除自已及其后代节点
val()：获取value属性的值
val(“”)：设置value属性值为”“空串，相当于清空
text()：获取HTML或XML标签之间的值
text(“”)：设置HTML或XML标签之间的值为”“空串
clone()：只复制样式，不复制行为
clone(true)：既复制样式，又复制行为
replaceWith()：替代原来的节点
removeAttr()：删除已存在的属性
addClass()：增加已存在的样式
removeClass()：删除已存在的样式
hasClass()：判断标签是否有指定的样式，true表示有样式，false表示无样式
toggleClass()：如果标签有样式就删除，否则增加样式
offset()：获取对象的left和top坐标
offset({top:100,left:200})：将对象直接定位到指定的left和top坐标
width()：获取对象的宽
width(300)：设置对象的宽
height()：获取对象的高
height(500)：设置对象的高
children()：只查询子节点，不含后代节点
next()：下一下兄弟节点
prev()：上一下兄弟节点
siblings()：上下兄弟节点
show()：显示对象
hide()：隐藏对象
fadeIn()：淡入显示对象
fadeOut()：淡出隐藏对象
slideUp()：向上滑动
slideDown()：向下滑动
slideToggle()：上下切换滑动，速度快点

method案例

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>test.html<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"xx"</span>/></span>
    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"yy"</span>/></span>
    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"zz"</span>/></span>

    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
        alert( $(<span class="hljs-string">"input"</span>).val() );<span class="hljs-comment">//xx</span>
    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>

  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span>
</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li></ul>

each( )迭代

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">

        <span class="hljs-comment">/*用JS语法创建一个一维数组，存入string类型的姓名，再迭代
        var nameArray = new Array("哈哈","呵呵","嘻嘻");
        for(var i=0;i<nameArray.length;i++){
            document.write(nameArray[i]+"<br/>");
        }*/</span>

        <span class="hljs-comment">/*用JSON语法创建一个一维数组，存入string类型的姓名，再迭代
        var nameArray = ["哈哈","呵呵","嘻嘻","都都"];//js对象
        var $nameArray = $(nameArray);//jquery对象
        $nameArray.each(function(){
            this表示数组中每一个元素，this属性js对象，this代表string类型
            alert(this);
        });*/</span>   

        <span class="hljs-comment">//用JSON语法创建一个一维数组，存入object类型的姓名和薪水，再迭代</span>
        <span class="hljs-keyword">var</span> nameArray = [
            {
                name : <span class="hljs-string">"哈哈"</span>,
                sal : <span class="hljs-number">6000</span>
            },
            {   
                name : <span class="hljs-string">"嘿嘿"</span>,
                sal : <span class="hljs-number">7000</span>
            },
            {
                name : <span class="hljs-string">"笨笨"</span>,
                sal : <span class="hljs-number">8000</span>
            }
        ];
        <span class="hljs-keyword">var</span> $nameArray = $(nameArray);
        $nameArray.each(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
            <span class="hljs-comment">//this代表object类型</span>
            alert(<span class="hljs-keyword">this</span>.name + <span class="hljs-string">":"</span>+<span class="hljs-keyword">this</span>.sal);
        });

    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li></ul>

append/ prepend

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>method_1.html<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">ul</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span>></span>第一项<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span>></span>第二项<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span>></span>第三项<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">ul</span>></span> 

    <span class="hljs-tag"><<span class="hljs-title">hr</span>/></span>

    <span class="hljs-tag"><<span class="hljs-title">div</span>></span>这是子元素，要插入到父元素内<span class="hljs-tag"></<span class="hljs-title">div</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">

        <span class="hljs-comment">//DIV标签插入到UL标签之后(父子关系)</span>
        <span class="hljs-comment">//$("ul").append( $("div") );   </span>

        <span class="hljs-comment">//DIV标签插入到UL标签之前(父子关系)</span>
        $(<span class="hljs-string">"ul"</span>).prepend( $(<span class="hljs-string">"div"</span>) );

    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>

  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li></ul>

after/before

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>method_1.html<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">ul</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span>></span>第一项<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span>></span>第二项<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span>></span>第三项<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">ul</span>></span> 

    <span class="hljs-tag"><<span class="hljs-title">hr</span>/></span>

    <span class="hljs-tag"><<span class="hljs-title">div</span>></span>这是子元素，要插入到父元素外<span class="hljs-tag"></<span class="hljs-title">div</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
        <span class="hljs-comment">//DIV标签插入到UL标签之后(兄弟关系)</span>
        <span class="hljs-comment">//$("ul").after( $("div") ); </span>

        <span class="hljs-comment">//DIV标签插入到UL标签之前(兄弟关系)</span>
        $(<span class="hljs-string">"ul"</span>).before( $(<span class="hljs-string">"div"</span>) ); 
    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>

  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li></ul>

form/attr

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>method_1.html<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">form</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">table</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">td</span>></span>
                    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"username"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"张三"</span>/></span>
                <span class="hljs-tag"></<span class="hljs-title">td</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">td</span>></span>
                    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"password"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"password"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"123456"</span>/></span>
                <span class="hljs-tag"></<span class="hljs-title">td</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">table</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">form</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
        <span class="hljs-comment">//取得form里第一个input元素的type属性</span>
        <span class="hljs-comment">//alert( $("form input:first").attr("type") );</span>

        <span class="hljs-comment">//设置form里最后个input元素的为只读文本框</span>
        <span class="hljs-comment">//$("form input:last").attr("readonly","readonly")</span>
        <span class="hljs-comment">//$(":password").attr("readonly","readonly")</span>

    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>

  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li></ul>

createElement

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>method_1.html<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>



    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">

        <span class="hljs-comment">//创建div元素，添加"哈哈"文本，ID属性，并添加到文档中</span>
        <span class="hljs-comment">//<body><div id="2015">哈哈</div></body></span>

        <span class="hljs-comment">/*js方式
        var divElement = document.createElement("div");
        divElement.innerHTML = "哈哈哈";
        divElement.setAttribute("id","2015");
        divElement.id = "2015";
        document.body.appendChild(divElement);*/</span>

        <span class="hljs-comment">//jquery方式</span>
        <span class="hljs-keyword">var</span> $div = $(<span class="hljs-string">"<div id='2015'>哈哈哈哈哈</div>"</span>);
        <span class="hljs-comment">//$("body").append( $div );   </span>
        $(document.body).append( $div ); 

    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>

  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li></ul>

remove

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>method_1.html<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>


    <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"a"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span>></span>第一项<span class="hljs-tag"></<span class="hljs-title">li</span>></span>    
        <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"secondID"</span>></span>第二项<span class="hljs-tag"></<span class="hljs-title">li</span>></span>      
        <span class="hljs-tag"><<span class="hljs-title">li</span>></span>第三项<span class="hljs-tag"></<span class="hljs-title">li</span>></span>    
    <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"b"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">li</span>></span>第一条<span class="hljs-tag"></<span class="hljs-title">li</span>></span>    
        <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"secondID"</span>></span>第二条<span class="hljs-tag"></<span class="hljs-title">li</span>></span>      
        <span class="hljs-tag"><<span class="hljs-title">li</span>></span>第三条<span class="hljs-tag"></<span class="hljs-title">li</span>></span>    
    <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">div</span>></span>这是div元素<span class="hljs-tag"></<span class="hljs-title">div</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">

        <span class="hljs-comment">//删除ID为secondID的LI元素</span>
        <span class="hljs-comment">//$("#secondID").remove();</span>

        <span class="hljs-comment">//删除所有LI元素</span>
        <span class="hljs-comment">//$("#a li").remove();</span>

        <span class="hljs-comment">//删除UL元素</span>
        $(<span class="hljs-string">"#b"</span>).remove();

    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>   

  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li></ul>

val()/text()

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">div</span>></span>
        哈哈  
    <span class="hljs-tag"></<span class="hljs-title">div</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">select</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"city"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"帝都"</span>></span>北京<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">select</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">

        <span class="hljs-comment">//取得<div>中的内容</span>
        <span class="hljs-comment">//alert( $("div").text() );</span>

        <span class="hljs-comment">//取得<option>的值和描述</span>
        <span class="hljs-keyword">var</span> $option = $(<span class="hljs-string">"#city option"</span>);
        <span class="hljs-keyword">var</span> value = $option.val();
        <span class="hljs-keyword">var</span> html = $option.text();
        alert(value + <span class="hljs-string">":"</span> + html);

    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>

  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li></ul>

clone( )

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>method_1.html<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>


    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"原按钮"</span> <span class="hljs-attribute">onclick</span>=<span class="hljs-value">"alert('静态事件')"</span>/></span> 


    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">

        <span class="hljs-comment">//复制原input元素，添加到原input元素后，与其同级</span>
        <span class="hljs-keyword">var</span> $old = $(<span class="hljs-string">":button"</span>);
        <span class="hljs-keyword">var</span> $<span class="hljs-keyword">new</span> = $old.clone();
        $<span class="hljs-keyword">new</span>.val(<span class="hljs-string">"新按钮"</span>);
        $old.after( $<span class="hljs-keyword">new</span> );

        <span class="hljs-comment">//为原input元素动态添加单击事件，且复制原input元素，</span>
        <span class="hljs-comment">//var $old = $(":button");</span>
        <span class="hljs-comment">//$old.click(function(){</span>
        <span class="hljs-comment">//  alert("动态事件");</span>
        <span class="hljs-comment">//});</span>

        <span class="hljs-comment">//添加到原input元素后，与其同级，且和原按钮有一样的行为</span>
        <span class="hljs-comment">//var $new = $old.clone(true);</span>
        <span class="hljs-comment">//$new.val("新按钮");</span>
        <span class="hljs-comment">//$old.after( $new );</span>

    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span>
</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li></ul>

replaceWith()

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>method_1.html<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">table</span> <span class="hljs-attribute">border</span>=<span class="hljs-value">"1"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"center"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">td</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"width:165px;height:23px"</span>></span>
                    双击会被替换成文本框
                <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">td</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">td</span>></span>
                不会变
            <span class="hljs-tag"></<span class="hljs-title">td</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">table</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
        <span class="hljs-comment">//双击<div>中的文本，用文本框替换文本</span>
        $(<span class="hljs-string">"div"</span>).dblclick( <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
            <span class="hljs-keyword">var</span> $text = $(<span class="hljs-string">"<input type='text' style='width:165px;height:23px'/>"</span>);
            <span class="hljs-comment">//文本框替代div标签</span>
            $(<span class="hljs-keyword">this</span>).replaceWith( $text );
        } );
    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>

  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li></ul>

removeAttr()

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>method_1.html<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">table</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">td</span>></span>
                添加属性border/align/width
            <span class="hljs-tag"></<span class="hljs-title">td</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">td</span>></span>
                删除属性align
            <span class="hljs-tag"></<span class="hljs-title">td</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">table</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
        <span class="hljs-comment">//为<table>元素添加属性border/align/width</span>
        <span class="hljs-keyword">var</span> $table = $(<span class="hljs-string">"table"</span>).attr(<span class="hljs-string">"border"</span>,<span class="hljs-string">"2"</span>).attr(<span class="hljs-string">"align"</span>,<span class="hljs-string">"right"</span>).attr(<span class="hljs-string">"width"</span>,<span class="hljs-string">"60%"</span>)

        <span class="hljs-comment">//将<table>元素的align属性删除</span>
        $table.removeAttr(<span class="hljs-string">"align"</span>);
    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>

  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li></ul>

addClass()/removeClass/toggleClass()/hasClass()

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>method_1.html<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span>></span><span class="css">
        <span class="hljs-class">.myClass</span><span class="hljs-rules">{
            <span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"><span class="hljs-number">30</span>px</span></span>;
            <span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value">red
        </span></span></span>}
    </span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>
   <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">div</span>></span>无样式<span class="hljs-tag"></<span class="hljs-title">div</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"myClass"</span>></span>有样式<span class="hljs-tag"></<span class="hljs-title">div</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">

        <span class="hljs-comment">//为无样式的DIV添加样式</span>
        <span class="hljs-comment">//$("div:first").addClass("myClass");</span>

        <span class="hljs-comment">//为有样式的DIV删除样式</span>
        <span class="hljs-comment">//$("div:last").removeClass("myClass");</span>

        <span class="hljs-comment">//切换样式，即有样式的变成无样式，无样式的变成有样式</span>
        <span class="hljs-comment">//$("div").toggleClass("myClass");</span>

        <span class="hljs-comment">//最后一个DIV是否有样式</span>
        <span class="hljs-keyword">var</span> flag = $(<span class="hljs-string">"div:last"</span>).hasClass(<span class="hljs-string">"myClass"</span>);
        alert(flag?<span class="hljs-string">"有样式"</span>:<span class="hljs-string">"无样式"</span>);

    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>

  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li></ul>

offset()/height()/width()

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../images/zgl.jpg"</span>/></span>

    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">

        <span class="hljs-comment">//获取图片的坐标</span>
        <span class="hljs-comment">//var offset = $("img").offset();</span>
        <span class="hljs-comment">//var x = offset.left;</span>
        <span class="hljs-comment">//var y = offset.top;</span>
        <span class="hljs-comment">//alert(x+":"+y);</span>

        <span class="hljs-comment">//设置图片的坐标</span>
        <span class="hljs-comment">//$("img").offset({</span>
        <span class="hljs-comment">//  top:100,</span>
        <span class="hljs-comment">//  left:200</span>
        <span class="hljs-comment">//});</span>

        <span class="hljs-comment">//获取图片的宽高</span>
        <span class="hljs-comment">//var w = $("img").width();</span>
        <span class="hljs-comment">//var h = $("img").height();</span>
        <span class="hljs-comment">//alert(w+":"+h);</span>

        <span class="hljs-comment">//设置图片的宽高</span>
        $(<span class="hljs-string">"img"</span>).width(<span class="hljs-number">500</span>);
        $(<span class="hljs-string">"img"</span>).height(<span class="hljs-number">600</span>);

    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>

  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li></ul>

children()/next()/prev()/siblings()

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>method_1.html<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">p</span>></span>Hello<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">span</span>></span>
            Hello Again
            <span class="hljs-tag"><<span class="hljs-title">b</span>></span>
                Bold
            <span class="hljs-tag"></<span class="hljs-title">b</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">span</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">p</span>></span>And Again<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">span</span>></span>And Span<span class="hljs-tag"></<span class="hljs-title">span</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">

        <span class="hljs-comment">//取得div元素的直接子元素内容，不含后代元素</span>
        <span class="hljs-comment">//var $span = $("div").children();</span>
        <span class="hljs-comment">//var content = $span.html();//包含子标签</span>
        <span class="hljs-comment">//var content = $span.text();//不包含子标签</span>
        <span class="hljs-comment">//alert(content);</span>

        <span class="hljs-comment">//取得div元素的下一个同级的兄弟元素内容  </span>
        <span class="hljs-comment">//var $p = $("div").next();</span>
        <span class="hljs-comment">//alert( $p.text() );</span>

        <span class="hljs-comment">//取得div元素的上一个同级的兄弟元素内容</span>
        <span class="hljs-comment">//alert( $("div").prev().text() );</span>

        <span class="hljs-comment">//依次取得div元素的上下一个同级的所有兄弟元素的内容</span>
        <span class="hljs-keyword">var</span> $all = $(<span class="hljs-string">"div"</span>).siblings(<span class="hljs-string">"p"</span>);     
        $all.each(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
            alert( $(<span class="hljs-keyword">this</span>).html() );
        });

    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>   
  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li></ul>

show()/hide()

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">p</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../images/zgl.jpg"</span>/></span>
    <span class="hljs-tag"></<span class="hljs-title">p</span>></span> 

    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
        <span class="hljs-comment">//图片隐蔽</span>
        $(<span class="hljs-string">"img"</span>).hide(<span class="hljs-number">5000</span>);

        <span class="hljs-comment">//休息3秒</span>
        window.setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>

            <span class="hljs-comment">//图片显示</span>
            $(<span class="hljs-string">"img"</span>).show(<span class="hljs-number">5000</span>);

        },<span class="hljs-number">3000</span>);

    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li></ul>

fadeIn()/fadeOut()

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
     <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
   <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">p</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../images/zgl.jpg"</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"display:none"</span>/></span>
    <span class="hljs-tag"></<span class="hljs-title">p</span>></span>    

    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
        <span class="hljs-comment">//淡入显示图片</span>
        $(<span class="hljs-string">"img"</span>).fadeIn(<span class="hljs-number">3000</span>);
        <span class="hljs-comment">//淡出隐蔽图片</span>
        $(<span class="hljs-string">"img"</span>).fadeOut(<span class="hljs-number">3000</span>);
    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>   
  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li></ul>

slideToggle()

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">div</span>></span>
        中国0<span class="hljs-tag"><<span class="hljs-title">br</span>/></span>    
        中国1<span class="hljs-tag"><<span class="hljs-title">br</span>/></span>    
        中国2<span class="hljs-tag"><<span class="hljs-title">br</span>/></span>    
        中国3<span class="hljs-tag"><<span class="hljs-title">br</span>/></span>    
        中国4<span class="hljs-tag"><<span class="hljs-title">br</span>/></span>    
        中国5<span class="hljs-tag"><<span class="hljs-title">br</span>/></span>    
        中国6<span class="hljs-tag"><<span class="hljs-title">br</span>/></span>    
        中国7<span class="hljs-tag"><<span class="hljs-title">br</span>/></span>    
        中国8<span class="hljs-tag"><<span class="hljs-title">br</span>/></span>    
        中国9<span class="hljs-tag"><<span class="hljs-title">br</span>/></span>    
    <span class="hljs-tag"></<span class="hljs-title">div</span>></span> 

    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"我的好友"</span>/></span>

    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
        <span class="hljs-comment">//向上下滑动</span>
        $(<span class="hljs-string">":button"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
            <span class="hljs-comment">//div标标上下移动</span>
            $(<span class="hljs-string">"div"</span>).slideToggle(<span class="hljs-number">100</span>);
        });
    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>   

  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li></ul>

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
     <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
     <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">myclick</span><span class="hljs-params">()</span>{</span>
            <span class="hljs-comment">//使用jquery弹出奇数的tr标签下的td里的值，即A1,A2,A3,C1,C2,C3</span>
            <span class="hljs-keyword">var</span> $tr = $(<span class="hljs-string">"table tr:NOT(:last):even"</span>);
            <span class="hljs-comment">//在每个tr标签中查询td标签</span>
            $tr.each(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
                <span class="hljs-comment">//在tr标签中查询所有的td标签</span>
                <span class="hljs-keyword">var</span> $td = $(<span class="hljs-keyword">this</span>).find(<span class="hljs-string">"td"</span>);
                <span class="hljs-comment">//迭代</span>
                $td.each(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
                    <span class="hljs-keyword">var</span> content = $(<span class="hljs-keyword">this</span>).text();
                    alert(content);
                });
            });
        }
        <span class="hljs-comment">//写出另一种方式，比第一种更加easy</span>
     </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">table</span> <span class="hljs-attribute">border</span>=<span class="hljs-value">"2"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"center"</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"30%"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">td</span>></span>A1<span class="hljs-tag"></<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">td</span>></span>A2<span class="hljs-tag"></<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">td</span>></span>A3<span class="hljs-tag"></<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">td</span>></span>0<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">td</span>></span>B1<span class="hljs-tag"></<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">td</span>></span>B2<span class="hljs-tag"></<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">td</span>></span>B3<span class="hljs-tag"></<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">td</span>></span>1<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">td</span>></span>C1<span class="hljs-tag"></<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">td</span>></span>C2<span class="hljs-tag"></<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">td</span>></span>C3<span class="hljs-tag"></<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">td</span>></span>2<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">td</span>></span>D1<span class="hljs-tag"></<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">td</span>></span>D2<span class="hljs-tag"></<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">td</span>></span>D3<span class="hljs-tag"></<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">td</span>></span>3<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">td</span> <span class="hljs-attribute">colspan</span>=<span class="hljs-value">"3"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"center"</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"  测  试  "</span> <span class="hljs-attribute">onclick</span>=<span class="hljs-value">"myclick()"</span> /></span>
            <span class="hljs-tag"></<span class="hljs-title">td</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">td</span>></span>4<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">table</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li></ul>

jQuery常用Event-API
目的：对web页面（HTML/JSP）进行事件触发，完成特殊效果的处理
window.onload：在浏览器加载web页面时触发，可以写多次onload事件，但后者覆盖前者
ready：在浏览器加载web页面时触发，可以写多次ready事件，不会后者覆盖前者，依次从上向下执行，我们常用$(函数)简化
ready和onload同时存在时，二者都会触发执行，ready快于onload
change：当内容改变时触发
focus：焦点获取
select：选中所有的文本值
keyup/keydown/keypress：演示在IE和Firefox中获取event对象的不同
mousemove：在指定区域中不断移动触发
mouseover：鼠标移入时触发
mouseout：鼠标移出时触发
submit：在提交表单时触发，true表示提交到后台，false表示不提交到后台
click：单击触发
dblclick：双击触发
blur：焦点失去

案例

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>exe_1.html<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">p</span>></span>段落1<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">p</span>></span>段落2<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">p</span>></span>段落3<span class="hljs-tag"></<span class="hljs-title">p</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
        <span class="hljs-comment">//定位3个p标签</span>
        $(<span class="hljs-string">"p"</span>).click( <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
            alert( $(<span class="hljs-keyword">this</span>).text() );
        } )
    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>   
  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li></ul>

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>exe_2.html<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">form</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">table</span> <span class="hljs-attribute">border</span>=<span class="hljs-value">"1"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"center"</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"70%"</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">th</span>></span>用户名<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">th</span>></span>密码<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">th</span>></span>0<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">td</span>></span>张三<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">td</span>></span>123456<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">th</span>></span>1<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">td</span>></span>李四<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">td</span>></span>654321<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">th</span>></span>2<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">td</span>></span>王五<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">td</span>></span>162534<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">th</span>></span>3<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">table</span>></span> 
    <span class="hljs-tag"></<span class="hljs-title">form</span>></span>


    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">

        <span class="hljs-comment">//NO1)将索引号为奇数的行背景色设为蓝色</span>
        $(<span class="hljs-string">"table tr:odd"</span>).css(<span class="hljs-string">"background-color"</span>,<span class="hljs-string">"blue"</span>);

        <span class="hljs-comment">//NO2)将索引号为偶数的行背景色设为黄色</span>
        $(<span class="hljs-string">"table tr:even"</span>).css(<span class="hljs-string">"background-color"</span>,<span class="hljs-string">"yellow"</span>);

        <span class="hljs-comment">//NO3)将第一行背景色设为粉色</span>
        $(<span class="hljs-string">"table tr:first"</span>).css(<span class="hljs-string">"background-color"</span>,<span class="hljs-string">"pink"</span>);

    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>   

  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span> </code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li></ul>

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>exe_3.html<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"篮球"</span>/></span>篮球
    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"排球"</span>/></span>排球   
    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"羽毛球"</span>/></span>羽毛球 
    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"乒乓球"</span>/></span>乒乓球

    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"选中的个数"</span>/></span>
    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"依次显示选中的value"</span>/></span>

    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
        <span class="hljs-comment">//定位"选中的个数"按钮，同时添加单击事件</span>
        $(<span class="hljs-string">":button:first"</span>).click( <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
            <span class="hljs-comment">//获取选中的复选框个数</span>
            <span class="hljs-keyword">var</span> size = $(<span class="hljs-string">":checkbox:checked"</span>).size();  
            <span class="hljs-comment">//判断</span>
            <span class="hljs-keyword">if</span>(size == <span class="hljs-number">0</span>){
                alert(<span class="hljs-string">"这家伙太赖了"</span>);
            }<span class="hljs-keyword">else</span>{
                alert(<span class="hljs-string">"你选中了"</span>+size+<span class="hljs-string">"个项目"</span>);
            }
        } );
        <span class="hljs-comment">//定位"依次显示选中的value"按钮，同时添加单击事件</span>
        $(<span class="hljs-string">":button:last"</span>).click( <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
            <span class="hljs-comment">//获取选中的复选框</span>
            <span class="hljs-keyword">var</span> $checkbox = $(<span class="hljs-string">":checkbox:checked"</span>);
            <span class="hljs-comment">//迭代所有选中的复选框的value属性值</span>
            $checkbox.each(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
                <span class="hljs-comment">//alert( $(this).val() );//提倡</span>
                alert( <span class="hljs-keyword">this</span>.value );<span class="hljs-comment">//不提倡</span>
            });
        } );
    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>

  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li></ul>

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span>></span>   
        <span class="hljs-tag"><<span class="hljs-title">select</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"width:60px"</span> <span class="hljs-attribute">multiple</span> <span class="hljs-attribute">size</span>=<span class="hljs-value">"10"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"leftID"</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">option</span>></span>选项A<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">option</span>></span>选项B<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">option</span>></span>选项C<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">option</span>></span>选项D<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">option</span>></span>选项E<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">option</span>></span>选项F<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">option</span>></span>选项G<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">option</span>></span>选项H<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">option</span>></span>选项I<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">option</span>></span>选项J<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">select</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"position:absolute;left:100px;top:60px"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"批量右移"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"rightMoveID"</span>/></span>
    <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"position:absolute;left:100px;top:90px"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"全部右移"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"rightMoveAllID"</span>/></span>
    <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"position:absolute;left:220px;top:20px"</span>></span> 
        <span class="hljs-tag"><<span class="hljs-title">select</span> <span class="hljs-attribute">multiple</span> <span class="hljs-attribute">size</span>=<span class="hljs-value">"10"</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"width:60px"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"rightID"</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">select</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>

  <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">

        <span class="hljs-comment">//双击右移</span>
        <span class="hljs-comment">//定位左边的下拉框，同时添加双击事件</span>
        $(<span class="hljs-string">"#leftID"</span>).dblclick(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
            <span class="hljs-comment">//获取双击时选中的option标签</span>
            <span class="hljs-keyword">var</span> $option = $(<span class="hljs-string">"#leftID option:selected"</span>);
            <span class="hljs-comment">//将选中的option标签移动到右边的下拉框中</span>
            $(<span class="hljs-string">"#rightID"</span>).append( $option );
        });

        <span class="hljs-comment">//批量右移</span>
        <span class="hljs-comment">//定位批量右移按钮，同时添加单击事件</span>
        $(<span class="hljs-string">"#rightMoveID"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
            <span class="hljs-comment">//获取左边下拉框中选中的option标签</span>
            <span class="hljs-keyword">var</span> $option = $(<span class="hljs-string">"#leftID option:selected"</span>);
            <span class="hljs-comment">//将选中的option标签移动到右边的下拉框中</span>
            $(<span class="hljs-string">"#rightID"</span>).append( $option );
        });     

        <span class="hljs-comment">//全部右移</span>
        <span class="hljs-comment">//定位全部右移按钮，同时添加单击事件</span>
        $(<span class="hljs-string">"#rightMoveAllID"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
            <span class="hljs-comment">//获取左边下拉框中所有的option标签</span>
            <span class="hljs-keyword">var</span> $option = $(<span class="hljs-string">"#leftID option"</span>);
            <span class="hljs-comment">//将选中的option标签移动到右边的下拉框中</span>
            $(<span class="hljs-string">"#rightID"</span>).append( $option );
        });

  </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>

<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li></ul>

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> 
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">table</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"tableID"</span> <span class="hljs-attribute">border</span>=<span class="hljs-value">"1"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"center"</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"60%"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">thead</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>    
                <span class="hljs-tag"><<span class="hljs-title">th</span>></span>用户名<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">th</span>></span>密码<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">th</span>></span>操作<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">thead</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">tbody</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"tbodyID"</span>></span>
            <span class="hljs-comment"><!-- 动态增加行 
            <tr>
                <td>哈哈</td>
                <td>123</td>
                <td><input type="button" value="删除" οnclick=""/></td>
            </tr>
            --></span>
        <span class="hljs-tag"></<span class="hljs-title">tbody</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">table</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">hr</span>/></span>
    用户名：<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"usernameID"</span>/></span>
    密码：  <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"passwordID"</span>/></span>
            <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"增加"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"addID"</span>/></span>

  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>

  <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
        <span class="hljs-comment">//定位"增加"按钮，同时添加单击事件</span>
        $(<span class="hljs-string">"#addID"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
            <span class="hljs-comment">//获取用户名和密码的值</span>
            <span class="hljs-keyword">var</span> username = $(<span class="hljs-string">"#usernameID"</span>).val();
            <span class="hljs-keyword">var</span> password = $(<span class="hljs-string">"#passwordID"</span>).val();
            <span class="hljs-comment">//去掉二边的空格</span>
            username = $.trim(username);
            password = $.trim(password);
            <span class="hljs-comment">//如果用户名或密码没有填</span>
            <span class="hljs-keyword">if</span>(username.length == <span class="hljs-number">0</span> || password.length == <span class="hljs-number">0</span>){
                <span class="hljs-comment">//提示用户                  </span>
                alert(<span class="hljs-string">"用户名或密码没有填"</span>);
            }<span class="hljs-keyword">else</span>{
                <span class="hljs-comment">//创建1个tr标签</span>
                <span class="hljs-keyword">var</span> $tr = $(<span class="hljs-string">"<tr></tr>"</span>);
                <span class="hljs-comment">//创建3个td标签</span>
                <span class="hljs-keyword">var</span> $td1 = $(<span class="hljs-string">"<td>"</span>+username+<span class="hljs-string">"</td>"</span>);
                <span class="hljs-keyword">var</span> $td2 = $(<span class="hljs-string">"<td>"</span>+password+<span class="hljs-string">"</td>"</span>);
                <span class="hljs-keyword">var</span> $td3 = $(<span class="hljs-string">"<td></td>"</span>);
                <span class="hljs-comment">//创建input标签，设置为删除按钮</span>
                <span class="hljs-keyword">var</span> $del = $(<span class="hljs-string">"<input type='button' value='删除'>"</span>);
                <span class="hljs-comment">//为删除按钮动态添加单击事件</span>
                $del.click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
                    <span class="hljs-comment">//删除按钮所有的行，即$tr对象</span>
                    $tr.remove();
                });
                <span class="hljs-comment">//将删除按钮添加到td3标签中</span>
                $td3.append($del);
                <span class="hljs-comment">//将3个td标签依次添加到tr标签中</span>
                $tr.append($td1);
                $tr.append($td2);
                $tr.append($td3);
                <span class="hljs-comment">//将tr标签添加到tbody标签中</span>
                $(<span class="hljs-string">"#tbodyID"</span>).append($tr);
                <span class="hljs-comment">//清空用户名和密码文本框中的内容</span>
                $(<span class="hljs-string">"#usernameID"</span>).val(<span class="hljs-string">""</span>);
                $(<span class="hljs-string">"#passwordID"</span>).val(<span class="hljs-string">""</span>);
            }
        });
  </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>

<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li><li>72</li><li>73</li><li>74</li><li>75</li><li>76</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li><li>72</li><li>73</li><li>74</li><li>75</li><li>76</li></ul>

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">body</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">table</span> <span class="hljs-attribute">border</span>=<span class="hljs-value">"1"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"center"</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">thead</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
                    <span class="hljs-tag"><<span class="hljs-title">th</span>></span>状态<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
                    <span class="hljs-tag"><<span class="hljs-title">th</span>></span>用户名<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
                <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">thead</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">tbody</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
                    <span class="hljs-tag"><<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> /></span><span class="hljs-tag"></<span class="hljs-title">td</span>></span>
                    <span class="hljs-tag"><<span class="hljs-title">td</span>></span>赵<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
                <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
                    <span class="hljs-tag"><<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> /></span><span class="hljs-tag"></<span class="hljs-title">td</span>></span>
                    <span class="hljs-tag"><<span class="hljs-title">td</span>></span>钱<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
                <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
                    <span class="hljs-tag"><<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> /></span><span class="hljs-tag"></<span class="hljs-title">td</span>></span>
                    <span class="hljs-tag"><<span class="hljs-title">td</span>></span>孙<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
                <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
                    <span class="hljs-tag"><<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> /></span><span class="hljs-tag"></<span class="hljs-title">td</span>></span>
                    <span class="hljs-tag"><<span class="hljs-title">td</span>></span>李<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
                <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
                    <span class="hljs-tag"><<span class="hljs-title">td</span>></span><span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> /></span><span class="hljs-tag"></<span class="hljs-title">td</span>></span>
                    <span class="hljs-tag"><<span class="hljs-title">td</span>></span>周<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
                <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">tbody</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">tfoot</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
                    <span class="hljs-tag"><<span class="hljs-title">td</span>></span>
                        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> /></span>
                        全选
                    <span class="hljs-tag"></<span class="hljs-title">td</span>></span>
                    <span class="hljs-tag"><<span class="hljs-title">td</span>></span>
                        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"全反选"</span> /></span>
                    <span class="hljs-tag"></<span class="hljs-title">td</span>></span>
                <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">tfoot</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">table</span>></span>

        <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
            <span class="hljs-comment">//全选中和全取消</span>
            <span class="hljs-comment">//定位tfoot中的全选复选框，同时添加单击事件</span>
            $(<span class="hljs-string">"tfoot input:checkbox"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
                <span class="hljs-comment">//获取该全选复选框的状态</span>
                <span class="hljs-keyword">var</span> flag = <span class="hljs-keyword">this</span>.checked; 
                <span class="hljs-comment">//如果选中</span>
                <span class="hljs-keyword">if</span>(flag){
                    <span class="hljs-comment">//将tbody中的所有复选框选中</span>
                    $(<span class="hljs-string">"tbody input:checkbox"</span>).attr(<span class="hljs-string">"checked"</span>,<span class="hljs-string">"checked"</span>);
                <span class="hljs-comment">//如果未选中</span>
                }<span class="hljs-keyword">else</span>{
                    <span class="hljs-comment">//将tbody中的所有复选框取消</span>
                    $(<span class="hljs-string">"tbody input:checkbox"</span>).removeAttr(<span class="hljs-string">"checked"</span>);
                }
            });

        </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>

        <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
            <span class="hljs-comment">//全反选</span>
            <span class="hljs-comment">//定位tfoot标签中的全反选按钮，同时添加单击事件</span>
            $(<span class="hljs-string">"tfoot input:button"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
                <span class="hljs-comment">//将tbody标签中的所有选中的复选框失效</span>
                $(<span class="hljs-string">"tbody input:checkbox:checked"</span>).attr(<span class="hljs-string">"disabled"</span>,<span class="hljs-string">"disabled"</span>);
                <span class="hljs-comment">//将tbody标签中的所有生效的复选框选中</span>
                $(<span class="hljs-string">"tbody input:checkbox:enabled"</span>).attr(<span class="hljs-string">"checked"</span>,<span class="hljs-string">"checked"</span>);
                <span class="hljs-comment">//将tbody标签中的所有生效的复选框生效且设置为未选中</span>
                $(<span class="hljs-string">"tbody input:checkbox:disabled"</span>).removeAttr(<span class="hljs-string">"disabled"</span>).removeAttr(<span class="hljs-string">"checked"</span>);
            });

        </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>

    <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li><li>72</li><li>73</li><li>74</li><li>75</li><li>76</li><li>77</li><li>78</li><li>79</li><li>80</li><li>81</li><li>82</li><li>83</li><li>84</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li><li>72</li><li>73</li><li>74</li><li>75</li><li>76</li><li>77</li><li>78</li><li>79</li><li>80</li><li>81</li><li>82</li><li>83</li><li>84</li></ul>

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span>
<span class="hljs-tag"><<span class="hljs-title">html</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"content-type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span>></span><span class="css">
        <span class="hljs-class">.myClass</span><span class="hljs-rules">{
            <span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value">inactivecaption
        </span></span></span>}
    </span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../js/jquery-1.8.2.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">table</span> <span class="hljs-attribute">border</span>=<span class="hljs-value">"1"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"center"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">th</span>></span>用户名<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">td</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"输入用户名"</span>/></span>
            <span class="hljs-tag"></<span class="hljs-title">td</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">table</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript">
    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>   

  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" /></a></div><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li></ul>

转自：http://blog.csdn.net/zxiang248/article/details/52194609

快乐的程序媛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery(入门二)

主要内容 1）掌握jQuery九类选择器及应用2）掌握jQuery常用Method-API 3）掌握jQuery常用Event-API一）jQuery九类选择器【参见jQueryAPI.chm手册】目的：通过九类选择器，能定位web页面（HTML/JSP/XML）中的任何标签（1）基本选择器【参见01_selector.html】html> head>
复制链接

扫一扫

专栏目录