JQuery整体简化学习

  一、  简介:    

       1 关于jQuery

     jQuery是一个轻量的js库，提供了dom选择、操作、兼容完善的事件机制和Ajax的封装，使之有更为简便和简捷的去开发js程序。JQuery的底层是JavaScript、由于JavaScript操作不太方便、选择器较少、浏览器兼容是个问题、JavaScript原生的Ajax交互比较繁琐。jQuery是JavaScript众多框架之一。

     2  关于JavaScript

     其实JavaScript非常强大, 作为后台开发、我的理解是这样的。JavaScript由三部分组成: ECMAScript、Bom、DOM。ECMAScript是原生的基于对象语言、BOM是浏览器的处理、DOM是一套接口,JavaScript支持,同样DOM同样可以被xml等使用,是一套标准接口而已,不能说就是JavaScript的一部分。jQuery是前端框架、主要运用了DOM和BOM。而ECMAScript相关的框架包括node.js, 这是后台语言。所以很多资料介绍JavaScript说是支持前后台的语言,嗯,的确是这样子的! 

     很多前端学习者在纠结到底先学习JavaScript、还是直接jQuery? 这就像后台学习者问道:跳过servlet、直接学习框架怎么样?  我认为学习应该循序渐进、看完以上介绍,不妨先学习JavaScript。

     接着、我们一起来学习jQuery怎么样（我也不太会）!

     jQuery参考文档:http://tool.oschina.net/apidocs/apidoc?api=jquery

二、JQuery的使用

    1、前端编辑器

     前端开发工具真不少,下面推荐几款。Visual Studio Code：https://code.visualstudio.com/  、WebStorm、HBuilder; 支持国产、用HBulider吧。

    2、jQuery库

      先要使用jQuery,必须要有库文件才能使用。下载JQuery开发库文件到本地,直接引用（推荐）;或者使用在线库文件。

<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

       通过前面的介绍、我们了解了JQuery和JavaScript、也准备了库和开发工具。到了学习jQuery的时候了,先要说明: 我不是纯正的前端开发者,我只负责介绍总结基本的知识、方便日后继续和深度学习。 

三、JQuery和JavaScript对象

    很多后台人员傻傻分不清JavaScript和jQuery对象, JavaScript对象: var divElement = document.getElementById("a");

jquery对象: var e=$("#a")  ---按照id查询  jQuery的选择器都有一个明显的标志"$"。对象转换.

//1、jQuery对象->JavaScript对象
var $div = $("#divID");//jquery对象(注意这是一个数组,尽管是通过id获取的)
var divElement = $div[0];//js对象(方式一)
var divElement 2= $div.get(0);//js对象(方式二)

//2、JavaScript对象->jQuery对象

var inputElement = document.getElementById("inputID");//js对象

var $input = $(inputElement);//jquery对象

四、强大的JQuery选择器

    通过选择器，能定位web页面中的任何标签。jQuery有丰富的选择器（9共类）

  1、基本选择器

      也就是最常用的id或者class或者标签等选择器,类似JavaScript选择器。

     “#” 代表ID查询、“.”代表class查询、“标签名”代表标签查询。

       //1)查找ID为"div1ID"的元素
           $("#div1ID"); //“#” 代表ID查询
           
      //2)查找DIV元素的个数
        $("div").size() ; //div元素查询
          
      //3)查找所有样式是"myClass"的元素
          $(".myClass");  //class查询
      
      //4)查找所有ID为div1ID,CLASS为myClass,P元素的
           $('#div1ID,.myClass,p'); //综合查询

            通过基本选择器查询不是可以找所有的元素了吗, 为什么还需要其他选择器? 是的、理论上只要给一个元素ID,都可以定位到元素,那如果我要选择表格中1、3、5行呢? 继续。

 2、层次选择器

      父子,兄弟关系的选择器   

      （1）ancestor descendant 在给定的祖先元素下匹配所有的后代元素（子孙）

      （2）parent > child  在给定的父元素下匹配所有的子元素（子）

      （3）prev + next     匹配所有紧接在 prev 元素后的 next 元素

      （4）prev ~ siblings   匹配 prev 元素之后的所有 siblings 元素

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

$("form input");       // 选择form中所有input子元素（包括孙子）
                       //结果[ <input name="name" />, <input name="newsletter" /> ]
$("form > input")；     //选择子元素 [ <input name="name" /> ]

$("label + input") ;    //匹配所有跟在 label 后面的next input 元素 name="name" />, <input name="newsletter" /> ]

$("form ~ input");    //匹配所有跟在 form 后面的所有input 元素[ <input name="none" /> ]

  3、加强的基本选择器

     处理前后左右关系的选择器。

