jQuery(基础dom及css操作)
设置元素内容
元素属性操作
----------
元素样式操作
----------------
对象数组的遍历
测试代码:
1 $(function () { 2 var v=$('div').css(['color','width','height']);//获得的是一个对象数组 3 /* 4 for(var i in v){ 5 alert("属性名称:"+i+",它的默认值或者设置的值为:"+v[i]); 6 } 7 */ 8 //使用jquery进行遍历 9 $.each(v, function (attr,value) {//第一个参数是 获取的对象数组 第二个参数是一个function 10 alert("获取的属性名称为:"+attr+",它的值为:"+value); 11 }) 12 13 14 })
-------------
//为选中的元素 添加多个样式
$('div').css('color','#ccc').css('background-color',"#FFF");//这种方式可以用下面的方式代替
$('div').css({
'color':'blue',
'background-color':'red',
'width':'50px',
'height':'30px'
});
------------------------
addClass,removeClass
js中的代码:
1 //首先在html页面中引入css 样式表 才能在这里实现动态的添加 通过这个方法增加一个样式时 不仅样式加上了 而且会动态的设置class的属性值(在调试窗口可以看到) 2 //但是真正的class属性值 通过这种方法是不会动态改变的 最初设置了 就是最初设置的那个值 在通过class获取的时候也是通过最初设置的那个值获取 3 $('div').addClass('red bg size');//将来这里边的值 将会作为选中的元素的class属性值 而且 这里边因为有三个样式 所以目标div中也将存在这些样式 4 alert($('div').length);//这里获取的div为2个 所以打印2 5 alert($('div').attr('class'));//打印出的div值 却只有第一个div的class值 a red bg size 6 alert($('.a').length);//打印1 但是通过class获取div的时候 却只能通过 .a来获取 而不能通过 .a red bg size 来获取 它找不到 7 // 虽然样式是加上了 而且在调试窗口中 class 的值确实动态设置为 a red bg size 但是不能通过 动态设置之后的class值进行获取 而只能通过最初设置的class值来获取 8 alert($('.a red bg size').length);//打印0 因为没有获取到任何的div 9 //所以总结:在调试窗口中虽然看到class的内容值 为 a red bg size 但是最初设置的是什么内容 就要以什么内容为主 如果没有设置 那么它就没有class这个属性值 10 //当然不能通过class属性值来获取 即使他在调试窗口中动态的设置class 为 red bg size 这都是不管用的 全部以最初的设置为主 要么存在class 要么不存在
也可以在class属性中直接定义外部引入的样式 但是真正的class值为 第一个空格前面的部分
--------------------------
toggleClass
运行效果:
第一次单击
再次单击恢复
而调试窗口中的class中的属性值也随着用户的单击在动态的变化着 样式改变时 class属性值中增加了对应的数值 再次单击 div中的class属性就没有了
页面刚运行:
第一次单击:
第二次单击:
查看更多随笔:http://www.cnblogs.com/Joke-Jay/