jQuery基础二

一、操作标签

样式类操作

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

CSS操作

css("color","red")
//DOM操作：tag.style.color="red"

 

二、位置操作

//获取相对窗口的偏移,可以设置值
$('.c1').offset()

// 获取相对于父标签的相对偏移，不能设置值
$('.c2').position()

//设置相对于窗口的偏移值
$('.c1').offset({top:300,left:300})

scrollTop()    // 获取匹配元素相对滚动条顶部的偏移
scrollLeft()   // 获取匹配元素相对滚动条左侧的偏移

 

三、大小操作

$('.c1').height();          //获取高度
$('.c1').width();           //获取宽度
$('.c1').innerHeight();     //获取内容高度+padding
$('.c1').innerWidth();      //获取内容宽度+padding
$('.c1').outerHeight();     //获取内容的高度+padding+border
$('.c1').outerWidth();      //获取内容的宽度+padding+border

 

四、文本操作

$('#d1').text();            //获取标签内部的所有文本内容
$('#d1').html();            //获取标签内部的所有文本内容(包含内部的标签)

$('#d1').text('<b>加粗</b>');     //设置文本内容,不识别标签
$('#d1').html('<b>加粗</b>');     //设置文本内容,能识别标签

 

获取值

$("[type='text']").val();        //获取文本框输入的值
$('input:text').val();           //获取文本框输入的值

 

设置值

val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

五、属性操作

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
prop() // 获取属性
removeProp() // 移除属性

获取文本类的属性用attr（标签上写的属性）

获取返回布尔值的属性prop（DOM对象有的属性）

六、文档处理

添加到指定元素内部的后面

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

移除和清空元素

remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

替换

replaceWith()
replaceAll()

克隆

参数：true，文档和事件都克隆

clone()// 参数