jQuery 操作 DOM

元素属性操作


attr(name);  //获取元素属性，参数name表示属性名称
attr(key,value);  //设置元素属性，参数key表示属性名称，value表示属性值
attr({key0:value0, kery1:value1}); //设置多个元素属性
attr(key, function()); //可以绑定一个function()函数，通过该函数返回的值作为元素的属性值
removeAttr(name);//删除元素属性

元素操作

获取和设置元素内容

//与js中的innerHTML属性类似，获取或设置元素的HTML内容
html();  //获取元素的HTML内容
html(val);  //设置元素的HTML内容，val参数为元素的HTML内容
//与js中的innerText属性，获取或设置元素的文本内容
text(); //获取元素的文本内容
text(val);  //设置元素的文本内容，val参数为元素的文本内容

获取和设置元素值

//该方法常用于表单中获取或设置对象的值
var();//获取某元素的值
val(val); //设置某元素的值
//通过val()可以获取select标记中的多个选项值
val.join(",");

元素样式操作

//直接设置元素样式
css(name,value); //name为样式名，value为样式的值
//增加元素CSS类名
addClass(class);//class为类名
addClass(class0 class1 ...);//添加多个类名，用空格隔开
//切换元素CSS类名
toggleClass(class);//参数class为类名，当元素中含有名称为class的CSS类名时，删除该类名，否则增加一个该名称的CSS类名
//删除元素CSS类名
removeClass( [class] ); //删除选择的类名
removeClass(); //删除所有类名

页面元素操作

$(html); //参数html表示用于动态创建DOM元素的HTML标记字符串，$(div)动态创建一个div标记
//内部插入节点
append(content); //向所选择的元素内部插入内容content
append(function(index, html)); //向所选择的元素内部插入function函数所返回的内容
appendTo(content); //把所选择的元素追加到另一个指定的元素合集中，$("span").appendTo($("div"))
prepend(content); //向每个所选择的元素内部前置内容
prepend(function(index,html)); //向所选择的元素内部前置function函数所返回的内容
prependTo(content);//将所选择的元素前置到另一个指定元素的集合中
//外部插入节点
after(content); //向所选择的元素外部后面插入内容
after(function); //向所选择的元素外部后面插入function函数所返回的内容
before(content);//向所选择的元素外部前面插入内容
before(function);//向所选择的元素外部前面插入function函数所返回的内容
insertAfter(content); //将所选择的元素插入另一个指定的元素外部后面
insertBefore(content);//将所选择的元素插入另一个指定的元素外部前面
//复制元素节点
clone();//复制元素本身
clone(true);//复制元素包括该元素的全部行为
//替换元素节点
replaceWith(content); //将所有选择的元素替换成指定的HTML或DOM元素，参数content为被所选择元素替换的内容
replaceAll(selector);//将所有选择的元素替换成指定selector的元素，参数selector为需要被替换的元素
//包裹元素节点
wrap(html);//把所有选择的元素用其他字符串代码包裹起来
wrapInner*i=(html); //把所有选择的元素的子内容(包含文本节点）用字符串代码包裹起来
//遍历元素
each(callback); 
//删除页面元素
remove([expr]); //参数expr为可选项，清空所选择的页面元素或所有的后代元素
empty();//不是真正意义上的删除，只是可以清空全部的节点或节点所包含的所有后代元素，并非删除节点和元素

javascript