博客列表 >jQuery操作DOM节点方法

jQuery操作DOM节点方法

LIWEN的博客
LIWEN的博客原创
2017年12月20日 13:41:351403浏览

jQuery函数的参数有4种类型,分别是: css选择器、DOM对象(如:$(document.images[0]))、 元素标签(如:$('div'),$('<h2>这里是文本</h2>'))、 匿名函数(如:$(function(){}))

本文对参数是DOM对象时的一些基本操作方法进行介绍。

在介绍操作方法之前,先明确一点,文档加载完成,DOM节点进入到可操作状态,函数才会被调用。

jQuery对于DOM对象的操作有6个方法,两种方式。

方法根据DOM对象节点的类型不同,有如下6种:

1、父子节点:有层级关系

     append():向元素内部追加元素

     prepend():向元素内部添加前置数据

     appendTo():追加到集合中的最后面

     prependTo():将元素前置到指定的集合中

2、兄弟节点:平级关系

     after():在匹配元素之后插入

     before():在匹配元素之前插入

jQuery在页面中创建元素的两种方式:

1、var li2 = $('li')       li2.html ('我是jquery创建的第一个列表项')

2、var li3 = $('<li id="item3">我是jquery创建的第二个列表项!~~</li>')

实例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>jQuery操作DOM节点方法</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        div {
            width: 500px;
            background-color: #EBEBEB;
            font-family: 微软雅黑;
            font-size: 15px;
            line-height: 25px;
            margin: 30px auto;
        }
        ul {
            list-style: square;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>jQuery操作DOM节点方法01</li>
        <li>jQuery操作DOM节点方法02</li>
        <li>jQuery操作DOM节点方法03</li>
        <li>jQuery操作DOM节点方法04</li>
        <li>jQuery操作DOM节点方法05</li>
    </ul>
</div>
<script>
    //在页面中创建新元素的方式有三种
 var ul = document.getElementsByTagName('ul')[0]     //复习原生JS获取元素
    //1、原生JS创建元素
 var li1 = document.createElement('li')
    li1.innerHTML = '我是原生JS创建的一个列表项'
 li1.id = 'item1'
 ul.appendChild(li1)
    //2、jQuery的第一种方法
 var li2 = $('<li>')
    li2.html('我是jQuery创建的第一个DOM节点,我在最前面呢~~')
    li2.attr('id','item2')
    li2.prependTo('ul')
    //3、jQuery的第二种方法
 var li3 = $('<li id="item3">我是jQuery创建的第二个DOM几点,我在最后一个啦~</li>')
    li3.appendTo('ul')
    //li3前面添加前置内容
 li3.prepend('<span style="color: red;font-siz:16px;">~~是前置内容~</span>')
    //li3后面添加后置内容
 li3.append('<span style="color: red;font-siz:16px;">New是后置内容~~~~~~</span>')
    //在匹配元素之后插入一张图片
 li2.after('<img width="100px" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513708193242&di=54e602911e0bb83422e1cdcdb7727ed6&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fd043ad4bd11373f0a880e07cae0f4bfbfaed0491.jpg" /><span style="color: fuchsia">图片在jQuery创建的第一个DOM节点之后插入</span>')
    //在匹配元素之前插入一句话
 li1.before('这句话是在匹配元素“原生JS列表项前面插入的”')

    //注意,before和after生成的li 前面没列表项的样式。

</script>
</body>
</html>


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议