码迷,mamicode.com
首页 > Web开发 > 详细

jQuery操作DOM和CSS函数

时间:2015-08-08 13:31:33      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:

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"

jQuery操作DOM和CSS函数

标签:

原文地址:http://www.cnblogs.com/genesis/p/4712943.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!