jQuery
其是对javascript封装的一个框架包
简化对javascript的操作
javascript代码：获得页面节点对象、ajax元素节点对象实现、事件操作、事件对象
jquery代码：无需考虑浏览器兼容问题、代码足够少
特点：
① 语法简练、语义易懂、学习快速、丰富文档。
② jQuery 是一个轻量级的脚本，其代码非常小巧
③ jQuery 支持 CSS1~CSS3 定义的属性和选择器
④ jQuery 是跨浏览器的，它支持的浏览器包括 IE 6.0+、FF 1.5+、Safari 2.0+和 Opera 9.0+。
⑤ 能将 JavaScript 脚本与 HTML 源代码完全分离，便于后期编辑和维护。
⑥ 插件丰富，除了 jQuery 自身带有的一些特效外，可以通过插件实现更多功能
3. 出现的年代
jQuery 是继 Prototype 之后又一个优秀的 JavaScript 框架，由 John Resig 于 2006 年初创建， 目前最新版本为 1.11.2，官方地址为：http://jquery.com/，中文地址为 http://jquery.org.cn/。
4. 其他相关的javascript框架包
Prototype、YUI、Extjs、bindows、JSVM(国内)、mootools、jQuery
Prototype：与面向对象的原型继承关键字一致，该框架的特点是功能扩展比较容易。
YUI: yahoo user interface 雅虎用户接口，该框架可以实现各种页面布局效果。
例如效果之一：标签切换对应内容
Extjs: 是目前js框架包里边最为时尚、前沿的。通过该框架包可以实现许多非常绚丽的效果。
该框架可以实现效果之一：页面不同区域进行拖拽效果。
该框架由于实现的效果非常“绚丽”、导致其“实用”价值相对略低。
jQuery：javascript+query
使用前期，jquery侧重快速找到页面上各种节点。
后期jquery丰富了事件操作、ajax操作、动画效果、DOM操作等等。
选择器
在页面上获得各种元素节点对象而使用的条件就是选择器。
document.getElementById()
document.getElementsByTagName();
document.getElementsByName();
1. 基本选择器
$(‘#id属性值’) ----------->document.getElementById()
$(‘tag标签名称’)----------->document.getElementsByTagName();
$(‘.class属性值’) class属性值选择器
$(‘*’) 通配符选择器
$(‘s1,s2,s3’)联合选择器
层次选择器
2.1 $(s1 s2) [父子]
派生选择器：在s1内部获得全部的s2节点(不考虑层次)
$(“div span”)
2.2 $(s1 > s2) [父子]
直接子元素选择器:在s1内部获得s2的子元素节点
$(“div > span”)
2.3 $(s1 + s2) [兄弟]
直接兄弟选择器：在s1后边获得紧紧挨着的第一个兄弟关系的s2节点
$(“div + span”)
2.4 $(s1 ~ s2) [兄弟]
后续全部兄弟关系节点选择器：在s1后边获得全部兄弟关系的s2节点
$(“div ~ span”)
3. 并且(过滤)选择器:
:first $("tr:first")
:last
:not
:even
:odd
:eq(index)
:gt(index)
:lt(index)
:gt(index)
:header 匹配h1...h6标题元素
内容过滤选择器
4.1 :contains(内容)
包含内容选择器，获得节点内部必须通过标签包含指定的内容
$(“div:contains(beijing)”)
linken love beijing
jack love shanghai
4.2 :empty
获得空元素(内部没有任何元素/文本(空) )节点对象
$(“div:empty”)
linken love beijing
jack love shanghai
![]()
4.3 :has(选择器)
内部包含指定元素的选择器
$(“div:has(#apple)”)
hello
4.4 :parent
寻找的节点必须作为父元素节点存在
$(“div:parent”)
linken love beijing
jack love shanghai
![]()
5. 表单域选中选择器
复选框、单选按钮、下拉列表
$(:checked) : 过滤出被选中的复选框,单选按钮
$("input:lt(4):checked");
$(:selcted) 获得下拉列表的选中情况
四. 属性操作
itnode.属性名称
itnode.属性名称= 值;
itnode.getAttribute(属性名称);
itnode.setAttribute(属性名称，值);
jquery方式操作属性(attribute)：
$().attr(属性名称); //获得属性信息值
$().attr(属性名称，值); //设置属性的信息
$().removeAttr(属性名称); //删除属性
$().attr(json对象); //同时为多个属性设置信息值，json对象的键值对就是名称和值
$().attr(属性名称，fn); //通过fn函数执行的return返回值对属性进行赋值
五. 快捷操作
1. class属性值操作
$().attr(‘class’,值);
$().attr(‘class’);
$().removeAttr(‘class’); //删除class的属性
$().addClass(值); //给class属性追加信息值
$().removeClass(值); //删除class属性中的某个信息值
$().toggleClass(值); //开关效果，有就删除，没有就添加
标签包含内容操作
helloworld
javascript操作：
dvnode.innerHTML 获得div包含的信息
dvnode.innerHTML = XXX； 设置div包含的内容
(innerHTML不是w3c标准技术，许多浏览器对其有支持而已)
jquery操作：
$().html(); //获得节点包含的信息
$().html(信息); //设置节点包含的内容
$().text(); //获得节点包含的“文本字符串信息”内容
$().text(信息); //设置节点包含的内容(有html标签就把“><”符号变为符号实体)
1 html() 和 text()方法的区别：
① 获取内容
前者可以获取html标签 和 普通字符串内容
后者只获取普通字符串内容
② 设置内容
前者可以设置html标签 和 普通字符串内容
后者只设置普通字符串内容，如果内容里边有tag标签内容，就把其中的”<”“>”符号转变为符号实体 <-----< >----> 空格------
以上两种操作(获取/设置)如果针对的操作内容是纯字符串内容，则使用效果一致。
3. css样式操作
$().css(name，value); //设置
$().css(name); //获取
$().css(json对象); //同时修改多个css样式
3.1 css()样式操作特点：
① 样式获取，jquery可以获取 行内、内部、外部的样式。
dom方式只能获得行内样式
② 复合属性样式需要拆分为"具体样式"才可以操作
例如： background 需要拆分为 background-color background-image 等进行操作
border： border-left-style border-left-width border-left-color 等
margin： margin-left margin-top 等
value属性快捷操作
$().attr(‘value’);
$().attr(‘value’,信息值);
快捷操作：
$().val(); //获得value属性值
$().val(信息值); //设置value属性的值
该val方法在 复选框、单选按钮、下拉列表 的使用有凸出表现。
复选框操作
全选、反选、全不选
$().attr(‘checked’,true); //设置复选框选中
$().attr(‘checked’,false); //取消复选框选中
$().attr(‘checked’); //判断复选框选中情况，返回布尔值
总结：
1. 属性操作
$().attr(name)
$().attr(name,value)
$().attr(json对象);
$().removeAttr(name)
$().attr(name,function)
2. 快捷操作
a) class属性值的操作
$().addClass(value)
$().removeClass(value)
$().toggleClass(value)
b) 包含内容操作
$().html() $().html(value)
$().text() $().text(value)
c) css样式操作
$().css(name,value)
$().css(name)
$().css(json对象)
d) val()
$().val()
$().val(value)
e) 复选框选中操作
$().attr(‘checked’,true);
$().attr(‘checked’,false);
- jQuery和DOM关系
$符号的由来
$(‘div’) $(‘.apple’) $(‘*’)等等。
$符号就是一个函数，函数名称为”$”符号而已。也可以使用jQuery符号。
var jQuery = (function(selctor,context){
return new jQuery.fn.init(selector,context);
}
return window.jQuery = window.$ = jQuery
);
使用jquery过程中用到的$符号，其在jquer框架内部体现为是函数，其和jQuery关键字互为别名
jquery对象 与 dom对象关系
jquery对象：$(‘li’) $(‘.apple’) 等选择器使用返回的信息就是jquery对象
dom对象： document.getElementById()
document.getElementsByTagName();
1. jquery对象 和 dom对象 互相调用对方的成员
jquery对象 与 dom对象 互相调用对方成员失败了
原因：它们不是平等关系，导致其成员也有层次划分。
jquery对象 是 包含 dom对象的
2.jquery对象 如何封装的dom对象
dom对象 和jquery对象做合并，dom对象 是jquery对象 的数组组成部分。
3. jquery对象 和 dom对象 的转化
3.1 jquery对象-----》dom对象： $()[下标]
$("#apple")[1].style.backgroundColor = "red";
3.2 dom对象-----》jquery对象：$(dom对象)
var div = document.getElementById("apple");
$(div).css("background-color","green");
var lis = document.getElementsByTagName("li");
$(lis[2]).css('color','red');
- jquery框架对象分析
jquery框架对象类型：jquery对象 和 $对象
① jquery对象就是各种选择器创建出来的对象
② $对象就是函数对象
1. jquery对象
$("#apple").css()/attr()/html()/text()/addClass 等方法可以调用
2. $函数对象
$函数对象可以调用的许多成员也是通过extend复制继承过来的
$.get() $.post() $.ajax()
上无论是jquery对象 还是 $对象，他们98%以上的成员都是通过各自的extend复制继承过来的。
遍历方法
each()方法：
$.each(数组/对象,function处理); //$对象 调用的
$(选择器).each(function处理); //jquery对象 调用的
//each遍历对象
var cat = {name:"kitty",age:22,run:function(){console.log("running!")}};
jQuery.each(cat,function(k,v){
console.log(k+'----'+v);
});
//2.遍历对象
var colors = ['red','blue','green'];
jQuery.each(colors,function(i,val){
console.log(i + '----' + val);
});
/*
遍历jQuery对象
$('li').each(function(i dom对象下标索引,val 代表具体的dom对象){});
this代表遍历出来的每个DOM对象
*/
$('li').each(function(i,val){
console.log(i + '----' + val+'+++'+ this);
});
- 加载事件
javascript的加载事件：
window.onload = function(){}
1. jquery加载事件实现
① $(document).ready(function处理);
② $().ready(function处理);
③ $(function处理); 对第一种加载的封装而已
2.jquery加载事件与传统加载事件的区别
2.1 设置个数
在同一个请求里边，jquery的可以设置多个，而传统方式只能设置一个
传统方式加载事件是给onload事件属性赋值，多次赋值，后者会覆盖前者。
jquery方式加载事件是把每个加载事件都存入一个数组里边，成为数组的元素，执行的时候就遍历该数组执行每个元素即可，因此其可以设置多个加载事件。
2.2 执行时机不一样
传统方式加载事件，是全部内容(文字、图片、样式)在浏览器显示完毕再给执行加载事件。
jquery方式加载事件，只要全部内容(文字、图片、样式)在内存里边对应的DOM树结构绘制完毕就给执行，有可能对应的内容在浏览器里边还没有显示。
3.jquery加载事件原理
jquery加载事件是对DOMContentLoaded的封装(而非onload)
八. 普通事件操作
① dom1级事件设置
itnode.onclick = function(){}
itnode.onclick = 函数;
② dom2级事件设置
itnode.addEventListener(类型，处理，事件流);
itnode.removeEventListener(类型，处理，事件流);
node.attachEvent();
node.detachEvent();
③ jquery事件设置
$().事件类型(事件处理函数fn); //设置事件
$().事件类型(); //触发事件执行
事件类型：click、keyup、keydown、mouseover、mouseout、blur、focus等等
例如：$(‘div’).click(function(){事件触发过程this});
（该方式事件函数内部this都代表jquery对象内部的dom节点对象）。
jquery调用的大部分方法里边的this关键字都代表其对应的dom对象。
九. jquery对文档的操作
通过jquery方式实现页面各种节点的追加、修改、删除、复制等操作
1. 节点追加
1.1 父子关系追加
主动:append(content)
prepend(content)
被动:
appendTo(content)
prependTo(content)
1.
2.
function func(){this}
3.itnode.onclick = func;
function func(){this}
4.itnode.onclick = function (){this}
只有第二种情况this代表window,其它三种都是代表input元素节点对象
兄弟关系追加:
主动:
after(content)
before(content)
被动:
insertAfter(content)
insertBefore(content)
$("shu li:last").after("xxx ");
$("#fei").before("aaaa ");
2.节点替换
replaceWith(content)
$('select').replaceWith('content');
replaceAll(selector);
$('content').replaceAll('select')
3.节点删除
//删除父元素的全部子元素
$('#shu').empty();
$("#wu li:first,#gai").remove();
4.复制节点
clone([false]); //只复制对象的节点
clone([true]); //复制元素节点及其身上的对应事件;
十. 属性选择器使用
[attribute] : $("div[id]");
[attribute=value] : $("input[name=selector]");
[attribute!=value]
[attribute^=value],以value值开始的元素:$("input[name^="news"]")
[attribute$=value],以value值结尾的元素:$("input[name$="news"]")
[attribute*=value],包含元素:$("input[name*="news"]")
[selector1][selector2][selctor3]:并且选择器,需要同时满足多个条件时使用
$["input[id][name$='man']"]
- 事件绑定
事件绑定
jquery事件的简单操作：
$().事件类型(function事件处理);
$().事件类型();
1.1 jquery事件绑定
$().bind(事件类型，function事件处理);
$().bind(类型1 类型2 类型3，事件处理); //给许多不同类型的事件绑定同一个处理
$().bind(json对象); //同时绑定多个不同类型的事件
(事件类型：click mouseover mouseout focus blur 等等)
事件处理：有名函数、匿名函数
1.2 取消事件绑定
① $().unbind(); //取消全部事件
② $().unbind(事件类型); //取消指定类型的事件
③ $().unbind(事件类型，处理); //取消指定类型的指定处理事件
注意：第③种取消事件绑定，事件处理必须是有名函数。
事件绑定是丰富事件操作的形式而已。
从dom2级事件操作开始，同一个对象可以绑定多个同类型的事件，具体如下：
dvnode.addEventListener(‘click’,fn);
dvnode.addEventListener(‘click’,fn);
$(‘div’).click(function);
$(‘div’).click(function);
2. 事件委派
live(type,[data],fn) bind() //后续添加的元素也会有与当前兄弟节点一样的事件
die([type],func) //与live反向,绑定的事件会移除 unbind()
3. 事件对象、阻止浏览器默认动作、阻止事件冒泡
$().bind(‘click’,function(evt){ window.event });
$().click(function(evt){});
$().bind(‘mouseover’,f1);
function f1(evt){}
事件对象：就使用红色的evt即可，在jquery框架内部有做浏览器兼容处理。
阻止浏览器默认动作、阻止事件冒泡：
dom2级浏览器默认动作阻止：
事件对象.preventDefault(); 主流浏览器
事件对象.returnValue = false; IE浏览器
dom2级事件冒泡阻止：
事件对象.stopPropagation(); 主流浏览器
事件对象.cancelBubule = true; IE浏览器
在jquery里边：
$().bind(‘click’,function(evt){
evt.preventDefault();
evt.stopPropagation();
});
preventDefault()方法是jquery的方法，名字与js底层代码的名字一致而已。
并且其有做浏览器兼容处理
stopPropagation()方法是jquery的方法，名字与js底层代码的名字一致。
- 动画效果
1.基本动画
show(speed,[callback])
hide(speed,[callback])
toggle()
toggle(switch)
toggle(speed,[callback]) //切换元素的可见状态
2.垂直动画
slideUp()
slideDown()
slideToggle()
3.颜色渐变动画
fadeIn(speed,[callback])
fadeOut(speed,[callback])
fadeTo(speed,opacity,[callback])
fadeToggle(speed,[callback])
- jquery封装的ajax
具体操作：
$.get(url [,data] [,fn回调函数] [, dataType]);
data:给服务器传递的数据，请求字符串 、json对象 都可以设置
fn：回调函数，ajax请求完成后调用该函数，可以在此函数完成ajax的后续处理
dataType：服务器返回数据类型，html、text、xml、json
(该ajax是异步的get方式请求)
$.post(url[,data][,fn回调函数][, dataType]);
该方法与$.get()方法使用完全一致，不同的是其为post方式请求
$.ajax({ //json对象
url:请求地址,
data:给服务器传递的数据,
dataType:数据从服务器返回格式html、text、xml、json
type:get/post请求方式
success:function(){} ajax成功请求后的回调函数，可以做后续处理使用
async:[true]异步/false同步，
cache:[true]缓存/false不缓存,
}
)
- jquery插件开发
什么是jquery插件
jquery框架本身给我们提供了一些方法供使用。但是方法的数目是有限的，其不能任意满足我们对各种功能的需求。那么我们自己可以来给jquery框架开发、扩展一些额外功能方法。
开发、扩展jquery框架额外方法的过程就是“插件开发”
2. 两种形式丰富方法
① 给$.fn(给jquery对象)丰富
$.fn.成员 = 值;
$.fn.extend(json对象);
② 给$(给$对象)丰富
$.成员 = 值;
$.extend(json对象);