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 属性操作
1html() 取出或设置 html 内容
- // 取出 html 内容
- var $htm = $('#div1').html();
- // 设置 html 内容
- $('#div1').html('<span > 添加文字 </span>');
2text() 取出或设置 text 内容
- // 取出文本内容
- var $htm = $('#div1').text();
- // 设置文本内容
- $('#div1').text('<span > 添加文字 </span>');
3attr() 取出或设置某个属性的值
- // 取出图片的地址
- 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!');
- });
- });
来源: http://www.jianshu.com/p/4cbae473bcdd