版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Mabanana/article/details/85220964
1.概念
jQuery是一个快速、简介的JavaScript框架。设计宗旨是“write Less , Do More”,即倡导写更少的代码,做更多的事情。用来封装JavaScript常用的代码功能,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
核心特性可以总计为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展,拥有便捷的插件扩展机制和丰富的插件。
2.JQuery的特点
- 用简洁的代码完成尽可能多的工作
- 改变JavaScript的书写方式
- 支持主流浏览器,包括IE6以上、Firefox2以上、safari2以上和opera9以上版本
- 以强大的CSS选择器为基础,几乎所有的操作都先使用选择器查找DOM对象,然后对齐进行操作
- 屏蔽浏览器的差异,对DOM的操作提供了方便的扩展,易用的事件处理API和动画API
- 强大的插件机制
- 社区活跃,文档齐全且配有示例。学习容易,易用性高
3.JQuery使用
- $
jQuery===$ //就是一个函数,可以获取元素,创建元素
- 使用JQuery步骤
/*引入jquery文件*/
/*入口函数*/
$(function(){...})
jQuery((function){...})
$(document).ready(function(){...})
- DOM对象和jQuery对象互换
/*DOM 使用原生的js的方法获取到的对象,DOM对象只能使用DOM的属性和方法*/
var btn = document.getElementById("btn");
window.onload=function(){...}
/*jQuery对象 jQuery对象 是一个包装集 相当于是伪数组的意思*/
var $btn = $("btn")
$(window).load(function(){...})
/*DOM ==> jquery 不需要双引号*/
$(DOM)
/*jQuery ===》DOM对象 就是加上索引值*/
$btn[0]
$btn.get(0)
- text文本内容
/*text() 获取和设置文本内容,只会获取内容,不会获取标签*/
//获取文本内容
var txt = $("div").text()
//设置文本内容
$("div").text("这是用jQuery的方式来设置的文本内容") //标签不会进行渲染
- 样式
/*获取样式*/
$("div").css("width");
/*设置样式*/
$("div").css("width","600px")
$("div").css({width:"200px",height:"200px"}) //设置多个的时候
/*操作类样式*/
//addClass() 添加类(类名),不会覆盖开始的类名
$("div").addClass("demo") //div盒子增加了demo类名
//removeClass() 移除类样式
$("div").removeClass("demo");
//hasClass() 判断类样式,返回值是true或者false
if($("div").hasClass("demo")){
console.log(123); //如果div盒子有demo样式,就打印123
}
//toggleClass() 切换类样式 有类则删除,没有则添加
$("div").toggleClass("demo");
- 事件
/*on() bind() delegate()注册事件 trigger()触发事件*/
//on的注册事件和解绑事件,一般用这,隐藏冒泡印象,但是托表会有影响
$("ul").on("click",function(){
console.log("常规事件注册")
})
$("ul").on("click","li",function(){
$(this).index() //获取当前的索引值
console.log("事件委托选项卡常用的事件")
})
//on的方式事件解绑
obj.off() //解绑所有的事件
obj.off("mouseenter") //所有的对应的参数的事件
obj.off("click","**") //解绑代理的事件,自身注册的事件不受印象
//trigger() 触发某哥盒子的事件
obj.trigger("click") //触发obj的单击事假,其他事件也是类似的
//bind()可以给同一个事件源,绑定多个相同的事件,不支持给动态创建的元素注册事件
$("div").bind("click mouseenter",function(){
console.log(123);
})
//unbind的解绑事件,不支持给动态创建的元素注册事件
$("div").unbind() //解绑所有的事件
$("div").unbind("click") //解绑对应参数的事件
//delegate()注册事件,支持给动态创建的元素注册事件
$(document.body).delegate("div","click",function(){
console.log(123);
})
//undelegate()解绑对应参数的事件
$("div").undelegate("click"); //解绑对应参数的事件
/*事件名称*/
mouuseenter() //鼠标移入
mouseleave() //鼠标移出
hover(function(){...},function(){...}) //鼠标移入和鼠标移出
focus() //获得焦点
blur() //失去焦点
scroll //鼠标滚动事件
//阻止冒泡 e.stopPropagation()
$("fatherdiv").on("click",function(){
console.log(123);
})
$("sondiv").on("click",function(e){
e.stopPropagation(); //阻止父盒子的单击事件,自己注册事件
})
//禁止盒子滑动,并且子盒子可以滑动
$(".father").on("touchmove", function(e) {
e.preventDefault();
});
$(".father .son").on("touchmove", function(e) {
e.stopPropagation();
});
- 动画
/*显示和隐藏 show()显示 hide()隐藏 toggle()切换*/
$("div").show(2000) //共2000毫秒显示
$("div").hide(2000,function(){
console.log(123); //共2000毫秒隐藏,隐藏后打印出123
})
$("div").toggle(2000) //如果是显示就隐藏,如果是隐藏就显示
/*划入和滑出,支持事件和回调函数 slideDown()划入显示 slideUp()滑出消失 slideToggle()切换划入和滑出*/
$("div").slideDown(2000) //划入,显示出来,在顶部向下划入,在底部向下划入
$("div").slideUp(2000) //滑出,让盒子消失
$("div").slideToggle() //切换划入和滑出
/*淡入和淡出,就是不透明度的改变,支持事件和回调函数*/
$("div").fadeIn(2000) //淡入,就是不透明度慢慢增大,2000毫秒走完
$("div").fadeOut(2000) //淡出,就是不透明度慢慢减小
$("div").fadeTo("opacity","0.6") //直接到指定透明度,在一次设置淡入和淡出都是以opacity为准
$("div").fadeToggle() //切换淡入和淡出
/*运动 linear匀速运动 swing曲线运动*/
$("div").animate({left:800},2000,"linear",function(){
console.log(123); //盒子向右匀速移动800px,2000毫秒走完,并走完后打印出123
})
- 元素处理
- 添加元素
$("元素").append() 在被选元素的结尾插入内容
$("元素").prepend() 在被选元素的开头插入内容
$("元素").after() 在被选元素之后插入内容
$("元素").before() 在被选元素之前插入内容
- 删除元素
$("元素").remove() 删除被选元素(及其子元素)
$("元素").empty() 从被选元素中删除子元素
其中,remove() 方法也可接受一个参数,允许对被删元素进行过滤
比如,删掉 class="a" 的所有 <p> 元素:
$("p").remove(".a");
- 遍历元素
遍历祖先:
$("元素").parent() //返回被选元素的直接父元素
$("元素").parents() //返回被选元素的所有祖先元素
$("元素").parentsUntil() //返回介于两个给定元素之间的所有祖先元素
比如,返回介于 <span> 与 <div> 元素之间的所有祖先元素:
$("span").parentsUntil("div");
- 过滤元素
$("元素").first() //返回被选元素的首个元素
$("元素").last() //返回被选元素的最后一个元素
$("元素").eq() //返回被选元素中带有指定索引号的元素
$("元素").filter() //匹配的元素会被返回,不匹配的元素将会从集合中删除
比如:带有类名 "url" 的所有 <p> 元素:$("p").filter(".url");
$("元素").not() //返回不匹配标准的所有元素
比如:返回不带有类名 "url" 的所有 <p> 元素:$("p").not(".url");
4.别人的 导图
5.emmmmm