jQuery常用dom操作

jQuery让出$使用权

var jq = jQuery.noConflict();//让出$使用权，转而使用jq

var jq = jQuery.noConflict(true);//让出$以及jQuery的使用权，转而使用jq

　　

jquery对象与dom对象转化

　　$("#id")[下标]---------转化为dom对象

　　$(dom对象)  ---------转化为jquery对象

 

节点增删改

在父节点追加子节点

$("ul").append("<li>啊啊</li>");    //在#id下面追加li子节点
$("ul").append($('#id'));    //将找到的#id一移动到ul最后的子节点后面

//与append相反，追加到最前面
$('ul').prepend("<li>啊啊</li>");
$("ul").prepend($('#id'));

将子节点追加到父节点（appendTo参数可以不带$）

$("<li>啊啊</li>").appendTo($("#id"))
$("<li>啊啊</li>").appendTo("#id")
$("#id").appendTo("ul");
$("#id").appendTo($("ul"));

兄弟级追加节点

$('#d1').after($('li:.h'));			//将#d1的后面插入li:h（#d1的后面是li:h）
$('#d1').before($('li:.h'));		//将#d1的前面插入li:h（#d1的前面是li:h）

$('#d1').insertAfter($('li:.h'));	//将#d1插入到li:h的后面
$('#d1').insertBefore($('li:.h'));	//将#d1插入到li:h的前面

　　

节点替换

$('#d1').replaceWith($('<a href="">baidu</a>'));    //将#1替换成***
$('input:#apple').replaceAll("#d1");                //用***替换#d1        

节点复制

var ull = $("ul").clone();	//复制一个节点，然后需要使用追加节点的方法addpend、prepend等｛clone(参数);参数如ture表示深层复制，包括事件，false（默认）表示不复制事件｝

ull.appendTo("#d2");		//将复制的节点追加到#d2
$(ull).appendTo("#d2");		//将复制的节点追加到#d2()第二种　

删除节点

$('ul').empty();	//删除ul下所有的子节点
$('ul').remove();	//删除匹配到的所有ul节点

　　

操作属性节点(type属性不支持修改和删除)

1. attr('name')——取值（如果jq对象是多个，则只取得第一个值，例如：$('.class').attr('name')——只获得第一个class的name属性值）
2. attr('name','value')——赋值
3. 如果参数是json对象，那么则会同时修改多个属性值，例如：var kv = {name:'username',value:'tom'}; $('#username').attr(kv);
4. 还可以通过函数的返回值来修改属性值，例如：$('#username').attr('name',function(){return 'tom'})
5. 删除属性：$('input').removeAttr('id');

 

操作class——可以使用attr()（方法1）替代

1. $('div').attr('class','class');
2. addClass()  为节点设置class属性
3. removeClass()  删除节点的class属性值
4. toggleClass()  操作class属性有开关效果(有就删除，没有就添加)

val()方法——可以获取或取得节点的value属性，可以使用attr()方法替代。

 

html()方法：替换innerHTML（非w3c标准）的使用，html()符合w3c标准

1. $("#id").html()——获取#id下面所有的子节点的html内容
2. $("#id").html('<p>你好！世界</p>')——替换#id下面所有的子节点的html内容

text()方法：用法与html()类似，不同的是用html()赋值时，在浏览器会把html标签正常解析，而text()则会把html标签转化成字符实体，在网页上可见，取值的时候，text()只取文本内容，忽略html标签。

 

css()方法——设置节点样式（用法于attr()方法类似，操作样式属性）

快捷设置宽和高$('#id').height(100)——$('#id').width(100)（可用css方法替代，$('#id').css('height','100px')）

each()变量数组或对象：$.each()——$('li').each();