一、jquery的加载方法
- $(document).ready(function(){js代码});
- $(function(){js代码});（一般使用这个）;
注意点1：使用jquery必须先导入函数库文件，使用一个单独的script标签，结束代码另起一行script。
<script src="./jquery-1.12.4.js"></script>
<script>js的代码</script>
注意点2：在加载完毕后需要判断是否加载成功，一般使用length属性判断输出，如果不成功，length输出0；成功输出非0.
<script>
$(function () {
$div = $(".box");
console.log($Div.length);
})
</script>
二、jquery选择器，获取标签
说明：选择器和css选择器的写法相同。
- 选择元素：
$(document) //选择整个文档对象
$('li') //标签选择元素
$('#myId') //通过id选择元素
$('.myClass') // 通过class属性选择
$('input[name=first]') // 选择name属性等于first的input元素，通过行内属性和标签结合选择
$('#ul1 li span') //层级选择
- 修饰过滤
$('ul li:first') //选择ul元素下的第一个li
$('ul li:odd') //选择ul元素下的li的奇数行
$('ul li:eq(2)') //选择ul元素下的第3个li
$('ul li:gt(2)') // 选择ul元素下的第三个之后的li
$('ul li:lt(2)') // 选择ul元素下的第三个之前的li，不包括第三个
$('div:visible') //选择可见的div元素
- 函数过滤
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择页面中第1个div元素
$('div').eq(5); //选择角标是5的div元素
- 选择集转移
$('div').prev('p'); //选择div元素前面的第一个p元素
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').closest('div'); //选择离div最近的那个div父元素
$('div').parent(); //选择div的一级父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myClass'); //选择div内的class等于myClass的所有元素
三、jquery的动画animate方法分析
- 使用方法：
$('#div1').animate({
"width":300,
"height":300
},1000,'swing',function(){
alert('done!');
});
- 参数分析：
- 第一个参数设置需要变化的属性，一般用来设置与尺寸相关的属性变化，如果改变的是颜色需要额外引入jquery.color的库。
注意1：属性名必须添加引号，多个属性用逗号隔开值设置如上，可以是300,"300"，"300px",程序可以识别。
-
第二个参数代表动画的时间，以毫秒为单位。
-
第三个参数为运动的方式，"swing"表示渐变，先慢后快，"linear"代表匀速运动。
-
第四个参数表示动画执行完毕后需要执行的函数，可以不写这个参数。
注意2：如果只写第一个参数，则默认500ms，匀速运动，没有执行后动作。
扩展：点击按钮返回顶部页面的通用方法
$("html,body").animate({
"scrollTop":0
});
四、绑定点击事件click
- 语法：
$('#btn1').click(function(){});
说明：参数可以是匿名函数，也可以是命名函数；但如果需要传参，则必须使用匿名函数。
-
内部：使用$(this)代表当前点击的这个元素，如果使用this则是原生的对象。
-
几乎所有的元素类型都可以使用click事件，点击触发，不一定是a、input标签。
五、页面滚动事件
- 语法
$(window).scroll(function(){
......
})
与之相关的有两个常用的获取滚动距离的方法：
$(document).scrollTop(); //获取距离文档顶部的距离
$(document).scrollLeft();//获取距离文档左边的距离
注意：滚动事件只有在文档的高度或宽度大于窗口的宽高时才会生效。
六、操作属性
- 普通样式：
// 获取div的样式
$("div").css("width"); //获取单个样式
$("div").css(["width","height"]);
//获取多个样式，得到一个集合
//设置div的样式
$("div").css("width","30px");
$("div").css({fontSize:"30px",color:"red"});
$(function () {
var $div = $(".box").css("width", function (index,width) {
console.log(index,width);
return 500; //返回设置的宽度
// index代表div的角标，width参数为获取原来的宽度
});
})
注意点1：设置样式时，如果只有一个样式，用逗号隔开，不是冒号；当多个样式设置时才用冒号。
注意点2：选择器获取的是一个选择集，那么获取到的样式为第一个标签的样式。
操作类名：
$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式
注意：addClass()方法中的括号内直接写类名，不再是选择样式。
操作html标签
// 取出html内容
var $htm = $('#div1').html();
// 设置html内容
$('#div1').html('<div>xxx</div>');
注意：取出时会将这个标签下的所有的html内容输出，包括标签本身。
只取文本内容
// 取出文本内容
var $htm = $('#div1').text();
// 设置文本内容
$('#div1').text('添加文字');
注意：设置文本内容时，加入标签是没有作用的，标签会被当做文本进行解析。
设置行内属性
// 取出按钮的值
var $value = $('input').attr('value');
// 设置按钮的值
$('input').attr({ "value":"按钮" });
// 取出图片的地址
var $src = $('#img').prop('src');
// 设置图片的地址和alt属性
$('#img').prop({src: "test.jpg", alt: "" });
注意：以上attr方法和prop方法使用方式一样；但是attr可以获取系统不存在的自定义的属性，而prop获取不到；所有的属性需要用引号包裹，否则报错。
操作尺寸
- 获取元素尺寸
$("div").width() // 获取元素width
$("div").height() //获取元素height
$("div").innerWidth() //获取包括padding的width
$("div").innerHeight() //获取包括padding的height
$("div").outerWidth() //包括padding和border的width
$("div").outerHeight()//包括padding和border的height
$("div").outerWidth(true)//包括padding和border以及margin的width
$("div").outerHeight(true)//包括padding和border以及margin的height
- 获取浏览器可视区的宽高
$(window).width();
$(window).height();
- 获取页面文档的宽度高度
$(document).width();
$(document).height();
- 获取元素相对页面的绝对位置
var $n1 = $("div").offset();
$left = $n1.left; # 获取相对页面左边的距离
$top = $n1.top; # 获取相对页面上边的距离
- 获取元素相对父类的绝对位置
var $n1 = $("div").offsetParent();
$left = $n1.left; # 获取相对父类左边的距离
$top = $n1.top; # 获取相对父类上边的距离
七、常用的特殊效果（动画）
- 淡入、淡出和切换淡入淡出
$('#div1').fadeIn(1000,'swing',function(){
alert('done!');
}); //淡入，事件1秒，渐变，参数和animate相仿
fadeOut() 淡出
fadeToggle() 切换淡入淡出
- 参数：
- 第一个参数代表动画的事件，单位为ms;
- 第二个参数表示动画的方式，"swing"表示渐变，先慢后快，"linear"代表匀速运动。
- 第三个参数表示动画完成后执行的函数。
注意：下面的动画方法和这里的参数一样。
- 隐藏、显示和切换
hide() 隐藏元素
show() 显示元素
toggle() 切换显示状态，参数和上面相同
- 展开、卷起和切换
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 展开和卷起切换
说明：以上的效果一般使用在点击事件中。
八、循环
- 语法：
$('div').each(function(i,j){
...
})
说明：当一次获取了多个div时，如果需要对每个元素进行不同的有规律的操作，使用each方法，内部用$(this)代表循环到的那个元素。
- 默认参数
循环方法中的function匿名函数中携带了两个默认参数，如上代码，i代表当前div的角标值，j代表当前div元素本身;这两个参数可以用任何变量表示。
- 扩展：
each循环和annimate动画嵌套不能改变颜色，如下：
$div.each(function (i,j) {
$(this).animate({
"background":"blue",
});
});
说明：该代码欲要实现每个div背景色逐个变蓝，实际不会起任何的作用；但对于宽高等属性是起作用的。
九、this关键字
$lis.click(function () {
//此时的$(this)代表$lis选择集下的当前点击的$lis
$(this).prevAll().each(function () {
//$(this)代表点击的$lis.prevAll()，this代表的元素发生了改变
$(this).animate({
"left": 21 * $(this).index(),
})
})
})
总结：this 永远代表当前触发事件的那个对象。
- 作者：天宇之游
- 出处：http://www.cnblogs.com/cwp-bg/
- 本文版权归作者和博客园共有，欢迎转载、交流，但未经作者同意必须保留此段声明，且在文章明显位置给出原文链接。