JQUERY 函式的使用 DOM選擇器 動畫

$()             執行使用

$().abc() 連綴使用：區域性方法
$.abc() 全域性使用
window.onload = function()
$(document).ready(function())
$(function())

$("#box").css(「background」,「yellow」)

轉換成原生寫法

box[0].style.background = 「yellow」

或者 box.get(o).style.background = 「yellow」

跟css用法差不多

$("#box").css("background","red");  // id

$(".cont").css("background","red"); //class
$("span").css("background","red"); //元素
$("input[name]").css("background","red");
$("input[name=user]").css("background","red");
$("input[name=user][value]").css("background","red");
// $(".box .msg h2")
// 後代
// $(".box h2"）
// $(".box").find("h2")
// // 子
// $(".box>h2")
// ||
// $(".box").children("h2")
// // 下乙個兄弟
// $(".box+.cont")
// ||
// $(".box").next(".cont")
// // 下所有兄弟
// $(".box~.cont")
// ||
// $(".box").nextall(".cont")
// 找li裡面第乙個子元素
// $("ul").find("li:first").css("background","red") 
// $("ul").find("li").first().css("background","red")
// 找li裡面最後乙個子元素
// $("ul").find("li:last").css("background","red")
// $("ul").find("li").last().css("background","red")
//找不是red class li元素
// $("ul").find("li:not(.red)").css("background","red")
// $("ul").find("li").not(".red").css("background","red")
// 找奇數/偶數 索引的li 注意從0開始
// $("ul").find("li:even").css("background","red");
// $("ul").find("li:odd").css("background","red");
// eq 類似於n-th 
// $("ul").find("li:eq(3)").css("background","red");
// $("ul").find("li").eq(3).css("background","red");
// 找li中 h標籤
// $("ul").find("li:contains(h)").css("background","red");
//找li裡面內容為空的
// $("ul").find("li:empty").css("background","red");
// 找ul 的class名字有red
// $("ul:has(.red)").css("background","red");
// 找被影藏/顯示的ul
// $("ul:hidden").css("background","red");
// $("ul:visible").css("background","red");
// console.log($("#box").is(".red"))
// console.log($("#box").hasclass("pink"))
//新增/刪除指定的class 根據class名字
// $("#box").addclass("green");
// $("#box").removeclass("pink");

// 內建動畫：封裝好的固定動畫

// 自定義動畫：自行組合動畫效果

// 動畫的設定

內建動畫：

// 顯示隱藏

// 上拉下拉

// 淡出淡入，半透明

內建動畫

$("#btn1")[0].onclick = function()

$("#btn2")[0].onclick = function()

$("#btn3")[0].onclick = function()

$("#btn4")[0].onclick = function())

}$("#btn5")[0].onclick = function()

$("#btn6")[0].onclick = function()

$("#btn7")[0].onclick = function()

$("#btn8")[0].onclick = function()

$("#btn9")[0].onclick = function()

$("#btn10")[0].onclick = function()

自定義動畫

$("#btn")[0].onclick = function(),2000,function())

// 動畫之間的執行順序：同步

// 鏈式動畫
// $(".box").animate()
// $(".box").animate()
// $(".box").animate(,function())
// })
// $(".box").animate().animate()
// 動畫與其他方法之間的順序：非同步
// $(".box").animate().animate().css("background","yellow")
// 將動畫和其他方法之間的非同步變成同步
// $(".box").animate(,function())
// $(".box").animate().queue(function(next)).animate()
}

$("#btn1")[0].onclick = function())

$(".box").animate(,5000).animate(,5000).animate(,5000).animate(,5000)

}$("#btn2")[0].onclick = function()

// delay():延遲

// stop():停止
// 引數1：動畫佇列
// true：清空佇列；false：不清空佇列
// 引數2：當前動畫
// true：當前動畫立即到終點；false：立即停止當前位置
// 動畫：
// 動畫佇列：等待動畫
// 當前動畫：正在執行的動畫
// stop預設停止的是當前動畫

使用jQuery操作DOM

首先要了解為什麼要使用jquery操作dom 先對比一下js操作dom和jquery操作dom 使用js操作的方法 window.onload function 使用jquery操作的方法 function 對比一下，不難發現，使用jquery的方式來操作dom更加的簡介，方便 用jqueryx操作...

使用jquery隱藏和移動dom

一 隱藏 顯示 hide 和 show 隱藏和顯示 html 元素 selector hide speed,callback selector show speed,callback 可選的 speed 引數規定隱藏 顯示的速度，可以取以下值 slow fast 或毫秒。jquery toggle ...

jQuery的prev siblings選擇器

一 介紹 prev siblings選擇器用於匹配prev元素之後的所有siblings元素。其中，prev和siblings是兩個相同輩元素。prev siblings選擇器的使用方法如下 prev siblings prev是指任何有效的選擇器。siblings是乙個有效選擇器並緊接著prev選...