1、查询
利用选择器查找节点
使用 html() / text() / attr() 输出节点文本和属性值。
注意：下拉列表使用 val()
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>
$(function(){
$('#b1').click(function(){
//$('#d1').html('java');
//将节点的属性读出来
//$('#d1').attr('style');
//$('#d1').attr('style','font-size:30pt');
$('#d1').attr('class','s1');
});
});
</script>
<style>
.s1{
color:red;
}
</style>
</head>
<body>
<div id="d1">hello</div>
<ul>
<li>item1</li>
<li id="i1">item2</li>
<li>item3</li>
</ul>
<input type="button" id="b1" value="点我"/>
</body>
</html>
2、创建
$(html)
3、插入节点
append();
prepend();
after();
before();
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>
$(function(){
$('#b1').click(function(){
var $node = $('<li>item4</li>');
$('ul').append($node);
//$('ul').append('<li>item4</li>'); 和上面是等价的
});
});
</script>
<style>
.s1{
color:red;
}
</style>
</head>
<body>
<div id="d1">hello</div>
<ul>
<li>item1</li>
<li id="i1">item2</li>
<li>item3</li>
</ul>
<input type="button" id="b1" value="点我"/>
</body>
</html>
4、删除节点
remove();
remove(selector);
empty();清空内容
$('#b1').click(function(){ //$('ul li:eq(1)').remove(); $('ul li').remove('li[id=i1]'); $('ul li:eq(1)').empty(); });
5、复制节点
clone();
clone(true); 使复制的节点也具有行为
6、属性操作
读取：attr(' ');
设置：attr(' ', ' ');
或者一次设置多个属性attr({" ", " "});
删除：removeAttr(' ');
$('#b1').click(function(){ $('#d1').attr({"class":"s1","style":"font-size:40pt"}); });
7、样式操作
获取和设置：attr("class", " ");
追加：addClass(' ', ' ');
切换样式：toggleClass(' ', ' ');
是否有某个样式hasClass(' ');
css(' ', ' ');
css({ ' ': ' ', ' ': ' '});
$('#b1').click(function(){ $('div:first').addClass('s1 s2'); $('div:first').removeClass('s2'); $('div:first').toggleClass('s1'); });
8、设置和获取html,文本和值
html() / html(' ')
text() / text(' ')
val() ; 设置和读取元素的值
9、遍历
children()
next();
prive();
siblings():所有兄弟
10、综合实例
<script> $(function(){ $('#b1').click(function(){ //$('#d1').html('java'); //将节点的属性读出来 $('#d1').attr('style'); $('#d1').attr('style','font-size:30pt'); $('#d1').attr('class','s1'); }); $('#b1').click(function(){ var $node = $('<li>item4</li>'); $('ul').append($node); //$('ul').append('<li>item4</li>'); 和上面是等价的 }); $('#b1').click(function(){ //$('ul li:eq(1)').remove(); $('ul li').remove('li[id=i1]'); $('ul li:eq(1)').empty(); }); $('#b1').click(function(){ var $node = $('ul li:eq(2)').clone(); $('ul').append($node); var $node = $('ul li:eq(2)').clone(true); $('ul').append($node); }); $('ul li:eq(2)').click(function(){ //可以使用this来访问符合$('selecotr')查询条件的节点 //alert(this.innerHTML); alert($(this).html()); }); $('#b1').click(function(){ $('#d1').attr({"class":"s1","style":"font-size:40pt"}); }); $('#b1').click(function(){ $('div:first').addClass('s1 s2'); $('div:first').removeClass('s2'); $('div:first').toggleClass('s1'); }); $('#b1').click(function(){ alert($('input[type=text]').val(); alert($('select').val()); //单选和多选框不能这样写 alert($(':radio').val()); alert($(':checkbox').val()); //要这样去写 var $node = $(':radio'); $node.each(function(){ //if($(this).attr('checked')){ // alert($(this).val()); //} if(this.checked){ alert(this.value); } }); }); $('#b1').click(function(){ var $items = $('ul').children(); //如果查询返回的是多个节点，可以使用length属性返回节点的个数 alert($items.length); //如何遍历 $items.each(function(i){ //$(this)html(); alert(this.innerHTML); }); }); }); </script> <style> .s1{ color:yellow; } .s2{ border:1px solid black; } </style> <body> <div>hello</div> <ul> <li>item1</li> <li id="i1">item2</li> <li>item3</li> </ul> <div id="d1" style="background-color:red;">hello</div> <input type="button" value="clickMe" id="b1"/> <input type="text" name="name"/><br/> male:<input type="radio" name="sex" value="m"/> female:<input type="radio" name="sex" value="f"/> fishing:<input type="checkbox" name="intrest" value="fishing"/> cookinng:<input type="checkbox" name="intrest" value="cooking"/> sleeping:<input type="checkbox" name="intrest" value="sleeping"/> <select> <option value="bj">beijing</option> <option value="sh">shanghai</option> <option value="tj">tianjing</option> </select> </body>