• 1. jQuery应用编程 03 操纵内容和属性 答疑:周一、周三 19:00-21:00 综合楼4楼 软件系教师办公室@钟迅科
  • 2. 操纵内容和属性jQuery脚本三部曲: 选择元素、操纵元素、绑定事件 操纵又是增、删、改
  • 3. 增、删、改的对象为DOM树元素的内容、属性、位置都可以操纵
  • 4. 在Firebug中查看DOM树的改变在Firebug中,会以黄色背景短暂标示出DOM树的变化。IE、Chrome浏览器的开发人员工具均不及Firefox里的Firebug功能强大,因此建议使用Firebug。
  • 5. Firebug的安装123在工具栏或状态栏中可启用。
  • 6. IE9、Chrome、Safari自带开发工具
  • 7. 内容和属性
    This is a test.
    的内容:
    的属性: 的内容:This is a test.This is a test.id="test" class="head"
  • 8. 方法分类获取和设置:attr、val、text、html 添加:append、appendTo、prepend、prependTo、 after、insertAfter、before、insertBefore 删除:remove、empty、detach 替换:replaceWith、replaceAll 复制:clone 包装:wrap、wrapAll、wrapInner、unwrap 大小与位置:width、height、 offset、position……
  • 9. attr() 属性获取: 设置: 同时设置多个:path = $('#photo').attr('src');$('#photo').attr('alt', 'Beijing');$('#photo').attr({ alt: 'Beijing Brush Seller', title: 'photo by Kelly Clark' });test
  • 10. val() 表单项的值 获取: 设置: 同时设置多个(当有多个input时):$('#stu_name').val();$('#stu_name').val('Billy');$("input").val(["Billy","Peter", "Tom"]);
  • 11. text() 与 html()用法与前面类似,同样可以获取和设置。 text() 与 html()的区别: $("div").text(); $("div").html();

    Hello World

    Hello World

    Hello World

  • 12. 添加

    Greetings

    Hello
    Goodbye
    $('.inner').append('

    Test

    ');

    Greetings

    Hello

    Test

    Goodbye

    Test

  • 13. append、appendToA.append(B) B加到A的末端A.appendTo(B) A加到B的末端ABBA功能相同, 只是“源”与“目标”相反。
  • 14. prepend、prependToA.prepend(B) B加到A的前端A.prependTo(B) A加到B的前端ABBA
  • 15. after、insertAfterA.after(B) B加到A的后面A.insertAfter(B) A加到B的后面BAAB
  • 16. before、insertBeforeA.before(B) B加到A的前面A.insertBefore(B) A加到B的前面BAAB
  • 17. remove、empty
    Hello
    $('.hello').remove();
    $('.hello').empty();
  • 18. remove、detachremove:把结点从DOM中删除; detach:除了把结点从DOM中删除之外,可保留删除的结点以及绑定在结点上的事件,以备后续使用。var p; $("button").click(function(){ if ( p ) { p.appendTo("body"); p = null; } else { p = $("p").detach(); } });如果使用remove,会使结点上的数据和事件丢失。
  • 19. replaceWith、replaceAllA.replaceWith(B) 以B替换AA.replaceAll(B) 以A替换BBAAABB
  • 20. replaceWith
    Hello
    And
    Goodbye
    $('div.second').replaceWith('

    New heading

    ');
    Hello

    New heading

    Goodbye
  • 21. replaceWith
    Hello
    And
    Goodbye
    $('div.third').replaceWith($('.first'));
    And
    Hello
  • 22. replaceAll
    Hello
    And
    Goodbye
    $('

    New heading

    ').replaceAll('.inner');

    New heading

    New heading

    New heading

  • 23. replaceAll
    Hello
    And
    Goodbye
    $('.first').replaceAll('.third');
    And
    Hello
  • 24. clone 复制为什么要复制?
    Hello
    Goodbye
    $('.hello').appendTo('.goodbye');
    Goodbye
    Hello
  • 25. clone 复制
    Hello
    Goodbye
    $('.hello').clone().appendTo('.goodbye');
    Hello
    Goodbye
    Hello
  • 26. clone 复制复制数据与事件: .clone(参数1,参数2) 参数1,参数2 默认值均为false。 参数1=true,代表复制该结点上附带的数据和事件。 参数2=true,代表复制该结点以及所有其子结点上附带的数据和事件。
  • 27. wrap、wrapAll、wrapInnerA

    A

    A.wrap('

    ')A

    AA.wrapAll('

    ')A

    A.wrapInner('

    ')A

  • 28. unwrapunwrap():去除结点的父结点,其本身和兄弟结点(如有)不变动。无需指定参数。
    Hello
    Goodbye
    $('.hello').unwrap();
    Hello
    Goodbye
  • 29. width、height、offset、positionheightwidth以文档为基准:offsettopleftoffset(),position()返回坐标对象,包含两个属性:left、top以父结点为基准:positiontopleft可获取也可设置。
  • 30. 100%