查找节点和创建节点
1.查找节点
1.查找元素节点
查找元素节点非常简单,用 jQuery 择器即可完成。
var $li = $('ul li:eq(1)');
var li_txt = $li.text();
alert(li_txt);
2.查找属性节点
利用选择器查找到需要的元素之后,就可以使用attr()方法来获取它的各种属性值。
var $para = $('p');
var p_text = $para.attr('title');
alert(p_text);
2.创建节点
1.创建元素节点
使用 jQuery 的工厂函数$()来完成创建,然后使用append()方法插入文档中。
var $li_1 = $('<li>1</li>');
var $li_2 = $('<li>2</li>');
$('ul').append($li_1);
$('ul').append($li_2);
2.创建属性节点
创建属性节点也是直接在创建元素时一起创建。
var $li_1 = $('<li title="香蕉">香蕉</li>');
var $li_2 = $('<li title="雪梨">雪梨</li>');
$('ul').append($li_1);
$('ul').append($li_2);
“插入节点和删除节点
1.插入节点的方法
方法 描述 示例
append() 向每个元素内部追加内容
appendTo() 将所有匹配的元素追加指定的元素中
prepend() 向每个匹配的元素内部前置内容
prependTo() 将所有匹配的元素前置到指定元素中
after() 在每个匹配的元素之后插入内容
insertAfter() 将所有匹配的元素插入到指定元素的后面
before() 在每个匹配的元素之前插入内容
insertBefore() 将所有匹配的元素插入到指定元素的前面
var $li_1 = $("<li title='香蕉'>香蕉</li>");
var $li_2 = $("<li title='雪梨'>雪梨</li>");
var $li_3 = $("<li title='其他'>其他</li>");
var $parent = $('ul');
$parent.append($li_1);
$parent.prepend($li_2);
var $two_li = $('ul li:eq(1)');
$li_3.insertAfter($two_li);
2.删除节点
jQuery提供了三种方法删除节点:remove(),detach(),empty()。
1.remove()方法
remove()方法的返回值是被删除节点的引用。
var $li = $('ul li:eq(1)').remove();//删掉第二个
$li.append('ul');
remove()方法还可以通过传递参数来选择性的删除元素。
$(‘ul li’).remove(‘li[title!=菠萝]’);
2.detach()方法
同样是从DOM中去掉所有匹配的元素,但不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。
$('ul li').click(function(){
alert($(this).html());
});
var $li = $('ul li:eq(1)').detach();
$li.appendTo('ul');
3.empty()方法
严格来讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中所有后代节点。
var $li = $('ul').empty();`
复制节点和替换节点
1.复制节点
可以使用clone()方法完成,赋值节点后,被复制得新元素并不具备任何行为。
在clone()方法中传递一个参数true,复制元素的同时复制元素中所有绑定事件。
$('ul li').click(function(){
$(this).clone(true).appendTo('ul');
});
2.替换节点
替换节点可以使用replaceWith()和replaceAll()。
relpaceWith()是将所有匹配的元素都替换成指定的HTML或者DOM元素。
$('p').replaceWith('<strong>你最不喜欢的水果是?</strong>');
$('<strong>你最不喜欢的水果是?</strong>').replaceAll('p');
包裹节点和属性操作
1.包裹节点
可以用wrap()方法将某个节点用其他标记包裹起来。
$('strong').wrap('<b></b>');
1.wrapAll()方法
该方法会将所有匹配的元素用一个元素来包裹。
$('strong').wrapAll('<b></b>');
2.wrapInner()方法
该方法将每一个匹配的子元素(包括文本节点)用其他结构化的标记包裹起来。
$('strong').wrapInner('<b></b>');
2.属性操作
1.获取属性和设置属性
在jQuery中,用attr()方法获取和设置元素属性,removeAttr()方法来删除元素属性。
如果要获取
元素的属性title,那么只需要在attr()方法中传入属性名。
var $para = $("p");
var p_txt = $para.attr('title');
console.log(p_txt);
如果要设置
元素的属性值,也使用同一个方法。
$('p').attr('title','your title');
//设置多个属性
$('p').attr({'title':'your title','name':'aaa'});
2.删除属性
删除属性可以用removeAttr()方法来完成。
$('p').removeAttr('name');
样式操作
1.获取和设置样式
我们一般在用 class 属性添加样式,因此可以用attr()方法来完成。
$("p").attr("class")
$("p").attr("class","high");
2.追加样式
jQuery 提供了addClass()方法来追加样式。
$("p").addClass("another");
3.移除样式
相对应的,使用removeClass()方法来删除 class 的某个值,他的作用是从匹配的的元素中删除全部或指定的 class 。
//删除所有样式
$("p").removeClass();
//删除指定样式
$("p").removeClass("high");
4.切换样式
jQuery 提供了toggleClass()方法控制样式上的重复切换。如果类名存在则删除它,如果类名不存在则添加它。
$("p").toggleClass("another");
5.判断是否含有某个样式
hasClass()可以用来判断元素中是否含有某个 class 。
$("p").hasClass("another");
本节所有代码:
jqueryDomStyle.html
$(function(){
$("input:eq(0)").click(function(){
alert( $("p").attr("class") );
});
$("input:eq(1)").click(function(){
$("p").attr("class","high");
});
$("input:eq(2)").click(function(){
$("p").addClass("another");
});
$("input:eq(3)").click(function(){
$("p").removeClass();
});
$("input:eq(4)").click(function(){
$("p").removeClass("high");
});
$("input:eq(5)").click(function(){
$("p").toggleClass("another");
});
$("input:eq(6)").click(function(){
alert( $("p").hasClass("another") )
alert( $("p").is(".another") )
});
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
设置和获取HTML、文本和值
1.html()方法
此方法类似于javascript中的innerHTML属性,可以用来读取和设置元素中的HTML内容。
<p title="请选择你最喜欢的水果"><strong>你喜欢的水果是?</strong></p>
$p_html = $('p').html();
lg($p_html);
$('p').html('<strong>你最喜欢的水果是???</strong>');
2.text()方法
text()方法类似于javascript中的innerText属性,可以用来读取或设置元素中的文本内容。
<p title="请选择你最喜欢的水果"><strong>你喜欢的水果是?</strong></p>
var p_text = $('p').text();
lg(p_text);
$('p').text('你最不喜欢的水果是?');
3.val()方法
此方法类似于javascript中的value属性,可以用来设置和获取元素的值。
无论元素是文本框,下拉列表还是单选框,都可以返回元素的值。如果元素为多选,则返回一个包含所有选择的值的数组。
jqueryVal.html
<input type="text" id="address" value="请输入邮箱地址"/>
$("#address").focus(function(){
var txt_value = $(this).val();
if(txt_value==this.defaultValue){
$(this).val("");
}
});
作业:dom比较2.html中的功能
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(function(){
attract();
var $seldel=undefined;
var seldel=undefined;
function attract(){
$('ol li').click(function(){
$('li').css('background','green');
$(this).css('background','pink')
$seldel=$(this)
seldel=this
})
}
$('#btnAdd1').click(function(){
var input=window.prompt('请输入数据')
var $newli=$('<li>'+input+'</li>')
$newli.appendTo('ol')
attract();
})
document.getElementById('btnAdd2').onclick=function(){
var input=window.prompt('请输入数据')
var newli=document.createElement('li')
newli.innerHTML=input
document.getElementById('ol').appendChild(newli)
attract();
}
$('#btnDel1').click(function(){
$seldel.remove()
})
document.getElementById('btnDel2').onclick=function(){
seldel.parentNode.removeChild(seldel)
}
$('#btnInsert1').click(function(){
var input=window.prompt('请输入数据')
var $newli=$('<li>'+input+'</li>')
$newli.insertBefore($seldel)
attract();
})
document.getElementById('btnInsert2').onclick=function(){
var input=window.prompt('请输入数据')
var newli=document.createElement('li')
newli.innerHTML=input
seldel.parentNode.insertBefore(newli,seldel)
attract();
}
$('#btnEdit1').click(function(){
var oldText=$seldel.html()
var $edit=$('<input id="btnE" value="'+oldText+'">')
$seldel.html($edit)
$edit.focus();
$edit.blur(function() {
var newText=$edit.val();
$seldel.html(newText);
});
})
})
</script>
</head>
<body>
<ol id="ol">
<li id="haha">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<input id="btnAdd1" type="button" value="jquery添加数据" />
<input id="btnAdd2" type="button" value="dom添加数据" />
<input id="btnDel1" type="button" value="jquery删除数据" />
<input id="btnDel2" type="button" value="dom删除数据" />
<input id="btnInsert1" type="button" value="jquery插入数据" />
<input id="btnInsert2" type="button" value="dom插入数据" />
<input id="btnEdit1" type="button" value="jquery编辑数据" />
<input id="btnEdit2" type="button" value="dom编辑数据" />
</body>
</html>