一、jQuery操作樣式
二、jQuery操作屬性
三、jQuery動畫簡單操作
四、jQuery操作dom節點增刪操作
#一、jq操作樣式
#1.css操作：
功能：設定或修改樣式，操作style屬性
a.設定單一樣式，css(name/屬性名稱,value/屬性值);
$('#box').css(‘background’,'#000')
b.設定多個樣式，參數是物件css (obj);
$('#box').css({'background':'gray',
'width':'400px',
'height':'200px'
})取得樣式：
.css(name)
特點，jQ的css方法都是行內樣式；
jq隱式迭代時，當取得的是一個集合的某個屬性的時候，JQ會自動列印第0個屬性。
設定操作的時候，如果是多個元素，那麼給所有的元素設定相同的值
box.eq(0).css('width',190); box.eq(1).css('width',110);
.......
2.class操作
功能：處理樣式的類別
a.添加addClass（name）；参数类名不用带点,并且不会覆盖之前的作用;
$("box").addClass("one");
b.移除removeClass("name");
$("box").removeClass("one");
c.判断hasClass是否有具体的类，返回值为布尔值
$("box").hasClass("one");//false
d.切换样式类toggleClass，需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。
$("box").toggleClass("one");切换样式类二、jq操作屬性
1.attr運算
a.设置单个属性,attr(name,value);
$(“img”).attr(“title”,”哎哟，不错哦”);
b.设置多个属性（attr(obj)）;
$("img").attr({
title:"哎呦，不错哦“，
alt:"你很棒棒哟”,
style:"opacity:.5"
});
c.获取属性attr(name)
$(“img”).attr("title");1. 取得屬性時，只會取得到第一個元素對應的屬性，與css方法一樣.
2. 取得屬性時，如果該屬性不存在，那麼會傳回undefined.
d.移除屬性removeAttr(name);
參數：需要移除的屬性名，如果傳空，那麼不會有任何操作，注意，並不是移除所有的屬性。區分removeClass。
$("img").removeAttr("title");2.prop操作布林屬性
對於checked、selected、disabled這類boolean類型的表單屬性，不能使用attr方法，只能使用prop方法。
設定屬性
$(“:checked”).prop(“checked”,true);
所有選擇新增選取屬性，參數（屬性名，true/false)
取得屬性
$(“:checked”).prop(“checked”);//返回true或者false;
三、jQuery基本動畫
jquery提供了三組基本動畫，這些動畫都是標準的、有規律的效果，jquery也提供了自訂動畫的功能。
1.顯示與隱藏
#show（[speed],[callback]）與hide（）；
show()如果不傳遞參數，直接顯示和隱藏
參數:speed：時間（毫秒值），固定字串'fast'） = 200 nomal = 400 slow=600;
callback:執行動畫結束後執行的回呼函數
hide()同show()方法一致
show/hide修改的是元素的width、height、opacity。
2.滑入与滑出
slideUp()与slideDown()
*如果不传参数，默认为nomal!（与show和hide区分 ）
参数：时间，固定字符串
callback:执行动画结束后执行的回调函数
滑入滑出切换slideToggle(speed,callback)
$(selector).slideToggle(speed,callback);
//如果是隐藏状态，那么执行slideDown操作，如果是显示状态，那么执行slideUp操作。
3.淡入与淡出
fadeIn()与fadeOut()
用法与show好fadeOut一致
淡入淡出切换：
fadeToggle(speed,callback);
//如果当前元素处于隐藏状态，那么执行fadeIn操作，如果处于显示状态，那么执行fadeOut操作。
fade系列方法：修改的是元素的opacity
4.基本动画小结
1. jQuery给我们提供了三组动画，show/hide、slideUp/slideDown、fadeIn/fadeOut
2. 动画切换方法：slideToggle、fadeToggle，toggle()。
3. show/slideDown/fadeIn三个是显示效果、hide/slideUp/fadeOut三个是隐藏效果。
4. show/hide修改的是元素的height,width,opacity。slide系列方法修改的是元素的height。fade系列方法修改的是元素的opacity。这三种方法修改的这些值，都是带数字的，因为带了数字才能做渐变。
5.自定义动画animate
animate:自定义动画
$(selector).animate({params},[speed],[callback]);// {params}：要执行动画的CSS属性，带数字可以是对象（必写）
// speed：执行动画时长
时间和速度：毫秒数，字符串’swing‘两边慢，中间快/’linner‘匀速
// callback：动画执行完后立即执行的回调函数
例：
设置数值型的属性做动画
box.animate({
left:800;
width:800;
height:800 逐渐变大
transform:'rotate(360deg)'
},1000,'swing'，function)
6.动画队列问题
在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行。
7.停止动画
stop()函数暂停当前执行动画
stop(clearQueue,jumpToEnd)
第一个参数：是否清楚队列，第二个参数：是否跳转最终效果，最后一帧
四、jQuery操作dom节点增删操作
1.创建元素
$(htmlStr)//html格式的字符串
$(“<span>这是一个span元素</span>”);
2.添加元素append/prepend
append方法：添加到当前的最后面。
参数：字符串（标签）或者jq对象
字符串：$(“p”).append(“这是一个span元素”);
JQ对象：var $span = $(“<span>这是一个span元素</span>”);
$(“p”).append($span);prepend：追加到当前元素的最前面。
*如果添加的是已经存在的元素，那么会把之前的元素给干掉。（类似于剪切的功能）。
3.清空元素empty
empty：清空指定节点的所有元素，自身保留(清理门户)
1）$(“p”).empty();//清空p的所有内容（推荐使用，会清除子元素上绑定的内容，源码） 2）$(“p”).html(“”);//使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除。
4.删除元素remove
remove:相比于empty,自身也删除（自尽）
$(“p”).remove();
5.克隆元素clone
$(selector).clone();
复制$(selector)所匹配到的元素（深度复制）和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。
以上是jQuery操作DOM的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
