jquery--js的升级版
jQuery的学习,主要是前端开发中的JavaScript的框架,提倡用更少的代码,做更多的事情。封装JavaScript常用的功能代码,优化HTML文档操作、事件处理、动画设计和Ajax交互。值得注意的是:在jQuery中虽然可以和JavaScript中的对象进行互换。但一般来说我们在jQuery中很少用js的写法,在对象没有转换过来之前,js和jQuery的方法是不通用的,js对象不能使用jQuery中的方法,js中的样式修改也不能在jQuery中使用。
基础样式:
<style type="text/css">
div{
margin: 0;
padding: 0;
width: 400px;
height: 400px;
background-color: red;
margin: 100px auto;
}
.wit{
width: 800px;
background-color: blue;
}
</style>
<title></title>
</head>
<body>
<div id="ddd"></div>
<button id="btn">转换</button>
jQuery样式修改:
<script type="text/javascript">
// $("button").click(function(){
$("div").css("width",800);
$("div").toggleClass("wit");
// $("div").style.width=800+"px";//错误写法
// })
document.getElementById("btn").οnclick=function(){
console.log("=======");
document.getElementById("ddd").style.width=800+"px";
// document.getElementById("ddd").css("width",800);//错误写法
}
</script>
jQuery的学习,主要从jQuery文档和jQuery最新版本的.js文件学习的。
我们想要什么样的对象,最直接的方法就是在获取对象的时候,两者的获取方式不同区别——js对象是使用document文档获取的。而jQuery对象是通过$符号获取得到。在这里说明一下"$"的作用:
①、$("选择器"),利用选择器选取DOM元素,选择的对象是jQuery对象,
②、js对象和jQuery对象之间的转换,$(js对象)将js对象转换成jQuery对象;jQuery对象转换成js对象格式:::jQuery对象.get(index)或者jQuery对象[index].
③、创建一个新元素:$("<标签元素>")。当然这个创建元素只是创建出来了,还得依靠相应的方法来添加元素上去,总体上来说有这几个方法
1)append() - 在被选元素的结尾插入内容
2)prepend() - 在被选元素的开头插入内容
3)after() - 在被选元素之后插入内容
4)before() - 在被选元素之前插入内容
PS:主要就是放在元素整体前面、后面还是内部整体的前面还是后面。都有相应的方法。
<script type="text/javascript">
$("button").click(function(){
// $("div").css("width",800);
// $("div").toggleClass("wit");
// $("div").style.width=800+"px";//错误写法
// 将jQuery对象转换成js对象
// $("div").get(0).style.width=800+"px";
$("div")[0].style.width=800+"px";
//创建Dom元素并添加到具体位置
// $("#btn").before($("<p>how are you?</p>"));
// $("#btn").after($("<p>how are you?</p>"));
// $("#btn").append($("<p>how are you?</p>"));
$("#btn").prepend($("<p>how are you?</p>"));
})
//document.getElementById("btn").οnclick=function(){
console.log("=======");
document.getElementById("ddd").style.width=800+"px";
//
js对象转换成jQuery对象
// var ddd=document.getElementById("ddd");
// $(ddd).css("width",800);
//
//
document.getElementById("ddd").css("width",800);//错误写法
//}
</script>
jQuery选择器:jQuery借助选择器来进行对DOM元素的选择,$("选择器")引号里面进行修饰,
选择器分类:
基本选择器、层级选择器
过滤选择器
基本过滤
属性过滤
子元素过滤、元素内容过滤
表单元素过滤、表单元素属性过滤
方法操作
jQuery中选择器沿用了css及css3中的选择器,并新添加了css里面一些不能使用的选择器,值得关注的是选择器里面的方法操作,我们讲jQuery就是将JavaScript中常用方法进行归纳整理,所以说方法选择成了一个新的知识点,其中就包括筛选和查找。 需要注意的是基本选择是在引号里面以‘:’隔开而紧跟着前面选择的类型。而方法查找也就是筛选和查找是方法,选择元素的方式是在整个括号外边。
页面加载执行事件(jQuery中可执行多个)和事件的绑定:
可参详下面代码:
<button id="btn">转换(prepend效果)</button>
<div id="ddd"></div>
<div id="ddd1"></div>
<div id="ddd2"></div>
<script type="text/javascript">
// 文档加载完成,,jQuery入口函数
// $(function(){})
// jQuery(function(){})
$(document).ready(function(){//多用这个
//事件绑定
//多用这个 $("button").click(function(){
$("button").on("click",function(){
$("div").eq(0).css("backgroundColor","blue").toggleClass("wit");
})
还有,jQuery中对样式的修改是使用css()方法,jQuery中参数一般是以键值对的形式传入,当有多个的时候,都是用jSon格式。
jQuery中设置样式时属性名和js中一样,都必须是驼峰式的,即有“-”连接的去掉连接符,后面首字母大写,如marginLeft替换margin-left
jQuery中动画效果设置:
jQuery动画效果其实相当的简单,按照效果分类三中基本效果,每种效果方法运用相似
基本动画效果 滑动动画效果
show([speed,[easing],[fn]]):显示选择的元素 slideDown([speed,[easing],[fn]]):向下滑动展示元素
hide([speed,[easing],[fn]]):隐藏选择的元素 slideUp([speed,[easing],[fn]]):向上滑动隐藏元素
toggle([speed,[easing],[fn]]):切换选择的元素 slideToggle([speed,[easing],[fn]]):通过滑动方式展示和隐藏元素
淡入淡出效果设置
fadeIn([[speed],[easing],[fn]]):通过设置透明度方式对指定元素淡入效果实现
fadeOut([[speed],[easing],[fn]]):通过设置透明度方式对指定元素淡出效果实现
fadeTo([[speed],opacity,[easing],[fn]]):把指定元素的透明度值,设置到指定的值
fadeToggle([[speed],[easing],[fn]]):切换指定元素的淡入淡出效果
其中:
speed:属性值表示动画运动速度,或者说以多快的速度完成动画,如果是自己设置的值,单位是毫秒。
easing:属性值表示动画的运动效果,默认是“swing”,可用参数是“linear”,如果要选择更多的动画效果,需要引进外部文件
fn:方法,是在动画完成之后执行的方法。
三个参数都是可要可不要的,如果都不写,有其自己的默认值。
在淡入淡出嗨哟一个值--opacity透明度,表示淡出的时候淡出区间的透明度,在第一次设置了这个透明度之后,后续如果没有特别的设置,后续动画效果的设置都是以这个 透明度来执行的。
自定义动画效果设置:
通过animate方法执行,
animate(params,[speed],[easing],[fn])其中speed,easing,fn和基本动画设值一致。params表示的是一组自定义动画的变化终点的集合。也是用json数组添加上去。
这里我们首先明确一点:当有多个动画同时添加到一个元素中时,它会将这诸多动画效果添加到一个数组中,一个个的执行。所以当一个对象有多个动画效果时,就会有 stop()方法和delay()方法,
stop()里面跟两个boolean值,第一个表示是否清空当前对象需要执行的动画队列(也就是不再执行后续动画操作),第二个是是否完成当前对象正在执行的动画效果。
delay()方法是延迟操作。
jQuery中通过offset()方法和position()方法来获取对象的top,left值,offset得到的是相对于当前文档的值,position得到的是相对于相邻最近的有定位的父元素的值。 offset()方法设值
offset({left:值,top:值})
注意:只要给元素设置了offset,则当前元素自动设置为了relative
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.frame{
position: relative;
box-sizing: border-box;
margin: 100px auto;
width: 800px;
height: 3000px;
padding-top: 2000px;
padding-left: 200px;
background-color: blue;
}
.box{
width: 300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="frame">
<div class="box"></div>
</div>
<script type="text/javascript">
console.log("frame-offset-left值: "+$(".frame").offset().left);
console.log("frame-offset-top值: "+$(".frame").offset().top);
console.log("frame-position-left值: "+$(".frame").position().left);
console.log("frame-position-top值: "+$(".frame").position().top);
console.log("box-offset-left值: "+$(".box").offset().left);
console.log("box-offset-top值: "+$(".box").offset().top);
console.log("box-position-left值: "+$(".box").position().left);
console.log("box-position-top值: "+$(".box").position().top);
</script>
得到的结果: