zoukankan      html  css  js  c++  java
  • jQuery——操作DOM

    所谓Web体验,就是Web服务器与Web浏览器之间的合作。过去,都是由服务器生成HTML文档,然后浏览器负责解释并显示该文档。后来,我们可以用CSS技术来动态修改页面的外观。


    ###操作属性
    jQuery实际上是在操作DOM中的className属性。

    ####非类属性
    jQuery提供了.attr()和.removeAttr()方法,这些方法可以修改属性。

    通过jQuery还可以一次修改多个属性。

    .attr()方法也接受一对参数,第一个参数是属性名,第二个是属性值。更常用的是传入一个包含键值对的对象。

    如果我们想让每个匹配的元素都具有相同的一个或多个属性值,那么只要给.arrt()传入一个静态的对象即可。更常见的是,为每个元素添加或修改的属性都必须具有不同的值。

    值回调其实就是给参数传入一个函数,而不是传入具体的值。这个函数会针对匹配的元素集中的每个元素都调用一次,调用后的返回值将作为属性的值。

    ####DOM元素属性
    HTML属性是指页面标记中放在引号中的值,而DOM属性则是指通过Javascript能够存取的值。

    在jQuery中,可以通过.prop()方法取得和设置DOM属性:

    //取得"checked"属性的当前值
    var currentlyChecked = $('.my-checkbox').prop('checked');
    //设置"checked"属性的值
    $('.my-checkbox').prop('checked',false);
    

    ####表单控件的值
    在取得和设置表单控件的值时,建议使用jQuery提供的.val()方法:

    //取得文本输入框的当前值
    var inputValue = $('#my-input').val();
    //取得选项列表的当前值
    var selectValue = $('#my-select').val();
    //设置单选列表的值
    $('#my-single-select').val('value3');
    //设置多选列表的值
    $('#my-multi-select').val(['value1','value2']);
    

    ###DOM树操作
    ####重新认识$()函数
    $()函数就像一个工厂,它能够生成一个jQuery对象,指向CSS选择符所描述的一组元素。

    $()函数不仅能够改变页面的视觉外观,更能改变页面中实际的内容。只要在这对圆括号中放入一组HTML元素,就能轻而易举地改变整个DOM结构。

    ####创建新元素
    在FAQ页面中,一个常见的功能是出现在 每一对“问题-答案”后面的back to top(返回页面顶部)链接。

    ####插入新元素
    若想把back to top链接插入到每个段落后面,因此就可以使用.inserAfter()方法。

    .insertBefore()在现有元素外部、之前添加内容
    .prependTo()在现有元素内部、之前添加内容
    .appendTo()在现有元素内部、之后添加内容
    .insertAfter()在现有元素外部、之后添加内容
    

    移动元素

    动态地放置并格式化脚注,就是插入操作在实际中的一种应用。

    脚注方案:

    为每个标注编号
    为正文中标出提取脚注的位置,使用脚注的编号
    在文本中的位置上创建一个指向对应脚注的链接,在脚注中创建返回文本位置的链接。


    ###复制元素
    在复制元素时,需要使用jQuery的.clone()方法,这个方法能够创建任何匹配的元素集合的副本以便将来使用。

    连同事件一起复制
    在默认情况下,.clone()方法不会复制匹配的元素或其后代元素中绑定的事件。不过,可以为这个方法传递一个布尔值参数,将这个参数设置为true,就可以连同事件一起复制,即.clone(true)。


    ###内容setter和getter方法
    .html()方法,.text()方法,取得匹配元素的内容,或者用新字符串替换匹配元素的内容。

    .text()始终会取得或设置纯文本内容。在使用.text()取得内容时,所有HTML标签都将被忽略,而所有HTML实体也会被转换成对应的字符。


    ###DOM操作方法的简单归纳

    (1)要在HTML中创建新元素,使用$()函数。
    (2)要在每个匹配的元素中插入新元素,使用
    .append() .appendTo() .perpend() .prependTo()
    (3)要在每个匹配的元素相邻的位置上插入新元素,使用
    .after()、inserAfter()、.before()、.inserBefore()
    (4)要在每个匹配的元素外部插入新元素,使用:
    .wrap()、.wrapAll()、.wrapInner()
    (5)要用新元素或文本替换每个匹配的元素,使用:
    .html()、.text()、.replaceAll()、.replaceWith()
    (6)要移除每个匹配的元素中的元素,使用:
    .empty()
    (7)要从文档中移除每个匹配的元素及其后代元素,但不实际删除它们,使用:
    .remove()、.detach()

  • 相关阅读:
    Apple MDM
    苹果核
    iOS自动化测试的那些干货
    Wifi 定位原理及 iOS Wifi 列表获取
    详解Shell脚本实现iOS自动化编译打包提交
    PushKit 占坑
    【译】使用 CocoaPods 模块化iOS应用
    NSMutableArray 根据key排序
    iOS 通过tag查找控件
    自己使用 2.常量变量,数据类型,数据的输入输出。
  • 原文地址:https://www.cnblogs.com/aixing/p/13327770.html
Copyright © 2011-2022 走看看