jQuery 知识点 (四) —— jQuery 常用的的 DOM 函数

var speed = 1000;//speed参数均以毫秒为单位
var callback = function(){console.log("回调函数！");}
var clickFunc = function(){console.log("单击事件触发！");}
var $div = $("<div id='test'></div>");//创建一个 div，使用$开头来命名jquery对象是较佳实践
$(document).append($div);//使用 jQuery 方法在 document 内部添加 div 元素
var dom= $div.get(0);//从 jQuery 元素转换为 DOM 元素
console.log(dom);  //输出<div id='test'></div>
var selector = "#test";//jQuery选择器
$(selector).ready();//声明一个函数，当DOM完全加载后运行该函数
$(selector).addClass("active");// 为匹配元素添加 css 类 active
$(selector).removeClass("active");//为匹配元素移除 css 类 active
//$(selector).toggleClass(class|fn[,switch]) : 如果不存在类则添加类，如果存在类则删除类，
$("p").toggleClass("selected");//切换类
$(selector).attr("data-value",1);//为匹配元素添加或设置属性data-value 的值为1
$(selector).removeAttr("data-value");//删除属性
$("input[type='checkbox']").prop("checked");//获取或设置元素集中第一个元素的属性值，如果属性undefined，会忽略浏览器错误
$(selector).removeProp("disabled");//删除元素的属性，如果属性undefined，会忽略浏览器错误
$(selector).text();//获取或设置匹配的第一个元素的文本值
$(selector).html();//获取或设置匹配的第一元素的 HTML 内容
$(selector).val();//获取或设置匹配元素的当前值，select元素如果多选，将返回一个数组

//---------- DOM 的CSS相关属性
var name = "background";
var val = "#123456";
var properties = {
    "background":"red",
    "color":"#333"
}
console.log($(selector).css("background"));//获取匹配元素的背景色
$(selector).css(name,val);//设置匹配元素的背景色
$(selector).css(properties);//设置匹配元素的 css 属性
$("div").click(function() {
    $(this).css({
      width: function(index, value) {//使用带匹配元素索引index和值为参数的函数的返回值作为 css 属性的值
        return parseFloat(value) * 1.2;
      }, 
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });
});
console.log($(selector).offset());//获取匹配元素在当前视口的相对偏移，返回带 top 和 left 属性的对象，该方法只对可见元素有效
console.log($(selector).position());//获取匹配元素相对父元素的偏移，返回带 top 和 left的对象，该方法只对可见元素有效
console.log($(selector).scrollTop());//获取匹配元素相对滚动条顶部的偏移。
$(selector).scrollTop(50);//设置相对滚动条顶部的偏移
console.log($(selector).scrollLeft());//获取匹配元素相对滚动条左侧的偏移。
$(selector).scrollLeft(50);//设置相对滚动条左侧的偏移
console.log($(selector).height());// 获取匹配元素的高度值
console.log($(selector).width());// 获取匹配元素的宽度值
console.log($(selector).innerHeight());// 获取第一个匹配元素内部区域高度（包括补白、不包括边框）
console.log($(selector).innerwidth());// 获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。
console.log($(selector).outerHeight([options]));// 获取第一个匹配元素外部高度（默认包括补白和边框）
console.log($(selector).outerWidth([options]));// 获取第一个匹配元素外部宽度（默认包括补白和边框）

//----------- DOM 效果函数-------------------
$(selector).show(speed,callback);
$(selector).hide(speed,callback);
$(selector).toggle(speed,callback);//显示隐藏切换
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);//淡入淡出切换
$(selector).fadeTo(speed,opacity,callback);//变为透明
$(selector).slideUp(speed,callback);//滑动显示
$(selector).sildeDown(speed,callback);//滑动隐藏
$(selector).animate({params},speed,callback);//执行动画
$(selector).stop();//停止动画
$(selector).delay(duration[,queueName]);// 设置一个延时来执行队列中的项目
$(selector).finish([queue]);// 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画


//------------- 文档处理函数
$(selector).append(content|fn);// 向每个匹配的元素内部追加内容
$(selector).appendTo(content);// 把所有匹配的元素追加到另一个指定的元素元素集合中
$(selector).prepend(content);// 向每个匹配的元素内部前置内容
$(selector).prependTo(content);// 把所有匹配的元素前置到另一个、指定的元素元素集合中
$(selector).after(content|fn);// 在每个匹配的元素之后插入内容
$(selector).before(content|fn);// 在每个匹配的元素之前插入内容
$(selector).insertAfter(content);// 把所有匹配的元素插入到另一个、指定的元素元素集合的后面
$(selector).insertBefore(content);// 把所有匹配的元素插入到另一个、指定的元素元素集合的前面
$(selector).wrap(html|ele|fn);// 把所有匹配的元素用其他元素的结构化标记包裹起来
$(selector).unwarp();// 移出元素的父元素
$(selector).wrapAll(html|ele);// 将所有匹配的元素用单个元素包裹起来
$(selector).wrapInner(html|ele|fn);// 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
$(selector).replaceWith(conetent|fn);// 将所有匹配的元素替换成指定的HTML或DOM元素
$(selector).replaceAll(selector2);// 用匹配的元素 selector 替换掉所有 selector2 匹配到的元素
$(selector).empty();// 删除匹配的元素集合中所有的子节点
$(selector).remove([expr]);// 从DOM中删除所有匹配的元素
$(selector).detach([expr]);// 从DOM中删除所有匹配的元素。
//这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来
$(selector).clone([event[,deepEven]);// 克隆匹配的 DOM 元素并且根据 deepEven 参数确定是否也克隆事件处理函数