1.jQuery遍历parents()
获得集合中每个匹配元素的祖先元素
2.文档就绪函数
$(document).ready(function() {
--- jQuery functions go here ----
});
//简洁写法
$(function() {
--- jQuery functions go here ----
});
所有 jQuery 函数位于一个 document ready 函数中,为了防止文档在完全加载(就绪)之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数,操作可能失败。
3.jQuery选择器
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。jQuery的选择器就是帮助我们快速定位到一个或多个DOM节点。返回jQuery对象。
1> 按id查找 $(‘#abc’)
2> 按Tag查找\ $(‘abc’)
3>按class查找\$(‘.abc’)
4>按属性查找\$(‘[href=”#”]’)
5>组合查找\$(‘input[name=”email”]’)
6>多项选择器\$(‘p,div’)
7>层级选择器
8>子选择器
9>过滤器\$(‘ul.lang li:first-child’)…
//选择网页中第一个a元素
$('a:first');
//选择表格的奇数行
$('tr:odd');
// 选择表单中的input元素
$('#myForm :input');
//选择可见的div元素
$('div:visible');
// 选择所有的div元素,除了前三个
$('div:gt(2)');
// 选择当前处于动画状态的div元素
$('div:animated');
4.jQuery链式调用
有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条 这样的话,浏览器就不必多次查找相同的元素。链式调用是通过在对象上的方法最后加上return this,把对象再返回,该对象就继续调用方法了。jQuery对象的所有方法都返回一个jQuery对象(可能是新的也可能是自身)。
eg:
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
5.jQuery 事件 - scroll() 方法
定义和用法
当用户滚动指定的元素时,会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。
scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数。
6.jQuery hover() 方法
hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。方法触发 mouseenter 和 mouseleave 事件。如果只指定一个函数,则 mouseenter 和 mouseleave 都执行它。
语法
$(selector).hover(inFunction,outFunction)
7.getBoundingClientRect()
getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。
语法:这个方法没有参数。
rectObject = object.getBoundingClientRect();
返回值类型:TextRectangle对象,每个矩形具有四个整数性质( 上, 右 , 下,和左 )表示的坐标的矩形,以像素为单位。
rectObject.top:元素上边到视窗上边的距离;
rectObject.right:元素右边到视窗左边的距离;
rectObject.bottom:元素下边到视窗上边的距离;
rectObject.left:元素左边到视窗左边的距离;
8.为什么要两次调用encodeURI来解决乱码问题
.encodeURL函数主要是来对URI来做转码,它默认是采用的UTF-8的编码.
. UTF-8编码的格式:一个汉字来三个字节构成,每一个字节会转换成16进制的编码,同时添加上%号.
假设页面端输入的中文是一个“中”,按照下面步骤进行解码
1.第一次encodeURI,按照utf-8方式获取字节数组变成[-28,-72-83],对字节码数组进行遍历,把每个字节转化成对应的16进制数,这样就变成了[E4,B8,AD],最后变成[%E4,%B8,%AD] 此时已经没有了多字节字符,全部是单字节字符。
2、第二次encodeURI,进行编码,会把%看成一个转义字符,并不编码%以后字符,会把%编码成%25.把数组最后变成[%25E4,%25B8,%25AD]然后就把处理后的数据[%25E4,%25B8,%25AD]发往服务器端,
当应用服务器调用getParameter方法,getParameter方法会去向应用服务器请求参数
应用服务器最初获得的就是发送来的[%25E4,%25B8,%25AD],应用服务器会对这个数据进行URLdecode操作,应用服务器进行解码的这一次,不管是按照UTF-8,还是GBK,还是ISO-8859,,都能得到[%E4,%B8,%AD],因为都会把%25解析成%.并把这个值返回给getParameter方法
3、再用UTF-8解码一次,就得到”中”了。
9.Deferred
开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的。
通常的做法是,为它们指定回调函数(callback)。即事先规定,一旦它们运行结束,应该调用哪些函数。
deferred对象的含义就是”延迟”到未来某个点再执行。
//首先,回顾一下jQuery的ajax操作的传统写法:
$.ajax({
url: "/echo/html/",
success: function(){
alert("哈哈,成功了!");
},
error:function(){
alert("出错啦!");
}
});
//现在,新的写法是这样的:
$.ajax("test.html")
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出错啦!"); });
done()相当于success方法,fail()相当于error方法。采用链式写法以后,代码的可读性大大提高。
deferred对象的一大好处,就是它允许你自由添加多个回调函数,它们按照添加顺序执行。
deferred对象的另一大好处,就是它允许你为多个事件指定一个回调函数
deferred.resolve()方法和deferred.reject()方法
jQuery规定,deferred对象有三种执行状态—-未完成,已完成和已失败。如果执行状态是”已完成”(resolved),deferred对象立刻调用done()方法指定的回调函数;如果执行状态是”已失败”,调用fail()方法指定的回调函数;如果执行状态是”未完成”,则继续等待,或者调用progress()方法指定的回调函数(jQuery1.7版本添加)。
dtd.resolve()的意思是,将dtd对象的执行状态从”未完成”改为”已完成”,从而触发done()方法。
deferred.promise()方法
var wait = function(dtd){
var tasks = function(){
alert("执行完毕!");
dtd.resolve(); // 改变Deferred对象的执行状态
};
setTimeout(tasks,5000);
return dtd;
};
$.when(wait(dtd))
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出错啦!"); });
//改变了dtd对象的执行状态,因此导致done()方法立刻执行
dtd.resolve();
为了为了避免全局Deferred对象的状态在外部被改变,jQuery提供了deferred.promise()方法。它的作用是,在原来的deferred对象上返回另一个deferred对象,后者只开放与改变执行状态无关的方法(比如done()方法和fail()方法),屏蔽与改变执行状态有关的方法(比如resolve()方法和reject()方法),从而使得执行状态不能被改变。
var dtd = $.Deferred(); // 新建一个Deferred对象
var wait = function(dtd){
var tasks = function(){
alert("执行完毕!");
dtd.resolve(); // 改变Deferred对象的执行状态
};
setTimeout(tasks,5000);
return dtd.promise();
};
$.when(wait(dtd))
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出错啦!"); });
//Deferred对象的执行状态不会被改变
dtd.resolve();