JQuery（入门一）

最新推荐文章于 2022-12-05 18:06:24 发布

快乐的程序媛

最新推荐文章于 2022-12-05 18:06:24 发布

阅读量360

点赞数

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

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

主要内容
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

为什么要使用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

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

快乐的程序媛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery（入门一）

主要内容 1）掌握JSON及其应用 2）了解jQuery的背景和特点3）理解js对象和jQuery对象的区别 4）掌握jQuery九类选择器及应用（上）什么是JSON ？（1）JSON（Java Script Object Notation（记号,标记））是一种轻量级的数据交换语言，以文本字符串为基础，且易于让人阅读注意：XML就是一个重量级的数据交换语言
复制链接

扫一扫