jQuery操作DOM和CSS函数

function	des	html	jquery	result
html()	获取元素中HTML内容	<div id="box" style="color:red">  <strong>www.ycku.com</strong>  <p>www.ppp.com</p> </div>	alert($('#box').html());	<strong>www.ycku.com</strong>   <p>www.ppp.com</p>
html(value)	设置html内容,包裹在标签里面的内容会清空原来的数据，返回的是value的值	<div id="box" style="color:red">  <strong>aaa</strong>  <p>bbb</p>  111111 </div>	alert($('#div').html('<em>aaa</em>'));	[object Object]--><em>aaa</em>
	追加数据		$('#box').html($('#box').html() + '<em>www.li.cc</em>');	在原来的基础上追加数据
text()	获取文本内容，会自动清理html标签	<div id="box" style="color:red">  <strong>aaa</strong>  <p>bbb</p> </div>	alert($('#box').text());	aaa bbb
text(value)	设置文本内容，会自动转义html标签	<div id="box" style="color:red">  <strong>aaa</strong>  <p>bbb</p>  111111 </div>	alert($('#div').html('<em>aaa</em>'));	[object Object]    <em>aaa</em>
	通过匿名函数设置文本内容，会自动转义html标签	<div id="box">55555</div>	$('div').text(function(index,value){  if (value!='确定'){   return '确定';  } });	(index是索引,value是原来的值)确定
val()	获取表单内容，只能获取一个	<input type="text" class="txt" value="确定" />	alert($('.txt').val());	确定
val(value)	设置表单内容，可以获取多个对象	<input type="text" class="txt" value="确定" />	var tt=$('.txt').val('aaa');	将"确定"设置为"aaa"
	设置单选按钮、复选框和下拉列框的值	<input type="radio" value="男" />男 <input type="radio" value="女" />女 <input type="checkbox" value="编程" />编程 <select id="s1">  <option value="v1">text1</option>  <option value="v2">text2</option>  <option value="v3">text3</option> </select>	$("input,#s1").val(["男","女","编程","v2"]);	选中所有单选按钮、复选框和下列框的第二个值
