jQuery選擇器和操作CSS樣式

2021-09-23 17:06:35 字數 2685 閱讀 3477

/* 

animate函式------animate(obj,myjson,time,callback);

對於animat來說單純的js物件不能被animate點,要把物件放在$()裡面才能用jquery裡 面的東西。

*//* 方式一 */

$(".box p").animate(,2000,function())

​/* 方式二 */

var a = $("ul li p");

$(a).animate(,2000,function () );

還是比較重要的

/* 

篩選選擇器 ---- 都是從0開始

lt() ---- 小於

gt() ---- 大於

odd() ---- 奇數從 從下標1開始

even() ----偶數

eq() ---- 選中第n個目標,

*/$(".box p:lt(2)");//在選中的集合中選中小於(個數)2的p

$(".box p:gt(2)");//在選中的集合中選中大於(個數)2的p

​/* eq()動態獲取(解耦) */

var a = 2;

$(".box p").eq(a).css();

map方法

類陣列沒有map等方法

/* 原生map--陣列下面的方法---對比---python的map方法可以直接傳入物件 */

var arr = [1,2,3];

var arr1 = [3,4,56];

var b = arr.map(function(items));

/*參考python的寫法,python沒有陣列,有列表

arr = [1,2,3]

def add(items):

return items+1

print(list(map(add,arr)))---[2, 3, 4]*/​

console.log(b);//array(3) [ 2, 3, 4 ]

/* jquery--map方法 可以批量操作*/

var num = $(".box p").map(function(items))

獲取表單的內容----map的簡單應用

slice、children方法

/*  

slice(a,b)

選中從a到b但是不包括b

從下標0開始

*/$(".bxo p").slice(1,3).css();​/*

children()

選中指定的親兒子

*/$(".bxo p").children("span").css();​/*

find() -- 選中指定的後代,不給引數的話就是選中當前物件的所有子標籤

,也可以不給引數

*/$(".bxo p").children("span").css();

​/* parent()---選中父親,不需要傳引數 */

$("p").parent().css();

​/* parents ---選中指定的父親 可以選引數 */

$("p").parents("li").css();

​/* */

新增和刪除類名

/* 

新增類名:

addclass("類名")--新增類名

removeclass("類名")--刪除類名

siblings() --- 選中其他兄弟

*//* 新增並且刪除其餘兄弟的所有類名"on" */

var a = $("ul li");

a.click(function () );

/* 設定單個樣式 */

$(".box p").css("background","deeppink");

/* 設定多個樣式 */

$(".box p").css()

/* 在原來的基礎上新增寬高 */

$(".box p").css()

/* 獲取原來定位的位置 */

var left = $("div p").position().left;

var top = $("div p").position().top;

​/* 獲取內容的寬高:實際樣式 */

var width = $("div p").width();

var height = $("div p").height();

​/* widht+padding+border---要border */

var width = $("div p").outerwidth();

var height = $("div p").outerheight();

​/* widht+padding -- 不要border*/

var width = $("div p").innerwidth();

var height = $("div p").innerheight();

​/* 滾動條高度 時實獲取滾動高度 */

$(document).scroll(function () );

jquery選擇器和css選擇器

今天開發中碰到乙個問題。class maindiv class mydiv name id div class mydiv name id div class mydiv name id div class mydiv name id div div 是這樣,我獲取class mydiv 下面的某乙...

CSS和jQuery選擇器

css選擇器主要包括 標籤選擇器,id選擇器,類選擇器,臨近選擇器,後代選擇器,子 選擇器,屬性選擇器,群組選擇器,通配選擇器,偽類選擇器 jquery選擇器主要包括 基本選擇器,層次選擇器,過濾選擇器,表單選擇器 1基本選擇器,例如 id class div div,span,p.myclass ...

css和jquery選擇器

基本 id選擇器 類選擇器 萬用字元 元素選擇器 element 並集選擇器 div1,div2 交集選擇器 無 div1 div2 層級後代 空格 所有後代元素 子代 所有子元素 相鄰的下乙個兄弟元素 ul div ul相鄰的下乙個元素且為div 後面的所有兄弟元素 ul div ul後面的所有兄...