前端学习--jQuery基础

一：jQuery介绍

jQuery 是一个 JavaScript 函数库

jQuery追求 "Write less,do more"

jQuery 极大地简化了 JavaScript 编程

引包：把jQuery源文件放到项目中

入口函数：当DOM载入就绪时执行js代码

<script type="text/javascript">
	入口函数方式一：
	$(function(){

	});
	方式二：
	$(document).ready(function(){

	});
</script>

jQuery两个变量：$、jQuery；$是jQuery的一个别名，所以用它俩的效果是一样的

二：jQuery核心

基础语法是：$(selector).action()
美元符号$定义 jQuery；
选择符（selector）“查询”和“查找” HTML 元素；

jQuery 的 action() 执行对元素的操作；

length：jQuery 对象中元素的个数

selector：返回传给jQuery()的原始选择器

jQuery(html,[ownerDocument])

根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。同时设置一系列的属性、事件等。

//动态创建div元素，并添加属性与绑定事件
$("<div>", {
  "class": "test",
  text: "Click me!",
  click: function(){
    $(this).toggleClass("test");
  }
}).appendTo("body");

jQuery对象与原生DOM对象可以相互转换：

如：jQuery对象[0] = 原生DOM对象；$(domEle) = jQuery对象

each(callback)：以每一个匹配的元素作为上下文来执行一个函数

