达内培训tarena内部资料tts教学系统课件pdf版java_ajaxjquery_exday03

达内IT培训集团1练习列表编号名称描述级别1dom操作演示***2jquery处理事件**3劢画**4jquery操作类数组**5jquery小案例**6jquery对ajax的支持**注：*理解级别**掌握级别***应用级别达内IT培训集团2目录1.练习1：dom操作演示*................................................................................................错误！未定义书签。2.练习2：jquery处理事件**...........................................................................................................................293.练习3：劢画**................................................................................................................................................384.练习4：jquery操作类数组**.......................................................................................................................455.练习5：jquery小案例**...............................................................................................................................516.练习6：jquery对ajax的支持**.................................................................................................................53达内IT培训集团3练习1：dom操作演示***1)新建工程web14_jquery2)拷贝js/jquery-1.4.3.js到项目下dom查询3)dom1.htmlhtml!--查询--headmetahttp-equiv=Content-Typecontent=text/html;charset=UTF-8titleInserttitlehere/titlescripttype=text/javascriptsrc=../js/jquery-1.4.3.js/scriptscripttype=text/javascriptfunctionf1(){//alert($('#d1').html());//alert($('#d1').text());//$('#d1').html('hellojava');//alert($('#d1').attr('id'));//$('#d1').attr('style','font-size:60px;color:red;');//alert($(':text').val());//$(':text').val('lg');alert($('#s1').val());}/script/headbodystyle=font-size:30px;divid=d1spanhellojquery/span/divusername:inputname=username/br/selectid=s1optionvalue=bj北京/optionoptionvalue=bj2北京2/optionoptionvalue=bj3北京3/option/selectinputtype=buttonvalue=Clickonclick=f1();/达内IT培训集团4/body/htmla.html()输出标记中所有内容b.text(）输出标记中的文本内容达内IT培训集团5c.用html()改变页面内容达内IT培训集团6点击“click”按钮d.attr()输出节点的属性值达内IT培训集团7e.attr()设置节点的属性值达内IT培训集团8f.可以使用val()获得值g.val()设置值达内IT培训集团9h.下拉列表,可以使用val()获得值达内IT培训集团10dom创建和添加操作4)dom2.htmlhtml!--dom创建和添加操作--headmetahttp-equiv=Content-Typecontent=text/html;charset=UTF-8titleInserttitlehere/titlescripttype=text/javascriptsrc=../js/jquery-1.4.3.js/scriptscripttype=text/javascriptfunctionf1(){//var$obj=$('liitem4/li');//$('#u1').append($obj);//也可以简化为//$('#u1').append('liitem4/li');//$('#u1').prepend('liitem4/li');//$('#u1').after('divhellojquery/div');$('#u1').before('divhellojquery/div');}/script/headbodystyle=font-size:30px;ulid=u1达内IT培训集团11liitem1/liliitem2/liliitem3/li/ulinputtype=buttonvalue=Clickonclick=f1();//body/htmla.append()向每个匹配的元素内部追加内容(1)达内IT培训集团12b.append()向每个匹配的元素内部追加内容(2)达内IT培训集团13c.prepend()向每个匹配的元素内部前置内容d.after()在每个匹配的元素之后插入内容e.before()在每个匹配的元素之前插入内容达内IT培训集团14dom删除节点5)dom3.htmlhtml!--dom删除--headmetahttp-equiv=Content-Typecontent=text/html;charset=UTF-8titleInserttitlehere/titlescripttype=text/javascriptsrc=../js/jquery-1.4.3.js/scriptscripttype=text/javascriptfunctionf1(){//$('#u1li:eq(1)').remove();//$('#u1li:eq(1)').empty();$('#u1li').remove('#i2');}/script/headbodystyle=font-size:30px;ulid=u1liitem1/liliid='i2'item2/liliitem3/li/ulinputtype=buttonvalue=Clickonclick=f1();/达内IT培训集团15/body/htmla.remove()b.remove(selector)达内IT培训集团16效果相同c.empty()清空节点中的内容达内IT培训集团17dom复制节点6)dom4.htmlhtml!--dom复制--headmetahttp-equiv=Content-Typecontent=text/html;charset=UTF-8titleInserttitlehere/titlescripttype=text/javascriptsrc=../js/jquery-1.4.3.js/scriptscripttype=text/javascript//当整个html文件解析完毕，生成相应的dom树之后//执行内部的代码。$(function(){达内IT培训集团18$('#u1li:eq(2)').click(function(){alert('doaction...');});$('#b1').click(function(){var$obj=$('#u1li:eq(2)').clone(true);$('#u1').append($obj);});});/script/headbodystyle=font-size:30px;ulid=u1liitem1/liliitem2/liliitem3/li/ulinputid=b1type=buttonvalue=Click//body/htmla.clone()：复制节点丌复制行为点击原节点，则弹出对话框“doaction”达内IT培训集团19点击克隆的节点，则没有反应b.clone(true):使复制的节点也具有行为达内IT培训集团20点击克隆的节点，也具有行为属性操作7)dom5.htmlhtmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=UTF-8titleInserttitlehere/titlestyle达内IT培训集团21.s1{color:red;}/stylescripttype=text/javascriptsrc=../js/jquery-1.4.3.js/scriptscripttype=text/javascript$(function(){$('#b1').click(function(){$('#d1').attr({'style':'font-size:60px;','class':'s1'});});});/script/headbodystyle=font-size:30px;divid=d1hellojquery/divinputtype=buttonvalue=Clickid=b1//body/html样式操作8)dom6.htmlhtml!--dom样式操作--headmetahttp-equiv=Content-Typecontent=text/html;charset=UTF-8titleInserttitlehere/titlestyle达内IT培训集团22.s1{color:red;}.s2{font-style:italic;}/stylescripttype=text/javascriptsrc=../js/jquery-1.4.3.js/scriptscripttype=text/javascript$(function(){$('#b1').click(function(){//$('#d1').attr('class','s1');//$('#d1').addClass('s2');//$('#d1').removeClass('s1');//$('#d1').toggleClass('s1');//判断是否有指定样式//alert($('#d1').hasClass('s1'));//设置样式$('#d1').css({'font-style':'