jquery学习之DOM操作

DOM节点创建

例：$("<li>李宁</li>");

DOM克隆

$("ul").clone();

DOM节点增加

函数名语法注释append$(selector).append(content)往selector查询到的对象里追加contentappendTo$(content).appendTo(selector)把content追加到selector查询到的对象里prepend$(selector).prepend(content)往selector查询到的对象最前追加contentprependTo参考appendTo与append区别after$(selector).after(content)往selector查询到的对象后追加contentinsertAfter$(content).insertAfter(selector)把content追加到selector查询到的对象后before$(selector).before(content)把selector查询到的对象前追加contentinsertBefore$(content).insertBefore(selector)把content追加到selector查询到的对象前

DOM节点删除，清空

删除节点：remove()

清空节点：empty()

DOM节点替换

$(selector).replaceWidth(content);用content替换$(selector)选中的元素

$(content).replaceAll(selector);用content替换$(selector)选中的元素

DOM节点包裹

$(selector).wrap(tag);用tag包裹$(selector)选中的所有单个元素

$(selector).wrapAll(tag);用tag包裹$(selector)选中的所有元素，选中节点不连贯时要注意

$(selector).wrapInner(tag);用tag包裹$(selector)选中的所有元素的文本

DOM属性操作

读取属性值：$(selector).attr(属性名)

设置属性值：$(selector).attr(属性名，属性值)

删除属性值：$(selector).removeAttr(属性名)

CSS操作

$(selector).addClass(类名)，给元素增加类

$(selector).removeClass(类名)，为选中的元素清除一个类

$(selector).hasClass(类名)，判断选中的元素有没有类名

$(selector).toggleClass(交替类名)，自动判断选中的元素有没有类名，有则删，无则减

$(selector).css(属性名[,新值])，获取css属性或者设置css属性

html，文本，值得设置，读取

$(selector).html([html代码]):设置或读取某元素内的html代码

$(selector).text([文本内容]):设置或读取某元素内的文本内容

$(selector).val([文本内容]):设置或读取某表单项的值

jquery完成ajax

$.ajax({

type:

url:'xxx',

data:'',

success:function(){}

});

$.get/post({

url:'xxx',

data:'',

success:function(){},

type:'xml/json'

});

注意：$.get,$.post是调用$.ajax来实现的

事件与动画

事件绑定：$(selector).bind(type(事件),function(函数));事件发生，函数运行

取消事件绑定：$(selector).unbind([type][,function]);

事件冒泡

阻止事件冒泡：事件.stopPropagation();

阻止事件的默认行为：事件.preventDefault();

动画

show(),hide(),slideDown(),slideUp(),fadeIn(),fadeOut()