1、jQuery引入
a、在本地直接引入——<script src="jquery-1.10.2.min.js"></script>
b、在CDN上引入——<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
2、jQuery优点
写得少,做的多、兼容性好
3、jQuery是什么:
一个JavaScript的函数库、轻量级的写得少做的多的JavaScript库。
jQuery库包含以下内容:HTML元素选取、HTML元素操作、CSS操作、HTML事件函数、JavaScript特效和HTML遍历和修改。
4、入口:
a、jQuery(document).ready(function(){在这里开始写内容})
b、$(document).ready(function(){在这里开始写内容})
c、$(function(){在这里开始写内容})
可以有多个入口,而js只能有一个。
5、jQuery和JavaScript的区别:
执行时机: window.onload 必须等待网页全部加载完毕(包括图片)然后再执行包裹代码。
$(function(){}) 只需要等待网页中的DOM结构加载完毕,就能执行包裹的代码。
执行次数: js 执行一次,如果有第二次那么第一次就会被覆盖。
jQuery执行多次,不会覆盖。
写法: window.onload=function(){}
jquery 的可以简写
6、选择器
分为: 基本选择器、层级选择器、过滤选择器、筛选选择器
基本选择器:标签、类名、id、并集选择器、交集选择器
层级选择器:子代、后代。
过滤选择器:
:eq(index) 选择索引号是index的元素
:odd 选择索引号是奇数的元素
:even 选择索引号是偶数的元素
筛选选择器:
子类选择器:$(".box").children() 选取类名为box的子代 children(selector)
后代选择器:$(".box").find("li") 选取类名为box的后代叫li标签的后代 find(selector)
兄弟选择器:$(".outer>li:eq(2)).siblings() 选取索引为2的li的兄弟们 siblings(selector)
父亲选择器:$("#first").parent(); 查找父亲
下一个兄弟:$(".outer").next()
上一个兄弟:$(".outer2").prev()
获取当前位置:$(".outer2").index();
not $("li:not(.no)")
7、css方法()
1、返回css属性 css("propertyname"); 用法:$("p").css("background-color");
2、设置css属性 css("propertyname","value"); 用法:$("p").css("background-color","yellow");
3、设置多个属性 css({"propertyname":"value","propertyname":"value",...}); 用法:$("p").css({"background-color":"yellow","font-size":"200%"});
8、css类的一些操作
1、addClass() 添加一个或者多个类名
2、removeClass() 删除一个或者多个类名
3、toggleClass()添加/删除类的切换操作
9、jQuery动画
1、hide() 隐藏
2、show() 显示
3、toggle() 隐藏、显示切换
---------------------------
1、fadeIn(speed,callback)淡入
2、fadeOut(speed,callback)淡出
3、fadeToggle(speed,easing,callback) 淡入、淡出切换
------------------------------
1、slideDown(speed,callback) 向下滑动
2、slideUp(speed,callback) 向上滑动
3、slideToggle(speed,back) 上下滑动切换
---------------------------------
jQuery自定义动画
animate({
left:‘250px‘,opacity:‘0.5‘,height:‘150px‘ //等等
})
---------------------------------
stop()方法 停止动画和效果,在他们完成之前
回调函数:事件执行完后再写一个函数。
10、事件委托delegate()
$(selector).delegate(childrenSelector,event,data,function)
注意: childrenSelector只要是后代就可以,但是必须是后代!
如果childrenSelector不是标签选择而是类名或者其它要写成“.class”而不是$(".class")
被委托的是事件源,this指向事件源。
11、each()方法
each()方法:为每个匹配元素规定要运行的函数
$("button").click(function(index,element){
$("li").each(function(){
alert($(this).text())
});
});
数组.forEach(function(value,index){})
数组上的forEach()的参数顺序正好相反