jQueryDOM/函数

作者: YYanm | 来源:发表于2018-12-22 19:17 被阅读0次

jQueryDOM/函数
jQueryDom
jQueryDOM操作
jQueryDOM操作
jQueryDOM操作
jquery基础2
前端进阶
jQueryDom的操作(2)
jQueryDom的操作(1)
jQueryDOM遍历操作和原生js遍历

一. jQuery 对象和原生 Dom 对象有什么区别？

DOM对象是我们用传统的方法（javascript）获得的对象，jQuery对象就是用jQuery的类库选择器获得的对象。
jQuery选择器得到的jQuery对象和标准的js中的document.getElementById()取得的dom对象是两种不同类型,两者不等价。
注意：js原生获取的dom是一个对象，jQuery对象就是一个数组对象，其实就是选择出来的元素的数组集合。所以说他们两者是不同的对象类型不等价。jQuery无法使用DOM对象的任何方法，同理Dom对象也不能使用jQuery里的方法.乱使用会报错。

二. Dom对象与jQuery对象互相转换：

原生DOM对象转jQuery对象：

var box = document.getElementById('box');
var $box = $(box);

jQuery对象转原生DOM对象：

var $box = $('#box');
var box1 = $box[0];
var box2 = $box.get(0);

三. 使用jQuery修改DOM元素相当简单。

只需要把DOM字符串传入$方法即可返回一个jQuery对象：

var obj = $('<div class="test"><p><span>Done</span></p></div>');

四. jQueryDom与函数

1. 添加元素append()

append() 方法在被选元素的结尾插入内容。

<div>中午好！</div>
    <div>该吃午餐了</div>
    <div>要一起吗？</div>
    <button>添加</button>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $('div').append('<span>我还有点事，谢谢！</span>')
                // 不用加上span标签也可以实现添加
                //$('div').append('abc')
            })
        })
    </script>

可以一次添加多个内容，内容可以是DOM对象、HTML string、 jQuery对象。

append.png

appen2.png

如果参数是function，function可以返回DOM对象、HTML string、 jQuery对象，参数是集合中的元素位置与原来的html值

使用函数在指定元素的结尾插入内容。

<div>中午好！</div>
    <div>该吃午餐了</div>
    <div>要一起吗？</div>
    <button>添加</button>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $('div').append(function(n) {
                    return '<span>我有事呢，不去了' + n + '</span>'
                })
            })
        })
    </script>

2. prepend()

向对象头部追加内容，用法和append类似，内容添加到最开始

<div>中午好！</div>
    <div>该吃午餐了</div>
    <div>要一起吗？</div>
    <button>添加</button>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $('div').prepend('abc')
            })
        })
    </script>

prepend.png

prepend2.png

3. before()参数和append类似

在对象前面插入内容，插入内容会自成一行。

插入内容不会在被选元素的后方显示，而是另起一行，如果有多次插入都会在另起行显示

<div>中午好！</div>
    <div>该吃午餐了</div>
    <div>要一起吗？</div>
    <button>添加</button>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $('div').before('abc')
            })
        })
    </script>

after.png

before.png

before2.png

4. after()参数和append类似

after() 方法在被选元素后插入指定的内容。插入内容不会在被选元素的后方显示，而是另起一行，如果有多次插入都会在另起行显示

<div>中午好！</div>
    <div>该吃午餐了</div>
    <div>要一起吗？</div>
    <button>添加</button>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $('div').after('abc')
            })
        })
    </script>

after.png

after2.png

af.png

5. remove()

remove() 方法移除被选元素，包括所有文本和子节点。
该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。
但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。

<p>中午好！</p>
    <div>该吃午餐了</div>
    <div>要一起吗？</div>
    <button>删除</button>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $('div').remove()
            })
        })
    </script>

remove.png

remove2.png

或者使用选择器操作

<script>
        $(document).ready(function() {
            $('button').click(function() {
                $('.span').remove()
            })
        })
    </script>

6. empty()

