jQuery操作HTML和CSS
来源：互联网 发布：ubuntu设置ip不起作用 编辑：程序博客网 时间：2024/04/28 00:05
<html>
<head>
<title></title>
<style type="text/css">
.liclass{
background-color:#333;
}
</style>
<!-- jQuery库导入 -->
<script src="jquery.js"></script>
<script type="text/javascript">
/* jQuery操作HTML和CSS */
/* 操作HTML */
/* 向DOM中添加HTML .html() */
/* 向DOM中添加HTML前面或者后面 .append() .prepend() */
/* 在某元素之前或者之后添加HTML .before() .after() */
/* 删除HTML元素 .remove() */
/* 复制HTML元素 .clone() */
/* 设置文本内容 .text() */
/* 操作CSS */
/* 获取或者设置CSS .css() */
/* 添加CSS类 .addClass() */
/* 是否拥有CSS类 .hasClass() */
/* 删除CSS类 .removeClass() */
/* 切换CSS类 .toggleClass() 有则删除，没有则添加 */
$(document).ready(
function(){
/* 通配符选择器* 选择所有页面元素 */
//$("*").css("padding","10px");
}
)
function insertNewLi(){
$("#first ul").append("<li>new</li>");
}
function cloneNewLi(){
$("#second ul li:eq(0)").after($("#second ul li:eq(0)").clone());
}
function removeLi(){
$("#second ul li:eq(0)").remove();
}
function toggleLi(){
$("#third ul li").toggleClass("liclass");
}
</script>
</head>
<body>
<div>
<div id="first">
<ul>
<li>old</li>
<li>old</li>
</ul>
<button onclick="insertNewLi();">插入新列</button>
</div>
<div id="second">
<ul>
<li>This is init Li!</li>
</ul>
<button onclick="cloneNewLi();">复制列</button>
<button onclick="removeLi();">删除列</button>
</div>
<div id="third">
<ul>
<li>This is one Li!</li>
<li>This is two Li!</li>
<li>This is three Li!</li>
<li>This is four Li!</li>
<li>This is five Li!</li>
<li>This is six Li!</li>
</ul>
<button onclick="toggleLi();">复制列</button>
</div>
</div>
</body>
</html>
<head>
<title></title>
<style type="text/css">
.liclass{
background-color:#333;
}
</style>
<!-- jQuery库导入 -->
<script src="jquery.js"></script>
<script type="text/javascript">
/* jQuery操作HTML和CSS */
/* 操作HTML */
/* 向DOM中添加HTML .html() */
/* 向DOM中添加HTML前面或者后面 .append() .prepend() */
/* 在某元素之前或者之后添加HTML .before() .after() */
/* 删除HTML元素 .remove() */
/* 复制HTML元素 .clone() */
/* 设置文本内容 .text() */
/* 操作CSS */
/* 获取或者设置CSS .css() */
/* 添加CSS类 .addClass() */
/* 是否拥有CSS类 .hasClass() */
/* 删除CSS类 .removeClass() */
/* 切换CSS类 .toggleClass() 有则删除，没有则添加 */
$(document).ready(
function(){
/* 通配符选择器* 选择所有页面元素 */
//$("*").css("padding","10px");
}
)
function insertNewLi(){
$("#first ul").append("<li>new</li>");
}
function cloneNewLi(){
$("#second ul li:eq(0)").after($("#second ul li:eq(0)").clone());
}
function removeLi(){
$("#second ul li:eq(0)").remove();
}
function toggleLi(){
$("#third ul li").toggleClass("liclass");
}
</script>
</head>
<body>
<div>
<div id="first">
<ul>
<li>old</li>
<li>old</li>
</ul>
<button onclick="insertNewLi();">插入新列</button>
</div>
<div id="second">
<ul>
<li>This is init Li!</li>
</ul>
<button onclick="cloneNewLi();">复制列</button>
<button onclick="removeLi();">删除列</button>
</div>
<div id="third">
<ul>
<li>This is one Li!</li>
<li>This is two Li!</li>
<li>This is three Li!</li>
<li>This is four Li!</li>
<li>This is five Li!</li>
<li>This is six Li!</li>
</ul>
<button onclick="toggleLi();">复制列</button>
</div>
</div>
</body>
</html>
- jQuery操作HTML和CSS
- Jquery学习--HTML和CSS操作
- Jquery学习--HTML和CSS操作
- jQuery操作HTML+CSS
- jQuery HTML/CSS操作
- JQuery(三)——操作HTML和CSS内容
- jQuery 操作DOM总结,DOM Core操作,HTML-DOM操作和CSS-DOM操作
- jQuery 操作DOM总结,DOM Core操作,HTML-DOM操作和CSS-DOM操作
- 02. JQuery 对HTML/CSS的操作
- Jquery-Dom和css操作
- jQuery属性、CSS类及HTML/文本/值操作
- 5.jQuery 基础DOM 和CSS 操作
- jQuery中DOM和CSS操作
- jquery 对属性和css操作
- jQuery 基础DOM和CSS操作
- jQuery中的DOM和CSS操作
- jQuery 基础DOM和CSS操作
- jQuery学习五-DOM和CSS操作
- 设计模式-极品飞车-【观察者模式】
- vs2005 和 VAssistX 常用快捷键
- 运行时类的实例的动态创建
- 14步完成SharePointServer2010企业版安装
- jQuery属性选择器
- jQuery操作HTML和CSS
- 软件体系结构的重构——定义
- VS2010编译时拿老版本的代码运行,出现"source code is different..."解决办法
- 图像相似度算法的C#实现及测评
- 设计模式-极品飞车-【抽象工厂模式】
- 实现业务提醒、督办、催办等消息的方法
- App应用之提交到各大市场渠道
- linux-mysql-查询结果导入到excel中
- ForFisrtWork--No.5:刚考完2013软件开发B卷，回忆题目并总结之
