jQueryDOM操作

样式操作（重点）

获取样式

// 参数表示要获取的 样式属性名称 $(selector).css(“font-size”); 此时，会返回”font-size”样式属性对应的值。

设置样式

设置单个样式： // 第一个参数表示：样式属性名称 // 第二个参数表示：样式属性值 $(selector).css(“color”, “red”); 设置多个样式： // 参数为对象 $(selector).css({“color”: “red”,“font-size”:“30px”});

类名操作（重点）

添加类名

addClass(className) 为指定元素添加类名 $(selector).addClass(“liItem”); 注意：已经说了是添加类名了，把名字传入即可，不要加点！

移除类名

removeClass(className) 为指定元素移除类名 $(selector).removeClass(“liItem”); //移除指定类名 $(selector).removeClass(); //不指定参数，表示移除所有类名

判断有没有某个类名

hasClass(calssName) 判断指定元素是否包含某个类名 $(selector).hasClass(“liItem”);//返回true或false

切换类名

toggleClass(className) 切换类名，如果没有指定类名就添加，有就移除。 $(selector).toggleClass(“liItem”);

动画函数

jQuery提供的一组常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。

隐藏显示动画

show() 方法 形式一： // 不带参数，没有动画 $(selector).show();//作用等同于css(“display”, ”block”) 形式二： //参数为数值，表示：执行动画时长 $(selector).show(2000);//单位为毫秒（ms），2000毫秒即2秒 形式三： //参数为字符串，是jQuery预设的值，共有三个，分别是：slow、normal、fast $(selector).show(“slow”); //slow：600ms、normal：400ms、fast：200ms 形式四： // 参数一可以是数值类型或者字符串类型 // 参数二表示：动画执行完后立即执行的回调函数 $(selector).show(2000, function() {}); hide() 方法 $(selector).hide(); $(selector).hide(1000); $(selector).hide( “ slow ” ); $(selector).hide(1000, function(){}); 显示隐藏切换 $(selector).toggle(speed,callback); jQuery预设的三组动画效果的语法几乎一致： 参数可以有两个，第一个是动画的执行时长(可以是指定字符或毫秒)，第二个是动画执行完成后的回调函数。

滑入滑出动画

滑入效果 作用：让元素以下拉动画效果展示出来 $(selector).slideDown(speed,callback); 滑出动画 作用：让元素以上拉动画效果隐藏起来 $(selector).slideUp(speed,callback); 滑入滑出切换 $(selector).slideToggle(speed,callback); @ 动画版下拉菜单

淡入淡出动画

淡入效果 作用：让元素以淡淡的进入视线的方式展示出来 $(selector).fadeIn(speed, callback); 淡出效果 作用：让元素以渐渐消失的方式隐藏起来 $(selector).fadeOut(1000); 淡入淡出切换 作用：通过改变不透明度，切换匹配元素的显示或隐藏状态 $(selector).fadeToggle('fast',function(){}); 淡淡达到效果 改变不透明度到某个值 与淡入淡出的区别：淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！ 作用：调节匹配元素的不透明度 // 用法有别于其他动画效果 // 第一个参数表示：时长 // 第二个参数表示：不透明度值，取值范围：0-1 $(selector).fadeTo(1000, .5); //0全透，1全不透 // 第一个参数为0，此时作用相当于：.css(“opacity”, .5); $(selector).fadeTo(0, .5);

动画方法总结

自定义动画

注意：所有能够执行动画的属性必须只有一个数字类型的值。 比如：要改变字体大小，要使用：fontSize（font-size），不要使用：font 动画支持的属性： http://www.w3school.com.cn/jquery/effect_animate.asp 作用：执行一组CSS属性的自定义动画 // 第一个参数表示：要执行动画的CSS属性（必选） // 第二个参数表示：执行动画时长（可选） // 第三个参数表示：动画执行完后立即执行的回调函数（可选） $(selector).animate({params},speed,callback);

停止动画

作用：停止当前正在执行的动画 为什么要停止动画？ 如果多个动画在同一元素上执行，对这个元素来说，后面的动画将被放到队列中，从而形成动画队列。（联想：排队进站） 上一个动画执行完成，下一个动画才能执行，但是这样的效果有时不是我们想要的。 // 第一个参数表示是否清空所有的后续动画 // 第二个参数表示是否立即执行完当前正在执行的动画 $(selector).stop(clearQueue,jumpToEnd); 解释： 当调用stop()方法后，当前动画停止于当前样式的只（不会到达目标值），队列中的下一个动画会立即开始。 如果参数clearQueue被设置为true，那么队列中剩余的动画就被删除了，永远不会再执行。 如果参数jumpToEnd被设置为true，那么当前动画会停止，但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如：slideUp()方法，那么元素会立即隐藏掉。如果存在回调函数，回调函数也会立即执行。 另外： 如果元素动画还没有执行完，此时调用sotp()方法，那么当前动画将会停止。并且由于本次动画没有执行完成，本次动画的回调函数也不会被执行（下一次的会照常执行）。 常用方式： $(selector).stop();//当前动画停止于此刻的样式状态 后面的动画继续执行