attr(key)	获取某个元素key 属性的属性值	<input type="button" class="txt" value="确定" />	alert($('input').attr('class'));	txt
attr(key, value)	设置某个元素 key属性的属性值	<input type="button" class="txt" value="确定" />	$('input').attr('value','确定按钮');	原来的"确定"改为"确定按钮"
attr({key1:value1, key2:value2...})	设置某个元素 多个key属性的属性值	<input type="button" class="txt" value="确定" />	$('input').attr({'type':'text','id':'t1','class':'123','value':'确定按钮'});	原来有的属性会被替换掉，没有的属性会增加上去
attr(key, function (index, value) {})	通过匿名函数返回属性值,匿名函数里面可以写判断语句	<input type="button" class="txt" value="确定" />	$('input').attr('value',function(index,value){  if (value=='确定'){   return '确定按钮';  } else {   return '确定出错';  } });	确定按钮
removeAttr(key)	删除指定的属性	<input type="button" class="txt" value="确定" />	$('input').removeAttr('value');	删除了"确定"文字
css(name)	获取某个元素行内的 CSS 样式	<div id="box" style="color:red"></div>	alert($('div').css('color'));	谷歌：rgb(255, 0, 0) IE:red
css([name1, name2, name3])	获取某个元素行内多个CSS样式	<div id="box" style="color:red;height:300px;width:350px;"></div>	var tt=$('div').css(['color','height','width']); for(var i in tt){  alert(i+'--'+tt[i]); }	循环遍历用for in将color、height和width的属性值按索引输出
css(name, value)	设置某个元素行内的CSS样式	<div id="box">aaa</div>	$('#box').css('color','blue');	aaa变成红色
css({name1 : value1, name2 : value2})	设置某个元素行内多个 CSS 样式，键值对	<div id="box">AAA</div>	$('#box').css({'color':'blue','font-size':'20px'});	AAA变成蓝色和字体变成20px
css(name, function (index, value) )	通过匿名函数设置某个元素行内的 CSS 样式	<div id="box">AAA</div>	$('div').css('font-size',function(index,value){  if (value<'20px'){   return '30px';  } });	AAA的字体变成30px
addClass(class)	给某个元素添加一个 CSS 类	<div id="box">55555</div>	$('div').addClass('aaa'); $('.aaa').css('color','red');	获取设置后的class并设置它的颜色为红色
addClass(class1 class2 class3...)	添加多个 CSS 类	<div id="box">55555</div>	$('div').addClass('red bg');	div标签添加了class=red bg
removeClass(class)	删除某个元素的一个 CSS 类	<div id="box" class="bg">55555</div>	$('div').removeClass('bg');	删除了class="bg"
removeClass(class1 class2 class3...)	删除某个元素的多个 CSS 类	<div id="box" class="aa bb">55555</div>	alert($('div').removeClass('aa bb'));	删除了class="aa bb"
toggleClass(class)	来回切换默认样式和指定样式	<div id="box" class="red">aaaa</div>	$('div').click(function(){  $(this).toggleClass('red size'); });	class的red与green来回切换
toggleClass(class1 class2 class3...)
toggleClass(class, switch)	来回切换样式的时候设置切换频率	<div id="box" class="red">aaaa</div>	var count = 0; $('div').click(function () { //每点击两次切换一次 red $(this).toggleClass('red', count++ % 3 == 0); });	.toggleClass()方法的第二个参数可以传入一个布尔值，true表示执行切换到 class类，false表示执行回默认 class 类(默认的是空 class)，运用这个特性，我们可以设置切换的频率。
toggleClass(function () {})	通过匿名函数设置切换的规则		$('div').click(function () { $(this).toggleClass(function () { return $(this).hasClass('red') ? 'blue' : 'red size'; }); });	.toggleClass()方法提供了传递匿名函数的方式，来设置你所需要切换的规则。
toggleClass(function () {}, switch)	在匿名函数设置时也可以设置频率		$('div').click(function () { $(this).toggleClass(function () { if ($(this).hasClass('red')) { $(this).removeClass('red'); return 'green'; } else { $(this).removeClass('green'); return 'red'; } }); });	var count = 0; $('div').click(function () { $(this).toggleClass(function () { return $(this).hasClass('red') ? 'blue' : 'red size'; },count++ % 3 == 0); });
toggleClass(function (i, c, s) {}, switch)	在匿名函数设置时传递三个参数		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); });
width()	获取某个元素的宽度	<div id="box" class="red" style="height:30px;width:50px;">aaaa</div>	alert($('#box').width());	30px
width(value)	设置某个元素的宽度		$('#box').width('100px');	width由50px变成100px
width(function (index, value) {})	通过匿名函数设置某个元素的宽度		$('#box').width(function(index,value){  return value-10; });	原来的height:30-10,即20
height()	获取某个元素的高度	<div id="box" class="red" style="height:30px;width:50px;">aaaa</div>	alert($('#box').height());	30px
height(value)	设置某个元素的高度		$('#box').height('100px');	height由50px变成100px
height(function (index, value) {})	通过匿名函数设置某个元素的高度		$('#box').height(function(index,value){  return value-10; });	原来的height:30-10,即20
innerWidth()	获取元素宽度，包含内边距padding		alert($('div').innerWidth());	包含内边距 padding
innerHeight()	获取元素高度，包含内边距padding
outerWidth()	获取元素宽度，包含边框 border 和内边距 padding		alert($('div').outerWidth());	包含内边距 padding+边框 border
outerHeight()	获取元素高度，包含边框 border 和内边距 padding
outerWidth(ture)	同上，且包含外边距		alert($('div').outerWidth(true));	包含内边距 padding+边框 border+外边距 margin
outerHeight(true)	同上，且包含外边距
offset()	获取某个元素相对于视口的偏移位置		$('strong').offset().left;	相对于视口的偏移
position()	获取某个元素相对于父元素的偏移位置		$('strong').position().left;	相对于父元素的偏移
scrollTop()	获取垂直滚动条的值		$(window).scrollTop();	获取当前滚动条的位置
scrollTop(value)	设置垂直滚动条的值		$(window).scrollTop(300);	设置当前滚动条的位置
scrollLeft()	获取水平滚动条的值
scrollLeft(value)	设置水平滚动条的值