jQuery學習筆記4：DOM和CSS

1    設定元素及内容

<a href="http://s3.51cto.com/wyfs02/M01/12/43/wKioL1MAmH7wP3XTAAFne076Kns619.jpg" target="_blank"></a>

樣例：

   alert($('#box').html());

   alert($('#box').text());            //text擷取的是文本，有html會自動被清理

   $('#box').html('&lt;em&gt;www.li.cc&lt;/em&gt;');        //替換HTML内容，HTML會自動解析

   $('#box').text('&lt;em&gt;www.li.cc&lt;/em&gt;');        //替換文本内容，有HTML會自動轉義

   alert($('input').val()); //擷取表單value值

   $('input').val('女');    //設定表單value值    

   $('input').val(['男', '女', '程式設計']);  //根據表單value值標明對應選項

2 元素屬性操作

<a href="http://s3.51cto.com/wyfs02/M01/12/43/wKioL1MAm1DyyLFCAAF7MLdnEh4232.jpg" target="_blank"></a>

   alert($('#box').attr('id'));  //擷取key為id的屬性值

   $('div').attr('title', 'test');  //給div元素增加屬性title='test'

   $('div').attr({

       'title' : 'test',

       'class' : 'red',                        

       'data' : '123'

   });

   備注：class不建議用attr來設定

   $('div').removeAttr('title');  //删除title屬性

   jQuery中的很多方法都可以使用function(){}來傳回字元串，比如：html()、text()、val()、is()、filter()等方法。如果涉及到多個元素集合的話，還可以傳遞index參數來擷取索引值，并且可以使用第二個參數value來擷取原始值。

   $('div').attr('title', function () {

       return '我是域名';

   $('div').attr('title', function (index, value) {

       return '原來的title是：' + value + '，現在的title是：我是' + (index+1) + '号域名';

   $('div').html($('div').html() + '&lt;em&gt;www.li.cc&lt;/em&gt;');

等效于：

   $('div').html(function (index, value) {

       return value +  '&lt;em&gt;www.li.cc&lt;/em&gt;';

3    元素樣式操作

<a href="http://s3.51cto.com/wyfs02/M02/12/48/wKioL1MBoeuTqfkfAATN3xkrL1A606.jpg" target="_blank"></a>

   alert($('div').css('color')); //擷取元素内CSS樣式的樣色

   $('div').css('color', 'red'); //設定元素行内CSS樣式顔色為紅色

   var box = $('div').css(['color', 'width', 'height']);  //得到CSS樣式的數組對象

  備注：box[0]不能通路，隻能box['color']

   //逐個周遊出來

   for (var i in box) {

       alert(i + ':' + box[i]);

   }

   //采用jQuery周遊方法$.each()

   $.each(box, function (attr, value) {

       alert(attr + ':' + value);

   //通路原生JavaScript對象數組

   alert($('div')[0]);    

   $('div').each(function (index, element) {

       alert(index + ':' + element);

   //設定多個樣式

   $('div').css('color', 'red').css('background-color', '#ccc');

等效于

   $('div').css({

       'color' : 'blue',

       'background-color' : '#eee',

       'width' : '200px',

       'height' : '30px'

   //需要計算值，傳遞匿名函數

   $('div').css('width', function (index, value) {        

       return parseInt(value) - 500 + 'px';

   $('div').addClass('red');  //添加一個CSS類

   $('div').addClass('red bg size'); //添加多個CSS類

   $('div').removeClass('bg'); //删除一個CSS類

   $('div').removeClass('red size'); //删除多個CSS類

   $('div').click(function () {

       $(this).toggleClass('red size');                //兩個樣式之間的切換，預設樣式和指定樣式的切換

   //實作樣式1和樣式2之間的切換

       //這裡隻是click的局部，而又是toggle的全局

       $(this).toggleClass('red');     //一開始切換到樣式2        

       if ($(this).hasClass('red')) {   //判斷樣式2存在後

           $(this).removeClass('green');  //删除樣式1

       } else {

           $(this).toggleClass('green');   //添加樣式1

           //$(this).addClass('green');

       }

       $(this).toggleClass(function () {

           //局部

           if ($(this).hasClass('red')) {

               $(this).removeClass('red');

               return 'green';

           } else {

               $(this).removeClass('green');

               return 'red';

           }

       });                

4    CSS方法

<a href="http://s3.51cto.com/wyfs02/M00/12/48/wKioL1MBsNnxNSV1AAT3lxdG-C8713.jpg" target="_blank"></a>

   alert($('div').width());  //擷取元素高度，傳回類型為number    

   $('div').width(500);  //設定元素高度，直接傳數值，預設加px

   $('div').width('500px');

   $('div').width('500pt');

   $('div').width(function (index, width) {

       return width - 500 + 'px';    //雖然可以不加，會智能添加，但還是建議加上機關，更加清晰。

   alert($('div').offset().top);  //相對于視口的偏移    

   alert($('div').position().top);    //相對于父元素的偏移

   alert($(window).scrollTop());  //擷取目前滾動條的位置

   $(window).scrollTop(300);   //設定目前滾動條的位置

     本文轉自stock0991 51CTO部落格，原文連結：http://blog.51cto.com/qing0991/1359584，如需轉載請自行聯系原作者