jQuery学习笔记4：DOM和CSS

1    设置元素及内容

样例：

   alert($('#box').html());    alert($('#box').text());            //text获取的是文本，有html会自动被清理
   $('#box').html('<em>www.li.cc</em>');        //替换HTML内容，HTML会自动解析$('#box').text('<em>www.li.cc</em>');        //替换文本内容，有HTML会自动转义

   alert($('input').val()); //获取表单value值$('input').val('女');    //设置表单value值    
   $('input').val(['男', '女', '编程']);  //根据表单value值选定对应选项

2 元素属性操作

样例：

   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() + '<em>www.li.cc</em>');
等效于：
   $('div').html(function (index, value) {
       return value +  '<em>www.li.cc</em>';
   });

3    元素样式操作

样例：

   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之间的切换
   $('div').click(function () {        //这里只是click的局部，而又是toggle的全局$(this).toggleClass('red');     //一开始切换到样式2        
       if ($(this).hasClass('red')) {   //判断样式2存在后$(this).removeClass('green');  //删除样式1
       } else {
           $(this).toggleClass('green');   //添加样式1            //$(this).addClass('green');
       }
   });

等效于：

   $('div').click(function () {$(this).toggleClass(function () {
           //局部
           if ($(this).hasClass('red')) {$(this).removeClass('red');
               return 'green';
           } else {
               $(this).removeClass('green');
               return 'red';
           }
       });                
   });

4    CSS方法

样例：

   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，如需转载请自行联系原作者