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 隐式迭代
隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。
如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。
jQuery插件使用
网友评论