empty() 方法从被选元素移除所有内容，包括所有文本和子节点。

<header>
        <p>中午好！</p>
        <button>删除</button>
        <script>
            $(document).ready(function() {
                $('button').click(function() {
                    $('p').remove()
                })
            })
        </script>

看到这里，empty和remove都是移除内容，文本与子节点，到底两者有什么不同？

做个案例：

<header>
        <p>中午好！</p>//元素设置背景色，高度和宽度
        <button>删除</button>
        <script>
            $(document).ready(function() {
                $('button').click(function() {
                    $('p').empty()//删除p元素
                })
            })
        </script>

empty1.png
用empty方法删除p元素后，css样式保留的下来，内部文本消失了

empty2.png

现在用remove方法试一下：

<p>中午好！</p>
        <button>删除</button>
        <script>
            $(document).ready(function() {
                $('button').click(function() {
                    $('p').remove()
                })
            })
        </script>

empty1.png

remove3.png
用remove方法后点击删除，页面就仅剩下删除按钮了。

7. html()

当传递了一个string参数的时候，修改元素的innerHTML为参数值。
如果结果是多个进行赋值操作的时候会给每个结果都赋值。
如果结果多个，获取值的时候，返回结果集中的第一个对象的相应值。

<header>
        <p>中午好！</p>
        <button>改变p元素内容</button>
        <script>
            $(document).ready(function() {
                $('button').click(function() {
                    $('p').html("晚上好！")
                })
            })
        </script>

html1.png

html2.png

8. text()

读取或修改元素的纯文本内容。和html方法类似，操作的是DOM的innerText值.
text()：取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String
text(val)：设置所有匹配元素的文本内容, 与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).返回一个jquery对象

<p>中午好！</p>
        <button>改变p元素内容</button>
        <script>
            $(document).ready(function() {
                $('button').click(function() {
                    $('p').text("很饿啊")
                })
            })
        </script>

html1.png

text.png

注意：

html与text虽然类似，但是返回结果是不一样的

例子：

<p>中午好！</p>
        <p>该吃饭了</p>
        <button>改变p元素内容</button>
        <script>
            $(document).ready(function() {
                $('button').click(function() {
                    alert($('p').html())
                })
            })
        </script>

如果html方法未设置参数，则返回被选元素的当前内容。如果元素有多个，它会返回第一个匹配元素的内容。

html3.png

text 取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本

<p>中午好！</p>
        <p>该吃饭了</p>
        <button>改变p元素内容</button>
        <script>
            $(document).ready(function() {
                $('button').click(function() {
                    alert($('p').text())
                })
            })
        </script>

text2.png

jQuery函数

1. val()

这是一个读写双用的方法，用来处理input的value，当方法没有参数的时候则返回被选元素的当前值，当传递了一个参数的时候，方法修改input的value值为参数值。

<p>今天怎么样：<input type="text" name="uaer" value="中午好" /></p>
    <button>改变文本域的值</button>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $(':text').val('到晚上了')
            })
        })
    </script>

val.png

val1.png

当方法没有参数的时候则返回被选元素的当前值，有多个则是选择第一个。

<script>
        $(document).ready(function() {
            $('button').click(function() {
                alert($(':text').val())
            })
        })
    </script>

val2.png

没有设置value时可以val()方法来添加。

<p>今天天气怎么样：<input type="text" name="uaer" /></p>
    <p>今天阳光好吗：<input type="text" name="uaer" /></p>
    <button>添加文本域的值</button>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $(':text').val('还不错')
            })
        })
    </script>

val3.png

val4.png

或者用function参数来在value原有的值后方添加

<p>今天天气怎么样：<input type="text" name="uaer" value="还不错" /></p>
    <button>添加文本域的值</button>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $(':text').val(function(a, b) {
                    return b + ',就是太热'
                })
            })
        })
    </script>

val5.png

val6.png

2. attr()

attr() 方法设置或返回被选元素的属性值。

