目录
一、jQuery DOM操作
1. 创建元素
var $img= $("<img>")
2. 内部插入
- append() // 父元素.append(子元素) 尾部插入
var $img= $("<img>")
$("#box").append ($img);
或者直接写
$("#box").append("<img src='./images/5.jpeg'>");
- appendTo() // 子元素.appendTo(父元素) 尾部插入
$("<img src='./images/6.jpeg'>").appendTo("#box");
- prepend () // 父元素.prepend(子元素) 头部插入
$("#box").prepend("<img src='./images/5.jpeg'>");
- prependTo() // 子元素.prependTo(父元素) 头部插入
$("<img src='./images/6.jpeg'>").prependTo("#box");
3. 外部插入
- after() // 父元素.after(子元素),给当前元素的后面插入兄弟元素
$("#box").after("<img src='./images/5.jpeg'>");
- insertAfter() //子元素.insertAfter(父元素),给当前元素的后面插入兄弟元素
$("<img src='./images/6.jpeg'>").insertAfter("#box");
- before() // 父元素.after(子元素),给当前元素的前面插入兄弟元素
$("#box").before("<img src='./images/5.jpeg'>");
- insertBefore() // 子元素.insertBefore(父元素),给当前元素的前面插入兄弟元素
$("<img src='./images/6.jpeg'>").insertBefore("#box");
4. 包裹
- wrap() // 在选定元素的外面包裹一个新标签,如果是元素集合,则每一个都会包裹。
$("#Btn").click(function(){
$("#box img").wrap("<li>"); //在每一个img标签外包裹一个li标签
});
- wrapAll() // 在选定元素的外面包裹一个新标签,即使是元素集合,也只包裹一次。
$("#Btn").click(function(){
$("#box img").wrapAll("<li>"); //在所有img标签外包裹一个li标签
});
- wrapInner() // 给选定元素的所有子元素包裹一个新标签
$("#Btn").click(function(){
$("#box").wrapInner("<li>"); //在#box的子元素img标签外包裹一个li标签
});
- unwrap() // 去掉包裹
$("#Btn").click(function(){
$("#box img").unwrap(); // 去掉img的父元素
});
5. 替换
- replaceWith() // 替换选定的元素
$("#replaceBtn").click(function(){
$("img.active").replaceWith("<img src='../images/6.jpeg >"); //替换成新的标签
$("img.active").replacewith($("#newImg"));//替换成页面已有的标签,但是会删除掉已有位置的标签。
});
- replaceAll() // 和replaceWith效果一样,只是调用方法的主体不同
$("#replaceBtn").click(function(){
$("<img src='../images/6.jpeg >").replaceAll("img.active"); //替换成新的标签
});
6. 删除
- empty() // 清空选定元素中的所有内容
$("#emptyBtn").click(function(){
$("#box").empty();
})
- remove() // 删除当前选定元素,恢复时会去除元素的事件
removedEle=$("#removeBtn").click(function(){
$("#box").remove();
})
- detach() // 删除当前选定元素,恢复时不会去除元素的事件
$("#detachBtn").click(function(){
removedEle=$("#box").detach();
})
$("#backBtn").click(function (){
$("#box").append(removedEle);
})
7. 克隆
- clone() // 克隆
$("#cloneBtn").click(function(){
$("#box").clone().appendTo("body");
});
二、jQuery事件
1. 事件绑定
- on(event,fn) // 标准的绑定方式
$("#btn").on("dbclick",function(){
console.log("被双击了")
});
- one(event,fn) // 事件只能绑定一次
$("#btn").one("mouseover",function(){
console.log("鼠标移入");
});
- on({ },{ }) // 同时绑定多个事件
$("#btn").on(
{"click": function(){
console.log("第一个事件被单击了");
}},
{"keyup": function(){
alert("第二个事件键盘抬起");
}})
PS:也可以用连缀操作实现同时绑定多个事件。
- 把事件名作为方法 如:click,dbclick,mouseout,keypress等
$("#btn").click(function(){
console.log("事件被单击了");
})
$("#btn").mouseover(function(){
console.log("鼠标移入");
})
2. 解除事件绑定
- off() // 解除选定元素所有的事件绑定
$("#btn").click(function(){
$(".div").off();
})
- off(event) // 解除选定元素特定的事件绑定
$("#btn").click(function(){
$(".div").off("mouseout");
});
3. 事件委派
解决新添加的标签无法获取已有的事件的问题
$("#btn").on("dbclick", "li", function(){
console.log("被双击了") // 这样新添加的li也会有双击事件
});
4. 控制事件触发
事件触发除了对事件绑定对象本身操作外,还可以对其他元素绑定事件触发
- trigger(event)
$("#btn").on("dbclick", function(){
console.log("被双击了")
});
$("#btn2").click(function(){
$("#btn").trigger("dbclick");
})
- triggerHandler(event)
$("#btn").on("dbclick", function(){
console.log("被双击了")
});
$("#btn2").click(function(){
$("#btn").triggerHandler("dbclick");
})
- trigger和triggerHandler的区别:
trigger返回jQuery DOM对象,可以连续操作,可以触发元素自带的事件,如submit,focus,可以依次触发jQuery DOM对象集合所有元素的事件。
triggerHandler不返回jQuery DOM对象,因此不可以连续操作,无法触发元素自带的事件,如submit,focus,只能触发jQuery DOM对象集合中第一个元素
5. 事件列表
- ready(event) // 页面标签加载完成触发
- focusin(event) // input输入框获得焦点时,其父元素触发
- focusout(event) // input输入框失去焦点时,其父元素触发
- mouseenter(event) // 鼠标移入时触发
- mouseleave(event) // 鼠标移出时触发
- hover(event) // 相当于mouseenter/mouseleave的结合体,移入移出都会触发
- mouseenter/mouseleave和mouseover/mouseout的区别:
mouseenter在移入绑定元素及其子元素时只会触发一次,但mouseover在移入绑定元素及其子元素时会一直触发,建议用enter代替over
6. 事件对象
- pageX // 鼠标箭头的x轴坐标,相当于clientX
- pageY // 鼠标箭头的y轴坐标,相当于clientY
- target // 当前触发事件的元素
$(document).ready(function(){
$(document).on("click",function(event){
console.log(event.pageX+event.pageY);
console.log(event.target); //document
});
});
- type // 事件的类型
- which // 键盘的ASC码
$(document).keypress(function(event){
console.log(event.which); //A:97
console.log(event.type); //keypress
})
- preventDefault() // 阻止默认事件
$("a").click(function(event){
event.preventDefault();
$(this).css("color","red");
})
- stopPropagation( ) // 阻止事件冒泡
$("a").click(function(event){
event.stopPropagation();
})
三、jQuery动画
1. 基本效果
显示和隐藏会引起元素透明度,宽高,内外边距,border等的变化
- hide() // 隐藏
$("#box").hide()
$("#box").hide("fast") //速度快
$("#box").hide("normal") //正常
$("#box").hide("slow") //慢
$("#box").hide(3000); //3秒隐藏
$("#box").hide(3000,function(){
alert(“完成隐藏”); //在隐藏完成后执行的函数
});
- show() // 显示
和hide有相同的参数
- toggle() // 切换隐藏和显示
和hide有相同的参数
2. 滑动效果
显示和隐藏会引起元素高度,margin-top,padding-top等的变化
- slideDown() // 显示
$("#box").slideDown(3000); //3秒显示
$("#box").slideDown("slow/fast");
$("#box").slideDown();
$("#box").slideDown(3000,function(){
alert("完成显示"); //在显示完成后执行的函数
});
- slideUp() // 隐藏
和slideDown有相同的参数
- slideToggle() // 切换
和slideDown有相同的参数
3. 淡入淡出效果
淡入淡出会改变透明度和display
- fadeIn( ) // 淡入
$("#box").fadeIn(3000); //3秒淡入
$("#box").fadeIn();
$("#box").fadeIn("slow/fast");
$("#box").fadeIn(3000,function(){
alert("完成淡入"); //在淡入完成后执行的函数
});
- fadeOut() // 淡出
和fadeIn有相同的参数
- fadeToggle() // 切换
和fadeIn有相同的参数
- fadeTo(时间,透明度(0-1),fn) // 淡入/淡出到指定透明度
$("#box").fadeTo(3000, 0.4, function(){
alert("fadeTo完成");
})
4. 自定义动画
- animate(对象,时间,fn) // 可自定义
$("#box").animate({
"width": "100px/toggle",
"opaticy": "0.5/toggle"
}, 2000, function(){
alert("自定义动画执行完毕");
});
- stop( ) // 使动画停止
$("#box").stop();
- delay( ) // 延迟动画的执行
$("#box").delay();
- finish( ) // 使动画完成
$("#box").finish();
5. 动画设置
- jQuery.fx.off // 关闭页面中所有的动画
jQuery.fx.off=true;
- jQuery.fx.interval // 改变以毫秒计的动画运行速率。
可操作该属性来调整动画运行的每秒帧数。默认值是 13 毫秒。该属性常用于修改动画运行的每秒帧数。降低这个值能够使动画在更快的浏览器中运行得更流畅,但这么做也行会影响性能。
jQuery.fx.interval = 500
6. 动画队列
$("#btn").click(function(){
$("#box img").slideUp(1000).show(2000).fadeTo(1000,0.5).animate({
"width": 200px",
"opacity": "1"
},1000).prop("src","./images/9.jpeg");
})
PS:所有的动画操作会加入到队列中,依次执行(slideUp,show,fadeTo,animate),其他操作不会加入动画队列(prop)。
四、jQuery Ajax
1. 快速请求方法
- get(地址, 回调函数, dataType)
$.get("http://localhost?name=lili&message=hello",function(data){
alert(data); // 服务器响应的数据
});
$.get("http://localhost?"+$("#myform").serialize(),function(data){
alert(data); // 服务器响应的数据
});
$("#myform").serialize() // 直接获取表单中的数据,并将其编码。
- post(地址, 数据, 回调函数, dataType)
//post请求,不传参
$.post("http://localhost", function(data){
alert(data); // 服务器响应的数据
});
//post请求,传参
$.post("http://localhost", data, function(data){
alert(data); // 服务器响应的数据
});
- data中的数据形式:
对象:{name:"mary", message:"你好"}
字符串:"name=lili&message=hello"
$("#myform").serialize()
2. Ajax方法
- ajax({对象})
$.ajax({
url: "http://localhost:8080",
type: "get/post",
data: 对象/字符串/$("#myform").serialize(),
dataType: "json",
asynl: 同/异步,
success: function(data){
alert(data); // 请求成功响应的数据
},
error: function(data){
alert(data); // 请求失败响应的数据
}
});
ps: data中的数据形式和快速请求方式相同
3. 表单方法
- serialize( )
$("#myform").serialize()
4. 处理json数据
$.get("http://localhost/data.json", processData, "json");
function processData(data){
$.each(data, function(index,item){
$("<li>").append("<img src='+item.avatar_url+'>").append("<p>+item.login+</p>" ).appendTo("#userList");
}
五、jQuery工具方法
1. 数组对象方法
- $.each(遍历的对象,function(索引, 数组的成员){..}) // 遍历数组对象
var list=[1,2,3,4,5,6,7,8];
$.each(list, function(index, item){
alert(item); //1,2,3,4,5,6,7,8
}
- $.grep(过滤的对象,function(数组的成员,索引){..}) // 过滤数组
var list=[1,2,3,4,5,6,7,8];
var res=$.grep(list, function (item, index){
return item %2 === 0;
});
console.log(res); // 2,4,6,8
- $.map( ) // 克隆一份,返回一个新的数组集合
var list=[1,2,3,4,5,6,7,8];
var res=$.map(list, function (item, index){
return item * index;
});
console.log(res); // [0, 2, 6, 12, 20, 30, 42, 56]
- $.makeArray( ) // 把类数组对象转为纯数组对象
var newArr = $. makeArray($("#myList li"));
console.log(newArr);
- $.inArray(item,list) // 判断元素在数组中的位置
var list=[1,2,3,4,5,6,7,8];
console.log($.inArray(4, list)); // 3
console.log($.inArray("Hello", list)); // -1
- $.merge(array1,array2,.....) // 合并数组
var list1 = [1,2,3,4];
var list2 = [5,6,7,8]
$.merge(list1, list2) // [1,2,3,4,5,6,7,8]
- toArray( ) // jquery dom方法,把jquery dom直接转为纯数组
$("#myList li").toArray( );
2. 函数方法
- $.proxy() // 改变函数内的this的指向
function testFn(){
console.log(this);
}
testFn(); // this指向window
var newFn= $.proxy(testFn, { name: "lili" });
newFn(); // this指向{ name: "lili" }
3. 类型判断
- $.type() // 判断类型
console.log($.type(100)); // number
- $.isFunction() // 判断是不是函数function
console.log($.isFunction($)); // true
- $.isEmptyObject() // 判断是不是空的对象
console.log($.isEmptyObject({}); //true
console.log($.isEmptyObject({name: "lili"}); // false
- $.isPlainObject() // 判断是不是纯的对象(构造函数是object)
console.log($.isPlainObject({}); // true
console.log($.isPlainObject([]); // false
consoLe. log($.isPlainobject($("h1"))); // false
- $.isWindow() // 判断是不是window对象
console.log($.iswindow({}); //false
- $.isNumeric // 判断是不是数字,不是判断数字类型
console.log($.isNumeric(NaN); // false
4. 字符串
- $.trim() // 去除空格
console.log($.trim(str));
- $.param() // 把对象序列化成字符串
console.log($.param({name: "lili", age: 1001})); // ”name: lili&age: 1001”
5. 版本
$.fn.jquery // jquery的版本
6. 自定义jQuery插件
- jQuery.fn.extend() // 给jQuery DOM对象扩展方法
$.fn.extend({
changeColor:function(col){
$(this).css("color",col);
}
});
//调用
$(function(){
$("p").changeColor("red");
});
//封装后调用
(function($){
.......
})(jquery)
- jQuery.extend() // 给jQuery对象本身扩展方法
$.extend({
sayHello: function(name){
console.log("hello,"+name);
}
});
//调用
$(document).ready(function(){
$.sayHello("jack"); //打印 "hello jack"
})