• :first    //获取第一个元素
• :last   // 获取最后个元素
• :not(selector) //去除所有与给定选择器匹配的元素
• :even   //匹配所有索引值为偶数的元素，从 0 开始计数
• :odd   //匹配所有索引值为奇数的元素，从 0 开始计数
• :eq(index) //匹配一个给定索引值的元素
• :gt(index) //匹配所有大于给定索引值的元素
• :lt(index)  //匹配所有小于给定索引值的元素
• :header  //匹配如 h1, h2, h3之类的标题元素
• :animated //匹配所有正在执行动画效果的元素

     

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

$('li:first'); //[ <li>list item 1</li> ]

<input name="apple" />
<input name="flower" checked="checked" />

$("input:not(:checked)")

4、内容选择器

       按照内容选择元素。

• :contains(text) //内容中包含text的元素
• :empty     //内容为空的元素
• :has(selector) // 具有selector选择器的元素
• :parent      //父母节点   

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn

$("div:contains('John')")；//[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

5、属性选择器

    根据style属性选择元素。

• [attribute]  //匹配包含给定属性的元素。比如id
• [attribute=value] //匹配包含给定属性值的元素。 比如 $("input[id='div']");
• [attribute!=value] //匹配所有不含有指定的属性
• [attribute^=value] //匹配给定的属性是以某些值开始的元素
• [attribute$=value] //匹配给定的属性是以某些值结尾的元素
• [attribute*=value] //匹配给定的属性是以包含某些值的元素

       

<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />

$("input[name='accept']");//<input type="checkbox" name="accept" value="Evil Plans" />

"$(input[name^='newsletter']");//[<input type="checkbox" name="accept" value="Evil Plans" />]

    这里就介绍以上5种选择器、这样你就知道接着应该怎么学习剩下的 。查看文档“选择器”内容   http://tool.oschina.net/apidocs/apidoc?api=jquery

    好的、恭喜你。你学完了jQuery最常用、很重要的一个部分。

五、文档处理-DOM

     对JavaScript-DOM部分的进一步封装,进而对功能增强和简化操作。学会看着文档学习,文章下面实例都是最常见、使用的方法。

1、内部插入

         append（content）经常用于ajax中处理数据使用。

<!DOCTYPE html>
<html>
    <head>
        <!--声明当前页面的编码集：charset=gbk,gbk2312(中文编码),utf-8(国际编码)-->
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <title>Jquery-DOM演示</title>
         <!--引入jQuery在线库-->
        <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
        <!--
            作者：972606984@qq.com
            时间：2018-07-15
            描述：JavaScript代码块-JQueryDOM演示
        -->
        <script type="application/javascript">
            //$(function(){}); 页面初始化
            $(function(){
             var str="<a id='baidu' href='http://www.baidu.com'>百度</a>"
             //内部追加内容
            $("#a").append(str);
            });
        </script>
    </head>
     
    <body>
        <div id='a'>
            <!--<a id="baidu" href='http://www.baidu.com'>百度</a>-->
        </div>
    </body>

</html>

 2、外部插入

      方法有这几个、after(content|fn)、before(content|fn)、insertAfter(content)、insertBefore(content)。演示:

<!DOCTYPE html>
<html>
    <head>
        <!--声明当前页面的编码集：charset=gbk,gbk2312(中文编码),utf-8(国际编码)-->
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <title>Jquery-DOM演示</title>
         <!--引入jQuery在线库-->
        <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
        <!--
            作者：972606984@qq.com
            时间：2018-07-15
            描述：JavaScript代码块-JQueryDOM演示
        -->
        <script type="application/javascript">
            //$(function(){}); 页面初始化
            $(function(){
             var str="<a id='baidu' href='http://www.baidu.com'>百度</a>"
             //1、内部追加内容
            $("#a").append(str);
            //2、外部插入
            var htmlstr="<p>hello 我在你下面</p>";
            var str2="hello 我在你上面!"
            $("#a").after(htmlstr);
            $("#a").before(str2);
            });
            
        </script>
    </head>
     
    <body>
        <div id='a'>
            <!--<a id="baidu" href='http://www.baidu.com'>百度</a>-->
        </div>
    </body>

</html>

 3、删除节点

   删除方法 empty():清空指定元素的内容,彻底删除,不能恢复。

   remove([expr])：这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但是在HTML中不可见。

   detach([expr])：这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
         <!--引入jQuery在线库-->
        <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    </head>
    <script type="application/javascript">
        //初始化
        $(function(){
            //清空u1
            $("#u1").empty();
            //删除u2的第一个元素、加强的基本选择器
            $("#u2 li:first-child").remove();
        });
        
    </script>
    <body>
        <ul id="u1">
            <li>live1-1</li>
            <li>live1-2</li>
        </ul>
        <ul id="u2">
            <li id="li1">live2-1</li>
            <li>live2-2</li>
        </ul>
        
    </body>
</html>

     该部分剩下的内容还有包裹、替换、复制,不一一测试。到这里、你已经学完了jQuery的选择器和DOM操作。剩下的重点还有：属性操作、CSS操作、事件、AJax（动画方面简单介绍）

