jQuery的使用:
jQuery对象实例对象是一个伪数组存储的
1.先引包
js的入口函数window.onload=funciton(){};是页面上的所有元素加载完毕后触发这个事件
包括音频图片,只能调用一次;
2.入口函数有三种: $(document).ready(function(){})===$(function(){})
入口函数1:
jQuery等页面中的DOM树加载完毕后就执行了不等待图片,音频的加载;
$(document).ready(function () {
alert("我是入口函数1");
});
入口函数2
jQuery(document).ready(function () {
alert("我是入口函数2");
});
入口函数3
$(function () {
alert("我是使用最多的jquery入口函数，因为我比较简单！");
});
入口函数更改版 window.onload包装成jquery入口函数
涉及到图片使用 $(window).load()
$(window).load(function () {
alert("我是入口函数3");
});
3.jQuery绑定时间不需要加on 直接用'click'事件绑定
4.jQuery和原生js的区别就是jQuery操作的是数组
获取到的元素需要添加下标来获取单一的一个元素
5.jQuery对象转换DOM对象的两种方式:
1.$('#demo')[0];
2.$('#demo').get(0);
6.jQuery无法调用js的DOM对象属性和方法要先转化为DOM元素才可以
7.jQuery的选择器
基本选择器:标签选择器('div'),类名选择器('.dv'),ID选择器('#dv')
层级选择器:后代选择器('div li'),子代选择器('ul>li');
基本过滤选择器: ('ul li:eq(index)'),(ul li:odd)从0开始奇数选择器,
(ul li:even)从0开始的偶数选择器,('ul li:last')最后一个选择器
筛选选择器(方法):.find(selector)查找后代中所有的后代元素
.children('li')查找指定元素的亲儿子,.eq(index)符合条件的元素对象的数组下标
.siblings('li')找所有的兄弟元素(不包括自己排他方法),.parent('ul')查找父元素(亲的)
css样式操作:
设置样式:
单个样式可以$(selector).css("color","red")
多个样式操作使用对象添加$(selector).css({"color":"red","font-size":"30px"})
获取样式:
$(selector).css("color")
类样式的操作:
1.hasClass('current') 判断是否存在类
2.addClass('current') 添加类
3.removeClass('current') 删除类
$(selector).removeClass(); 不指定参数，表示移除被选中元素的所有类
4.toggleClass('current') 切换类
动画之隐藏和显示:
1.$(selector).show(1000); // 1000表示什么？
$(selector).show(“slow”);
$(selector).show(1000, function(){});
$(selector).show();
2.$(selector).hide(1000); // 1000表示什么？
$(selector).hide(“slow”);
$(selector).hide(1000, function(){});
$(selector).hide();
3.$(selector).toggle(1000); // 1000表示什么？
$(selector).toggle(“slow”);
$(selector).toggle(1000, function(){});
$(selector).toggle();
动画之滑入滑出:
1.滑入 $(selector).slideDown(speed,callback);
2.滑出 $(selector).slideUp(speed,callback);
3.滑入滑出切换 $(selector).slideToggle(speed,callback)
动画之淡入淡出:
1.淡入 .fadeIn(speed,callback)
2.淡出 .fadeOut(speed,callback);
3.切换淡入淡出 .fadeTogggel(speed,callback)
4. .fadeTo(时长,不透明的值0.5)改变透明度到某个值:
动画之自定义动画:
1.animate({params},speed,function(){})
注意：所有能够执行动画的属性必须只有一个数字类型的值。
比如：要改变字体大小，要使用：fontSize（font-size），不要使用：font
动画之停止动画:
1.stop(boolean,boolean):
// 第一个参数表示后续动画是否要停止
//（true:后续动画不执行 ;false:后续动画会执行）
// 第二个参数表示当前动画是否执行完完毕
//（true:立即执行完成当前动画 ;false:立即停止当前动画）
常用方式：$(selector).stop();
节点操作:
1.父元素.append(子元素) 在元素的最后一个子元素后面追加元素
作用：在被选元素内部的最后一个子元素（或内容）后面插入内容（存在或者创建出来的元素都可以）
如果是页面中存在的元素，那么调用append()后，会把这个元素放到相应的目标元素里面去；但是，原来的这个元素，就不存在了。
如果是给多个目标追加元素，那么方法的内部会复制多份这个元素，然后追加到多个目标里面去。
2.子元素.appendTo(父元素)
3.prepend()
作用：在元素的第一个子元素前面追加内容或节点
$(selector).prepend(node);
3 after()
作用：在被选元素之后，作为兄弟元素插入内容或节点
$(selector).after(node);
4 before()
作用：在被选元素之前，作为兄弟元素插入内容或节点
$(selector).before(node);
html创建元素:html()添加元素会覆盖
// 动态创建元素
$(selector).html(‘传智播客’);
// 获取html内容
$(selector).html();
清空元素和删除元素
// 清空指定元素的所有子元素（光杆司令）
// 没有参数
$(selector).empty();
$(selector).html(“”);
// “自杀” 把自己（包括所有内部元素）从文档中删除掉
$(selector).remove();
复制匹配的元素:
// 复制$(selector)所匹配到的元素
// 返回值为复制的新元素
$(selector).clone();//和参数无关只能深层复制
属性节点操作:
attr是操作属性节点 及html中带的节点 (如 class height src href 等)
设置属性节点得值:
$(selector).attr("title","创智博客")
获取属性的值
$(selector).attr("title");
移除属性:
$(selector).removeAttr("title");
prop是操作元素的属性的
注意：checked、selected、disabled要使用.prop()方法。
值和内容:
获取的就是元素的value的属性值
1.val()方法: 大部分用在表单元素的默认值
作用：设置或返回表单元素的值，例如：input,select,textarea的值
设置所有匹配的元素的值
$(selector).val("具体值");
只获取第一个元素的值
$(selector).val();
2.html()方法:
html():只获取第一个匹配元素的html内容
html(val):设置每一个匹配元素的html内容。
3.text()方法:
text()获取所有匹配元素的内容
（注意：这时候会把所有匹配到的元素内容拼接为一个字符串，不同于其他获取操作！）
text(val):设置所有的匹配元素的内容
宽度和高度的操作:
设置高度和宽度:
$(selector).height(200) ||.width(200);
获取高度:
$(selector).height() ||.width();
css()获取的高度带单位 是字符串类型的
.height()获取的高度是number类型的不带单位可以直接参与运算
坐标值的操作:
offset()
作用：获取或设置元素相对于文档的位置
// 无参数表示获取，返回值为：{left:num, top:num}，值是相对于document的位置
$(selector).offset();
// 有参数表示设置，参数推荐使用数值类型
$(selector).offset({left:100, top: 150});
注意点：设置offset后，如果元素没有定位(默认值：static)，则被修改为relative
position()
作用：获取相对于其最近的具有定位的父元素的位置。
// 获取，返回值为对象：{left:num, top:num}
$(selector).position();注意：只能获取，不能设置。
scrollTop()
作用：获取或者设置元素垂直方向滚动的位置
// 无参数表示获取偏移
// 有参数表示设置偏移，参数为数值类型
$(selector).scrollTop(100);
scrollLeft()
作用：获取或者设置元素水平方向滚动的位置
$(selector).scrollLeft(100);
对scrollTop的理解：
垂直滚动条位置 是可滚动区域 在 可视区域上方的 被隐藏区域的高度。
如果滚动条在最上方没有滚动 或者 当前元素没有出现滚动条，那么这个距离为0
事件绑定:
1.bind("click mouseenter",function(){})（不推荐，1.7以后的jQuery版本被on取代）
缺点：要绑定事件的元素必须存在文档中。
2.$(".parentBox").delegate("p", "click", function(){
//为 .parentBox下面的所有的p标签绑定事件
});
与前两种方式最大的优势：减少事件绑定次数提高效率，支持动态创建出来的元素绑定事件！
3.on()方式
例如:
1.// 表示给$(selector)绑定事件，当必须是它的内部元素span才能执行这个事件
$(selector).on( "click",“span”, function() {});
2.// 绑定多个事件
// 表示给$(selector)匹配的元素绑定单击和鼠标进入事件
$(selector).on(“click mouseenter”, function(){});
事件解绑:
unbind()方式:
$(selector).unbind(); //解绑所有的事件
$(selector).unbind(“click”); //解绑指定的事件
undelegate()方式:
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件
off()方式:
$(selector).off();// 解绑匹配元素的所有事件
$(selector).off(“click”);// 解绑匹配元素的所有click事件
事件触发:
1.简单事件触发:
$(selector).click();//触发click事件
2.trigger方法触发事件
$(selector).trigger("click");
3.triggerHandler触发事件响应方法,不触发浏览器行为,
比如:文本框获得焦点的默认行为
$(selector).triggerHandler("focur");
jQuery事件对象介绍
event.data 传递给事件处理程序的额外数据
event.currentTarget 等同于this，当前DOM对象
event.pageX? 鼠标相对于文档左部边缘的位置
event.target? 触发事件源，不一定===this
event.stopPropagation()；阻止事件冒泡
event.preventDefault();?阻止默认行为
event.type 事件类型：click，dbclick…
event.which 鼠标的按键类型：左1 中2 右3
event.keyCode 键盘按键代码
链式编程
原理:return $(this);
end();结束当前链最近的一次过滤操作，并且返回匹配元素上一次的状态。
each()方法:
// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});
多库共存:
解决方式:释放jQuery对$和jQuery变量的控制权限
例如:
$.noConflict();
//打印当前jQuery的版本号
console.log($.fn.jquery);//1.8.2
console.log(jQuery.fn.jquery);//1.11.1
//jquery1.11.1放弃了两个操作符的权限，然后自定义一个操作符。
// var MrLv = $.noConflict(true);
第三方插件:
Query.color.js
animate()自定义动画：不支持背景的动画效果
animate动画支持的属性列表
jQuery.lazyload.js
使用步骤：
1.引入jQuery文件
2.引入插件
3.使用插件
制作插件:
jQuery对象扩展方法
$.fn. pluginName = function(){};