jQuery笔记--DOM操作

DOM Core
任何一种支持DOM的程序设计语言都可以使用它，也可以用来处理任何一种使用标记语言编写出来的文档，比如XML
getElmentById()
HTML_DOM
``document.forms
CSS_DOM
element.style.color
jQuery中的DOM操作

attr()方法用来获取元素的各种属性的值

1.创建节点
$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回
var $li_1 = $("<li title = 'banana'>香蕉</li>"); //创建一个<li>元素，包括元素节点<li>,文本节点香蕉,属性节点title
注意：1.动态创建的新元素节点不会被自动添加到文档中 2.当创建单个元素时，要注意使用闭合标签$(“

“)

2.插入节点

标签文本中后置添加
append(),$(A).appendTo(B)将A追加到B;appendTo()
标签文本中前置添加
prepend(),$(A).prependTo(B)将A前置到B;prependTo()
标签外后添加
after(),$(A).insertAfter(B)将A插入到B后面；insertAfter()
标签外前插
before(),$(A).insertBefore(B)将A前插到B；insertBefore()

这些方法在将新创建的节点插入到DOM的同时，也能对原有的DOM元素进行移动

3.删除节点

remove(),所有后代的节点将同时被删除，返回值为以一个指向已经被删除的节点的引用。绑定的事件会失效
detach()绑定的事件，附加数据会保留，将来可以再使用
empty（）清空元素内容

4。复制节点

clone()

1
2
3

$("ul li").click(function (){
    $(this).clone().appendTo("ul");     //复制当前单击的节点，并将它追加到<ul>元素中
    })

被复制的新元素并不具有任何行为
若给clone()传一个参数true，则复制元素的同时复制元素中所绑定的事件

5.替换节点
类似append()和appendTo(),位置颠倒

replaceWith()
$(a).replaceWith(b) 用b替换a
replaceAll()
$(a).replaceAll(b) 用a替换b

**注意：替换后原先绑定的事件将会消失

6.包裹节点

wrap(),传递一个标签作为参数，该标签将包裹指定元素，*1.进行结构化标记，不会破坏原始文档的语义2.单独打包，需要多个标签
wrapAll()，用一个标签全部打包
如果被包裹的元素间其他元素，将其他元素放到包裹元素后
wrapInner()，包裹指定标签的子内容（可以是文本节点）

7.属性操作

attr()获取属性（传属性名称）和设置属性（传2个，属性名，对应值）
既能设置属性也能获取属性的方法：attr(),html(),text(),height(),width(),val(),css()等
removeAttr()删除属性
jQuery1.6新增prop()用来获取在匹配的元素集中的第一个元素的属性值；removeProp()用来为匹配的元素删除设置的属性

8.样式操作

attr(“class”)获取样式
addClass()追加属性值

如果一个元素添加了多个class值，就相当于合并了他们的样式；不同的class设置了同一样式的值，后者会覆盖前者

removeClass（）删除class，如果不带参数，就会将class的值全部删除
toggleClass（）切换样式，没有则加上，有则删除
hasClass()判断元素是否含有该样式，有返回true，没有返回false

9.设置和获取HTML，文本和值

html()获取设置某个元素的ＨＴＭＬ内容（如你好）。类似JavaScript中的innerHtml。可以用于XHTML，不能用于XML文档
text()获取设置某个元素的文本内容（如你好）。类似JavaScript中的innerText，但是innerText属性不能用于Firefox。可以用于HTML，XML文档,且支持所有浏览器。

val()设置获取元素值。类似JavaScript中的value
实例：点击邮箱地址，”请输入邮箱地址“字样消失，不点击时，字样显示；密码框同理


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script >
        $(function (){
            //聚焦邮箱地址时清空
            $("#address").focus(function (){
                var text_val = $(this).val()    //获取address的value
                if(text_val=="请输入邮箱地址"){
                    $(this).val("")     //设置address的value为空
                }
            })
            //没有聚焦邮箱地址时，还原默认值
            $("#address").blur(function (){
                var text_val = $(this).val()
                if(text_val != this.defaultValue){
                    $(this).val(this.defaultValue)  //this.defaultValue默认的value，即 请输入邮箱地址
                }
            })
            //聚焦密码框时清空
            $("#password").focus(function (){
                var text_val = $(this).val()
                if(text_val == this.defaultValue){
                    $(this).val("")
                }
            })
            //没有聚焦密码框时还原默认值
            $("#password").blur(function (){
                var text_val = $(this).val()
                if(text_val != this.defaultValue){
                    $(this).val(this.defaultValue)
                }
            })
        });
    </script>
</head>
<body>
    <input type="text" id="address" value="请输入邮箱地址"/>    <br></br>
    <input type="text" id="password" value="请输入密码"/> <br></br>
    <input type="button" value="登录"/>
</body>
</html>

遍历节点
children（）取得匹配元素的子元素的集合，只考虑子元素，不考虑后代元素
next（）取得匹配元素后面紧邻同辈元素
prev（）取得匹配元素前面紧邻同辈元素
siblings（）取得匹配元素前后所有的紧邻同辈元素
parent（），parents（），closest（）区别

方法	描述
parent（）	直接从父节点开始查找，返回一个元素节点
parents（）	返回多个
closest（）	包含自身的节点找起，返回匹配的第一个元素节点

11.css-dom

offset() 在当前视窗的相对偏移
position() 相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移
scrollTop()和scrollLeft()获取元素的滚动条距顶端的距离，距离左侧的距离

实例1：超链接提示效果

鼠标滑入

创建一个div,内容为title的value值
将创建好的元素追加到文档中
为div设置xy坐标值，使提示可以在适当位置显示

鼠标移动。动态更改div提示的坐标值

鼠标滑出。移除


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script>
        $(function (){
            var x = 10
            var y = 20
            //传一个参数e，用于后面获取坐标
            $("a.tooltip").mouseover(function(e){
                //滑入时显示title
                this.myTitle = this.title   //将title值赋给mytitle
                this.title = "" //将原本的title置空
                //创建一个div，div的内容为title的属性值
                var tooltip = "<div id='tooltip'>"+this.myTitle+"</div>"
                //将新创建的div元素追加到文档中
                $("body").append(tooltip)
                //为其设置css属性  
                $("#tooltip")
                .css({
                        "top":(e.pageY+y) + "px",
                        "left":(e.pageX+x) + "px",
                        "position":"absolute"
                }).show("fast")
            }).mousemove(function(e) {
                //随鼠标移动显示title
                $("#tooltip")
                .css({
                    "top":(e.pageY+y) + "px",
                    "left":(e.pageX+x) + "px"
                })
            }).mouseout(function() {
                //滑出隐藏title
                this.title = this.myTitle   //需要考虑再次滑入的title不能为空
                $("#tooltip").remove()
            })
        })
    </script>
</head>
<body>
    <p><a href="#" class="tooltip" title="这是我的超链接提示1">提示1qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</a></p>
    <p><a href="#" class="tooltip" title="这是我的超链接提示2">提示2qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</a></p>
    <p><a href="#" title="这是自带提示1">自带提示1</a></p>
    <p><a href="#" title="这是自带提示2">自带提示2</a></p>
</body>
</html>

jQuery中的DOM操作