这篇博客详细介绍了jQuery操作CSS样式的方法，包括设置、获取和删除样式，以及addClass()、removeClass()和toggleClass()方法的使用。此外，还讲解了jQuery如何插入、删除和操作DOM节点，如wrap()、wrapAll()、wrapInner()、clone()、remove()、detach()和empty()等方法的应用。
- jQuery操作样式
1.1. css操作
功能:设置或害修改样式，操作的是style属性。
操作单个样式
//name1需要设置的样式名称
//value：对应的样式值
css(name, value);
//使用案例
S("#one*).css("background","gray");//将背景色称改为灰色
设置多个样式
//参数是一个对象，对象中包含了需要设置的样式名和样式值
Css(obj);
//使用案例
$("#one").CSS({
"background":"gray",
"width";"400px"
"height":"20px"
});
获取样式
//css(name )
//name:想要获取的样式名称
$("1i").eq(0).css("fontSize", "20px");
$("1i"). eq(1). css("fontSize""21px");
$("1i").eq(2).css("fontSize", "22px");
$ ("1i").eq(3). css("fontSize", "23px") ;
//A:20 b:21 C:22
d:23 e:16 f:[20, 21，22，23]
//隐式迭代:
//设置操作的时候:会给jq内部的所有对象都设置上相同的值。
//获取的时候:只会返回第一个元素对应的值。
console. log($("1i").css("fontSize"));
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
实例样式表
下面的样式表将用于本页的所有例子：
.important { font-weight:bold; font-size:xx-large; } .blue { color:blue; }
jQuery addClass() 方法
下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：
实例
$("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); });
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<div>这是一些重要的文本!</div>
<br>
<button>为元素添加 class</button>
</body>
</html>
标题 1
标题 2
这是一个段落。
这是另外一个段落。
这是一些重要的文本!
为元素添加 class
您也可以在 addClass() 方法中规定多个类：
实例
<script src="//cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("body div:first").addClass("important blue");
});
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<div id="div1">这是一些文本。</div>
<div id="div2">这是一些文本。</div>
<br>
<button>为第一个 div 元素添加类</button>
jQuery removeClass() 方法
下面的例子演示如何在不同的元素中删除指定的 class 属性：
实例
$("button").click(function(){ $("h1,h2,p").removeClass("blue"); });
jQuery toggleClass() 方法
下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：
实例
$("button").click(function(){ $("h1,h2,p").toggleClass("blue"); });
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
});
</script>
<style type="text/css">
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另外一个段落。</p>
<br>
<button>切换 class</button>
</body>
tab切换
<scrip>,
$(function (){
s(".tab-item") . mouseenter(function(){
$(this).addClass("active").siblings() . removeClass(" active );
var idx = $(this). index();
$(" .main").eq(idx) .addC lass("selected").siblings().removpClass("selected");});
});
</script>
属性操作
表格选择案例
<input type-"button" value-"to">
<input type="button" value-"Titt">
<input type "checkbox" id="ck">
<script src="jquery-1.12.4.js">/script><script>
//对于布尔类型的属性，不要attr方法，应该用prop方法prop用法跟attr方法一样S(function ()i
$("input").eq(0).click(function (){
$("#ck"). prop("checked", true);
));
$(" input"). eq(1).click(function (){
$("#ck"). prop("checked", false);
});
全选
3.1.三组基本动画
显示(show)与隐藏(hide)是组动画:滑入（slideUp)与滑出（slideDowm)与切换(slideToggle), 效果与卷帘门类似浸入(fadein)与淡出(fadeOut)与切换(fadeToggle)
show([speed], [callback]);
//speed(可速):动面的执行时间
//1.如果不传，就没有动重效果。如果是slideHofade系列，会默认为normal
//2.秒(比如1000)动画在1000毫秒执行完成(推荐)
//3.固定字符串，slow(200)、normal(400)、fast(600),如果传其他字符串，物题认为normal.//col1back(可选):执行完动后执行的同限百数
3.2.自定义动画
animate自定义动国
$(selector).enimete({params),[speed],leasing],{camback]);
// (paras):要执行动两的CSS属性，带数字(必选)
speed:执行动哪时长(可以选)
easing:执行效果: 默认为swing (缓动)可以是linear (匀速)
callback:动执行完后立即执行的回调函数(可选)
3.3.动画队列与停止动画
在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行(联想:火车迸站)。
//stop方法:停止动面效果
stop(clearQueut, jumpTcEnd);
//第一个参数:是否清除队列
//第二个参数:是否跳转到最终效果
jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
下面的例子演示 stop() 方法，不带参数：
实例
$("#stop").click(function(){ $("#panel").stop(); });
2 篇笔记 写笔记
动画队列停止动画测试，只停止当前正在进行的动画，停止当前动画后，队列中的下一个动画开始进行：
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
$("#panel").slideUp(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});});
可以在 stop() 中设置 stopAll 的参数为 true，这样就可以停止所有动画效果而不是只停止当前动画：
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
$("#panel").slideUp(5000);
});
$("#stop").click(function(){
$("#panel").stop(true);
});});
jQuery节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作
一．创建节点
| 1 | var box = $('<div>节点</div>'); //创建一个节点，或者var box = "<div>节点</div>"; |
| 2 | $('body').append(box); //将节点插入到<body>元素内部 |
二．插入节点
jQuery 提供了好几种个方法来插入节点：
1、内部插入节点方法
| 方法名 | 描述 |
| append(content) | 向指定元素内部后面插入节点 content |
| append(function (index, html) {}) | 使用匿名函数向指定元素内部后面插入节点 |
| appendTo(content) | 将指定元素移入到指定元素 content 内部后面 |
| prepend(content) | 向指定元素 content 内部的前面插入节点 |
| prepend(function (index, html) {}) | 使用匿名函数向指定元素内部的前面插入节点 |
| prependTo(content) | 将指定元素移入到指定元素 content 内部前面 |
代码示例：
| 01 | $('div').append('<strong>节点</strong>'); //向 div 内部插入 strong 节点 |
| 02 | $('div').append(function (index, html) { //使用匿名函数插入节点，index为该div的索引，即第几个div，html是原节点内部内容。 |
| 03 | return '<strong>节点</strong>+index+html'; |
| 04 | }); |
| 05 | $('span').appendTo('div'); //讲 span 节点移入 div 节点内 |
| 06 | $('span').appendTo($('div')); //同上 |
| 07 | $('div').prepend('<span>节点</span>'); //将 span 插入到 div 内部的前面 |
| 08 | $('div').append(function (index, html) { //使用匿名函数，同上 |
| 09 | return '<span>节点</span>'; |
| 10 | }); |
| 11 | $('span').prependTo('div'); //将 span 移入 div 内部的前面 |
| 12 | $('span').prependTo($('div')); //同上 |
2、外部插入节点方法
| 方法名 | 描述 |
| after(content) | 向指定元素的外部后面插入节点 content |
| after(function (index, html) {}) | 使用匿名函数向指定元素的外部后面插入节点 |
| before(content) | 向指定元素的外部前面插入节点 content |
| before(function (index, html) {}) | 使用匿名函数向指定元素的外部前面插入节点 |
| insertAfter(content) | 将指定节点移到指定元素 content 外部的后面 |
| insertBefore(content) | 将指定节点移到指定元素 content 外部的前面 |
代码示例：
| 01 | $('div').after('<span>节点</span>'); //向 div 的同级节点后面插入 span |
| 02 | $('div').after(function (index, html) { //使用匿名函数，同上 |
| 03 | return '<span>节点</span>'; |
| 04 | }); |
| 05 | $('div').before('<span>节点</span>'); //向 div 的同级节点前面插入 span |
| 06 | $('div').before(function (index, html) { //使用匿名函数，同上 |
| 07 | return '<span>节点</span>'; |
| 08 | }); |
| 09 | $('span').insertAfter('div'); //将 span 元素移到 div 元素外部的后面 |
| 10 | $('span').insertBefore('div'); //将 span 元素移到 div 元素外部的前面 |
三．包裹节点
jQuery 包裹节点就是使用字符串代码将指定元素的代码包含着的意思。
| 方法名 | 描述 |
| wrap(html) | 向指定元素包裹一层 html 代码 |
| wrap(element) | 向指定元素包裹一层 DOM 对象节点 |
| wrap(function (index) {}) | 使用匿名函数向指定元素包裹一层自定义内容 |
| unwrap() | 移除一层指定元素包裹的内容 |
| wrapAll(html) | 用 html 将所有元素包裹到一起 |
| wrapAll(element) | 用 DOM 对象将所有元素包裹在一起 |
| wrapInner(html) | 向指定元素的子内容包裹一层 html |
| wrapInner(element) | 向指定元素的子内容包裹一层 DOM 对象节点 |
| wrapInner(function (index) {}) | 用匿名函数向指定元素的子内容包裹一层 |
代码示例：
| 01 | $('div').wrap('<strong></strong>'); //在 div 外层包裹一层 strong |
| 02 | $('div').wrap('<strong>123</strong>'); //包裹的元素可以带内容 |
| 03 | $('div').wrap('<strong><em></em></strong>'); //包裹多个元素 |
| 04 | $('div').wrap($('strong').get(0)); //也可以包裹一个原生 DOM |
| 05 | $('div').wrap(document.createElement('strong')); //临时的原生 DOM |
| 06 | $('div').wrap(function (index) { //匿名函数 |
| 07 | return '<strong></strong>'; |
| 08 | }); |
| 09 | $('div').unwrap(); //移除一层包裹内容，多个需移除多次 |
| 10 | $('div').wrapAll('<strong></strong>'); //所有 div 外面只包一层 strong |
| 11 | $('div').wrapAll($('strong').get(0)); //同上 |
| 12 | $('div').wrapInner('<strong></strong>'); //包裹子元素内容 |
| 13 | $('div').wrapInner($('strong').get(0)); //DOM 节点 |
| 14 | $('div').wrapInner(function () { //匿名函数 |
| 15 | return '<strong></strong>'; |
| 16 | }); |
注意：.wrap()和.wrapAll()的区别在前者把每个元素当成一个独立体，分别包含一层外层；后者将所有元素作为一个整体作为一个独立体，只包含一层外层。这两种都是在外层包含，而.wrapInner()在内层包含。
四．节点操作
除了创建、插入和包裹节点，jQuery 还提供了一些常规的节点操作方法：复制、替换和删除节点。
1 //复制节点
2 $('body').append($('div').clone(true)); //复制一个节点添加到 HTML 中
注意：clone(true)参数可以为空，表示只复制元素和内容，不复制事件行为。而加上 true参数的话，这个元素附带的事件处理行为也复制出来。
1 //删除节点
2 $('div').remove(); //直接删除 div 元素
注意：.remove()不带参数时，删除前面对象选择器指定的元素。而.remove()本事也可以带选择符参数的，比如：$('div').remove('#box');只删除 id=box 的 div。
1 //保留事件的删除节点
2 $('div').detach(); //保留事件行为的删除
注意：.remove()和.detach()都是删除节点，而删除后本身方法可以返回当前被删除的节点对象，但区别在于前者在恢复时不保留事件行为，后者则保留。
1 //清空节点
2 $('div').empty(); //删除掉节点里的内容
3 //替换节点
4 $('div').replaceWith('<span>节点</span>'); //将 div 替换成 span 元素
5 $('<span>节点</span>').replaceAll('div'); //同上
扫一扫
1088
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
