前端学习之JS（七）之JQuery

一、

1、JQuery就是javascript的类库，特点是独特的选择器、链式操作、事件处理机制、封装完善的Ajax。

2、在JQuery中$就代表JQuery的意思。

3、JQuery对象就是通过JQuery包装DOM对象后产生的对象。

var srh = DOM对象;

var  $srh =  JQuery对象；

4、平常用到的JQuery对象都是通过$()函数制作出来的，$()函数相当于是jQuery对象的制作工厂。

 

二、jQuery选择器：包括基本选择器、层次选择器、过滤选择器、和表单选择器。

1、基本选择器：它通过元素Id、class和标签名等来查找DOM元素。（在网页中，Id只能使用一次，class允许重复使用。

$("#num").css("background","red")

$(".num").css("background","red")

$("p");   选取所有的<p>元素

$("*");  选取所有的元素

$("p.myclass")   选取class为myclass的<p>标签的一组元素

$("span,p,#ssh")    选取一组元素

 

2、层次选择器：通过DOM元素之间的层次关系来获取特定的元素，包括后代元素、子元素、相邻元素等。

（后代元素是指后面所有的元素，子元素是指之后的元素）

$("div span");    表示选取div元素里的所有的span元素。（表示选取div之后所有的元素）

$("div>span")； 表示选取div元素里所有的子元素span。

 

 

3、过滤选择器：通过特定的过滤规则来筛选出所需的DOM元素。选择器都以冒号 ： 开头。

div:first   选取第一个div元素

 

4、表单选择器：

$(.form1:input)          选取所有的input元素

$(.form1:password)     选取所有的password元素

 

值得注意的是：$("div,span,p")表示选取这一系列元素

而空格则是条件：$("div span p")表示div下的span下的p元素

 

5、JQuery中css（）方法既可以用来设置样式，也可以获取读取其属性。

$("p").css("color","red");

$("p").css("color");

 

二、jQuery中的Ajax

jQuery对Ajax操作进行了封装，

1、在jQuery中$.ajax()属于最底层的方法，

      第2层是load(),$.get()和$.post()方法，

$.get()和$.post()方法是jQuery中的全局函数

      第3层是$.getScript()和$.getJSON()方法。

 

load()通常用来获取静态的数据文件：

 <input type="button" id="hh"  value="点我就对了"/>
 <div id="hhh"></div>

$(function () {
            $("#hh").click(function(){
                $("#hhh").load("HTMLPage2.html");
            })
        }
        )

$.get()：

$.get(url ,data,回调函数，数据格式)  ，它的回调函数只有data返回内容和textStatus请求状态两个参数

$("#hh").click(function(){

  $.get(HTMLPage2.html,{

       username:  $("#ahsg").val(),

        age:            $("#asda").val()

        }, function(data,textStatus){          //回调函数

             $("#asdadw").html(data);  //将返回的数据添加到页面上

  或者这个：$("#asdadw").append(data);

}）

)

$.post()方法和$.get()差不多

$.ajax()方法是jQuery最底层的实现，可以用它来代替前面所有的方法。

 

2、$.ajax()方法：

type: 
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

data: 
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

2.1回调函数：

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

要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
    (1)由服务器返回，并根据dataType参数进行处理后的数据。
    (2)描述状态的字符串。

         function(data, textStatus){
            //data可能是xmlDoc、jsonObj、html、text等等
            this;  //调用本次ajax请求时传递的options参数
         }

error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：

       function(XMLHttpRequest, textStatus, errorThrown){
          //通常情况下textStatus和errorThrown只有其中一个包含信息
          this;   //调用本次ajax请求时传递的options参数
       }

几个例子：

1、

2、

$(function(){
    $('#send').click(function(){
         $.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json",
             success: function(data){
                         $('#resText').empty();   //清空resText里面的所有内容
                         var html = ''; 
                         $.each(data, function(commentIndex, comment){
                               html += '<div class="comment"><h6>' + comment['username']
                                         + ':</h6><p class="para"' + comment['content']
                                         + '</p></div>';
                         });
                         $('#resText').html(html);
                      }
         });
    });
});
 

3、