前端笔记----jquery入门知识点总结

一、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/
本文版权归作者和博客园共有，欢迎转载、交流，但未经作者同意必须保留此段声明，且在文章明显位置给出原文链接。