jQuery学习笔记
一,认识jQuery
一个js的方法库。
(1)
$(function(){ // DOM渲染完毕执行函数
function();
})
(2)注意jQuery 和 DOM 对象(js原生获取)是不同的。
-
前者是个伪数组。
-
jQuery对象只能用jQuery方法,DOM对象只能用原生js的属性和方法
-
他们可以相互转化
//1, DOM转jQ $(DOM对象) //2,jQ转DOM $('div')[0] $('div').get(0)
二,jQ常用API
1, 选择器
(1)基础选择器
(2)自带选择器
(3)筛选选择器
$('p:first') // 获取第一个p元素
$('p:last') // 获取最后一个p元素
$('p:eq(n)') // 获取索引号为n的p元素(从0开始)
$('p:odd') // 获取索引号为奇p元素
$('p:even') // 获取索引号为偶p元素
(4)筛选方法
// 语法 用法 说明
parent()
$("li"). parent(); //查找父级
children(selector)
$("ul").children("li")相当于$("ul>li"") //最近一级(亲儿子)
find(selector)
$("ul").find("li");相当于$("ul li") //后代选择器
siblings(selector)
$(".first").siblings("li"); //查找兄弟节点,不包括自己本身
nextAll([expr])
$(".first") .nextAll() //查找当前元素之后所有的同辈元素
prevtAll([ expr])
$(".last").prevAll() //查找当前元素之前所有的同辈元素
hasClass(class)
$('div').hasClass("protected") //检查当前的元素是否含有某个特定的类,如果有,则返回true
eq(index)
$("li").eq(2); //相当于$("li:eq(2)"),index从0开始
2,jQuery样式操作
(1)样式
$("div").css("display"); // 返回属性值
$("div").css("display","none") // 修改
$("div").css("width",300): //属性值为数字加单位,可以不加引号,不要单位
// 多个属性修改 ---- 对象形式,冒号,逗号,驼峰命名法
$("div").css({
"width": 200,
"backgroundColor": "red"
})
(2)添加类
// 添加 不要加 . 删除,添加都不影响原先就有的类名
$("div").addClass("myAddClass");
// 删除
$("div").removeClass("myAddClass");
// 切换 -- 添加后删除
$("div").toggleClass("myAddClass");
3, jQuery效果
动画效果------建议查文档
动画队列及其停止排队方法
-
动画或效果队列:动画或者效果一旦触发就会执行,如果多次触发,他们就会排队执行。
-
停止排队
stop() // stop()写到动画或者效果的前面,相当于停止结束上一次动画。 $("div").stop().slideUp();
(1)基本
//显示隐藏效果
show([speed],[easing],[fn]);
//显示参数
//( 1) 参数都可以省略,无动画直接显示。
//( 2 ) speed :三种预定速度之一的字符串(“slow”,"normal”,or“fast”)或表示动画时长的毫秒数值
//( 3 ) easing :(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
//( 4 ) fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
//隐藏
hide([speed],[easing],[fn]);
// 切换
toggle([speed],[easing],[fn]);
(2)滑动
// 下滑
slideDown([speed],[easing],[fn]);
// 上拉
slideUp([speed],[easing],[fn]);
// 切换
slideToggle([speed],[easing],[fn]);
(3)淡入淡出
// 淡入
fadeIn([speed],[easing],[fn]);
// 淡出
fadeOut([speed],[easing],[fn]);
//切换
fadeToggle([speed],[easing],[fn]);
//参数
//(1 )参数都可以省略。
//( 2 ) speed :三种预定速度之一的字符串(“slow”,"normal”,or“fast”)或表示动画时长的毫秒数值
//( 3 ) easing : (Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
//渐进方式调整到指定的不透明度
fadeTo ([ speed , opacity, [easing] , [ fn] ])
//参数
//( 1 ) opacity透明度必须写,取值0~1之间。
//(2) speed :三种预定速度之一的字符串(“slow”,"normal”,or“fast”)或表示动画时长的毫秒数值必须写
//( 3 ) easing :(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)自定义动画
animate(params,[speed],[easing],[fn])
// 参数 params 是想要更改的样式,以对象形式传递,必须写
$("div").animate({
left:500,
top:300,
opacity: .5
}, 500) // 在500ms 内完成运动
4,jQuery属性操作
(1)获取/修改 元素固有属性
element.prop("attribute","value");
(2)获取/修改 元素自定义属性
element.attr("attribute","value");
<--也可以获取 H5 的data-开头的自定义属性 -->
<div data-index = "1"> </div>
<script>
$("div").attr("data-index");
</script>
(3)数据缓存 data()
//data()方法可以在指定的元素上存取数据,并不会修改DOM元素结构,一旦页面刷新,数据将移除
$("div").data("uname","jack");
// 也可以用它获取 H5 自定义属性
$("div").data("index"); // 可以不用写 data-,而且返回的是 数字型
5,设置文本内容
(1)
$().html(); //相当于 innerHTML
$().text(); //相当于 innerText
$().val(); // 获取或设置表单的值
6,元素操作
6.1 遍历元素
(1)
$("div").each(function (index, domEle){
// index是索引号,注意domEle是dom元素对象
})
(2)
$.each(obj,function(index, element) { }) // 主要用于遍历数组和对象,也可以遍历元素
//遍历元素
$.each($("div"), function(i,ele){});
// 遍历数组
$.each(arr,function(i,ele){}); // 这里的ele是数组内的元素
//遍历对象
$.each(person,function(i,ele)); // 这里类似于for in,i是属性名,ele是属性值
6.2 创建元素
(1)创建
var p = $("<p>创建的元素标签</p>");
(2)内部添加*(父子关系)
// 放在父元素最后面
$("div").append(p);
// 放在父元素最前面
$("div").prepend(p);
(3)外部添加(兄弟关系)
//放在div元素的后面
$("div").after(p);
//前面
$("div").before(p);
(4)删除元素
element.remove() // 删除匹配的元素(本身)
element.empty() // 删除匹配元素集合中所有的子节点
7,尺寸操作
(1) 尺寸
width() / height() //取得匹配元素宽度和高度值只算width / height
innerWidth()/ innerHieght() //取得匹配元素宽度和高度值包含padding
outerWidth() / outerHeight() //取得匹配元素宽度和高度值包含padding . border
outerWidth(true) / outerHeight(true)//取得匹配元素宽度和高度值包含padding . borde、margin
//以上参数为空,则是获取相应值,返回的是数字型。
///如果参数为数字,则是修改相应值。
width(300);
//参数可以不必写单位。
(2)位置
// 1 获取盒子距离文档的位置(偏移)
$("div").offset();
// 也可以设置距离
$("div").offset({
top:100,
left:200
})
// 2 获取距离带有定位的父级位置(偏移),不能设置大小
$("div").position();
// 3 设置或获取被卷去的头部,左侧
$("div").scrollTop();
$("div").scrollLeft();
8,jquery事件
8.1,事件注册
(1)事件注册
// 1,单个事件注册
$("div").click(function(){} );
(2)事件处理 on () 绑定事件
// 语法
element.on( event, [selector], fn)
// 1 event 一个或多个用空格分隔的事件类型,如"click"或“keydown”
// 2 selector 元素的子元素选择器
// (1)绑定多事件
$("div").on({
click:function(){},
mouseover:function(){}
});
// (2)事件函数相同的情况
$("div").on("mouseover mouseout", function() {
$(this).toggleClass("current");
}
});
// (3) 事件委托
$("ul").on("click","li",function(){}) //事件绑定在父元素 ul 上
// (4)动态创建的元素绑定事件
$("ul").on("click","li",function(){})
var li = $("<li>动态创建</li>");
$("ol").append(li); // 注意是利用事件委托实现的
(3)绑定一次性事件
$("div").one("click",function() {});
(4)事件切换
.hover([func1()],func2()); // 鼠标经过触发func1.离开触发func2
.hover(func()) // 只有一个就经过和离开都触发
8.2,事件解绑
(1)off() 方法可解绑通过 on() 绑定的事件
// 解除所有绑定事件
$("div").off()
// 解除某个事件
$("div").off("click");
// 解除事件委托
$("ul").on("click","li",function(){});
$("ul").off("click","li");
8.3,自动触发事件
$("div").click() // 1
$("div").trigger("click",function() {}); // 2
$("div").triggerHandler("click", function() {}); // 3,这个方法不会触发元素的默认行为
8.4,事件对象
事件被触发,就会有事件对象的产生。
element.on (events, [selector] ,function(event) { })
//阻止默认行为:
event.preventDefault();
return false; //或者
//阻止冒泡:
event.stopPropagation();
三、其他
1,jQuery对象拷贝
如果想要把某个对象拷贝(合并)给另外一个对象使用,此时可以使用$.extend ()方法。
$.extend ([deep], target, object1, [objectN ])
//1.deep:如果设为true为深拷贝,默认为false浅拷贝
//2.target:要拷贝的目标对象(空对象)
//3.object1:待拷贝到第一个对象的对象。
//4.objectN:待拷贝到第N个对象的对象。
//5.浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象。
//6.深拷贝,前面加true,完全克隆(拷贝的对象,而不是地址),修改目标对象不会影响被考贝对象。
2,多库共存
//1 如果$ 符号冲突,可以使用jQuery
jQuery("div");
//2 让jQuery释放对 $ 的控制权,用户自定义符号
var infi = jQuery.noConflict();
infi("div");
四,jQuery插件
常见插件库