<img src="C:/Users/asus/Desktop/3.jpg" width="200px" height="200px" />
    <button>获取元素的宽度</button>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                alert('img宽度是:' + $('img').attr('width'))
            })
        })
    </script>

attr.png

还能设置img的值：

<img src="C:/Users/asus/Desktop/3.jpg" width="200px" height="200px" />
    <button>获取元素的宽度</button>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $('img').attr('width', "300px")
            })
        })
    </script>

attr1.png

attr3.png

设置宽与高的值

<img src="C:/Users/asus/Deskt/3.jpg" width="200px" height="200px" />
    <button>获取元素的宽度</button>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $('img').attr({
                    width: '300px',
                    height: '300px'
                })//注意设置宽高时需要用上大括号圈住。
            })
        })
    </script>

3. removeAttr()

removeAttr() 方法从被选元素中移除属性。
removeAttr() 方法使用原生的 JavaScript removeAttribute() 函数,但是它的优点是可以直接在一个 jQuery 对象上调用该方法，并且它解决了跨浏览器的属性名不同的问题。

<h1>2018-12</h1>
    <p style="color:red">我在学习</p>
    <p>呃，想不到了</p>
    <button>去除p元素的css样式</button>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $('p').removeAttr('style')
            })
        })
    </script>

removeAttr.png

removeAttr1.png

4. prop()

添加并移除名为 "color" 的属性.

prop() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
注意：prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。
提示：如需检索 HTML 属性，请使用 attr() 方法代替。
提示：如需移除属性，请使用 removeProp() 方法。

5. css()

css() 方法更改匹配的元素一个或多个样式属性。

<h1>2018-12</h1>
    <p>我在学习</p>
    <p>呃，想不到了</p>
    <button>更改p元素字体颜色</button>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $('p').css('color', 'red')
            })
        })
    </script>

css.png

css1.png

或者用css()方法获取目标元素的值。注意：如果有多个目标只能获取第一个。

<h1>2018-12</h1>
    <p style='color: red'>我在学习</p>
    <p style='color: #f80'>呃，想不到了</p>
    <button>获取p元素字体颜色值</button>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                alert($('p').css('color'))
            })
        })
    </script>

css2.png

6. addClass()

addClass() 方法向被选元素添加一个或多个类名。

该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。
提示：如需添加多个类，请使用空格分隔类名。

<style>
  .abc {
            color: red;
            border: 1px solid #000;
        }
    </style>

</head>

<body>
    <h1>2018-12</h1>
    <p>我在学习</p>
    <p>呃，想不到了</p>
    <button>给p元素设置类名</button>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $('p').addClass('abc')
            })
        })
    </script>

给p元素设置类名匹配到css样式。

addClass.png

addclass2.png

利用function（a）参数添加多个类名匹配css样式

<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .abc0 {
            color: red;
            border: 1px solid #000;
        }
        
        .abc1 {
            color: #f80;
        }
    </style>

</head>

<body>
    <h1>2018-12</h1>
    <p>我在学习</p>
    <p>呃，想不到了</p>
    <button>给p元素设置类名</button>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $('p').addClass(function(a) {
                    return 'abc' + a
                })
            })
        })

addClass.png

addclass3.png

7. removeClass()

removeClass() 方法从被选元素移除一个或多个类。

注意：如果没有规定参数，则该方法将从被选元素中删除所有类。如需移除多个类，请使用空格来分隔类名。

<h1>2018-12</h1>
    <p class="abc0">我在学习</p>
    <p class="abc1">呃，想不到了</p>
    <button>给p元素删除类名</button>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $('p').removeClass('abc0 abc1')//删除多个用空格隔开
            })
        })
    </script>

removeClass.png

removeClass2.png

8. hasClass()

hasClass() 方法检查被选元素是否包含指定的 class。返回true/false

<h1>2018-12</h1>
    <p class="abc0">我在学习</p>
    <p>呃，想不到了</p>
    <button>检查p元素类名</button>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                alert($('p').hasClass('abc0'))
            })
        })
    </script>

