<script type=“text/javascript” src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
$("button").click(function(){
//普通获取css样式
// alert($("#div1").css("width")); //100px
//width
alert("width: " + $("#div1").width());
//width + padding
alert("innerWidth: " + $("#div1").innerWidth());
//width + border + padding
alert("outerWidth: " + $("#div1").outerWidth());
//width + border + padding + margin
alert("outerWidth: " + $("#div1").outerWidth(true));
})
//找到span节点，插入到div节点的前面
// $("span").insertBefore($("div")).css("backgroundColor", 'red');
//div前面是span
$("div").before($("span")).css("backgroundColor", 'blue');
//找到div节点，插入span节点的后面
// $("div").insertAfter($("span"));
//找到span节点，插入到div节点的子节点末尾
// $("span").appendTo($("div"));
//找到span节点，插入div节点的子节点的首位
// $("span").prependTo($("div"));
//找到节点，删除这个节点
// $("div").remove();
$(document).click(function(){
alert($(window).scrollTop());
})
$(document).mousedown(function(ev){
// alert(ev.clientX + ", " + ev.clientY);
// alert(ev.pageX + ", " + ev.pageY);
// alert(ev.which);
alert(ev.screenX + "," + ev.screenY)
})
$("a").click(function(ev){
ev.preventDefault();
ev.stopPropagation();
})
$(document).click(function(){
// alert($("#div2").offset().left);
// alert($("#div2").offset().top);
alert($("#div2").position().left)
// $("#div2").parent().css("backgroundColor", 'black'); //找到父节点
// $("#div2").parents("div").css("backgroundColor", 'black'); //找到所有祖先节点
$("#div2").offsetParent().css("backgroundColor", 'black');
})
1、从左上角收起和展开的特效
• show() 显示
$("#div2").show();
• hide() 隐藏
第一个参数：毫秒数，动画持续的时候
第二个参数：回调函数，动画结束的时候执行的
$("#div2").hide(2000, function(){
$("#div1").html("移入完成");
})
2、透明度的淡入淡出效果
• fadeIn() fadeOut()
• fadeTo()
第一个参数：毫秒数，动画持续的时候
第二个参数：透明度的数值 只能传入0~1的小数
第三个参数：回调函数，动画结束的时候执行的
$("#div2").fadeOut(2000, function(){
$("#div1").html("移入完成");
})
$("#div2").fadeTo(2000, 0.5, function(){
$("#div1").html("移入完成");
})
3、卷闸效果
• slideDown() slideUp()
$("#div2").slideUp(2000, function(){
$("#div1").html("移入完成");
})
$("#div2").slideUp(2000, function(){
$("#div1").html("移入完成");
})
4、animate方法
animate 动画
第一个参数：变化的css样式和目的值
第二个参数：动画持续的时间
第三个参数：运动形态 支持两种运动形态
匀速(linear) 慢块慢（默认）(swing)
第四个参数：回调函数。
【注】在JQ中实现链式运动，只需要在animate方法后面通过链式操作再跟animate方法就行了。
【注】每次调用animate的方法之前，将上一次动画stop(true)一下
delay(毫秒数) 延迟
$("#div1").hover(function(){
$("#div2").animate({
width: 300,
height: "300px",
}, 4000, function(){
$("#div1").html("移入完成");
})
}, function(){
$("#div2").animate({
width: 200,
height: "200px",
opacity: 1
}, 4000, function(){
$("#div1").html("移出完成");
})
})
JQ和JS的关系：JQ和JS可以共存，但是不能混用。
get方法可以打破上面的界限。
get() 需要传参下标 get方法可以将我们原有的JQ对象，转成对应的JS对象.
remove和detach,clone
remove
功能：删除节点
返回值：就是被删除的这个节点,并不会保留之前的行为
var node = $("#div1").remove();
detach
功能：删除节点
返回值：就是被删除的这个节点，会保留之前的行为
var node = $("#div1").detach();
clone()
clone(true) 既会克隆节点，也会克隆这个节点之前的行为
功能：克隆节点
返回值：克隆出来的新节点
var node = $("#div1").clone();
text()和ready()方法
text() 获取标签的文本(纯文本) 类似JS中innerText
获取该标签，和该标签子节点中纯文本内容
alert($("#div1").text());
ready()，当整个标签加载完毕以后就执行了
$(document).ready()
window.onload 等这个窗口上内容的加载完毕以后，再去触发这个事件
节点操作
parents(css选择器)（获取当前节点所有的祖先节点）
parent()（获取当前节点的父节点）
closest() (必须传入参数，只获取从自己开始数，第一个符合条件的元素节点，包括他自己)
siblings() 当前节点所有兄弟节点，参数也可以传入css选择器样式。
nextAll() 当前节点开始往下所有的兄弟节点
prevAll() 当前节点开始往上所有的兄弟节点
parentsUntil()
nextUntil()
prevUntil()
$("span.box").parent().css("backgroundColor","red")//获取当前节点的父节点
$("span.box").parents("div").css("backgroundColor","red")//获取当前节点所有的祖先节点
$("span").closest(".box").css("backgroundColor", 'red');
$("span").closest("div").css("backgroundColor", 'red')
$("#h2").siblings("h1").css("backgroundColor", 'blue')//当前节点所有兄弟节点，参数也可以传入css选择器样式。
$("#h2").prevAll("h1").css("backgroundColor", 'blue')//当前节点开始往上所有的兄弟节点
$("#h2").nextAll("strong").css("backgroundColor", 'blue')//当前节点开始往下所有的兄弟节点
$("#h2").prevUntil("div").css("backgroundColor", 'orange');//a到c之间的元素,往上
$("#h2").nextUntil("em").css("backgroundColor", 'orange');//a到c之间的元素,往下
warp包装
wrap() 独立包装
wrapAll() 整体包装，跟着符合条件的第一个节点
wrapInner() 内联包装
unwrap() 取消包装，如果有父节点，把父节点取消掉，除body以外
$("span").wrap("<p title = 'hello' id = 'p1'></p>");
$("span").wrapAll("<p title = 'hello' id = 'p1'></p>");
$("span").wrapInner("<p title = 'hello' id = 'p1'></p>");
$("span").unwrap();
add和slice
add() 组合css选择器
slice(start, end) [start, end)
$("p").slice(2, 3).css("backgroundColor", 'orange');
$("p").add("span").add("button").click(function(){
$(this).css("backgroundColor", 'red');
})
数据串联化方法
serialize() 拼接成querystring (name1=value1&name2=value2)
serializeArray() 拼接成 外层是数组，里面的每一个数据是对象的形式
var str = $("input").serialize();
alert(str);
var arr = $("input").serializeArray();
alert(arr);
事件细节
ev 就是兼容事件对象
ev.data 实现间接传入参数
ev.target(兼容后触发对象)
ev.type(输出事件类型)
$("div").click(function(ev){
alert(ev.type);
})
var node = document.getElementById("btn1");
node.onclick = function(ev){
alert(ev);
}
$("#btn1").on("click", {username: "大牛", age: 10}, function(ev){
alert(ev.data.username);
alert(ev.data.age);
})
trigger
主动触发 触发官方支持的一些事件类型以外，还支持触发一些我们自定义的事件。
//希望能够执行按钮上的函数
$("#btn1").click(function(){
$("#btn1").trigger("click");
})
工具方法
JQ的方法
格式：$().xxx() $().yyy();
工具方法本质上，和我们自己JS封装函数没有任何区别。
格式：$.xxx() $.yyy()
【注】下面这些工具方法可以兼容到IE6的。
• type() 类似于JS typeof(复合数据类型统一返回的是object)
var arr = new Array();
alert($.type(arr));
alert(typeof arr);
trim() 删除字符串的首尾空格
声明成语法，ECMA5以后推出新的字符串的函数 字符串.trim();
var str = " he l lo ";
alert("|" + str.trim() + "|");
inArray()
ECMA5以后，新增了一个数组的方法 数组.indexOf();
• proxy() 功能类似于bind
• noConflict()
var num = $.noConflict();
• $.parseJSON() JSON.parse()
• makeArray() 将伪数组转成数组。 ECMA6新推 Array.from()
nodes = $.makeArray(nodes);
JQ提供了两个插件方法，通过这两个插件方法，我们可以在不修改JQ源代码的基础，给JQ新增方法
$.extend() 拓展JQ工具方法 $.xxx() $.yyy()
$.fn.extend() 拓展JQ的对象方法 $().xxx() $().yyy();
$.extend({
show: function(){
alert("工具方法");
}
})
$.fn.extend({
show: function(){
alert("JQ方法");
}
})
$(function(){
$("#btn1").click(function(){
$.show();
$("#btn1").show();
})
})
JQ的ajax方法
ajax的load方法
$(selector).load(url,data,callback)
功能：将url下面的数据下载到，直接下载到的数据，填充到前面被选中元素节点的innerHTML中。
还可以通过选择器的方式，然后进行对于填充部分的数据，进行选择。
dataType 先去声明我将要下载的数据是什么数据类型
默认：自动检测，自动解析，解析判定方式，看下载数据的后缀
dataType: 值
“json” 自动将json格式字符串转成对应的数据结构
“jsonp” 自动将ajax请求，jsonp跨域
“text” 返回的数据，必定文本类型的字符串
“xml” 自动解析，返回的xml数据
【注】JQ的ajax方法可以使用dataType，指定我们的数据是什么格式
$.ajax({
url:"url",
type:"get/post",
dataType:"json/jsonp/text/xml/html/script",
data:{},
success:function(data, textStatus, jqXHR){},
error:funciton(XMLHttpRequest, textStatus, errorThrown){};
jsonpCallback:"fn"
});
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) | 黑马程序员IT技术论坛 X3.2 |