主要内容
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属性对
$(“
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>