jQuery学习笔记之基础DOM和CSS操作

基础DOM操作


设置元素及内容


1、html():获取html里的所有内容，在括号里加内容会替换里的内容，有HTML会自动解析
2、text（）:获取元素中的文本内容，在括号里加内容会替换文本内容，有HTML会自动转义
3、val（）：获取表单内容，在括号里加内容会设置表单内容
eg：$('input').val(['男'，‘女’])会自动默认选取复选项


元素属性操作


1、attr('id') 获取某个元素id属性的属性值
2、attr('title','我是YST') 设置某个元素title属性的属性值
3、attr('id':'YST','title':'我是YST') 设置某个元素锁个属性的属性值
4、attr(key,function(index,value){}) 设置某个元素key属性通过fn来设置
eg:$('div').attr('title',function(index,value){return '原来的title是：'+value+'我是'+index+'号域名';})
eg:$('div').html(function(value){return value+'内容'})
注意，removeAttr不可以传递function
注意class不建议用attr来设置，有更适合设置class的操作
注意不建议使用attr（）来创建id属性，容易造成页面混乱。


CSS操作方法
1、css（'color'）获取css样式内容 返回的字符串
2、css（'color'，'green'）设置css样式内容
   css({'':'','':''})设置多个css样式内容
   css（'width',function(index,value){return parseInt(value)-500+'px'});可以用局部变量操作css样式
3、css(['color','width','height']) 获取到的是一个对象数组，若用传统方式进行解析需要使用for in遍历
eg：var box=$('div').css(['color','width','height']);
for(var i in box){alert(i+':'+box[i]);}
但是jquery专门提供了一种遍历的方法
eg：var box=$('div').css(['color','width','height']);
$.each(box,function(attr,value){alert(attr+':'+value);});
$.each()既可以遍历原生js对象数组也可以遍历jquery对象的数组(element为对应的dom对象，index为索引)
eg:$('div').each(function(index,element){alert(index+':'+element);};
4、addClass('red bg size') 添加多个类别规则
5、removeClass（''）删除多个类别规则
6、toggleClass（''）样式之间的切换，默认样式和指定样式的切换，第二个参数可以指定布尔值，可以用动态布尔值true/false来控制切换，比如count++%2==0,即频率问题。
$('div').click(function(){$(this).toggleClass(function(){return $(this).hasClass('red')?'blue':'red size';})})//传递匿名函数，返回要切换的样式
可以添加一个if判断来删除原先的类，这样比较完善
var count = 0;
$('div').click(function(){$(this).toggleClass(function(index,className,switchBool){alert(index+';'+className+';'+switchBool);return $(this).hasClass('red')?'blue':'red size';},count++%3==0)}


CSS方法 封装的方法
1、width（）读取元素节点宽度，返回的是number
width（500）=width（'500px'）
width(function(index,value){});
2、height（）高度设置同上
3、innerWidth（） 获取元素宽度，包括内边距padding
innerHeight（）同上
4、outerWidth（）获取元素宽度，包括边框和内边距
outerHeight（）同上
5、outerWidth（True）获取元素宽度，包括内外边距
outerHeight（True）同上


元素偏移方法
1、offset（）获取某个元素相对于视口的偏移位置
2、position（）获取某个元素相对于父元素的偏移位置
3、scrollTop（）获取垂直滚动条的值
4、scrollTop（value）设置垂直滚动条的值
scrollLeft 水平用法同上