jQuery小結

show()顯示 hide()隱藏
入口
$(function(){})
互相轉化
//jQuery對象轉爲js對象
var $li = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲li"); …li);
$li[0].style.color = “pink”;

        //js對象轉爲jQuery對象
         var li = document.getElementById("li");
          $(li).text("哈哈");//給錢就行
選擇器

// 在jq裏設置樣式 jq對象.css(“樣式名”,"“樣式值)
//標籤
$(“li”).css(“backgroundColor”,“pink”);
//交集
$(“li.four”).css(“backgroundColor”,“red”);
//類選擇器
$(”.seven").css(“backgroundColor”,“green”);
//後代選擇器
$(“ul p”).css(“color”,“yellow”);
//子集選擇器
$(“div>p”).css(“color”,“purple”);
//並集選擇器
$(".four,.seven").css(“fontSize”,“25px”);
//下標爲偶數
$(“li:even”).css(“background”,“red”);
//下標爲奇數
$(“li:odd”).css(“background”,“cyan”);
//下標爲1的元素
//寫法一
$(“li:eq(1)”).css(“fontSize”,“30px”);
//寫法二
$(“li”).eq(2).css(“fontSize”,“20px”);
//li元素的第一個
$(“li:first”).css(“color”,“pink”);
//li元素的最後一個
$(“li:last”).css(“color”,“pink”);

    //mouseenter 鼠標移入
    //mouseleave 鼠標移出

    //mouseover  鼠標經過
    //mouseout   鼠標移過
   //當前對象.index();


class操作
//獲取某個樣式
        console.log($("li").css("fontSize"));
        //跟隱式迭代有關係:獲取時只會獲取li對應的值 :獲取第一個對應的值

       //添加類
        $("li").addClass("aa");//添加類
        $("li").addClass("bb");
        //移除類$
        $("li").removeClass("bb");
        $("li").hasClass("aa");//移除類 返回值是布爾值

.屬性操作
//設置單個屬性
$(“img”).attr(“alt”,“美女嗎?”);
//設置多個屬性
$("img").attr({ "title":"京劇", "alt":"真的是美女" }) //獲取屬性 console.log($(“img”).attr((“alt”)));
//關於布爾類型的屬性不要用attr方法,用prop方法,用法和attr一樣的

動畫
//show([speed],[callback]) []–>可選參數
//speed : 動畫的持續時間 , 可以是毫秒,也可以是固定字符串 :
//fast:200ms normal : 300ms slow:600ms
//callback : 回調函數 ,動畫完成後執行

// 淡入 :fadeIn 淡出 : fadeOut 切換 : fadeToggle
$(“button”).eq(0).click(function () {
//fadeIn ([speed],[callback]) []–>可選參數
//speed : 動畫的持續時間 , 可以是毫秒,也可以是固定字符串 :
//fast:200ms normal : 300ms slow:600ms
//callback : 回調函數 ,動畫完成後執行

// 滑入 :slideDown 滑出 : slideUp 切換 : slideToggle
$(“button”).eq(0).click(function () {
//slideDown ([speed],[callback]) []–>可選參數
//speed : 動畫的持續時間 , 可以是毫秒,也可以是固定字符串 :
//fast:200ms normal : 300ms slow:600ms
//callback : 回調函數 ,動畫完成後執行
//stop : 停止當前正在執行的動畫

//語法 : jQuery對象.animate(style,[speed],[動畫的執行效果],[callback])
// ①:必選 , 傳需要動畫的樣式 ,傳對象 只生效數值變化
// ②:持續時間
// ③:動畫的執行效果 swing :鞦韆 linear:勻速
// ④:回調函數
// play()播放 -->js方法

動態創建節點
// append() 添加到父節點的末尾
// appendTo() 把子節點添加到父節點的末尾
//$(“body”).append(‘百度一下’)
// $(“a”).appendTo("#box")

//把子元素添加到父節點裏面的前面 prepend()
// 在到父節點裏面添加一個子節點到最前面prependTo()
   $("#box").prependTo($("span"))
//添加兄弟節點  after() 兄弟之後  before() 兄弟之前;

// $("a").after($(“span”))
// $("a").before($(“span”))