三 dom操作
1.查询 利用选择器找到节点后，访问节点的html内容，节点的text内容， 节点的值，节点的属性值 html():访问节点的html内容，相当于dom节点的innerHTML属性 text():访问节点text的内容，相当于innerText属性 val():访问节点的值,如下拉列表的值 attr():输出或者设置节点的属性值 例子:<html><!-- 查询 --><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="../js/jquery-1.4.3.js"></script><script type="text/javascript"> function f1(){ //alert($('#d1').html()); //alert($('#d1').text()); $('#d1').html('hello java'); } function f2(){ //alert($(':text').val()); $(':text').val('zs'); } function f3(){ //alert($('#d1').attr('id')); $('#d1').attr('style', 'font-size:60px;color:red;'); }</script></head><body style="font-size:30px"> <div id="d1"><span>hello jQuery</span></div> username:<input name="username"/><br/> <input type="button" value="查询" οnclick="f3();"/> </body></html> 2.创建 $(html); 3.插入节点 append(); 向每个匹配的元素内部追加内容 prepend() 向每个匹配的元素内部前置内容 after() 在每个匹配的元素之后插入内容 before() 在每个匹配的元素之前插入内容 例子 例子:<html><!-- 创建节点和添加节点 --><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="../js/jquery-1.4.3.js"></script><script type="text/javascript"> function f1(){ var $obj = $('<div>兴趣是第一位的</div>'); $('body').append($obj); } function f2(){ $('body').append('<div>兴趣是第一位的</div>'); } function f3(){ var $obj = $("<div></div>"); $obj.html('其次是多练习'); $('body').append($obj); } function f4(){ $('ul').append('<li>newItem</li>'); } function f5(){ $('body').prepend('<div>多看看优秀的代码</div>'); } function f6(){ $('a').after('<p>hello java</p>'); }</script></head><body style="font-size:30px;"> <a href="javascript:;" οnclick="f6();">如何才能学好java?</a> <br/> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> <ul> <li>item11</li> <li>item22</li> <li>item33</li> </ul></body></html>4.删除节点 remove() remove(selector) empty() 清空节点 例子:<html><!-- 删除节点 --><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="../js/jquery-1.4.3.js"></script><script type="text/javascript"> function f1(){ $('ul li:eq(1)').remove(); } function f2(){ $('ul li:eq(1)').empty(); } function f3(){ $('ul li').remove('#l2'); }</script></head><body style="font-size:30px;"> <ul> <li>item1</li> <li id="l2">item2</li> <li>item3</li> </ul> <input type="button" value="删除节点" οnclick="f3();"/></body></html>
5.复制节点
clone() 复制(不复制行为) clone(true); 使复制的节点也具有行为(绑定在该节点上的事件) 如何绑定事件在节点上 1)//将事件处理代码绑订到dom节点之上。 var obj = document.getElementById('b1'); obj.οnclick=f1; 2) <!-- 将事件处理代码绑订到html标记之上 --> <input type="button" value="ClickMe" id="b1" οnclick="f1();"/> 复制例子:<html><!-- clone --><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="../js/jquery-1.4.3.js"></script><script type="text/javascript"> /* 可以将这儿的代码放到.js文件里，然后引入 该文件，这样做，可以将js代码与html代码完全 分离，方便代码的维护。 */ $(function(){ /* $('#b1').click(function(){ var $obj = $('ul li:eq(2)').clone(); $('ul').append($obj); }); */ $('ul li:eq(2)').click(function(){ alert('hello'); }); $('#b1').click(function(){ var $obj = $('ul li:eq(2)').clone(true); $('ul').append($obj); }); });</script></head><body style="font-size:30px;"> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> <input type="button" value="clone方法" id="b1"/></body></html>6.属性操作
attr(''); 读取属性 设置:attr('','') 或者一次设置多个attr({"":"","":""}); 删除:removeAttr('') 例子: <html><!-- 属性操作 --><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style> .s1{ font-size:60px; }</style><script type="text/javascript" src="../js/jquery-1.4.3.js"></script><script type="text/javascript"> $(function(){ $('#b1').click(function(){ //alert($('#d1').attr('id')); //$('#d1').attr('class','s1'); //$('#d1').attr({'class':'s1', //'style':'color:red;font-style:italic;'}); $('#d1').attr('class','s1').attr('style','color:blue'); }); });</script></head><body style="font-size:30px;"> <div id="d1">hello</div> <input type="button" value="属性操作" id="b1"/></body></html>7.样式操作
attr("calss","") 获取和设置 addClass('') 追加 removeClass('') 移除 或者removeClass('s1 s2') 或者removeClass() 会删除所有样式 toggleClass() 切换样式 hasClass('') 是否有某个样式 css('') 读取设置css('','')或者css({"":"","":""})//设置多个样式 例子: <html><!-- jquery中的样式如何修改 --><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style> .s1{ font-size:80px; } .s2{ color:blue; } .s3{ font-style:italic; }</style><script type="text/javascript" src="../js/jquery-1.4.3.js"></script><script type="text/javascript"> $(function(){ /* $('#b1').click(function(){ $('#d1').attr('class','s1'); }); */ $('#b1').click(function(){ //$('#d1').addClass('s2 s3'); //$('#d1').removeClass('s1'); //$('#d1').toggleClass('s1'); //alert($('#d1').hasClass('s1')); //$('#d1').css('font-style','italic') //.css('color','red'); $('#d1').css({'font-style':'italic','color':'blue'}); }); });</script></head><body style="font-size:30px"> <div id="d1" class="s1">hello</div> <input type="button" value="样式操作" id="b1"/></body></html>8.遍历节点
children() 只考虑子元素,不考虑其他后代元素. next() prev() siblings(); 兄弟节点 find(selector)例子:<html><!-- 遍历 --><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="../js/jquery-1.4.3.js"></script><script type="text/javascript"> $(function(){ $('#b1').click(function(){ //var $obj = $('#d1').children(); /* var $obj = $('#d1').children('div'); $obj.css('font-size','60px'); */ //$('#d1').next('p').html('hello 555'); //$('#d1').prev().html('hello 777'); //$('#d1').siblings('span').css('font-size','80px'); $('#d1').find('div').css('font-size','80px'); }); });</script></head><body style="font-size:30px;"> <span>hello7</span> <div id="d1"> <div>hello1</div> <div>hello2</div> <div>hello3</div> <div> <div>hello111</div> </div> <p>hello4</p> </div> <span>hello5</span><br/> <p>hello6</p> <input type="button" value="遍历" id="b1"/></body></html>