HTML5移动开发之路(36)jQuery中的DOM操作

整理文档很辛苦,赏杯茶钱您下走!

免费阅读已结束,点击下载阅读编辑剩下 ...

阅读已结束,您可以下载文档离线阅读编辑

资源描述

、查询利用选择器查找节点使用html()/text()/attr()输出节点文本和属性值。注意:下拉列表使用val()[html]viewplaincopyprint?1.html2.head3.scriptsrc=(function(){6.$('#b1').click(function(){7.//$('#d1').html('java');8.//将节点的属性读出来9.//$('#d1').attr('style');10.//$('#d1').attr('style','font-size:30pt');11.$('#d1').attr('class','s1');12.});13.});14./script15.style16..s1{17.color:red;18.}19./style20./head21.body22.divid=d1hello/div23.ul24.liitem1/li25.liid=i1item2/li26.liitem3/li27./ul28.inputtype=buttonid=b1value=点我/29./body30./html2、创建(html)3、插入节点append();prepend();after();before();[html]viewplaincopyprint?1.html2.head3.scriptsrc=(function(){6.$('#b1').click(function(){7.var$node=$('liitem4/li');8.$('ul').append($node);9.//$('ul').append('liitem4/li');和上面是等价的10.});11.});12./script13.style14..s1{15.color:red;16.}17./style18./head19.body20.divid=d1hello/div21.ul22.liitem1/li23.liid=i1item2/li24.liitem3/li25./ul26.inputtype=buttonid=b1value=点我/27./body、删除节点remove();remove(selector);empty();清空内容[javascript]viewplaincopyprint?1.$('#b1').click(function(){2.//$('ulli:eq(1)').remove();3.$('ulli').remove('li[id=i1]');4.$('ulli:eq(1)').empty();5.});5、复制节点clone();clone(true);使复制的节点也具有行为6、属性操作读取:attr('');设置:attr('','');或者一次设置多个属性attr({,});删除:removeAttr('');[javascript]viewplaincopyprint?1.$('#b1').click(function(){2.$('#d1').attr({class:s1,style:font-size:40pt});3.});7、样式操作获取和设置:attr(class,);追加:addClass('','');切换样式:toggleClass('','');是否有某个样式hasClass('');css('','');css({'':'','':''});[javascript]viewplaincopyprint?1.$('#b1').click(function(){2.$('div:first').addClass('s1s2');3.$('div:first').removeClass('s2');4.$('div:first').toggleClass('s1');5.});8、设置和获取html,文本和值html()/html('')text()/text('')val();设置和读取元素的值9、遍历children()next();prive();siblings():所有兄弟10、综合实例[html]viewplaincopyprint?1.script2.$(function(){3.4.$('#b1').click(function(){5.//$('#d1').html('java');6.//将节点的属性读出来('#d1').attr('style');8.$('#d1').attr('style','font-size:30pt');9.$('#d1').attr('class','s1');10.});11.12.$('#b1').click(function(){13.var$node=$('liitem4/li');14.$('ul').append($node);15.//$('ul').append('liitem4/li');和上面是等价的16.});17.18.$('#b1').click(function(){19.//$('ulli:eq(1)').remove();20.$('ulli').remove('li[id=i1]');21.$('ulli:eq(1)').empty();22.});23.24.$('#b1').click(function(){25.var$node=$('ulli:eq(2)').clone();26.$('ul').append($node);27.28.var$node=$('ulli:eq(2)').clone(true);29.$('ul').append($node);30.});31.32.$('ulli:eq(2)').click(function(){33.//可以使用this来访问符合$('selecotr')查询条件的节点34.//alert(this.innerHTML);35.alert($(this).html());36.});37.38.$('#b1').click(function(){39.$('#d1').attr({class:s1,style:font-size:40pt});40.});41.42.$('#b1').click(function(){43.$('div:first').addClass('s1s2');44.$('div:first').removeClass('s2');45.$('div:first').toggleClass('s1');46.});47.$('#b1').click(function(){48.alert($('input[type=text]').val();49.alert($('select').val());50.//单选和多选框不能这样写($(':radio').val());52.alert($(':checkbox').val());53.//要这样去写54.var$node=$(':radio');55.$node.each(function(){56.//if($(this).attr('checked')){57.//alert($(this).val());58.//}59.if(this.checked){60.alert(this.value);61.}62.});63.});64.$('#b1').click(function(){65.var$items=$('ul').children();66.//如果查询返回的是多个节点,可以使用length属性返回节点的个数67.alert($items.length);68.//如何遍历69.$items.each(function(i){70.//$(this)html();71.alert(this.innerHTML);72.});73.});74.});75./script76.77.style78..s1{79.color:yellow;80.}81..s2{82.border:1pxsolidblack;83.}84./style85.86.body87.divhello/div88.ul89.liitem1/li90.liid=i1item2/li91.liitem3/li92./ul93.divid=d1style=background-color:red;hello/div94.inputtype=buttonvalue=clickMeid=b1/=textname=name/br/96.male:inputtype=radioname=sexvalue=m/97.female:inputtype=radioname=sexvalue=f/98.fishing:inputtype=checkboxname=intrestvalue=fishing/99.cookinng:inputtype=checkboxname=intrestvalue=cooking/100.sleeping:inputtype=checkboxname=intrestvalue=sleeping/101.select102.optionvalue=bjbeijing/option103.optionvalue=shshanghai/option104.optionvalue=tjtianjing/option105./select106./body

1 / 7
下载文档,编辑使用

©2015-2020 m.777doc.com 三七文档.

备案号:鲁ICP备2024069028号-1 客服联系 QQ:2149211541

×
保存成功