六、属性操作

        使用最多的有attr(), 特别注意这个方法添加的是HTML标签属性, 如img的src、a标签的href，不能是style属性。removeAttr()，对应的删除属性。addClass()/removeClass() 添加/删除class属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
         <!--引入jQuery在线库-->
        <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
        <script type="application/javascript">
            $(function(){
                //给a标签添加HTML熟悉
                $("#baidu")
                .attr("href","www.baidu.com");
                //$("#baidu").attr("class","baidu");也是一样子的.
                $("#baidu").addClass("baidu");
            });

            
        </script>
    </head>
    
    <body>
        <a id="baidu">baidu</a>
    </body>
</html>

七、CSS操作

      css() 获取或者添加css属性、height()设置height或者获取height值。width() 获取或者设置width的值。

     $('#a').css('fontSize',"14px");// 设置属性    $('#a').css('fontSize') //获取font-size属性。css的大部分方法都是同时具有"获取"和“设置”性质的。

<!DOCTYPE html>
<html>
        <meta charset="UTF-8">
        <title></title>
         <!--引入jQuery在线库-->
        <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
        <script type="application/javascript">
            $(function(){
                //给div添加内容
                $('#dx').text("1234abcd");
                //给div添加color属性
                $('#dx').css("color","chocolate");
                //控制台打印width和heigth、color
                console.info("heigth: "+ $('#dx').height()+"   "+$('#dx').width());
                console.info($('#dx').css("fontSize"));//font-size或者fontSize都是可以的
            });

        </script>
        <!--
            描述：引入css片段
        -->
        <style type="text/css">
            #dx{
                background: blueviolet;
                width: 100px;
                height: 200px;
                font-size: 14px;
            }
            
        </style>
    </head>
    
    <body>
        <div id="dx"></div>    
    </body>
</html>

  八、JQuery事件

　　事件大概可以分为几种。jQuery事件、所有标签都有的事件、标签特定的事件。举例

    （1）ready要在DOM就绪时执行的函数

    $(document).ready(function(){
    // 在这里写你的代码...
    });

    （2）bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数。

   $("p").bind("click", function(){
  alert( $(this).text() );
    });

   （3）bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

   $("p").unbind();//把所有段落的所有事件取消绑定

    

  九、Ajax交互

       我们都知道ajax用于前后台交互、相比JavaScript原生的ajax操作更加简单。ajax相关的方法有如下。其中$.ajax()最底层、其他函数都是给予它改造。

• $.ajax(url,[settings])
• load(url,[data],[callback])
• $.get(url,[data],[fn],[type])
• $.getJSON(url,[data],[fn])
• $.getScript(url,[callback])
• $.post(url,[data],[fn],[type])

    这里来讲解$.ajax()

    API的解释: 通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

       关于回调函数

      如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

• beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
• error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
• dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
• success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
• complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

       数据类型

    通过dataType选项还可以指定其他不同数据处理方式。除了单纯的XML，还可以指定 html、json、jsonp、script或者text。其中JSON数据使用最为广泛。

      个人非常喜欢用$.ajax()、他可以实现其他函数的所有功能, 只不过有时操作比较繁琐一点。

    

<form>
   <span class="teach_word">Schools list:</span>
   <select id="region" name="region" onchange="ajax_index_Upload(this.value);">
      <option value="Eastern China" selected>Eastern China</option>
      <option value="Southwestern China">Southwestern China</option>
      <option value="North &amp; NW China">North &amp; NW China</option>
      <option value="Southern &amp; Central">Southern &amp; Central</option>
      <option value="Northeastern China">Northeastern China</option>
      <option value="Others">Others</option>
   </select>
   <select name="provinces" id="provinces" onchange="get_linkage_val()">
      <!--<option value="zhejiang">Anhui</option>-->
   </select>
   <a href="/dede/a/Teach_in_China" style="margin-left:370px;">
      <input class="teach_sub" type="button" value="search">
   </a>
</form>

function ajax_index_Upload( val )
{
   var $region = $( "#region" );
   var $provinces = $( "#provinces" );
   $.ajax( {
      type: "POST",   // 请求类型 Get或者Post二种
      dataType: "json",  //请求数据类型json, 另外也支持jsonp、xml、html
      url: "/dede/templets/default/china_city.php", //请求路径、服务器路径
      data: {
         "region": val           //请求数据、json
      },
      success: function( data ){//数据处理},  //success回调函数
      error: function( XMLHttpRequest, textStatus ) // 异常回调函数
      {
         alert( XMLHttpRequest.status );
         alert( XMLHttpRequest.readyState );
         alert( textStatus );
      }
   } );
}

  

    尾声: 本文章介绍了jQuery的大部分重要知识, 应该根据API文档进行细化学习。