jQuery
jQuery操作DOM
jQuery的选择器
- 基本选择器
- 层级选择器
- 过滤选择器
jQuery操作样式
-
css操作
//name：需要设置的样式名称 //value：对应的样式值 css(name, value); //使用案例 $("#one").css("background","gray");//将背景色修改为灰色 -------------设置多个样式---------------- $("#one").css({ "background":"gray", "width":"400px", "height":"200px" }); -
class操作
// 添加类名 $(“div”).addClass(“one”); // 不带参数，移除所有的样式类 removeClass() $(“div”).removeClass(); // 移除单个样式类 $(“div”).removeClass(“one”); // 判断是否有样式类 判断第一个div是否有one的样式类 $(“div”).hasClass(“one”); // 切换样式类：需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。 $(“div”).toggleClass(“one”);
jQuery动画
-
显示与隐藏:显示(show)与隐藏(hide)是一组动画
show([speed], [callback]); //speed(可选)：动画的执行时间 //callback(可选):执行完动画后执行的回调函数 -
滑入滑出:滑入(slideUp)与滑出(slideDown)是一组动画，效果与卷帘门类似
slideUp(speed, callback); //speed(可选)：动画的执行时间 默认为normal(400) //callback(可选):执行完动画后执行的回调函数 滑入滑出切换 //如果是隐藏状态，那么执行slideDown操作，如果是显示状态，那么执行slideUp操作。 $(selector).slideToggle(speed,callback);
- 淡入与淡出:fadeIn/fadeOut 用法如上
注意
-
jQuery给我们提供了三组动画，show/hide、slideUp/slideDown、fadeIn/fadeOut
-
动画切换方法：slideToggle、fadeToggle，注意：show和hide没有切换的方法。
自定义动画
animate：自定义动画
$(selector).animate({params},[speed],[callback]);
// {params}：要执行动画的CSS属性，带数字（必选）
// speed：执行动画时长（可选）
// callback：动画执行完后立即执行的回调函数（可选）
节点的创建，增删查改
-
创建节点
$(htmlStr) 返回jQuery对象eg:$(“<span>这是一个span元素</span>”); -
添加节点：
var $span = $(“<span>这是一个span元素</span>”); $(“div”).append($span); 使用html方法创建元素 //设置内容 $(“div”).html(“<span>这是一段内容</span>”); //获取内容 $(“div”).html() -
清空元素
$(“div”).empty();//清空div的所有内容 -
删除元素
$(“div”).remove(); -
克隆元素
$(“div”).clone() :深度复制 $(“div”).clone(true): 事件也能复制
jQuery操作DOM
-
jQuery操作属性
//设置单个属性 $(“img”).attr(“title”,”哎哟，不错哦”); //设置多个属性 $("img").attr({ title:"哎哟，不错哦", alt:"哎哟，不错哦", style:"opacity:.5" }); //获取属性 var oTitle = $("img").attr("title"); alert(oTitle); // 移除属性 $("img").removeAttr("title"); -
jQuery操作值与内容
val（value）方法用于设置和获取表单元素的值，例如input、select、textarea的值 $(“#name”).val(“张三”); //获取值 $(“#name”).val(); html方法 //设置内容 $(“div”).html(“<span>这是一段内容</span>”); //获取内容 $(“div”).html() text方法 //设置内容 $(“div”).text(“<span>这是一段内容</span>”); //获取内容 $(“div”).text() html方法与text方法的区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。 -
jQuery操作尺寸
//带参数表示设置高度 $(“img”).height(200); //不带参数获取高度 $(“img”).height(); //带参数表示设置宽度 $(“img”).width(200); //不带参数获取宽度 $(“img”).width();
jQuery事件机制
JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
$(selector).on(events[,selector][,data],handler);
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
例子：
// 表示给$(selector)绑定事件，当必须是它的内部元素span才能执行这个事件，支持动态绑定
$(selector).on( "click",“span”, function() {});
// 表示给$(selector)绑定事件，并且由自己执行，不支持动态绑定。
$(selector).on( "click", function() {});
事件解绑
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off(“click”);
// 解绑所有代理的click事件，元素本身的事件不会被解绑
$(selector).off( “click”, “**” );
事件触发
$(selector).click(); //触发 click事件
or
$(selector).trigger(“click”);
jQuery 链式编程
链式编程原理：return this;
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。
end(); // 结束当前链最近的一次过滤操作，并且返回匹配元素之前的状态。
jQuery 隐式迭代
隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。
如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。
网友评论