zoukankan      html  css  js  c++  java
  • jquery 的文档操作

    06-jQuery的文档操作***

     

    之前js中咱们学习了js的DOM操作,也就是所谓的增删改查DOM操作。通过js的DOM的操作,大家也能发现,大量的繁琐代码实现我们想要的效果。那么jQuery的文档操作的API提供了便利的方法供我们操作我们的文档。

    看一个之前我们js操作DOM的例子:

    var oUl = document.getElementsByTagName('ul')[0];
    var oLi = document.createElement('li');
    oLi.innerHTML = '赵云';
    oUl.appendChild(oLi);

    一.插入操作

    知识点1:

    语法:

    父元素.append(子元素)

    解释:追加某元素,在父元素中添加新的子元素。子元素可以为:stirng | element(js对象) | jquery元素

    代码如下:

    var oli = document.createElement('li');
    oli.innerHTML = '哈哈哈';
    $('ul').append('<li>1233</li>');
    $('ul').append(oli);
    $('ul').append($('#app'));

    PS:如果追加的是jquery对象那么这些元素将从原位置上消失。简言之,就是一个移动操作。

    知识点2:

    语法:

    子元素.appendTo(父元素)

    解释:追加到某元素 子元素添加到父元素

    $('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active')

    PS:要添加的元素同样既可以是stirng 、element(js对象) 、 jquery元素

    知识点3:

    语法:

    父元素.prepend(子元素);

    解释:前置添加, 添加到父元素的第一个位置

    $('ul').prepend('<li>我是第一个</li>')

    知识点4:

    语法:

    父元素.prependTo(子元素);

    解释:后置添加, 添加到父元素的最后一个位置

     $('<a href="#">路飞学诚</a>').prependTo('ul')

    知识点5:

    语法:

    父元素.after(子元素);
    子元素.inserAfter(父元素);

    解释:在匹配的元素之后插入内容 

    $('ul').after('<h4>我是一个h3标题</h4>')
    $('<h5>我是一个h2标题</h5>').insertAfter('ul')

    知识点6:

    语法:

    父元素.before(子元素);
    子元素.inserBefore(父元素);

    解释:在匹配的元素之后插入内容 

    $('ul').before('<h3>我是一个h3标题</h3>')
    $('<h2>我是一个h2标题</h2>').insertBefore('ul')

     二、克隆操作

    语法:

    $(选择器).clone();

    解释:克隆匹配的DOM元素

    复制代码
    $('button').click(function() {
    
      // 1.clone():克隆匹配的DOM元素
     // 2.clone(true):元素以及其所有的事件处理并且选中这些克隆的副本(简言之,副本具有与真身一样的事件处理能力)
      $(this).clone(true).insertAfter(this);
    })
    复制代码

    三、修改操作

    知识点1:

    语法:

    $(selector).replaceWith(content);

    将所有匹配的元素替换成指定的string、js对象、jquery对象。

    //将所有的h5标题替换为a标签
    $('h5').replaceWith('<a href="#">hello world</a>')
    //将所有h5标题标签替换成id为app的dom元素
    $('h5').replaceWith($('#app'));

    知识点2:

    语法:

    $('<p>哈哈哈</p>')replaceAll('h2');

    解释:替换所有。将所有的h2标签替换成p标签。

    $('<br/><hr/><button>按钮</button>').replaceAll('h4')

    4、删除操作

    知识点1:

    语法:

    $(selector).remove(); 

    解释:删除节点后,事件也会删除(简言之,删除了整个标签)

    $('ul').remove();

    知识点2:

    语法:

    $(selector).detach(); 

    解释:删除节点后,事件会保留

     var $btn = $('button').detach()
     //此时按钮能追加到ul中
     $('ul').append($btn)

    知识点3:

    语法:

    $(selector).empty(); 

    解释:清空选中元素中的所有后代节点

    //清空掉ul中的子元素,保留ul
    $('ul').empty()
  • 相关阅读:
    共享纸巾更换主板代码分析 共享纸巾主板更换后的对接代码
    Python Django Ajax 传递列表数据
    Python Django migrate 报错解决办法
    Python 创建字典的多种方式
    Python 两个list合并成一个字典
    Python 正则 re.sub替换
    python Django Ajax基础
    Python Django 获取表单数据的三种方式
    python Django html 模板循环条件
    Python Django ORM 字段类型、参数、外键操作
  • 原文地址:https://www.cnblogs.com/zsdbk/p/9130533.html
Copyright © 2011-2022 走看看