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><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>
2001
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
