jQuery学习总结2

目录

一、jQuery特性

二、Class类操作

1.添加类 addClass(类名);

2.移除类 removeClass('类名');

3.判断类 hasCalss('类名');

4.切换类 toggleClass('类名');

三、jQuery动画

四、html();  和  $()

1.html(); 设置或者获取内容

2.$()

五、jQuery追加节点的几种方式

1.append()

2.prepend()

 3.before()

4.after()

5.appendTo()

六、清空节点、移除节点、克隆节点

1.清空节点 empty()

2.移除节点 remove()

七、val();

八、jQuery中操作属性

1.设置属性 attr();

2.获取属性 attr();

 3.移除属性 removeAttr();

九、prop() 操作布尔类型的属性

十、宽、高

1.通过css获取或者设置宽和高

2.width() height()

3.innerWidth()  innerHeight()

4.outerWidth()  outerheight()

5.outerWidth(true)  outerHeight(true)

 十一、offset()  position() scrollLeft() scrollTop()

1.offset()

2.position()

3.scrollLeft()  scrollTop()

十二、链式编程

十三、显示迭代each()

each() 遍历jQuery对象集合，为每一个匹配的元素执行一个函数

---

一、jQuery特性

1. 隐式迭代
2. 链式编程（在于一个方法返回的是一个jQuery对象，既然是jQuery对象就可以继续点出jQuery的方法出来

二、Class类操作

1.添加类 addClass(类名);

（1）添加单个类

$('选择元素').addClass('类名');

（2）添加多个类

$('选择元素').addClass('类名1 类名2 ... 类名n');

2.移除类 removeClass('类名');

（1）移除单个类

$('选择元素').removeClass('类名');

（2）移除多个类

$('选择元素').removeClass('类名1 类名2 ... 类名n');

3.判断类 hasCalss('类名');

$('选择元素').hasClass('类名');
//判断一个元素有没有某个类，如果有就返回true，如果没有就返回false

4.切换类 toggleClass('类名');

$('选择元素').toggleClass('类名');
//如果元素有某个类就移除这个类，如果元素没有就添加这个类

三、jQuery动画

1.显示show();

2.隐藏hide();

3.滑下slideDown();

4.滑上slideUp();

5.淡入fadeIn();

6.淡出fadeOut();

四、html();  和  $()

1.html(); 设置或者获取内容

获取内容：html()方法不给参数

设置内容：html()方法给参数

*会把原来的内容覆盖

*如果设置的内容包含了标签，是会把标签给解析出来的

2.$()

确实能创建元素，但是创建的元素只存在于内存中，如果要在页面上显示，就要追加。

var $link= $('<a href="#">我是新闻</a>');
$('选择元素').append($link);});//追加节点

五、jQuery追加节点的几种方式

1.append()

父元素.append(子元素);
//作为最后一个子元素添加

2.prepend()

父元素.prepend(子元素);
//作为第一个子元素添加

 3.before()

元素A.before(元素B);
//把元素B插入到元素A的前面，作为兄弟元素添加

4.after()

元素A.after(元素B);
//把元素B插入到元素A的后面，作为兄弟元素添加

5.appendTo()

子元素.appendTo(父元素);
//把子元素作为父元素的最后一个子元素添加

六、清空节点、移除节点、克隆节点

1.清空节点 empty()

html("");   也可以清空，但是不推荐，有可能会造成内存泄漏

推荐使用 empty();

2.移除节点 remove()

3.克隆节点 clone()
只存在于内存中,如果要在页面上显示,就应该追加到页面上
clone()方法参数不管是true还是false,都是会克隆到后代节点的
clone()方法参数是true表示会把事件一起克隆到，参数如果是false就不会克隆事件，不给参数默认是false

七、val();

原生js是通过value属性来获取或者设置表单元素的值,

jQueny中通过val();设置或者获取表单元紊的值
1.val()方法,不给参数就是获取
2.val()方法,给参数就是设置

八、jQuery中操作属性

1.设置属性 attr();

（1）设置单属性

$('元素').attr('属性','属性值');

*若以前有这个属性，则更改这个属性

*可修改自定义属性

如果原来没有这个属性，则是添加属性

（2）设置多属性

$('元素').attr({
    属性1:'属性值',
    属性2:'属性值',
    ...
    属性n:'属性值'
});

2.获取属性 attr();

$('元素').attr('属性','属性值');

*自带的属性也可以获取

*自定义的属性也可以获取

*如果没有这个属性，获取到的值就是undefined;

*attr() 设置的属性也是可以获取的

 3.移除属性 removeAttr();

//移除单属性
$('元素').removeAttr('属性');
//移除多属性
$('元素').removeAttr('属性1 属性2 属性3 ... 属性n');

九、prop() 操作布尔类型的属性

有一类属性比如: checked,写在元素的身上就表示选中，没有写在元素的身上就表示没有选中。

这一类属性，用原生js是给他设置true或者false，取值也是得到true或者false.

//设置操作
document.getElementById("Id名").checked = false;
//获取操作。
document.getElementById("ckb1" ).checked;

对于jQuery，若用attr()方法

$('元素' ).attr( 'checked');
//无论是选中还是没有选中，都返回一个undefined

在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法

十、宽、高

1.通过css获取或者设置宽和高

$('元素').css('width height');
//获取的值带有单位'px'

2.width() height()

//获取
$('元素').width();
$('元素').height();
//设置
$('元素').width(值);
$('元素').height(值);//不需要带单位

通过这个方法设置或者获取宽高，不包括padding/border/margin

3.innerWidth()  innerHeight()

该方法返回元素的宽高包括内边距

4.outerWidth()  outerheight()

该方法返回元素的宽高包括内边距和边框

5.outerWidth(true)  outerHeight(true)

该方法返回元素的宽高包括内边距、边框和外边距

6.

//获取可视区宽度高度
$(window).width();
$(window).height();

 十一、offset()  position() scrollLeft() scrollTop()

1.offset()

获取会得到一个对象，里面包含了top和left的值

offset方法获取元素距离document的位置

2.position()

获取会得到一个对象，里面包含了top和left的值

position方法获取元素距离页面的位置

3.scrollLeft()  scrollTop()

表示元素内容被捐出去的宽度、高度

十二、链式编程

1.什么时候可以链式编程？

如果给元素调用一个方法，这个方法有返回值，并且返回的是一个jQuery对象，那就可以继续再点出jQuery方法

2.必须是jQuery对象才能点出jQuery方法

3.有些时候点一个方法返回的的确是一个jQuery对象，但是这个对象又不是我们想要的对象，就不需要再继续点下去了

4.end();  回到上一个对象

这个方法也是一个jQuery方法，也需要一个jQuery对象才能点出来

十三、显示迭代each()

jQuery的隐式迭代会对所有的Dom对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了

each() 遍历jQuery对象集合，为每一个匹配的元素执行一个函数

$(选择器).each(function(index,element){ });
//参数一表示当前元素在所有匹配元素中的索引号
//参数二表示当前元素（Dom对象）