前端技术（1） ：JQuery学习笔记

使用JQuery之前，首先从官网下载库文件

http://jquery.com/

jquery-2.1.4.js和jquery-2.1.4.min.js，前者是完整无压缩版本，用于开发调试；后者是压缩版本，用于正式产品环境。在页面中引入jquery只需要将库文件放置到一个公共文件位置，然后在使用页面中直接引入即可。

<script src="../scripts/jquery-2.1.4.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕，其他关联元素还未加载完全就可以执行
$(document).ready(function(){
alert("Hello World!");
});
</script>

#1 在JQuery库中符号’$’跟字符串’jquery’是完全等价的字段；

#2 $(document).ready(function() {…..});是等待页面中所有DOM结构渲染完毕就会执行，不必等所有DOM关联的元素加载完全，可以简写成$(function() {…..});而window.onload = function() {….};则需要等所有内容加载完毕才执行；

使用$(‘#id’)获取的值永远都是对象，即使网页上没有这个元素；因此需要使用下述代码判断某个元素在网页上是否存在。

if ($(‘#id’}.length > 0) {
// do something when the object is existing.
}

JQuery与CSS使用的选择器

基本选择器：

#1 $(‘#test’): 选取id为test的元素

#2 $(‘.test’): 选取所有class为test的元素

#3 $(‘p’): 选取所有<p>元素

#4 $(‘div, p.test’): 选取所有<div>元素，选取所有<p>元素中class为test的元素

层次选择器：

#1 $(‘div span’): 选取<div>内部所有的<span>元素

#2 $(‘div > span’): 选取<div>下一级所有的<span>元素

#3 $(‘.one + div’): 选取class为one的元素后面第一个<div>元素，等价于$(‘.one’).next(‘div’);

#4 $(‘#two ~ div’): 选取id是two的元素后面所有<div>元素，等价于$(‘#two’).nextAll(‘div’);

#5 $(‘#prev’).siblings(‘div’); 选取id是prev的元素前后左右同辈<div>元素；

过滤选择器：

#1 $(‘div : first’): 选取第一个<div>元素

#2 $(‘div : last’): 选取最后一个<div>元素

#3 $(‘div : eq(3)’): 选取第三个<div>元素

表单选择器

JQuery常用操作：

$("input:eq(0)").click(function(){
$("p").attr("title","选择你最喜欢的水果.");
$("#multiple").val(["选择2号", "选择3号"]);
$(":checkbox").val(["check2","check3"]);
});

#1 获取jquery元素，$(“input”)表示仅选择<input>元素，$(“:input”)表示选择所有输入元素<input>, <select>, <button>和<textarea>

#2 添加click动作处理

#3 通过attr()方法设置元素属性

#4 attr()第一个参数除了title，还可以是class

#5 获取id为multiple的元素，并设置选项；获取元素类型为checkbox的元素，并设置选项；

$(function(){
$("#panel h5.head").bind("click",function(){
var $content = $(this).next("div.content");
if($content.is(":visible")){
$content.hide();
}else{
$content.show();
}
});

$("#panel h5.head").mouseover(function(){
$(this).next("div.content").show();
});
$("#panel h5.head").mouseout(function(){
$(this).next("div.content").hide();
})
});

#1 绑定事件除了click，还可以是blur, focus, load, resize, scroll, unload, dbclick, mousedown, mouseup等

#2 $content.is()表示属性判定方法，除了visible还可以是checked等；hide和show方法在不加参数的时候相当于css(“display”, “[none|block]”)；也可以添加参数[fast|normal|slow|#]，最后一个表示数字，也就是在#毫秒内完成显示或者隐藏；

#3 mouseover和mouseout事件可以被hover(enterFn, leaveFn)替代；类似的还有多次的click事件可以被toggle(fn1, fn2, ….., fnx)替代，多次点击则循环执行注册的方法；

$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation();    //  阻止事件冒泡
});
$('#content').bind("click",function(event){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
return false;    //  阻止事件冒泡
});
$("body").bind("click",function(){
$("#btn").unbind("click", clickFun2);
});

#1 如果span为content的内部元素，则如果点击了span会造成时间冒泡反应，content的click事件也会触发；为了阻止事件冒泡，可以用event.stopPropagation()或者直接返回false；

#2 与event.stopPropagation()类似，event.preventDefault()也可以阻止事件冒泡，不过其还有更大的影响，就是阻止缺省的动作，这在提交需要进行表单验证的表单事件中非常有用；

