jquery样式操作
-
jquery用法思想二 (同一个函数完成取值和赋值)
- 操作行间样式
// 获取div的样式 $("div").css("width"); $("div").css("color"); //设置div的样式 $("div").css("width","30px"); $("div").css("height","30px"); $("div").css({fontSize:"30px",color:"red"});
特别注意 : 选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。
- 操作行间样式
$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2 $("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式 $("#div1").removeClass("divClass divClass2") //移除多个样式 $("#div1").toggleClass("anotherClass") //重复切换anotherClass样式 - 操作行间样式
jquery属性操作
-
1、html() 取出或设置html内容
// 取出html内容 var $htm = $('#div1').html(); // 设置html内容 $('#div1').html('<span>添加文字</span>'); -
2、text() 取出或设置text内容
// 取出文本内容 var $htm = $('#div1').text(); // 设置文本内容 $('#div1').text('<span>添加文字</span>'); -
3、attr() 取出或设置某个属性的值
// 取出图片的地址 var $src = $('#img1').attr('src'); // 设置图片的地址和alt属性 $('#img1').attr({ src: "test.jpg", alt: "Test Image" });
绑定click事件
- 给元素绑定click事件，可以用如下方法：
$('#btn1').click(function(){ // 内部的this指的是原生对象 // 使用jquery对象用 $(this) })
jquery特殊效果
- fadeIn() : 淡入
- fadeOut() : 淡出
- fadeToggle() : 切换淡入淡出
- hide() : 隐藏元素
- show() : 显示元素
- toggle() : 依次展示或隐藏某个元素
- slideDown() : 向下展开
- slideUp() : 向上卷起
- slideToggle() : 依次展开或卷起某个元素
$btn.click(function(){ $('#div1').fadeIn(1000,'swing',function(){ alert('done!'); }); });
