对jQuery的学习记录

最近开始重新学习Java，然后重新学习到了jQuery这里。把学习中的部分知识点都记录下来。方便以后查看。

jQuery就是一个轻量级的"写的少，做的多"的JavaScript库。

基础语法： $(selector).action()

其中，$代表jQuery；（selector）是选择器，选择对哪些元素进行操作；.是连接selector和action的连接符；action（）就是具体的操作。

比如，$(this).hide() - 隐藏当前元素；$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素；$("#test").hide() - 隐藏所有 id="test" 的元素。其中，常用的selector：#id和.class，以及*所有，this当前元素。

所有jQuery函数都要位于一个 document ready 函数中，这是为了防止文档在完全加载就绪之前运行 jQuery 代码（即在 DOM 加载完成后才可以对 DOM 进行操作， Document Object Model（文档对象模型）），如果在文档没有完全加载之前就运行函数，操作可能会失败。

$(document).ready(function(){                        $(function(){
           // 完整写法                                   等于              //简洁写法
});                                                                          });

鼠标事件	键盘事件	表单事件	文档/窗口事件
click                点击	keypress  触发大多数按键	submit   提交	load
dblclick            双击	keydown  按下去，可以持续	change   表单的值改变	resize
mouseenter    鼠标移到	keyup      弹起来	focus	scroll
mouseleave    鼠标移出		blur	unload

$("p").click(function(){
            $(this).hide();  //点击元素p后，就隐藏该元素
});

获得内容

提前声明：text、html、val三者虽然都能获取值，但还是各有不同。

• 不同点一

<p>段落一</p>  
<p>段落二</p>   
  
$(function(){  
 alert($("p").text());      //段落一段落二
})  
  
$(function(){  
    alert($("p").html());   //段落一
}) 

text()在获取元素内容时，结果是由所有匹配元素包含的文本内容组合起来的文本。

html()在获取元素内容时，如果选择器匹配多于一个的元素，那么只有HTML 上的第一个匹配的元素内容会被获取。

• 不同点二

<p><a><i>段落</i></a></p> 

$(function(){  
 alert($("p").text());    //段落
})  

$(function(){  
    alert($("p").html());  //<a><i>段落</i></a>
})

text()在获取内容时，会忽略其中的标签。

html()在获取内容时，会将其中的其他标签也读取出来。

• 不同点三

$("p").html("<b>test</b>");  //网页上显示的是加粗的test

$("p").text("<b>test</b>");  //网页上显示的是<b>test</>

text()更改的全是内容。

html()在更改内容时，可以加入标签。
例子：

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());    //.text():设置、返回所选元素的文本内容
});

$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());    //.html():设置、返回所选元素的HTML内容                     
});  

 $("#btn1").click(function(){
  alert("值为: " + $("#test").val());     //.val():设置、返回所选元素的表单字段的值
});     

$("button").click(function(){
  alert($("#runoob").attr("href"));       //.attr():获取元素的属性
});

设置内容

$("#btn1").click(function(){
    $("#test1").text("Hello world!");          //.text("内容的值")
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");   //.html("html元素")
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");                 //.val("具体的值")
});

$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery");   // .attr("属性的改变")
});

$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",   // 多个参数：大括号括起来，并用逗号隔开。
        "title" : "jQuery 教程"                    //最后一个参数不能加逗号
    });
});

AJAX的用法

AJAX只是用来实现实时更新网页的功能，是在后台操作结束后进行的一些网页显示内容的变化。所以，Ajax往往是作为结果部分。

语法：$(selector).load(URL,data,callback);

其中，load是Ajax的代表函数。URL必需要有，data是与请求一起的值，callback则是在load()执行完了后执行的函数。

<script>
$(document).ready(function(){                         //等效于$(function(){});
  $("button").click(function(){                       //在点击了button后
    $("#div1").load("/try/ajax/demo_test.txt #p1");   //进行Ajax的显示效果：把文本内容加载到ID=p1的中去。
  });
});
</script>

jQuery中的$.ajax(){}

Tip：

在js中，单引号和双引号是不怎么严格区分的。但在嵌套情况下，很容易出问题。在嵌套使用时，如果都使用双引号，内层的双引号的无效的。

所以，推荐的使用方法： 平时使用的时候尽量用单引号，只有碰到嵌套的时候才会同时用两种引号。即外面是单引号的时候里面就要用双引号，外面是双引号的时候里面就要用单引号，总之不能同时用双引号或者是单引号。

$.ajax({
    url:'/comm/test1.php',	//发送的目的地地址
    type:'POST', 		//请求方式
    async:true,    		//同步异步
    data:{			
        name:'yang',age:25	
    },				//键值对数据
    dataType:'json',    	//返回格式
    success:function(data,textStatus,jqXHR){
        console.log(data)
        console.log(textStatus)
        console.log(jqXHR)
    }				//请求成功后的回调函数
});

1、url：发送需求到对应的后台去处理，是目的地的地址，后台根据这个url来区别不同的请求。

2、type：默认GET，但GET不安全，明文，且容量小。多数都用POST。
3、async：默认为true，打开异步请求。false后为同步请求，一次只能有一个请求，特别注意。
4、data：跟随请求，一块发送到服务器的键值对数据。

5、dataType：预期服务器返回的数据类型。可以指定：xml、html、script、json、jsonp、text。如果不指定返回类型，那jQuery也会自动返回responseXML、responseText，来作为回调函数的参数。
6、success：要求为Function类型的参数，请求成功后调用该回调函数。拥有三个参数：请求返回的数据data、响应状态字符串textStatus、jqXHR对象。其中，常用的为data，这是由服务器根据dataType处理后，传回Ajax的数据。

7、这里只是把最常用的参数罗列出来了，其他还有很多的参数，在此不再一一详解，有想知道的，请自行查找。

<script type="text/javascript">
    $(function(){
        //按钮单击时执行
        $("#testAjax").click(function(){            
            //Ajax调用
            $.ajax({
               type: "POST",
               url: "test.php",
               data: "name=garfield&age=18",
               success: function(data){
                        $("#myDiv").html('<h2>'+data+'</h2>');
                  }
            });
            
         });
    });
</script> 

初步总结到此为止。