$("button").click(function () { 
	$("div").each(function (index, domEle) { 
		// domEle == this;this指代的是DOM对象而非jQuery对象
		$(domEle).css("backgroundColor", "yellow");  
		if ($(this).is("#stop")) { 
			$("span").text("Stopped at div index #" + index); 
			return false; 
		};
	};
});

data([key],[value])：在元素上存放或读取数据,返回jQuery对象

三：选择器

jQuery可以使用CSS选择器。

部分选择器（除CSS选择器）：

:first	获取匹配的第一个元素	:hidden	匹配所有不可见元素
:last	获取匹配的最后一个元素	:visible	匹配可见元素
:first-child	匹配作为第一个子元素的元素	:first-of-type	其父元素的某个类型的第一个子元素
:last-child	匹配作为最后一个子元素的元素	:last-of-type	其父元素的某个类型的最后一个子元素
:not(selector)	去除与给定选择器匹配的元素	:nth-of-type()	其父元素的某个类型的第N个子元素
:even	匹配索引值为偶数的元素	:nth-child(index)	匹配其父元素下的第N个子元素， index从1开始
:odd	匹配索引值为奇数的元素	:input	匹配所有input、textarea、select、button元素
:eq(index)	匹配给定索引值的元素	:text	匹配单行文本框，即type="text"
:gt(index)	匹配大于给定索引值的元素	:password	匹配密码框
:lt(index)	匹配小于给定索引值的元素	:radio	匹配所有单选按钮
:focus	匹配当前获取焦点的元素	:checkbox	匹配所有复选框
:contains(text)	匹配包含此文本的元素	:submit	匹配所有提交按钮
:empty	匹配所有不包含子元素或者文本的空元素	:image	匹配所有图像域
:has(selector)	包含给定选择器的元素	:reset	匹配所有重置按钮
:selected	匹配所有选中的option元素	:checked	匹配所有选中的元素(复选框、单选框等， select中的option)

四：方法小结

1，属性方法

attr() ：设置或返回被选元素的属性值

$("#t1").attr("class","test");
$("#t1").attr({
    "class" : "test",
    "title" : "test"
  });

removeAttr(name) ：删除一个属性
addClass()：添加类属性
removeClass()：删除类属性
toggleClass()：如果存在就删除一个类，不存在则添加一个类
text()：取得或设置匹配元素的内容
html()：设置或返回所选元素的内容（包括 HTML 标记）

val()：获得或设置匹配元素的当前值

2，CSS方法

css()：访问或设置元素的样式属性
css("propertyname"); css("propertyname","value");

css({"propertyname":"value","propertyname":"value",...});

height()：content高度
width()
innerHeight()：content高度+padding
innerWidth()
outereHeight()：content高度+padding+border
outerWidth()

3，文档处理方法

append() - 向每个匹配的元素内部追加内容
appendTo() - 把所有匹配的元素追加到另一个指定的元素元素集合中
prepend() - 向每个匹配的元素内部前置内容
prependTo() - 把所有匹配的元素前置到另一个、指定的元素元素集合中
after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

insertAfter()：把匹配的元素插入另一个元素的后面
insertBefore()：把匹配的元素插入另一个元素的前面
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

clone() 克隆匹配的DOM元素并且选中这些克隆的副本。 clone(true) :参数true指示事件处理函数会被复制

$("p").remove();	
$("p").remove(".hello");

4，遍历(筛选)方法

parent() 返回被选元素的直接父元素
children() 返回被选元素的所有直接子元素
find() 返回被选元素的后代元素，一路向下直到最后一个后代
first() 方法返回被选元素的首个元素
last() 方法返回被选元素的最后一个元素

eq() 方法返回被选元素中带有指定索引号的元素

siblings() 方法返回被选元素的所有同胞元素。
next() 方法返回被选元素的下一个同胞元素
nextAll() 方法返回被选元素的所有跟随的同胞元素
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
prev() 返回被选元素的前一个同胞元素
prevAll()

prevUntil()

filter() 方法允许您规定一个标准；不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
not() 方法返回不匹配标准的所有元素。
is(expr|obj|ele|fn)：根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。

5，事件方法

on(events,[selector],[data],fn) ：绑定事件处理函数

off(events,[selector],[fn]) ：移除事件处理函数

mouseenter() 当鼠标指针穿过元素时触发

mouseleave() 当鼠标指针离开元素时触发

mouseover() 鼠标指针穿过被选元素或其子元素时触发

mouseout() 鼠标指针离开被选元素还是其任何子元素时触发

click() 点击事件
dblclick() 双击事件
focus() 获得焦点事件

blur() 失去焦点事件

$("p").click(function(){ 
  $(this).hide(); 
});

change()：当元素的值发生改变时触发

该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。

input()：在用户输入时触发
该事件在 <input> 或 <textarea> 元素的值发生改变时触发

hover()：模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

keydown()：当键盘或按钮被按下时触发

keyup()：当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上

$(window).keydown(function(event){
  switch(event.keyCode) {
    // 不同的按键可以做不同的事情
    // 不同的浏览器的keycode不同
    // 更多详细信息:     http://unixpapa.com/js/key.html
    // 常用keyCode： 空格 32   Enter 13   ESC 27
  }
});

6，动画与效果方法

show()：显示隐藏的匹配元素
hide()：隐藏元素
toggle()：切换 hide() 和 show() 方法；显示被隐藏的元素，并隐藏已显示的元素
$(selector).hide(speed,callback);
$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

fadeIn() ：用于淡入已隐藏的元素
fadeOut() ：用于淡出可见元素
fadeToggle()： fadeIn() 与 fadeOut() 方法之间进行切换
fadeTo() ：允许渐变为给定的不透明度（值介于 0 与 1 之间）
$(selector).fadeIn(speed,callback);

$(selector).fadeTo(speed,opacity,callback);

slideDown()：用于向下滑动元素
slideUp()：用于向上滑动元素
slideToggle()：在 slideDown() 与 slideUp() 方法之间进行切换

$(selector).slideDown(speed,callback);

animate() 方法用于创建自定义动画
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性
也可以定义相对值（该值相对于元素的当前值），需要在值的前面加上 += 或 -=；
甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"

注：如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

stop() 方法用于停止动画或效果，在它们完成之前
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。
为了避免这个情况，可以以参数的形式添加 Callback 函数
结论：如果希望在一个涉及动画的函数之后来执行语句，请使用 callback 函数。