1、jQuery的基本概念
1.1、什么是jQuery
js的方法库,封装了很多js的方法,需要的时候可以直接调用
注意事项:方法调用的时候都要带();
1.2、使用jQuery的三个步骤
//1、 引入jQuery包
<script src="jquery-1.11.1.js"></script>
//2、 入口函数
$(document).ready(function(){});
//3、 书写函数体
$("#btnShowDiv").click(function () {
$("div").show(1000);
});
1.2.1、js与jQuery入口函数执行的差别
js:当页面所有元素包括图片,样式文件,等所有资源都加载完才开始执行;
jQuery:当页面的文档树加载完成后就会执行,并不会等所有的文件都加载完成再执行
1.3、jQuery的版本
1.X 支持IE6/7/8
2.X 不支持IE6/7/8
3.0 不支持IE6/7/8
1.4、$符号的本质
$符其实就是一个函数,参数不同,功能不同(常用的几种功能如下代码)
注意事项:括号中的参数为字符串类型的时候不要忘记引号
$(function() {});//参数是function,说明是入口函数
$("#btnSetConent");//参数是字符串,并且以#开头,是一个标签选择,查找id=“btnSetContent”的元素
$("div");//查找所有的div元素
1.5、jQuery对象与DOM对象
1.5.1、使用js方法获取的页面元素返回的就是dom对象
var btn = document.getElementById("btnShowDiv");
var divs = document.getElementsByTagName("div");
dom对象只可以使用dom对象的方法和属性
domObject.innerHTML = "dom对象设置文本";
domObject.style.display= "block";//dom对象显示对象
domObject.onclick = function() {}//dom对象绑定事件
1.5.2、使用jQuery方法获取页面元素返回的就是jQuery对象
注意事项:jQuery对象调用方法的时候,方法记得加().
$("div");//标签选择器返回的jquery对象。
$("#btnShowDiv");//id选择器返回的jquery对象。
jquery对象只能使用jquery对象的方法
var $obj = $("div");
$obj.html("jquery对象设置文本的方法");
$obj.show();//jquery对象显示文本
$obj.click(function() {});//jquery对象绑定事件
1.5.3、jQuery对象与DOM对象之间的转换
1、jquery对象转DOM对象的方法
var $li = $("li");
//第一种方法(推荐使用)
$li[0]
//第二种方法
$li.get(0)
其实jQuery对象转DOM对象的实质就是取出jQuery对象中封装的DOM对象。
2、DOM对象转jQuery对象的方法
var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象
2、jQuery选择器
2.1、基本选择器
ID选择器
- 用法:$(“#ID”)
- 说明:获取指定的ID,不要忘记引号
类选择器
- 用法:$(“.类名”)
- 说明:获取同一类元素
- 标签选择器
- 用法:$(“selecor”)
- 说明:获取同一类标签的所有元素
- 并集选择器
- 用法:$(“div,p,li”)
- 说明:用逗号分隔,满足条件的所有的所有的元素都会被选中
- 交集选择器
- 用法:$(“div.redClass”)
- 说明:两个元素之间没有空格,同时满足条件的元素才会被选中
2.2、层级选择器
- 子代选择器
- 用法:$(“ul>li”)
- 说明:用>连接,只会选择到他儿子级的元素,不会选择到孙子级的元素
- 后代选择器
- 用法:$(“ul li”)
- 说明:用空格分隔开来,会选择到父级元素下所有的子级元素,包含孙子辈等
2.3、过滤选择器
- :eq(index)
- 用法:$(“li:eq(2)”).css(“color”, “red”)
- 说明:会选择到li下面索引值为2的li标签,注意:元素的索引值是从0开始
- :odd
- 用法:$(“li:odd”).css(“color”, “red”)
- 说明:会选中索引值为奇数的元素,索引值是从0开始的,所以在实际现实中表示的是偶数行
- :even
- 用法:$(“li:even”).css(“color”, “red”)
- 说明:会选中索引值为偶数的元素,索引值是从0开始的,所以在实际现实中表示的是奇数行
2.3、过滤选择器(是方法)
- children(selector)
- 用法:$(“ul”).children(“li”)
- 说明:获取 ("ul")下的所有的儿子级的li,获取到的是一个集合,相当于 (“ul>li”),子类选择器
- find(selector)
- 用法:$(“ul”).find(“li”)
- 说明:获取的是 ("ul")下的所有的li元素包括孙子级,相当于 (“ul li”)后代选择器
- siblings(selector)
- 用法:$(“#first”).siblings(“li”)
- 说明:获取的是所有的兄弟节点,并且不包括自身
- parent()
- 用法:$(“#first”).parent()
- 说明:查找父级节点
- eq(index)
- 用法:$(“li”).eq(2);
- 说明:相当于$(“li:eq(2)”),index从0开始
3、jQuery操作样式
3.1 设置样式
- 设置单个样式
//name:需要设置的样式名称
//value:对应的样式值
css(name, value);
//使用案例
$("#one").css("background","gray");//将背景色修改为灰色
- 设置多个样式
//参数是一个对象,对象中包含了需要设置的样式名和样式值
css(obj);
//使用案例
$("#one").css({
"background":"gray",
"width":"400px",
"height":"200px"
});
- 获取样式
1. name:需要获取的属性名 css(name);
2. 注意:获取样式的时候,如果是多个元素,返回的第一个元素的对应的样式
3. 隐式迭代:设置性操作的操作,设置的是所有的元素
4. 获取性操作:不会遍历,直接返回第一个元素对应的值。
/*案例*/
$("div").css("background-color");
注意:获取样式操作只会返回第一个元素对应的样式值
3.2 操作样式
- 添加样式类
/*name:需要添加的样式类名,注意参数不要带点.*/
addClass(name);
/*例子,给所有的div添加one的样式。*/
$("div").addClass("one");
- 移除所有样式类
//不带参数,移除所有的样式类
removeClass()
//例子,移除div所有的样式类
$("div").removeClass();
- 移除单个样式类
//name:需要移除的样式类名
removeClass("name");
//例子,移除div中one的样式类名
$("div").removeClass("one");
- 切换样式类
//name:需要切换的样式类名,如果有,移除该样式,如果没有,添加该样式。
toggleClass(name);
//例子
$("div").toggleClass("one");
- 判断是否有样式类
//name:用于判断的样式类名,返回值为true false
hasClass(name)
//例子,判断第一个div是否有one的样式类
$("div").hasClass("one");
3.3、总结
1. 如果操作到的样式非常少,可以考虑css方法
2. 如果操作到的样式非常多,那么可以通过class方法来操作,将样式写到一个class类里面。
3. 如果考虑到后期维护方便,将css从js中分离出来,那么推荐使用class的方式来操作。
4、jQuery动画
常用动画
4.1、显示&隐藏
显示 show([speed], [callback])
隐藏 hide([speed], [callback]),用法与显示完全相同
show/hide([speed], [callback]);
//speed(可选):动画的执行时间
1.如果不传,就没有动画效果。
2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
3.固定字符串,用固定的字符串表示当前动画执行的速度快慢,slow(600)、normal(400)、fast(200),如果传其他字符串,则默认为normal。
//callback(可选):执行完动画后执行的回调函数
4.示例: $("div").show("fast", function () { });
注释:show/hide:修改的是元素的width、height、opacity。
4.2、滑入&滑出
滑入(slideUp)
滑出(slideDown),使用方法与show/hide基本一致,是一组动画,效果与卷帘门类似。
slideUp/slidDown(speed, callback);
//speed(可选):动画的执行时间
1.如果不传,默认为normal,注意区分show/hide。
2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
3.固定字符串,slow(200)、normal(400)、fast(600)
//callback(可选):执行完动画后执行的回调函数
滑入滑出的切换
$(selector).slideToggle(speed,callback);
//如果是隐藏状态,那么执行slideDown操作,如果是显示状态,那么执行slideUp操作。
示例: $("div").slideUp(1000, function () {})
注释:slideUp/slideDown:修改的是元素的height。
练习:下拉菜单案例
4.3、淡入&淡出
淡入 fadeIn(speed, callback)
淡出 fadeOut(speed, callback)
fadeIn(speed, callback);
//speed(可选):动画的执行时间
1.如果不传,默认是normal。
2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
3.固定字符串,slow(200)、normal(400)、fast(600)
//callback(可选):执行完动画后执行的回调函数
淡入淡出的切换
fadeToggle(speed, callback);
//如果当前元素处于隐藏状态,那么执行fadeIn操作,如果处于显示状态,那么执行fadeOut操作。
淡入淡出到某个值
fadeTo(speed, value, callback)//可以设置具体的透明度
//speed(必须)
//value 0-1之间的数值(比如0.4),表示淡到某一个值。
//callback(可选) 回调函数
与淡入淡出的区别:淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明;而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的!
注释:fade系列方法:修改的是元素的opacity
4.4、动画总结
jQuery给我们提供了三组动画,show/hide、slideUp/slideDown、fadeIn/fadeOut
动画切换方法:slideToggle、fadeToggle,注意:show和hide没有切换的方法。
淡入淡出到某个值:fadeTo方法。
show/slideDown/fadeIn三个是显示效果、hide/slideUp/fadeOut三个是隐藏效果。
show/hide修改的是元素的height,width,opacity。slide系列方法修改的是元素的height。fade系列方法修改的是元素的opacity。这三种方法修改的这些值,都是带数字的,因为带了数字才能做渐变。
练习:动画集合
自定义动画
$(selector).animate({params},[speed],[callback]);
// {params}:要执行动画的CSS属性,带数字(必选)
// speed:执行动画时长(可选)
// callback:动画执行完后立即执行的回调函数(可选)
动画支持的属性:http://www.w3school.com.cn/jquery/effect_animate.asp
练习:360开机动画
4.5、easing参数
控制动画在不同元素的速度,默认为"swing"
"swing":在开头和结尾移动慢,在中间移动速度快
"linear":匀速移动
4.6、动画队列问题
在同一个元素上执行多个动画,那么对于这个动画来说,后面的动画会被放到动画队列中,等前面的动画执行完成了才会执行
4.7、 停止动画
stop方法:停止动画效果
stop(clearQueue, jumpToEnd);
//第一个参数:是否清除队列
//第二个参数:是否跳转到最终效果
5、jquery操作DOM(节点)
5.1、创建元素
//$(htmlStr)
//htmlStr:html格式的字符串
$("<span>这是一个span元素</span>");
5.2、添加元素
1 添加新建的元素
//方法一:将jQuery对象添加到调用者内部的最后面。
var $span = $("<span>这是一个span元素</span>");
$("div").append($span);
//方法二:参数传字符串,会自动创建成jquery对象
$("div").append("<span>这是一个span元素</span>");
2 添加已经存在的元素
var $p = $("p");
$("div").append($p);
//注意:如果添加的是已经存在的元素,那么会把之前的元素给干掉。(类似于剪切的功能)。
类似的用法:append prepend after before
5.3、清空元素
1 empty:清空指定节点的所有元素,自身保留(清理门户)
$("div").empty();//清空div的所有内容(推荐使用,会清除子元素上绑定的内容,源码)
2 方法二 用html方法传一个空元素
$("div").html("");//使用html方法来清空元素,不推荐使用,会造成内存泄漏,绑定的事件不会被清除。
5.4、删除元素
remove:相比于empty,自身也删除(自杀)
$("div").remove();
5.5、克隆元素
作用:复制匹配的元素
// 复制$(selector)所匹配到的元素(深度复制)
//cloneNode(true)
// 返回值为复制的新元素,和原来的元素没有任何关系了。即修改新元素,不会影响到原来的元素。
$(selector).clone();