hasClass.png

9. toggleClass()

语法：$(selector).toggleClass(class,switch)

toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
class：必需。规定添加或移除 class 的指定元素。
如需规定若干 class，请使用空格来分隔类名。
switch：可选。布尔值。规定是否添加或移除 class。

用toggleClass给p元素添加css样式

 <h1>2018-12</h1>
    <p>我在学习</p>
    <p>呃，想不到了</p>
    <button>切换p元素类名</button>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $('p').toggleClass('abc0')
            })
        })
    </script>

结果：

打开页面
点击切换

toggleClass1.png
再次点击切换，变回原样

10. each()

each() 方法规定为每个匹配元素规定运行的函数。

注意：返回 false 可用于及早停止循环。

<h1>2018-12</h1>
    <p>我在学习</p>
    <p>呃，想不到了</p>
    <button>输出p元素内容</button>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $('p').each(function() {
                    alert($(this).text())
                })
            })
        })
    </script>

each.png

点击按钮会弹出元素内容
each1.png
点击确定会继续弹出
each2.png

11. $.extend()

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。
注意：

如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
如果多个对象具有相同的属性，则后者会覆盖前者的属性值。

12. clone()

clone() 方法生成被选元素的副本，包含子节点、文本和属性。

<h1>2018-12</h1>
    <p>我在学习</p>
    <button>复制p元素</button>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $('body').append($('p').clone())
            })
        })
    </script>

clone.png

点击按钮复制p元素的文本内容
clone1.png
再次点击，复制页面的两行文本内容，依次往下。
clone2.png

13. index()

index() 方法返回指定元素相对于其他指定元素的 index 位置。

这些元素可通过 jQuery 选择器或 DOM 元素来指定。

注意：如果未找到元素，index() 将返回 -1。

<h1>2018-12</h1>
    <p>我在学习</p>
    <p>呃，想不到了</p>

    <script>
        $(document).ready(function() {
            $('p').click(function() {

                alert($(this).index())

            })
        })
    </script>

点击页面 p标签的文本，会弹出对话框。

14. ready()

当 DOM（文档对象模型）已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。
由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。

ready() 函数规定当 ready 事件发生时执行的代码。
ready() 函数仅能用于当前文档，因此无需选择器。

有三种语法：

<script>
// 语法 1 ：
$(document).ready(function)
// 语法 2 ：
$().ready(function)
// 语法 3 ：
$(function)
</script>
//注意：ready() 函数不应与 <body onload=""> 一起使用。

以下整理篇：

以上资料来源于网络，个人知识有限，希望有错的地方可以指出，谢谢。

jQueryDOM/函数
资料来源---W3C与网络一. jQuery 对象和原生 Dom 对象有什么区别？ DOM对象是我们用传统的方法...
jQueryDom
文档处理append(content|fn)向每个匹配的元素内部追加内容 prepend(content)向所有匹...
jQueryDOM操作
1. $node.text()和$node.html()区别都是读写两用的方法；$node.html()：获取/...
jQueryDOM操作
添加元素 .append(content[,content]) / .append(function(index,...
jQueryDOM操作
创建元素 $（'<标签名>'）内部插入元素.append（参数） $（新元素）.appendTo （参数） p...
jquery基础2
今天继续介绍jQuerydom操作内部插入：append（）插入到该元素的最后面prepend（）插入到元素的最前...
前端进阶
jquery jsDOM 和jqueryDOM转换选择器 $("h3.jy")//交集选择器，既是h3标签，cl...
jQueryDom的操作(2)
第二章对jQuery对象的属性、特性以及数据的操作操作元素的特性和属性值元素的特性和属性特性attribu...
jQueryDom的操作(1)
第一章如何筛选jQuery对象操作jQuery对象，如何创建HTML DOM对象和jQuery对象区别检...
jQueryDOM遍历操作和原生js遍历
遍历 each（function（index，ele）｛ele.innerHTML｝）得到原生DOM map（fu...