文档处理
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。 empty()// 删除匹配的元素集合中所有的子节点。
替换
replaceWith() //将所有匹配的元素替换成指定的HTML或DOM元素。 replaceAll() //用匹配的元素替换掉所有 selector匹配到的元素。
克隆
clone()// 参数
克隆示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>克隆</title> <style> #b1 { background-color: deeppink; padding: 5px; color: white; margin: 5px; } #b2 { background-color: dodgerblue; padding: 5px; color: white; margin: 5px; } </style> </head> <body> <button id="b1">屠龙宝刀，点击就送</button> <hr> <button id="b2">屠龙宝刀，点击就送</button> <script src="jquery-3.2.1.min.js"></script> <script> // clone方法不加参数true，克隆标签但不克隆标签带的事件 $("#b1").on("click", function () { $(this).clone().insertAfter(this); }); // clone方法加参数true，克隆标签并且克隆标签带的事件 $("#b2").on("click", function () { $(this).clone(true).insertAfter(this); }); </script> </body> </html> 点击复制按钮
常用事件
click() //点击事件 mouseover() //鼠标移入 不管鼠标移到父元素还是子元素都会触发事件 mouseenter() //鼠标移入 只有鼠标移入到父元素才触发事件 mouseout() //鼠标移出 mouseleave( ) //鼠标移出 keydown() //键盘事件：键按下 keyup() //键盘事件：键弹起
表单事件
blur() // 失去焦点, 如果事件函数传递function,作为事件使用, 如果没有函数, 作为一个普通函数, 让元素失去焦点 focus() // 得到焦点, 没有写function, 普通的函数, 让元素得到焦点 submit([fn]) // 提交表单触发这个事件,如果没写函数, 提交表单 change() //表单内容被改变,事件仅适用于文本域（text field），以及 textarea 和 select 元素。 //当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。 select() //文本框,文本域, 内容被选中时触发
复合事件
hover(fn1,fn2) //包含mouseover,mouseout这个两个事件 //Fn1 就是触发mouseover调用的函数, fn2 就是触发mouseout调用的函数 //注意: hover(fn) 只写了一个函数,表示mouseover,mouseout 事件都调用这个函数 toggle() //多次点击事件: click toggle(fn1,fn2,fn3,...) //第一次点击, 调用fn1, 第二次点击, 调用fn2,第三次点击, 调用fn3 //注意: toggle()作为复合事件,在jquery的高版本中失效,
事件绑定
(在选择元素上绑定一个或多个事件的事件处理函数。)
bind() 绑定一个事件 ,bind 不能解决对新添加的元素无效的问题
unbind() 解除一个事件的绑定
on() 绑定事件, 普通写法参数与bind一样, 不能解决对新添加的元素无效的问题
on另外一种写法: 对新添加的元素有效
$(document).on(”事件类型”,“选择器”,fn)
off() 解除绑定
one() 一次性绑定事件, 这个事件一旦触发之后,这个事件就失效
//使用on() 绑定事件 $("#all").on("click",function(){ $("input[name=product]").prop("checked",$(this).prop("checked")); });
阻止后续事件执行
-
return false; // 常见阻止表单提交等 - e.preventDefault();
$("#b1").click(function (e) {
alert(123);
//return false;
e.preventDefault();
});
动画效果
// 基本 show([s,[e],[fn]]) hide([s,[e],[fn]]) toggle([s],[e],[fn]) // 滑动 slideDown([s],[e],[fn]) slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn]) // 淡入淡出 fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) fadeToggle([s,[e],[fn]]) // 自定义（了解即可） animate(p,[s],[e],[fn])
自定义动画案例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>点赞动画示例</title> <style> div { position: relative; display: inline-block; } div>i { display: inline-block; color: red; position: absolute; right: -16px; top: -5px; opacity: 1; } </style> </head> <body> <div id="d1">点赞</div> <script src="jquery-3.2.1.min.js"></script> <script> $("#d1").on("click", function () { var newI = document.createElement("i"); newI.innerText = "+1"; $(this).append(newI); $(this).children("i").animate({ opacity: 0 }, 1000) }) </script> </body> </html> 点赞特效简单示例
each循环
jQuery.each(collection, callback(indexInArray, valueOfElement))：
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。
li =[10,20,30,40] $.each(li,function(i, v){ console.log(i, v);//index是索引，ele是每次循环的具体元素。 })
.each(function(index, Element))：
描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。
// 为每一个li标签添加foo $("li").each(function(){ $(this).addClass("c1"); });
在遍历过程中可以使用 return false提前结束each循环
终止each循环 return false；