节点操作（重点）

动态创建元素

// $()函数的另外一个作用：动态创建元素 var $span = $(“<span>我是一个span元素</span>”);

添加元素（重点）

append()（重点） 作用：在被选元素内部的最后一个子元素（或内容）后面插入内容（页面中存在或者创建出来的元素都可以） //在$(selector)中追加$node $(selector).append($node); //在$(selector)中追加div元素，参数为htmlString $(selector).append('<div></div>'); 如果是页面中存在的元素，那么调用append()后，会把这个元素从原先的位置移除，然后再插入到新的位置。 如果给多个目标追加一个元素，append()方法内部会将这个元素复制多份，然后追加到多个目标中。（最好不要这么做） 常用参数：htmlString 或 jQuery对象 不常用操作（了解即可）：（用法跟append()方法基本一致） prepend() 作用：在元素的第一个子元素前面追加内容或节点 $(selector).prepend(node); after() 作用：在被选元素之后，作为兄弟元素插入内容或节点 $(selector).after(node); before() 作用：在被选元素之前，作为兄弟元素插入内容或节点 $(selector).before(node);

html创建元素

作用：设置或返回所选元素的html内容（包括 HTML 标记） 设置内容的时候，如果是html标记，会动态创建元素，此时作用跟JS里面的 innerHTML属性相同 // 动态创建元素 $(selector).html(‘<span>传智播客</span>’); // 获取html内容 $(selector).html();

清空元素

//清空指定元素的所有子元素 $(selector).empty(); $(selector).html(“”); // ” 自杀 ” 把自己（包括所有内部元素）从文档中删除掉 $(selector).remove();

复制元素

// 复制$(selector)所匹配到的元素 // 返回值为复制的新元素 $(selector).clone(); 推荐 使用html(“<span></span>”)方法来创建元素 使用html(“”)清空元素（但是这样无法清除对象身上的事件，造成内存泄漏（少量的无所谓））

表单操作（重点）

属性操作

设置属性： // 第一个参数表示：要设置的属性名称 // 第二个参数表示：该属性的值 $(selector).attr(“title”, “传智播客”); 获取属性： // 参数为：只传入要获取的属性的名称即可返回指定属性的值 $(selector).attr(“title”); 移除属性： // 参数为：要移除的属性的名称 $(selector).removeAttr(“title”); 注意：表单元素中属性值为布尔值的属性，如checked、selected、disabled要使用 .prop() 方法 $(selector).prop(“checked”); //获取 $(selector).prop(“checked”, true ); //设置 细节参考： http://api.jquery.com/prop/

代码/文本/值

html() 方法 作用：设置或获取匹配元素的代码内容 $(selector).html(); //获取 $(selector).html(‘<span>传智播客</span>’); //设置 text() 方法 作用：设置或获取匹配元素的文本内容 $(selector).text();//获取操作不带参数 （注：会把所有匹配到的元素内容拼接为一个字符串，不同于其他获取操作！） $(selector).text(“我是内容”);//设置操作带参数，参数表示要设置的文本内容 val()方法 作用：设置或返回表单元素的值，例如：input,select,textarea的值 $(selector).val();// 获取匹配元素的值，只匹配第一个元素 $(selector).val(“具体值”);// 设置所有匹配到的元素的值

尺寸位置

尺寸操作

在jQuery中有一套可以非常方便的操作元素尺寸的系列方法。 height()与width()：设置或者返回元素的高度及高度,返回结果是数值类型。 innerWidth()与innerHeight()：包括padding outerWidth()与outerHeigth()：包括padding、border outWidth(true)与outerHeight(true)：包括padding、border、margin 注：只有height()与width（）可以进行设置操作，innerWidth（）、outWidth（）都是只读属性，只能获取、不能设置。

位置操作

scrollTop() 作用：获取或者设置元素垂直方向滚动的位置 //获取 $(selector).scrollTop(); //设置，参数为数值类型 $(selector).scrollTop(100); scrollLeft() 作用：获取或者设置元素水平方向滚动的位置 //获取 $(selector).scrollLeft(); //设置，参数为数值类型 $(selector).scrollLeft(100); offset() 作用：获取或设置元素相对于document左上角的位置 //无参数表示获取，返回值为：{left:num, top:num}，值是相对于document的位置 $(selector).offset(); //有参数表示设置，参数推荐使用数值类型 $(selector).offset({left:100, top: 150}); 注意：使用offset操作，如果元素没有设置定位(默认position:static)，则会把position修改为relative.会修改left、top position() 获取相对于其最近的有 定位的父元素 的位置。相当于之前 JS 中的 offsetLeft 和 offsetTop // 获取，返回值为对象：{left:num, top:num} $(selector).position(); 注意：position方法只能获取，不能设置 �� 2 ҳ

---

传智播客 前端与移动开发学院     http://web.itcast.cn