1，html 布局加入列表内容，css设置文本样式对样式进行美化，我们先来预览文本原来的样式。
收藏
<!DCOTYPE html>
<html>
<meta charset="UTF-8">
<head><title>jquery的节点操作方法</title>
<script src=" https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
body{
margin:0;
padding:0;
}
div h2{
margin-left:30px;
}
body div{
width:600px;
margin-top:50px;
background:#EEE;
opacity:0.5;
}
div li{
font-weight:lighter;
line-height:15px;
}
div li:hover{
color:red;
text-decoration:underline;
}</style> </head> <body> <div> <h2>头条公告</h2> <ul style="list-style-type:square"> <li><h4>十大机器学习需要了解的方法</h4></li> <li><h4>php抓取HTTPS网站内容</h4></li> <li><h4>最全的html5全局属性汇总</h4></li> <li><h4>最新php程序员工具箱v0.7版</h4></li> <li><h4>最全的数组方法汇总</h4></li> <li><h4>各种IE(IE6-IE10)兼容性问题</h4></li> <li><h4>MongDB查看执行计划</h4></li> <li><h4>phpstorm快捷键介绍总结</h4></li> <li><h4>详解php多人开发环境原理</h4></li> <li><h4>详细解答php和java哪个好</h4></li> </ul> </div>
<script>
jquery的节点操作方法：
1,父子节点：append()向元素内部追加元素;
prepend()向元素内部添加前置数据；
appendTo()追加到集合中的最后面;
prependTo()将元素前知到指定集合中；
2，兄弟节点：after()在匹配的元素之后加入,before()在匹配的元素之前加入,
下面代码分别采用append()和prepend()向文本内添加内容；我们预览下添加效果：
$(document).ready(function(){
$('h4').prepend('<span style="color:blue">最新讲解</span>')
$('h4').append('<span style="color:blue">我是后置内容</span>')创建新元素的三种方法；使用了元生JS方法，jquery中的两种方法；其中第三种方法最为简便，建议使用，
我们先预览下父子节点中appendTo();preppendTo();方法添加文本的效果；
1,原生js方法
var ul =document.getElementsByTagName('ul')[0];
var li1=document.createElement('li');
li1.innerHTML='新列表项~~01';
li1.setAttribute('id','item1');
ul.appendChild(li1);2,jQuery的第一种方法
var li2=$('<li>');
li2.html('我是jQuery创建的第一个列表项~~');
li2.attr('id','item2');
li2.appendTo('ul');3，jquery的第三种方法
var li3=$('<li id="item">我是jQuery创建的第二个列表项~~</li>');
//li3.appendTo('ul');
li3.prependTo('ul');兄弟节点：after();before();可分别向文本前面，后面添加内容；我们预览下代码生成的效果
li3.after('<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513744863809&di=2a53f85f16216ce38e55b7c4f4444bce&imgtype=0&src=http%3A%2F%2Fwww.zhlzw.com%2FUploadFiles%2FArticle_UploadFiles%2F201204%2F20120422005031366.JPG" width="100px">');
li3.before('<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513745117704&di=c3e1ff5e10b98e1de72b0e92fdef2ef1&imgtype=0&src=http%3A%2F%2Fpic4.nipic.com%2F20091121%2F3576333_101040082179_2.jpg" width="100px">');
})</script> </body> </html>
下面说说我的学习心得jquery是js的一个函数库，其中封装了很多方法可直接调用，其中省去了javascript中的许多代码，也为程序编写时带来了便捷，以上只是简短的学习，还请各位多多指导。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
