a毛 jquery 学习记 5 基础DOM和CSS操作2

jquery 学习 五(2) 基础DOM和CSS操作

参考资料：李炎恢老师的视频 、w3cschool  、锋利的jquery、

拷上次笔记到文件夹到'5基础DOM和CSS操作2'中，

四．元素样式操作

css();

$(function(){
	alert($('div').css('color'))  //获取div内的css样式的颜色
	$('div').css('color','red')   //设置div内的css样式颜色为红
});

$(function(){
	var countCSS = $('div').css(['color','width','height']); //因为样式多了是一个对象所以遍历取一下值
<pre name="code" class="html">        //javascrpit原生对象数组遍历方法 
      //  for(var i in countCSS){
	//    alert( i+":" + countCSS[i]);  //注意 此处的下标i便是元素名称；
	//}

//jQuery 提供了一个遍历工具专门来处理这种对象数组，$.each()方法，如下
    $.each(countCSS,function(attr,value){ //attr属性名  value 属性值
        alert(attr + ":" + value);
    });
//$.each()除了原生的对象数组   jQuery的对象数组如何遍历呢
    //alert($('div')[0]);
    $('div').each(function(index,element){
        alert(index + ":" + element);
    });});

//在需要设置多个样式的时候，我们可以传递多个 CSS 样式的键值对即可。

$(function(){
	//在需要设置多个样式的时候，我们可以传递多个 CSS 样式的键值对即可。
	$('div').css({
		'background-color': '#ccc',
		'color':'red',
		'height':'100px',
		'width':'500px',
		'title':'多样式设置'
	})
});
	

	//如果想设置某个元素的 CSS 样式的值，而且这样元素的属性值不是固定的，怎么来操作呢
	$('div').css('width',function(index,value){  //此处取到的value是width的默认值；如果想让宽度是当前宽度的1/5，可以做如下操作；
	
		return (parseInt(value)/5) + 'px'; //注意，这里取到的值需要转换一下整型；
	});

addClass();

当用addClass()方法添加css样式时，需要先有这样的CSS,在style.css里面添加样式

style.css

.red{
	color:red;
}
.bg{
	background-color:#ccc;
}
.size{
	font-size:50px;
}

$(function(){
        //$('div').addClass('red');            //给div添加red的css样式
	$('div').addClass('red bg size');     //给div添加red bg size的css样式 
    $('div').removeClass('red bg size');   //把div的red bg size 样式移除
 });

toggle()

//css类别样式切换功能
	$(function(){
        //css类别样式切换功能
        //点击事件触发的时候；样式切换,所以这里需要一个点击事件
        $('div').click(function(){
          $(this).toggleClass('red');   //   默认样式与指定样式的切换
        });          
      });

$(function(){
         $('div').click(function(){
          $(this).toggleClass('red  size');   //   默认样式与指定样式的切换 样式可以有多种
        });          
      });

.toggleClass()方法的第二个参数可以传入一个布尔值， true 表示执行切换到 class 类， false表示执行回默认 class 类(默认的是空 class)，运用这个特性，我们可以设置切换的频率。

注意：这里的true和false需要动态生成，否则一经设定就不会切换了，正确示例如下：

$(function(){
	var count = 1;
	$('div').click(function(){  每点击两次切换一次 red
		$(this).toggleClass('red',count++%3 == 0);
	});
});
	

在指定两个样式之间切换

index.html中，两个div 增加 class = 'green'在做如下操作

$(function(){
	//指定的两种样式之间的切换
	$('div').click(function(){
		$(this).toggleClass('red size');
		if($('div').hasClass('red')){
			$('div').removeClass('green')
		} else{
			$('div').toggleClass('green')
		}
	});
});

上面做法有些麻烦，可以对toggle进行局部操作

$(function(){
	//这个方法有个缺点就是，需要点两次之后才能正常切换 原因是第一次点的时候 green没有被删掉，只要被替代而已；如下操作
	$('div').click(function(){
	  $(this).toggleClass(function(){
		  return $(this).hasClass('red') ? 'green':'red';
	  }); 
	});
});

注意：上面虽然一句话实现了这个功能，但还是有一些小缺陷，因为原来的 class 类没有被删除，只不过被替代了而已。所以，需要改写一下。

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

三个传参的用法，这种用法不常用，了解一下即可

var count = 0;
$(function(){
	$(document).click(function(){
	  $('div').toggleClass(function(index,className,switchBool){
		  
		  if($(this).hasClass('red')){
			  $(this).removeClass('red');
			  return 'green'
		  } else {
			  $(this).removeClass('green');
			  return 'red';
		  }
	  }, count++ %2 == 0); 
	});
});