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

一、jquery的加载方法

1. $(document).ready(function(){js代码});
2. $(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的样式$("div").css("width","30px");$("div").css({fontSize:"30px",color:"red"});

注意点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 永远代表当前触发事件的那个对象。