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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
