美文网首页前端碎碎念
jQuery动态操作元素

jQuery动态操作元素

作者: const_express | 来源:发表于2019-02-21 20:02 被阅读0次

越看越觉得我家美丽金毛又可爱又迷人 先来张我家好美丽的照片提神醒脑


微信图片_20190221172216.jpg

jQuery入口函数

一般我们在链入js文件的时候 都是在开始 但是 在开始链入的时候 往往下面的dom树没有构建成功 往往js文件就没有什么卵用了
这时候 我们就可以把js源码写在

$(function(){
代码
})

之前我们在dom中 用onload 在jQuery中 用上面的
上面这种写法比onload解析的要快

emm 说的正经一点就是: 在开发过程中 经常会使用外链js文件 使用者在引入进head时 获取无效 因为dom树还没有构建成功 所以在外链中 将代码写在 $(function(){ })

jQuery动态操作元素

jQuery创建元素

语法:$('<li></li>') 返回一个新创建的jQuery对象

jQuery追加元素

  • 向父元素最后追加元素

语法:1.先用变量去接收新创建的jquery对象
2.新创建jquery对象.appendTo(‘父元素选择器/父元素jquery对象’)
或者 父元素jquery对象.append(新创建jquery对象)

  • 向父元素前面追加元素
    语法:新创建jquery对象.prependTo(‘父元素选择器’)
    或者 父元素jquery对象.prepend(新建jquery对象)

jQuery删除元素

语法:jq对象.remove() 删除谁就让谁调用这个方法

jQuery清空元素

语法:1.jQuery对象.empty() 推荐使用 清空内部所有的元素及和这个元素相关的事件(例如 点击事件)
2.jQuery对象.html(‘ ’) 仅仅清空内部的元素 不清理元素的事件

3.还有一种删除的方法 .remove () 当某个节点用remove删除之后 她的所有后代节点都会被删除 但是她的返回值是一个指向已被删除的节点的引用 因此在后面还可以继续使用

  • remove([expr])
    概述
    从DOM中删除所有匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。

参数:exprStringV1.0用于筛选元素的jQuery表达式

示例
描述:
从DOM中把所有段落删除

HTML 代码:
<p>Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").remove();
结果:
how are
描述:
从DOM中把带有hello类的段落删除
HTML 代码:

<p class="hello">Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").remove(".hello");
结果:
how are <p>you?</p>

还有一种和remove有异曲同工之妙的 是detach()
detach([expr])
概述:从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。

参数:exprStringV1.0用于筛选元素的jQuery表达式

示例
描述:
从DOM中把所有段落删除

HTML 代码:
<p>Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").detach();
结果:
how are描述:
从DOM中把带有hello类的段落删除
HTML 代码:
<p class="hello">Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").detach(".hello");
结果:
how are <p>you?</p>

相关文章

  • jQuery动态操作元素

    越看越觉得我家美丽金毛又可爱又迷人 先来张我家好美丽的照片提神醒脑 jQuery入口函数 一般我们在链入js文件的...

  • jQuery 节点操作

    jQuery 节点操作 1、动态创建元素 2、添加元素 3、html创建元素 4、清空元素empty()、html...

  • jQuery(三)——动态操作元素

    (一)动态创建元素 语法:$(' ');返回一个新创建的jQuery对象 (二)动态追加元素 1.向父元素最后追...

  • jquery设计思想书目录

    jQuery-选择网页元素 jQuery-改变结果集 jQuery-链式操作 jQuery-元素的操作:取值和赋值...

  • jQuery

    jQuery - 简书 jQuery 库包含以下特性:HTML 元素选取,HTML 元素操作,CSS 操作,HTM...

  • You might not need jQuery——笔记

    元素操作jQuery JS jQuery JS jQuery JS element.insertAdjacentH...

  • jQuery

    jQuery 如何获取元素 jQuery 的链式操作是怎样的 jQuery 如何创建元素 jQuery 如何移动元...

  • JavaScript之jQuery

    九、jQuery 目录:初识jQuery及公式、jQuery选择器、jQuery事件、jQuery操作DOM元素 ...

  • jQuery节点操作和元素尺寸

    jQuery节点操作 创建元素 语法:$(' ); 追加元素1 向父元素最后追加语法:父元素jQuery对象.a...

  • jquery

    题目1: jQuery 能做什么? jQuery能选取并操作HTML元素,修改元素属性,CSS属性操作,监听事件并...

网友评论

    本文标题:jQuery动态操作元素

    本文链接:https://www.haomeiwen.com/subject/qihdyqtx.html