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需要等網頁中所有元素載入完,並且經過渲染後才會執行...