jquery笔记整理
01-jquery简介
1）功能：
·html元素选取
·html元素操作
·css操作
·html事件函数
·javascript特效和动画
·dom的遍历及修改
·ajax
·utilities
·插件
2）版本支持
·jquery2 及以上不支持ie6,7,8
·使用注释:
·<!--[if lt ie 9]>
·<script src="script/jquery-1.9.0.js"></script>
·<![endif]-->
·<!--[if gte ie 9]><!-->
·<script src="script/jquery-2.0.0.js"></script>
·<!--<![endif]-->
3）版本
·production version:实际网站，压缩版
·development version：测试和开发，未压缩
4)引用：
文件类型:xxx.js
·<script src="xxx.js"></script>
·cdn（内容分发网络）引用
·<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
--cdn:
https://baike.baidu.com/item/cdn/420951?fr=aladdin
常用cdn引用：
1、谷歌
<script src=">
</script>
2、微软
<script src="http://ajax.microsoft.com/ajax/jquery/jquery/1.10.2/jquery.min.js">
</script>
使用百度、又拍云、新浪、谷敌或微软的jquery，有一个很大的优势：
许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jquery。
所有结果是，当他们访问您的站点时，会从缓存中加载jquery，这样可以减少加载时间。
同时，大多数cdn都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，
这样也可以提高加载速度。
02-jquery语法
1）步骤：
$(selector).action();
·$:jquery
·查询：selector
·操作: action
2)选择器：xpath(xml中的查询信息的语言)+css
$(this).hide();
$("p").hide();
$("p.test").hide();
$("#test").hide();
3)文档就绪事件：
//文档加载完执行方法
$(document).ready(function(){
});
$(function(){
});
03-jquery选择器
1）html
1、元素
2、id
3、class
2）css
$("p").css("background","red");
3)more
$("*") --选取所有元素
$(this) --选取当前htnl元素
$("p.td") --选取class为td的p元素
$("p:first")--选取第一个p元素
$("ul li:first")--选取第一个ul li元素
$("ul li:first-child")选取每个ul的第一个li元素
$("[href]") --选取带有href属性的元素
$("a[target='_blank']")--选取所有target属性为"_blank"的a元素
$("a[target!='_blank']")--选取所有target属性不为"_blank"的a元素
$(":button")--选取所有type="button"的input元素和button元素
$("tr:even")--选取偶数位置的tr元素
$("tr:odd")--选取奇数位置的tr元素
4)独立文件内引用jquery函数
04-jquery事件
1）dom事件对应的jquery事件
2）常见事件：
鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
3）比较keypress、keydown与keyup
·keydown： 在键盘上按下某键时发生，一直按着则会不断触发（opera浏览器除外），它返回的是键盘代码；
·keypress： 在键盘上按下一个按键，并产生一个字符时发生，返回ascii码。
注意：shift、alt、ctrl等键按下并不会产生字符，所以监听无效，
换句话说，只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
·keyup： 用户松开某一个按键时触发，与keydown相对，返回键盘代码。
05-jquery效果-01隐藏显示及切换
1)隐藏和显示，切换
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
//$(selector)选中的元素为n，callback执行n次
//callback可以是函数名，也可以是匿名函数
//callback函数名后加括号，函数会立即执行，而不是完成显示隐藏后执行
可选参数speed为显示速度
取值：slow,fast,毫秒
可选参数callback是隐藏或显示或切换后执行的函数名称
例：$("p").hide(1000,function(){
$(p).show();
});
05-jquery效果-02淡入淡出
1）淡入淡出函数
·fadein()--淡入
·fadeout()--淡出
·fadetoggle()--如果淡入，则淡出，反之。
·fadeto()
$(selector).fadein(speed,callback);
$(selector).fadeout(speed,callback);
$(selector).fadetoggle(speed,callback);
$(selector).fadeto(speed,opacity,callback);--speed,opacity为必选参数
05-jquery效果-03滑动
1)滑动函数
slidedown()
slideup()
slidetoggle()
$(selector).slidedown(speed,callback);
$(selector).slideup(speed,callback);
$(selector).slidetoggle(speed,callback);--在slideup,slidedown之间切换
--没有注明都为可选参数
05-jquery效果-04动画
1)animate简介
--用于创建自定义动画
--语法：
$(selector).animate({params},speed,callback);
--params为必选参数，定义了形成动画的css属性
$(selector).animate({styles,speed,easing,callback);
--easing为内置函数
取值：swing,liner
$(selector).animate(styles,options);
--options为规定动画的额外选项
可能的值：
·speed-设置动画的速度
·easing-规定要使用的easing 函数
·callback-规定动画完成之后要执行的函数·step-规定动画的每一步完成之后要执行的函数
·queue-布尔值。指示是否在效果队列中放置动画。如果为false，则动画将立即开始
·specialeasing-来自styles参数的一个或多个css属性的映射，以及它们的对应 easing函数
//默认情况下html都有一个静态的位置，设置位置时要相对于css设置，如设置子属性
//父级relative,子absolute
//params可以为多个属性，逗号隔开
--animate可以所有的css属性，必须使用camel命名属性名，如paddingleft,marginleft
--如果要生成颜色动画，jquery提供了color animations插件
--只有数字值可创建动画(margin:30px)，字符串无法创建动画(background:red)
2)animate()使用相对值
+=,-= --创建相对动画，相对于元素的当前值改变
例：
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
</script>
3)animate()使用预定义的值
show,hide,toggle
例：
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
</script>
4)animate()使用队列功能
例：
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'});
div.animate({width:'300px',opacity:'0.8'});
div.animate({height:'100px',opacity:'0.4'});
div.animate({width:'100px',opacity:'0.8'});
});
});
</script>
05-jquery效果-05停止动画
1)stop()
语法：
$(selector).stop(stopall,gotoend);
--可选参数stopall规定是否清除动画队列，默认为false
--可选参数gotoend规定是否立即完成当前动画，默认为false
--
05-jquery效果-06callback方法
1)
callback函数在当前动画完成后执行。
//javascript代码是逐条执行的通过传参执行函数可以避免动画
//效果冲突。
例：
有回调函数
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});
});
</script>
无回调函数
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
alert("现在段落被隐藏了");
});
});
</script>
05-jquery效果-07chaining方法
1)chaining方法
--允许我们一条语句中执行多个jquery方法（相同元素上）
--jquery方法链接
--即将多个动作函数链接起来执行
例：
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red").slideup(2000).slidedown(2000);
});
});
</script>
书写格式：（厉害！！！）
//jquery会舍弃多余的空格，当成一句去执行
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red")
.slideup(2000)
.slidedown(2000);
});
});
</script>