#3 另外event还携带了很多有用的信息，type表示触发的事件类型，target表示触发事件的元素，pageX和pageY表示触发事件点光标在页面的位置，which表示输入设备的类型；

#4 方法unbind可以去除指定元素上某种事件类型的某个相应方法；

$("#CheckedAll").click(function(){
$('[name=items]:checkbox').attr('checked', true);
});
$("#send").click(function(){
var str="你选中的是：\r\n";
$('[name=items]:checkbox:checked').each(function(){
str+=$(this).val()+"\r\n";
})
alert(str);
});

#1 $(‘[name=items]:checkbox’)表示选择所有name为items的checkbox类型元素，其中name可以修改成type，表示以类型匹配；$(‘[name=items]:checkbox:checked’)进一步表示所有被勾选的元素；

#2 元素选择器还可以为：$('input[type=checkbox][name=items]')；

#3 arrt(‘checked’, true)

$('form :input').blur(function(){
………..
}).keyup(function(){
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});
$('#send').click(function(){
$("form :input.required").trigger('blur');
var numError = $('form .onError').length;
if(numError){
return false;
}
alert("it works with no errors.");
});

#1 keyup()和focus()方法表示对input元素的输入值进行实时判断，triggerHandler(‘blur’)表示仅触发blur事件，不会触发浏览器缺省的动作；trigger(‘blur’)不仅触发指定的事件还会触发缺省动作，同时光标会从当前触发元素移开，所以实时判断输入值需要使用triggerHandler；

#2 #send表示form提交按钮的设计，在提交的时候触发blur事件进行验证，如果有errors则返回false表示终止提交动作；

对比$(document).ready(function() {……});和window.onload = function() {};的区别：

#1 前者只要DOM元素下载完毕（不需要图片或者音频文件等下载完毕）就可以执行，后者需要网页中所有元素都下载完毕才执行；

#2 后者的onload属性仅加载最后一个被绑定的方法，因此页面里仅有一个onload方法可以执行；前者可以多次申明，并按照申明顺序加载执行；

#3前者等价于$(function() {…..})；后者等价于$(window).load(function() {……});

JQuery使用Ajax

Ajax最大的优势在于不需要用传统的提交Form并刷新整个页面的方式来提交数据，而是通过XMLHttpRequest向服务器异步提交数据并获取返回值；但Ajax也有自身的不足，XMLHttpRequest对象不能很好地兼容各种浏览器，浏览器的状态改变不能被前进和回退按钮记录，搜索引擎对JS的支持不足等；

JQuery对Ajax的封装分三层，最底层为$.ajax()，最常用的一层为$.load()，$.get()，$.post()，还有一层为$.getScript()，$.getJSON()；

$().load(url [, dataIn] [, callBackFn])

$("#resText").load("ajax.html", {name: "leo", age: "22"}, function(responseData, textStatus, XMLHttpRequest) {
alert( $(this).html() );    //在这里this指向的是当前的DOM对象，即 $("#iptText")[0]
alert(responseData);       //请求返回的内容
alert(textStatus);            //请求状态：success，error
alert(XMLHttpRequest);     //XMLHttpRequest对象
});

#1 url表示请求的目标地址，dataIn表示传入参数，callBackFn表示无论load成功与否都执行的回调方法；

$().get(url [, data] [, callback] [, type])

#1 callBack表示仅在get调用成功之后才执行，否则不执行；

#2 type表示不同的返回数据类型，比如html、json、text等；

#3 post与get函数头类似，不过有不少区别；

$().ajax(options)

#1 options包含所有以key/value存在的参数；

#2 参数类型有url, type, timeout, data, dataType, beforeSend,success, error, complete等；

JQuery还提供了一些列的全局函数，在Ajax请求的各种状态下自动触发

$().ajaxStart(function () { }); ajax请求开始之后触发

$().ajaxStop(function() { }); ajax请求结束之后触发

$().ajaxError(function() { }); ajax请求发生错误的时候触发

$().ajaxSuccess(function() { }); ajax请求成功的时候触发

引入插件jquery.validate.js，并通过元素的name属性关联字段和验证规则进行验证，这种方法实现了行为与结构的分离；

$("#commentForm").validate({
rules: {
username: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
url:"url",
comment: "required"
}
});

#1 #commentForm表示待验证的表单的id，username表示需要被验证的元素的name；

#2 validation验证的信息缺省为en，可以引入jquery.validation.message_xx.js修改显示语言；