JQuery（入门一）
来源：互联网 发布：cpda数据分析师 假 编辑：程序博客网 时间：2024/05/30 05:01
主要内容
1）掌握JSON及其应用
2）了解jQuery的背景和特点
3）理解js对象和jQuery对象的区别
4）掌握jQuery九类选择器及应用（上）
什么是JSON ？
（1）JSON（Java Script Object Notation（记号,标记））是一种轻量级的数据交换语言，以文本字符串为基础，且易于让人阅读
注意：XML就是一个重量级的数据交换语言
（2）JSON采用完全独立于任何程序语言的文本格式，使JSON成为理想的数据交换语言
JSON的作用
（1）简化创建自定义对象的方式
注意：JSON就是用JS语法来书写，所以必须放在<script>标签中在用JS语法书写JSON时，最外面不要用”“双引号
<code class="hljs javascript has-numbering"><span class="hljs-keyword">var</span> p = { id:<span class="hljs-number">1</span>, name:<span class="hljs-string">"哈哈"</span>, tel:[ { no:<span class="hljs-string">"135"</span>, type:<span class="hljs-string">"中移动"</span> }, { no:<span class="hljs-string">"133"</span>, type:<span class="hljs-string">"中联通"</span> } ], show:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(username)</span>{</span> alert(<span class="hljs-string">"你的姓名是:"</span> + p.name+<span class="hljs-string">":"</span>+username); }, isSingle:<span class="hljs-literal">false</span> };<span class="hljs-keyword">var</span> p = {<span class="hljs-string">'city'</span>:[<span class="hljs-string">'北京'</span>,<span class="hljs-string">'上海'</span>,<span class="hljs-string">'广州'</span>,<span class="hljs-string">'深圳'</span>]};<span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>;i<p.city.length;i++){ document.write(p.city[i]+<span class="hljs-string">"<br/>"</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></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></ul>（2）在AJAX中，作为数据载体之一
注意：JS可以直接解析JSON格式的文本，前提是：该JSON必须采用JS格式书写的才行，如果该JSON是采用Java格式写的，必须使用eval()函数转换后，方可被JS解析，该eval(“”)函数接收一个字符串格式的内容。
（3）省份-城市-区域三级联动【Struts2 + JSON版】
切记：将来JSON是不能完完全全替代XML的，只能在定义对象和数据交换语言方面替代
action
<code class="hljs java has-numbering"><span class="hljs-javadoc">/** * 根据省份查询城市 */</span> <span class="hljs-keyword">public</span> String <span class="hljs-title">findCityByProvinceMethod</span>() <span class="hljs-keyword">throws</span> Exception{ cityList = <span class="hljs-keyword">new</span> ArrayList<String>(); <span class="hljs-keyword">if</span>(<span class="hljs-string">"湖北"</span>.equals(province)){ cityList.add(<span class="hljs-string">"武汉"</span>); cityList.add(<span class="hljs-string">"黄岗"</span>); }<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(<span class="hljs-string">"湖南"</span>.equals(province)){ cityList.add(<span class="hljs-string">"岳阳"</span>); cityList.add(<span class="hljs-string">"张家界"</span>); }<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(<span class="hljs-string">"广东"</span>.equals(province)){ cityList.add(<span class="hljs-string">"韶关"</span>); cityList.add(<span class="hljs-string">"东莞"</span>); } <span class="hljs-keyword">return</span> <span class="hljs-string">"ok"</span>; } <span class="hljs-javadoc">/** * 根据城市查询区域 */</span> <span class="hljs-keyword">public</span> String <span class="hljs-title">findAreaByCityMethod</span>() <span class="hljs-keyword">throws</span> Exception{ areaList = <span class="hljs-keyword">new</span> ArrayList<String>(); <span class="hljs-keyword">if</span>(<span class="hljs-string">"武汉"</span>.equals(city)){ areaList.add(<span class="hljs-string">"AA"</span>); areaList.add(<span class="hljs-string">"BB"</span>); }<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(<span class="hljs-string">"黄岗"</span>.equals(city)){ areaList.add(<span class="hljs-string">"CC"</span>); areaList.add(<span class="hljs-string">"DD"</span>); }<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(<span class="hljs-string">"岳阳"</span>.equals(city)){ areaList.add(<span class="hljs-string">"EE"</span>); areaList.add(<span class="hljs-string">"FF"</span>); }<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(<span class="hljs-string">"张家界"</span>.equals(city)){ areaList.add(<span class="hljs-string">"GG"</span>); areaList.add(<span class="hljs-string">"HH"</span>); }<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(<span class="hljs-string">"韶关"</span>.equals(city)){ areaList.add(<span class="hljs-string">"II"</span>); areaList.add(<span class="hljs-string">"JJ"</span>); }<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(<span class="hljs-string">"东莞"</span>.equals(city)){ areaList.add(<span class="hljs-string">"KK"</span>); areaList.add(<span class="hljs-string">"LL"</span>); } <span class="hljs-keyword">return</span> <span class="hljs-string">"ok"</span>; }<span class="hljs-keyword">private</span> List<String> cityList; <span class="hljs-keyword">private</span> List<String> areaList; <span class="hljs-keyword">public</span> List<String> <span class="hljs-title">getCityList</span>() { <span class="hljs-keyword">return</span> cityList; } <span class="hljs-keyword">public</span> List<String> <span class="hljs-title">getAreaList</span>() { <span class="hljs-keyword">return</span> areaList; }</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></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><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></ul>struts.xml
<code class="hljs xml has-numbering"> <span class="hljs-tag"><<span class="hljs-title">package</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"provinceCityAreaPackage"</span> <span class="hljs-attribute">extends</span>=<span class="hljs-value">"json-default"</span> <span class="hljs-attribute">namespace</span>=<span class="hljs-value">"/"</span>></span> <span class="hljs-tag"><<span class="hljs-title">action</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"findCityByProvinceRequest"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"cn.itcast.javaee.js.provincecityarea.ProvinceCityAreaAction"</span> <span class="hljs-attribute">method</span>=<span class="hljs-value">"findCityByProvinceMethod"</span>></span> <span class="hljs-tag"><<span class="hljs-title">result</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"ok"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"json"</span>></span> <span class="hljs-tag"></<span class="hljs-title">result</span>></span> <span class="hljs-tag"></<span class="hljs-title">action</span>></span> <span class="hljs-tag"></<span class="hljs-title">package</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></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></ul>
导入：struts2-json-plugin-2.3.1.1.jar
<code class="hljs lasso has-numbering">三）使用第三方工具，将JavaBean对象/<span class="hljs-built_in">List</span>或<span class="hljs-built_in">Set</span>或<span class="hljs-built_in">Map</span>对象转成JSON 准备导入第三方jar包： 》commons<span class="hljs-attribute">-beanutils</span><span class="hljs-subst">-</span><span class="hljs-number">1.7</span><span class="hljs-number">.0</span><span class="hljs-built_in">.</span>jar 》commons<span class="hljs-attribute">-collections</span><span class="hljs-subst">-</span><span class="hljs-number">3.1</span><span class="hljs-built_in">.</span>jar 》commons<span class="hljs-attribute">-lang</span><span class="hljs-subst">-</span><span class="hljs-number">2.5</span><span class="hljs-built_in">.</span>jar 》commons<span class="hljs-attribute">-logging</span><span class="hljs-subst">-</span><span class="hljs-number">1.1</span><span class="hljs-number">.1</span><span class="hljs-built_in">.</span>jar 》ezmorph<span class="hljs-subst">-</span><span class="hljs-number">1.0</span><span class="hljs-number">.3</span><span class="hljs-built_in">.</span>jar 》json<span class="hljs-attribute">-lib</span><span class="hljs-subst">-</span><span class="hljs-number">2.1</span><span class="hljs-attribute">-jdk15</span><span class="hljs-built_in">.</span>jar （<span class="hljs-number">1</span>）JavaBean<span class="hljs-subst">-----></span>JSON JSONArray jsonArray <span class="hljs-subst">=</span> JSONArray<span class="hljs-built_in">.</span>fromObject(city); <span class="hljs-built_in">String</span> jsonJAVA <span class="hljs-subst">=</span> jsonArray<span class="hljs-built_in">.</span>toString(); （<span class="hljs-number">2</span>）<span class="hljs-built_in">List</span><span class="hljs-subst"><</span>JavaBean<span class="hljs-subst">>-----></span>JSON JSONArray jsonArray <span class="hljs-subst">=</span> JSONArray<span class="hljs-built_in">.</span>fromObject(cityList); <span class="hljs-built_in">String</span> jsonJAVA <span class="hljs-subst">=</span> jsonArray<span class="hljs-built_in">.</span>toString(); （<span class="hljs-number">3</span>）<span class="hljs-built_in">List</span><span class="hljs-subst"><</span><span class="hljs-built_in">String</span><span class="hljs-subst">>-----></span>JSON JSONArray jsonArray <span class="hljs-subst">=</span> JSONArray<span class="hljs-built_in">.</span>fromObject(stringList); <span class="hljs-built_in">String</span> jsonJAVA <span class="hljs-subst">=</span> jsonArray<span class="hljs-built_in">.</span>toString(); （<span class="hljs-number">4</span>）<span class="hljs-built_in">Set</span><span class="hljs-subst"><</span>JavaBean<span class="hljs-subst">>-----></span>JSON JSONArray jsonArray <span class="hljs-subst">=</span> JSONArray<span class="hljs-built_in">.</span>fromObject(citySet); <span class="hljs-built_in">String</span> jsonJAVA <span class="hljs-subst">=</span> jsonArray<span class="hljs-built_in">.</span>toString(); （<span class="hljs-number">5</span>）<span class="hljs-built_in">Map</span><span class="hljs-subst"><</span><span class="hljs-built_in">String</span>,Object<span class="hljs-subst">>-----></span>JSON JSONArray jsonArray <span class="hljs-subst">=</span> JSONArray<span class="hljs-built_in">.</span>fromObject(<span class="hljs-built_in">map</span>); <span class="hljs-built_in">String</span> jsonJAVA <span class="hljs-subst">=</span> jsonArray<span class="hljs-built_in">.</span>toString(); 最后一个例子切记，将来jQuery<span class="hljs-attribute">-EasyUI</span><span class="hljs-attribute">-DataGrid</span>组件时我们还要用到 将来，在企业中，就算脱离struts2的环境，也能用第三方工具，将Java类型转成JSON文本</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>
总结JSON的特点
（1）在客户端（特指PC浏览器），直接使用JavaScript语言解析JSON，无需第三方jar包
（2）本质上，就是一个文本，只是该文本有特定的书写格式
（3）可以使用第三方工具，将JavaBean对象或者List/Set/Map对象转成JSON
（4）优点：JSON与XML很相似，但是它更加轻巧，服务器只需发送一个html普通字符串，不用发送复杂的xml格式文档了
（5）缺点：语法过于严谨，初学者可能觉得代码不易读，写错一点都不行
（6）JSON本质上，就是用JS语法写的特殊文本记号，用JS可以直接解析
模拟jQuery库，体验使用第三方实用库的特点【图片隐藏与显示】
学会：JS的封装思想
学会：创建自定义对象和优化方法
学会：引用第三方实用的库，该库中预定义大量实用的对象和函数
学会：查阅第三方实用的库提供的API手册
</pre><pre name="code" class="html"><code class="hljs javascript has-numbering"> <span class="hljs-comment">//定义一个Photo函数，看作是一个类</span><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Photo</span><span class="hljs-params">()</span>{</span> <span class="hljs-comment">//属性</span> <span class="hljs-keyword">var</span> imgElement = document.images[<span class="hljs-number">0</span>]; <span class="hljs-comment">//方法</span> <span class="hljs-keyword">this</span>.show = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span> imgElement.style.visibility = <span class="hljs-string">"visible"</span>; } <span class="hljs-keyword">this</span>.hide = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span> imgElement.style.visibility = <span class="hljs-string">"hidden"</span>; }}<span class="hljs-comment">//定义一个$()函数，用来定位标签</span><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">$</span><span class="hljs-params">(str)</span>{</span> <span class="hljs-comment">//如果str变量是字符串类型</span> <span class="hljs-keyword">if</span>( <span class="hljs-keyword">typeof</span>(str) == <span class="hljs-string">"string"</span> ){ <span class="hljs-comment">//获取str变量中的第一个字符</span> <span class="hljs-keyword">var</span> init = str.substring(<span class="hljs-number">0</span>,<span class="hljs-number">1</span>); <span class="hljs-comment">//如果第一个字符是#的话</span> <span class="hljs-keyword">if</span>(<span class="hljs-string">"#"</span> == init){ <span class="hljs-comment">//获取str变量中除第一个字符外的其它字符</span> <span class="hljs-keyword">var</span> other = str.substring(<span class="hljs-number">1</span>,str.length); <span class="hljs-comment">//通过ID定位节点</span> <span class="hljs-keyword">var</span> element = document.getElementById(other); <span class="hljs-comment">//如果找到了节点</span> <span class="hljs-keyword">if</span>(element != <span class="hljs-literal">null</span>){ <span class="hljs-comment">//返回</span> <span class="hljs-keyword">return</span> element; }<span class="hljs-keyword">else</span>{ <span class="hljs-comment">//返回</span> <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>; } }<span class="hljs-keyword">else</span>{ <span class="hljs-comment">//继续判断</span> } }<span class="hljs-keyword">else</span>{ alert(<span class="hljs-string">"参数必须为string类型"</span>); } }<script type=<span class="hljs-string">"text/javascript"</span>> <span class="hljs-comment">//创建一个Photo对象</span> <span class="hljs-keyword">var</span> p = <span class="hljs-keyword">new</span> Photo(); <span class="hljs-comment">//定位隐藏按钮，同时添加单击事件</span> $(<span class="hljs-string">"#hide"</span>).onclick = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span> <span class="hljs-comment">//调用Photo对象的方法</span> p.hide(); } <span class="hljs-comment">//定位显示按钮，同时添加单击事件</span> $(<span class="hljs-string">"#show"</span>).onclick = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span> <span class="hljs-comment">//调用Photo对象的方法</span> p.show(); }<<span class="hljs-regexp">/script></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></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></ul>jQuery是什么
John Resig在2006年1月发布的一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操作
为什么要使用jQuery?
（1）写少代码,做多事情【write less do more】
（2）免费，开源且轻量级的js库，容量很小
注意：项目中，提倡引用min版的js库
（3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome
注意：jQuery不是将所有JS全部封装，只是有选择的封装
（4）能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX功能
（5）文档手册很全，很详细
（6）成熟的插件可供选择
（7）提倡对主要的html标签提供一个id属性，但不是必须的
（8）出错后，有一定的提示信息
（9）不用再在html里面通过<script>标签插入一大堆js来调用命令了
jQuery开发步骤
（1）引用第三方js库文件，<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
（2）查阅并使用api手册
<code class="hljs php has-numbering"><span class="hljs-comment">//var divElement = document.getElementById("divID");</span><span class="hljs-keyword">var</span> <span class="hljs-variable">$div</span> = $(<span class="hljs-string">"#divID"</span>);<span class="hljs-comment">//var html = divElement.innerHTML;</span><span class="hljs-keyword">var</span> html = <span class="hljs-variable">$div</span>.html();alert(html);</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</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></ul>js对象和jQuery对象相互转换
（1）什么是js对象及代码规则
就是使用js-API，即Node接口中的API或是传统JS语法定义的对象，叫做js对象
js代码规则—-divElement
var divElement = document.getElementById("divID"); var nameArray = new Array(3);（2）什么是jQuery对象及代码规则
就是使用jQuery-API，返回的对象就叫做jQuery对象
jQuery代码规则—-$div
<code class="hljs ruby has-numbering"> var <span class="hljs-variable">$div</span> = <span class="hljs-variable">$(</span><span class="hljs-string">"#divID"</span>)</code><ul class="pre-numbering"><li>1</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></ul>
（3）js对象转成jQuery对象【重点】
<code class="hljs ruby has-numbering"> 语法：<span class="hljs-variable">$(</span>js对象)---->jQuery对象 例如：<span class="hljs-variable">$(</span>divElement)----><span class="hljs-variable">$div</span> 例如：<span class="hljs-variable">$(</span>this)----><span class="hljs-variable">$this</span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</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></ul>
注意：jQuery对象将js对象做了封装，js对象二边无引号<code class="hljs php has-numbering"><span class="hljs-keyword">var</span> inputElement = document.getElementById(<span class="hljs-string">"inputID"</span>);<span class="hljs-comment">//js对象 </span><span class="hljs-keyword">var</span> <span class="hljs-variable">$input</span> = $(inputElement);<span class="hljs-comment">//jquery对象</span><span class="hljs-keyword">var</span> txt = <span class="hljs-variable">$input</span>.val();alert(txt);</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</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></ul>
（4）jQuery对象转成js对象
<code class="hljs livecodeserver has-numbering"> 语法<span class="hljs-number">1</span>：jQuery对象[下标，从<span class="hljs-number">0</span>开始] 语法<span class="hljs-number">2</span>：jQuery对象.<span class="hljs-built_in">get</span>(下标，从<span class="hljs-number">0</span>开始) 例如：$<span class="hljs-operator">div</span>[<span class="hljs-number">0</span>]<span class="hljs-comment">---->divElement</span></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</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></ul>
注意：不同的对象只能调用对应的api方法，即jQuery对象不能调用js对象的api，反之亦然 $div.innerHTML（错） divElement.html(错) <code class="hljs php has-numbering"><span class="hljs-keyword">var</span> <span class="hljs-variable">$div</span> = $(<span class="hljs-string">"#divID"</span>);<span class="hljs-comment">//jquery对象</span><span class="hljs-keyword">var</span> divElement = <span class="hljs-variable">$div</span>[<span class="hljs-number">0</span>];<span class="hljs-comment">//js对象(方式一)</span><span class="hljs-comment">//var divElement = $div.get(0);//js对象(方式二)</span><span class="hljs-keyword">var</span> txt = divElement.innerHTML; alert(txt);</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</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></ul>
js对象和jQuery对象的区别
<code class="hljs avrasm has-numbering">（<span class="hljs-number">1</span>）js对象的三种基本定位方式 （A）通过ID属性：document<span class="hljs-preprocessor">.getElementById</span>() （B）通过NAME属性：document<span class="hljs-preprocessor">.getElementsByName</span>() （C）通过标签名：document<span class="hljs-preprocessor">.getElementsByTagName</span>() （<span class="hljs-number">2</span>）jQuery对象的三种基本定位方式 （A）通过ID属性：$(<span class="hljs-string">"#id属性值"</span>) （B）通过标签名：$(<span class="hljs-string">"标签名"</span>) （C）通过CLASS属性：$(<span class="hljs-string">".样式名"</span>) （<span class="hljs-number">3</span>）js对象出错的显示 没有合理的提示信息 例如：alert(document<span class="hljs-preprocessor">.getElementById</span>(<span class="hljs-string">"usernameIDD"</span>)<span class="hljs-preprocessor">.value</span>) （<span class="hljs-number">4</span>）jQuery对象出错的显示 有合理的提示信息，例如：undefined 例如：alert($(<span class="hljs-string">"#usernameIDD"</span>)<span class="hljs-preprocessor">.val</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></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></ul>
jQuery九类选择器（上）【参见jQueryAPI.chm手册】
目的：通过选择器，能定位web页面（HTML/JSP/XML）中的任何标签
（1）基本选择器【参见selector_1.html】
<code class="hljs mel has-numbering"> <span class="hljs-comment">//1)查找ID为"div1ID"的元素个数</span> alert( <span class="hljs-variable">$(</span><span class="hljs-string">"#div1ID"</span>).<span class="hljs-keyword">size</span>() ); <span class="hljs-comment">//2)查找DIV元素的个数</span> alert( <span class="hljs-variable">$(</span><span class="hljs-string">"div"</span>).<span class="hljs-keyword">size</span>() ); <span class="hljs-comment">//3)查找所有样式是"myClass"的元素的个数</span> alert( <span class="hljs-variable">$(</span><span class="hljs-string">".myClass"</span>).<span class="hljs-keyword">size</span>() ); <span class="hljs-comment">//4)查找所有DIV,SPAN,P元素的个数</span> alert( <span class="hljs-variable">$(</span><span class="hljs-string">"div,span,p"</span>).<span class="hljs-keyword">size</span>() ); <span class="hljs-comment">//5)查找所有ID为div1ID,CLASS为myClass,P元素的个数</span> alert( <span class="hljs-variable">$(</span><span class="hljs-string">'#div1ID,.myClass,p'</span>).<span class="hljs-keyword">size</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></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></ul>
（2）层次选择器【参见selector_2.html】
<code class="hljs mel has-numbering"> <span class="hljs-comment">//1)找到表单form里所有的input元素的个数</span> alert( <span class="hljs-variable">$(</span><span class="hljs-string">"form input"</span>).<span class="hljs-keyword">size</span>() ); <span class="hljs-comment">//2)找到表单form里所有的子级input元素个数</span> alert( <span class="hljs-variable">$(</span><span class="hljs-string">"form > input"</span>).<span class="hljs-keyword">size</span>() ); <span class="hljs-comment">//3)找到表单form同级第一个input元素的value属性值</span> alert( <span class="hljs-variable">$(</span><span class="hljs-string">"form + input"</span>).val() ); <span class="hljs-comment">//4)找到所有与表单form同级的input元素个数</span> alert( <span class="hljs-variable">$(</span><span class="hljs-string">"form ~ input"</span>).<span class="hljs-keyword">size</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></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></ul>
（3）增强基本选择器【参见selector_3.html】
<code class="hljs mel has-numbering"><span class="hljs-comment">//1)查找UL中第一个元素的内容</span> alert( <span class="hljs-variable">$(</span><span class="hljs-string">"ul li:first"</span>).<span class="hljs-keyword">text</span>() ); <span class="hljs-comment">//2)查找UL中最后个元素的内容</span> alert( <span class="hljs-variable">$(</span><span class="hljs-string">"ul li:last"</span>).<span class="hljs-keyword">text</span>() ); <span class="hljs-comment">//4)查找表格的索引号为1、3、5...奇数行个数，索引号从0开始</span> alert( <span class="hljs-variable">$(</span><span class="hljs-string">"table tr:odd"</span>).<span class="hljs-keyword">size</span>() ); <span class="hljs-comment">//5)查找表格的索引号为2、4、6...偶数行个数，索引号从0开始</span> alert( <span class="hljs-variable">$(</span><span class="hljs-string">"table tr:even"</span>).<span class="hljs-keyword">size</span>() ); <span class="hljs-comment">//6)查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式</span> alert( <span class="hljs-variable">$(</span><span class="hljs-string">"table tr td:eq(1)"</span>).<span class="hljs-keyword">text</span>() ); <span class="hljs-comment">//7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大</span> alert( <span class="hljs-variable">$(</span><span class="hljs-string">"table tr:gt(0)"</span>).<span class="hljs-keyword">size</span>() ); <span class="hljs-comment">//8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小</span> alert( <span class="hljs-variable">$(</span><span class="hljs-string">"table tr:lt(2)"</span>).<span class="hljs-keyword">size</span>() ); <span class="hljs-comment">//9)给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色</span> <span class="hljs-variable">$(</span><span class="hljs-string">":header"</span>).css(<span class="hljs-string">"background-color"</span>,<span class="hljs-string">"red"</span>).css(<span class="hljs-string">"color"</span>,<span class="hljs-string">"blue"</span>); <span class="hljs-comment">//3)查找所有未选中的input为checkbox的元素个数</span> alert( <span class="hljs-variable">$(</span><span class="hljs-string">":checkbox:NOT(:checked)"</span>).<span class="hljs-keyword">size</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>
（4）内容选择器【参见selector_4.html】
<code class="hljs mel has-numbering"> <span class="hljs-comment">//1)查找所有包含文本"John"的div元素的个数</span> alert( <span class="hljs-variable">$(</span><span class="hljs-string">"div:contains('John')"</span>).<span class="hljs-keyword">size</span>() ); <span class="hljs-comment">//2)查找所有p元素为空的元素个数</span> alert( <span class="hljs-variable">$(</span><span class="hljs-string">"p:empty"</span>).<span class="hljs-keyword">size</span>() ); <span class="hljs-comment">//3)给所有包含p元素的div元素添加一个myClass样式</span> <span class="hljs-variable">$(</span><span class="hljs-string">"div:has(p)"</span>).addClass(<span class="hljs-string">"myClass"</span>); <span class="hljs-comment">//4)查找所有含有子元素或者文本的p元素个数,即p为父元素</span> alert( <span class="hljs-variable">$(</span><span class="hljs-string">"p:parent"</span>).<span class="hljs-keyword">size</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></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></ul>jQuery中常用方法（上）
目的：通过方法，能操作web页面（HTML/JSP）中的任何标签
（1）val()：获取标签的value属性值，前提是该标签有value属性
（2）html()：获取标签之间的内容，不能用运于xml文件
（3）text()：获取标签之间的内容，可以用运于html/jsp和xml文件，(提倡)
（4）css()：加key-value形成的css样式
（5）addClass()：加已经定义好的一个css样式
（6）size()：获取jQuery对象/数组中元素的个数，提倡
（7）length：获取jQuery对象/数组中元素的个数
注意：在写jQuery代码时，不光可以使用jQuery的API，还能使用传统JS的API
0 0
- jquery入门（一）
- JQuery（入门一）
- jQuery入门（一）
- jQuery入门（一）
- JQuery入门（一）
- Jquery 入门学习（一）
- jQuery基础入门（一）
- ajax入门,jQuery+ashx （一）
- jQuery入门学习笔记（一）
- jQuery（一）——入门
- Jquery学习入门一
- JQuery(入门一)
- Jquery基础入门(一)
- Jquery—入门一
- jquery语法入门(一)
- jQuery学习入门(一)
- Jquery基础入门一JQuery函数
- JQuery入门（一）-hello world的编写
- 前端知识点或技巧总结
- 个人css总结
- Windos10安装Redis3.0 在java中通过Jedis使用Redis
- oracle rac启用归档模式
- java格式化数字DecimalFormat
- JQuery（入门一）
- gcc编译工具生成动态库和静态库之三----问题及重要知识点分析
- Eclipse出现Failed to load the JNI shared library jvm.dll错误的解决办法
- selectSort
- 个人借鉴网上爬虫代码改写的py
- 查看当前网站的cookie快捷方法
- ActiveMQ发布订阅模式
- MySQL的if，case语句使用总结
- Python 实例方法、@staticmethod和@classmethod
