jQuery的前端框架
jQuery概述
JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。
核心理念是write less,do more(写得更少,做得更多)
当前流行的 JavaScript 库有：
jQuery 使用非常多 , EXTJS 功能比jQuery更多,但ext2.0收费,Prototype 一般用于做框架,YUI! (Yahoo! User Interface)
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷
jQuery介绍
jQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器。
jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。由美国人John Resig在2006年1月发布,jQuery是免费、开源的。
jQuery分类：
WEB版本：我们主要学习研究 （jQuery-版本.js 、 jQuery-版本-min.js）
UI版本：集成了UI组件
mobile版本：针对移动端开发
qunit版本：用于js测试的
jquery官网 http://jquery.com/
常用版本介绍：
min版是上线版本，没有换行符等，节省存储空间。
1.4.* 旧版的稳定版本
1.8.* - 1.9.* 学习使用版本
1.11.* 最新的版本
2.1+* 2.0后的版本不再兼容低版本的IE浏览器
jQuery的封装
- js只有一个全局代码区，声明变量的时候出现同名的概率比较高，也就是容易造成覆盖
- 使用命名空间,将代码挂载到某个对象下，但是仍然存在对象被覆盖的风险
- 工厂模式封装：将对象封存起来，让代码更加的具备完整性，但是依然存在被覆盖的风险
- 不要函数名字，虽然解决了被覆盖的风险，但是无法进行调用了
- 使用自己调用自己的方式可以实现函数的调用，但是只能调用一次，在页面加载的时候
- 闭包原理：使用更大作用域变量或者大家同一认可的变量将执行一次就会消失的内容记录下来，实现重复调用
jQuery使用
jQuery的基本操作
jQuery同dom操作的原理相同,同样的获取元素对象,修改其样式、属性、文本等’，只是简化了代码.
- 获取jQuery对象的三种方式
语法：$(选择器或者DOM对象)或jQuery(选择器或者DOM对象) ,$==jQuery,方式的区别是因为封装原理，包装对象所形成的语法特点。含义是相同的。
// $() 语法，建议：如果是jQuery对象变量名使用$作为前缀
var $obj = $("#username");
// jQuery() 语法.
var $obj = jQuery("#username");
- jQuery对象和DOM对象相互转换
注意:jQuery对象使用jquery的api（方法、函数）。DOM对象使用 dom 的函数、属性等。不能混淆使用。
/*dom对象转化为jquery对象*/
var obj = document.getElementById("div2");
/*转化操作*/
var $obj = $(obj);
alert($obj.text() + "第二次");
/*jQuery对象转化文dom对象*/
var div2 = $("#div2");
//先通过 $(...) 获得jQuery对象，底层使用数组进行维护的，可以存放多个对象。
//然后通过get()可以从jquery对象转换成 dom对象。参数：数组的下标，可以省略。如果省略下标获得dom 数组。
var obj2 = div2.get(0);
alert(obj2.outerHTML + "第三次");
jQuery的选择器（重点）
jQuery的选择器的设计原理和CSS选择器的选择器设计理念相同。
- 基本选择器的使用
// id选择器
// 标签演示 ：<标签 id="id值">
// 语法:
$("#id");
// 标签（元素）选择器
// 语法：
$("标签名");
// 类选择器
// 标签元素：<标签 class=”class名称”>
// 语法：
$(".class名称")
// 通配符选择器：
// 语法：$(“*”) <!—选择所有的标签元素-->
// 多选择器选择;
// 语法： $("选择器1，选择器2，....")表示的是同时满足两种选择器的元素。
$(“#id,.class”)
- 层级选择器
定义: 即Ancestor（祖先）和descendant（后代）之间的关系，返回值是集合的形式Array(Elements)。
// 所有子孙元素
// 关系: Ancestor descendant //给定祖先下的匹配所有的后代元素
/* 语法：*/ $("A B") --> //A标签中 所有的B标签
// 所有孩子元素
// 关系：parent > child //给定父元素下的匹配所有的子元素
/*语法：*/ $("A > B") --> //A标签中 所有的子标签中B标签
// 后面第一个兄弟
// 关系：prev + next //匹配所有紧接在prev后的next元素
/*语法：*/ $("A + B") --> //A标签后面的第一个兄弟元素
//后面的所有兄弟
//关系： prev ~ siblings //匹配prev之后的所有siblings元素
/*语法：*/ $("A ~ B") --> //A标签后面的所有兄元素
- 过滤器的使用
基本过滤选择器
语法规则1： $("A：过滤类型") -> A标签（或元素）元素经过过滤后的所有元素
注意：常见的过滤器有节点顺序的属性，表单元素过滤的属性(当过滤类型唯一也可以： $(“:过滤器”))，内容过滤属性，可见性过滤，子元素过滤
属性过滤器
语法规则： $("A[attr=’attrValue’]") --> A标签(或元素)元素经过属性值过滤后的元素
jQuery操作样式属性（重点）
操作样式就是操作：属性,类class,html代码/文本/值,css,位置,尺寸
语法规则：css(参数个数)，text(参数个数)，attr(参数个数)，html(参数个数)
参数个数：一个参数表示获取当前选择的值（也可以是传入JOSN格式批量设置属性）， 两个参数表示设置指定属性的值
- 操作CSS样式
//直接设置样式的值
$div.css("border", "1px solid red");
//获取指定样式的值
alert($div.css("border"))
//通过JOSN的方式设置样式的值
$div.css({
"width":"100px",
"height":"100px",
"background-color":"#ff0"
});
- 操作class属性操作样式
//操作的是标签的class属性 <标签 class="class名称">
addClass(class名称) // 追加一个class值
removeClass("class") // class移除
toggleClass("class") // 添加和移除切换。如果没有就添加，如果有就移除。
- jQuery操作标签属性文本
<!-- attr()方法使用 -->
<!-- attr(name) 通过属性名获得属性值。<标签 属性名=“属性值”> -->
<!-- attr(key,val) 给指定的属性设置值。（设置一个） -->
<!-- attr(pro) 给jQuery对象设置一组值。使用JSON格式。 -->
<!-- Pro -> {key:value , key : value , .....} key必须使用双引号，value如果字符串也必须使用双引号。使用单引号，属于畸形格式json -->
<!-- removeAttr(name) 将执行属性移除 -->
//使用示例：
//标签: <input type=’text’name=’value’>
//语法：
$(“:text”).attr(“name”) //获取name的属性值
$(“:text”).attr(“name”，“value”) //设置name的属性值
$(“:text”).removeAttr(“name”) //删除name的属性值
$(“:text”).attr(｛
“name1”：“value1”,
“name2”：“value2”,
｝) //通过JOSN的方式设置一组属性值.
//注意：低版本可以使用attr方法设置属性的值.高版本中建议使用prop的方法设置属性的值.
html(),val(),text()方法使用
操作的是标签的value属性或者标签体
val() 获得 value属性的值。<标签 value="">
val(值) 设置值
html() 获得标签体内容，以标签方式
html(值) 设置内容
text() 获得标签体内容，以文本方式
text(值) 以文本方式设置内容
注意：text和html的区别，当添加的是标签元素时text会把标签当作文本，html会当作标签。
其他方法的使用
- 位置
offset() 获得位置，返回json数据。格式：{"top": xx , "left" : yy}
offset(坐标) 设置位置
position() 获得相对父元素偏移
scrollTop([val]) 获得 或 设置 垂直滚动条的位置
scrollLeft([val]) 获得 或 设置 水平滚动条的位置
- 尺寸
height([val]) 获得 或 设置 高度
width([val]) 获得 或 设置 宽度
jQuery操作文档（重点）
- 操作结构的方法
- 内部插入,外部插入,复制,替换,删除,包裹
A.append(B) ，将B插入到A内部的后面。（追加到后面）
A.prepend(B) ，将B插入到A内部的前面。（追加到前面)
A.appendTo(B) , 将A插入到B内部的后面。（追加到后面）
A.prependTo(B) 将A插入到B内部的前面。（追加到前面）
- 外部插入
A.after(B)，将B插入到A后面
A.before(B) ，将B插入到A前面
A.insertBefore(B) ，将A插入到B前面
A.insertAfter(B) ，将A插入到B后面
-
复制
clone(event [,deepEven])
参数1：表示是否克隆事件
参数2：子元素中绑定数据是否被克隆。 -
替换
A.replaceWith(B) 使用B替换掉A
A.replaceAll(B) 使用A替换掉所有的B -
删除
empty() 清空标签体内容，删除所有子元素
remove() 将指定对象移除，返回值为移除对象。但此对象将绑定事件，绑定数据都一并移除。
detach()将指定对象移除，返回值为移除对象。但此对象保留 绑定事件，绑定数据 等。 -
包裹
wrap(...) ： 每一个匹配元素使用指定的内容包裹。
wrapAll(...)：所有的元素使用一个指定的内容包裹
wrapInner(...)：子节点使用指定的内容包裹。
unwrap(): 移出该元素的父元素。
each()遍历方法
用法
第一种用法
/*第一种方式*/
$("#b1").click(function(){
$("input:hidden").each(function(index,dom){
alert("dom.value" + "===========" + dom.value);
})
})
<input type="button" value=" 选取" id="b2"/>
/*第二种方式*/
$("#b2").click(function(){
$.each($("input:hidden"),function(){
alert("$(this).val()" + "===========" + $(this).val());
})
})
第二种用法
// 定义二维数组:
var arr = new Array(4);
arr[0] = new Array("哈尔滨","齐齐哈尔","大庆","佳木斯");
arr[1] = new Array("长春市","吉林市","四平市","通化市");
arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");
arr[3] = new Array("郑州市","洛阳市","安阳市","南阳市");
var $cities = $(arr[$pro]);
$cities.each(function(){
$city.append("<option>" + this + "</option>");
})
文档的元素筛选的方法
筛选与之前的选择器雷同,筛选提供的都是函数.
- 过滤
eq(index|-index):获取指定索引的元素.如果是正数,索引从0开始;若是负数,倒着数从1开始.
first():第一个
last():最后一个
hasClass(...):判断元素是否含有特定的样式
filter(...):筛选出与指定表达式匹配的元素集合
is(...):判断元素是否符合指定的选择器
has(...):含有特定后代的元素
not(...):删除与指定表达式匹配的元素
slice(start,end):从给定的数组中，按照范围截取元素。 [start,end)
map(fn):将一组元素转换成其他数组
- 查找
children([...]):获取他的所有孩子
closest(...):从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素
find(...):查找后代
next():下一个兄弟
nextAll():后面所有的兄弟
nextUntil(...):从下一个兄弟开始,直到指定元素结束
parent():获取父元素
parents():匹配元素的祖先元素的元素(不包含根元素)
prev():上一个兄弟
prevAll():前面的所有兄弟
prevUntil():从上一个兄弟开始,直至指定元素结束
siblings():所有的兄弟
closest和parents的主要区别是：
- 前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；
- 前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；
- 前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。
- 串联
A.add(B) 将A和B拼凑在一起，等效 $(A,B)
A.children().andSelf() 所有孩子，再添加自己
A.children().end()... 使用end后将返回A位置
contents() 获得所有节点（子元素、文本） <div>abc<a></a> xxx</div>
jQuery的事件绑定
- 常见事件概述
focus和focusin 得到焦点
focus 获得焦点
foucsin 获得焦点。可以在父元素上检测子元素获取焦点的情况
blur和focusout 失去焦点
mouseover 和 mouseenter 移进
mouseover , 如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件
mouseenter ,如果鼠标指针穿过任何子元素，不会触发 mouseenter 事件
mouseout和mouseleave 移除 同上
- 页面的载入事件
注意点：页面加载事件可以向下叠加；在一个页面中可以使用多次
原生JS事件也可以同时绑定，但是最后加载。
绑定语法：
//常用格式1:
$(document).ready(function(){
//....
})
//常用格式2: 格式1的简化版
$(function(){
//......
});
//常用格式3:完整版
jQuery(document).ready(function(){
//......
});
- 事件的处理和委派
处理
on:绑定多个事件
one: 绑定一次事件
bind和unbind
bind:绑定事件,一直使用,直到解绑
例如:$btn1.bind(“click”,function(){}); ===$btn1.click(function(){});
unbind:解绑事件
绑定的时候可以指定别名,格式: 事件.别名
例如:
bind(“click.c1”,fn);
unbind(“click.c1”);
trigger和triggerHandler
trigger() 触发所有的事件（包括浏览器默认的）
triggerHandler() 触发所有的事件（不包括浏览器默认的）
委派
live jQuery给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效,例如给A标签添加事件，之后再追加a标签都具有相同的事件。
事件切换
hover 在mouseover和mouseout之间进行切换
toggle 点击事件切换，点击第一次执行 fn，点击第二次执行fn2.....
jQuery的效果
基本：改变高和宽
show(速度，[fn]) 显示 当显示成功后触发fn
hide() 隐藏
toggle(speed [,fn]) 切换,如果隐藏就显示，如果显示就隐藏。
滑动：改变高度
slideDown ，显示（从上往下）
slideUp，隐藏（从下往上）
slideToggle() 切换
淡入淡出：改变透明度
fadeIn 显示
fadeOut 隐藏
fadeToggle 切换
fadeTo 指定对象透明度
