Jquery選擇器與樣式操作

2022-09-09 18:45:15 字數 2082 閱讀 3223

jquery用法思想一

選擇某個網頁元素,然後對它進行某種操作

jquery選擇器

jquery選擇器可以快速地選擇元素,選擇規則和css樣式相同,使用length屬性判斷是否選擇成功。

$('#myid') //選擇id為myid的網頁元素

$('.myclass') // 選擇class為myclass的元素

$('li') //選擇所有的li元素

$('#ul1 li span') //選擇id為為ul1元素下的所有li下的span元素

$('input[name=first]') // 選擇name屬性等於first的input元素

對選擇集進行過濾

$('div').has('p'); // 選擇包含p元素的div元素

$('div').not('.myclass'); //選擇class不等於myclass的div元素

$('div').filter('.myclass'); //選擇class等於myclass的div元素

$('div').eq(5); //選擇第6個div元素

選擇集轉移

$('div').prev(); //選擇div元素前面緊挨的同輩元素

$('div').prevall(); //選擇div元素之前所有的同輩元素

$('div').next(); //選擇div元素後面緊挨的同輩元素

$('div').nextall(); //選擇div元素後面所有的同輩元素

$('div').parent(); //選擇div的父元素

$('div').children(); //選擇div的所有子元素

$('div').siblings(); //選擇div的同級元素

$('div').find('.myclass'); //選擇div內的class等於myclass的元素

判斷是否選擇到了元素

jquery有容錯機制,即使沒有找到元素,也不會出錯,可以用length屬性來判斷是否找到了元素,length等於0,就是沒選擇到元素,length大於0,就是選擇到了元素。

var $div1 = $('#div1');

var $div2 = $('#div2');

alert($div1.length); // 彈出1

alert($div2.length); // 彈出0

......

這是乙個div

jquery用法思想二

同乙個函式完成取值和賦值

操作行間樣式

// 獲取div的樣式

$("div").css("width");

$("div").css("color");

//設定div的樣式

$("div").css("width","30px");

$("div").css("height","30px");

$("div").css();

特別注意

選擇器獲取的多個元素,獲取資訊獲取的是第乙個,比如:$("div").css("width"),獲取的是第乙個div的width。

操作樣式類名

$("#div1").addclass("divclass2") //為id為div1的物件追加樣式divclass2

$("#div1").removeclass("divclass") //移除id為div1的物件的class名為divclass的樣式

$("#div1").removeclass("divclass divclass2") //移除多個樣式

$("#div1").toggleclass("anotherclass") //重複切換anotherclass樣式

jquery選擇器,屬性操作,樣式操作

jquery 方便操作。重新封裝了選擇器,dom的操作,事件的繫結,ajax,動畫,隱式迭代 jquery的官方的主打思想 少些多做!寫的更少,做得更多 連綴執行 一行 解決所有問題 jquery第三方封裝的功能框架,要想使用jquery,得到第三方的支援 console.log jquery co...

jQuery選擇器和操作CSS樣式

animate函式 animate obj,myjson,time,callback 對於animat來說單純的js物件不能被animate點,要把物件放在 裡面才能用jquery裡 面的東西。方式一 box p animate 2000,function 方式二 var a ul li p a a...

jquery載入方式,選擇器,樣式操作

原生js和css不相容,jquery已經過測試,可放心使用 例子1,頁面彈出元素中的文字 這是乙個div元素 注意 1.重新整理頁面後,會首先彈出jquery的文字 這是乙個div元素test 然後才會彈出原生的,原因是因為window.onload需要等網頁中所有元素載入完,並且經過渲染後才會執行...