[游戏开发]JQuery笔记(进阶)

目录

一、jQuery DOM操作

1. 创建元素

2. 内部插入

3. 外部插入

4. 包裹

5. 替换

6. 删除

7. 克隆

二、jQuery事件

1. 事件绑定

2. 解除事件绑定

3. 事件委派? ? ??

4. 控制事件触发?????

5. 事件列表

6. 事件对象

三、jQuery动画

1. 基本效果

2. 滑动效果

3. 淡入淡出效果

4. 自定义动画

5. 动画设置

6. 动画队列

四、jQuery Ajax

1. 快速请求方法

2. Ajax方法

3. 表单方法

4. 处理json数据

五、jQuery工具方法

1. 数组对象方法

2. 函数方法

3. 类型判断

4. 字符串

5. 版本

6. 自定义jQuery插件

一、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"

})