案例：创建两个<li>元素节点，并且作为<ul>元素节点的子节点，添加到DOM树中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript" src="jquery-3.1.0.js"></script>

    <script type="text/javascript">

        $(function(){

            $("input[type='button']").click(function(){

                var $li_1 = $("<li>香蕉</li>");

                var $li_2 = $("<li>苹果</li>");

                $("ul:first").append($li_1);

                $("ul:first").append($li_2);

            })

        })

    </script>

</head>

<body>

    <ul></ul>

    <input type="button" value="添加"/>

</body>

</html>
append:将$li_1作为ul的子元素
appendTo:与append相反,对于A.appendTo(B),其效果是讲A作为B的子元素  该方法也可以实现元素的移动,将选中的元素A移动到B中
prepend:添加为前置元素,对于A.prepend(B),其效果是A作为B的父元素
prependTo:与prepend相反

其实有没有"To",区别在于谁是新增的元素,描述上相当于是把什么添加到哪里与添加什么到哪里的区别

after:平级的,后面插入
insertAfter:与after描述主体不同而已
before:
insertBefore:

删除节点
remove():$("#id").remove();,该节点及其下面的后代节点都会被删除.返回值是被删除的节点的引用
        $("").remove(selector);可以继续在remove中添加选择器
empty():清空节点内容

复制节点
$("").clone();默认清空下,被复制的元素不具有行为,如果想要连行为一同复制  clone(true)传递true参数

替换节点
replaceWith(HTML或DOM元素)
replaceAll:只是与replaceWith的元素参数位置不一样  $().replaceAll(被替换的元素);

包裹节点
wrap:$("strong").wrap("<b></b>");b把strong包裹起来
wrapAll:将所有的元素进行单独包裹
wrapInner:将每一个匹配元素的子内容包裹起来

属性
同时设置多个属性:$().attr("k1":"v1","k2":"v2")
删除属性:$().removeAttr("attrName")

样式操作
1 通过修改元素的class属性,把现成的样式覆盖旧样式
2 通过addClass方法,追加样式
3 removeClass 移除样式
4 css 直接设置样式
5 toggleClass 切换样式
6 hasClass 判断是否含有某个css样式

设置与获取HTML 文本 值
html():类似于JavaScript中的innerHTML,设置与获取的是被选中元素内的html代码
text():类似于JavaScript中的innerText,设置与获取被选中元素内文本内容
val():获取与设置value属性 同时还能选择下拉框 多选框 单选
    选中下拉框 val(被选中的下拉框)
    选中下拉框 val([第一个下拉框文本,第二个下拉框文本,...])
        从最后一项往前读,option的value或text任意一项满足就会被选中,所有所有的value和text千万不要重复
    多选框 val([ck1,ck2])
    单选按钮:val([rd1])

    下拉框也能使用attr进行选择
        $("#single option:eq(1)").attr("select",true)
    attr("checked",true),设置被选中

/*
 * 遍历节点:
  * children() 匹配元素的子元素,注意,不包括后代元素
  * next() 后面紧邻的同辈元素
  * prev() 前面紧邻的同辈元素
  * siblings() 前后所有同辈元素
  * closest() 最近的元素:
 * 其他还有很多,详见jQuery文档
 */


<body>

    <ul></ul>

    <input type="button" value="添加"/>

    <div>被操作元素</div>

    <!--需求:提示用户输入,如果用户鼠标点击到文本框了,清除提示内容  在html5中,直接用autofocus和placeholder就能实现-->

    <input type="text" name="t1" value="提示用户输入">

    <script type="text/javascript">

        $(function(){

            //获取焦点

            $("input[name='t1']").focus(function(){

                if ($(this).val() == "提示用户输入"){

                    $(this).val("");

                }

            })

            //失去焦点

            $("input[name='t1']").blur(function(){

                if ($(this).val() == ""){

                    $(this).val("提示用户输入");

                }

            })

        })

    </script>

</body>

jQuery操作DOM基础 - 创建节点的更多相关文章

  1. jQuery操作DOM基础 - 元素属性的查看与设置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  3. 第八章 使用jQuery操作DOM

    DOM操作: jQuery中提供了一系列操作DOM强有力的方法,它们不仅简化了传统JavaScript操作DOM时繁冗的代码,更加解决了令开发者苦不堪言的跨平台浏览器的兼容. 它还让有页面元素真正动起 ...

  4. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  5. Hybrid App开发之jQuery操作DOM

    前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...

  6. 第四章 使用jQuery操作DOM

    第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...

  7. 原生JS和jQuery操作DOM的区别小结

    一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...

  8. jQuery权威指南（第2版） 学习一 jQuery操作DOM

    jQuery操作DOM 获取元素的属性 attr(name) 获取元素属性的语法格式如下: attr(name) 其中,参数 name 表示属性的名称. 例子: <img alt="& ...

  9. *jquery操作DOM总结 (原创：最全、最系统、实例展示)

    jquery操作DOM包括八个方面: 一:jquery对DOM节点的基本操作:二:jquery对DOM节点的CSS样式操作:三:jquery遍历DOM节点:四:jquery创建DOM节点:五:jque ...

随机推荐

  1. Django疑难问题

    1页面出现中文报错 :Non-ASCII character '\xe9' in file E:\CPaas\cpaas\views.py 解决:在页面顶部加入#coding=utf-8 2执行syn ...

  2. 【洛谷1501】[国家集训队] Tree II（LCT维护懒惰标记）

    点此看题面 大致题意: 有一棵初始边权全为\(1\)的树,四种操作:将两点间路径边权都加上一个数,删一条边.加一条新边,将两点间路径边权都加上一个数,询问两点间路径权值和. 序列版 这道题有一个序列版 ...

  3. Tarjan在图论中的应用（一）——用Tarjan来实现强连通分量缩点

    前言 \(Tarjan\)是一个著名的将强连通分量缩点的算法. 大致思路 它的大致思路就是在图上每个联通块中任意选一个点开始进行\(Tarjan\)操作(依据:强连通分量中的点可以两两到达,因此从任意 ...

  4. 第五章 javascript编程可养成的好习惯

    用户点击某个链接时弹出一个新窗口javascript使用window对象的open()方法来创建新的浏览器窗口,这个方法有三个参数:window.open(url,name,features)url: ...

  5. 记录一下CSS outline-width 属性

    outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围. outline-width指定轮廓的宽度. 注意: 请始终在outline-width属性之前声明outline-style属性. ...

  6. Express框架 --router/app.use

    翻看去年自己记录的印象笔记,准备把笔记上的一些内容也同时更新到博客上,方便自己查看. 1.app.use和app.get的区别及解析 app.use(path,callback)中的callback既 ...

  7. Springboot 入门创建hello world1!

    1.首先使用工具是Eclipse,安装插件,点击“Help”-“Eclipse Marketplace...”, 一步步直接Ok,等待安装完成 2.创建Springboot项目 到此 就创建成功了 3 ...

  8. <%%>用法初步认识

    <%%>是用于向客户端插入服务器代码所使用的一种标记 例如为了在HTML页面上展示由服务器提供的当前用户的某条信息或名字等便可使用 前台 <a href="home.asp ...

  9. Python Flask搭建一个视频网站实战视频教程

    点击了解更多Python课程>>> Python Flask搭建一个视频网站实战视频教程 第1章 课程介绍 第2章 预备开发环境 第3章 项目分析.建立目录及模型规划 第4章 建立前 ...

  10. html5支持drag的拖放排序插件sortable.js

    html5支持drag的拖放排序插件sortable.js <script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.5.1/S ...