jQuery的基本操作总结
什么是jquery？
就是一个用js的插件库 解决了原生dom的操作的兼容性和代码量
使用前需要引入它的js库
以下例子以
jQuery1.12.4.js 这个版本为例
一：jQuery入口函数的写法的区别和不同
<script>
原生JS和jQuery入口函数的加载模式不同;
原生JS会等到DOM元素加载完毕, 并且图片也加载完毕才会执行;
jQuery会等到DOM元素加载完毕, 但不会等到图片也加载完毕就会执行; 原生的JS如果编写了多个入口函数, 后面编写的会覆盖前面编写的;
jQuery中编写多个入口函数, 后面的不会覆盖前面的; // 1.第一种写法
$(document).ready(function() {}); // 2.第二种写法
jQuery(document).ready(function() {}); // 3.第三种写法(推荐)
$(function() {}); // 4.第四种写法
jQuery(function() {});
</script>
二：jQuery冲突问题
<script>
1.释放$的使用权
注意点: 释放操作必须在编写其它jQuery代码之前编写
释放之后就不能再使用$,改为使用jQuery
jQuery原理.noConflict();
2.自定义一个访问符号
var nj = jQuery.noConflict();
nj(function() {
});
</script>
三：jQuery核心函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script src="js/jquery-1.12.4.js"></script>
<script>
// $();/jQuery原理();就代表调用jQuery的核心函数 // 1.接收一个函数
$(function() {
alert("hello lnj");
// 2.接收一个字符串
// 2.1接收一个字符串选择器
// 返回一个jQuery对象, 对象中保存了找到的DOM元素
var $box1 = $(".box1");
var $box2 = $("#box2");
console.log($box1);
console.log($box2);
// 2.2接收一个字符串代码片段
// 返回一个jQuery对象, 对象中保存了创建的DOM元素
var $p = $("<p>我是段落</p>");
console.log($p);
$box1.append($p);
// 3.接收一个DOM元素
// 会被包装成一个jQuery对象返回给我们
var span = document.getElementsByTagName("span")[0];
console.log(span);
var $span = $(span);
console.log($span);
});
</script>
</head>
<body>
<div class="box1"></div>
<div id="box2"></div>
<span>我是span</span>
</body>
</html>
四：jQuery对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
/*
* 1.什么是jQuery对象
* jQuery对象是一个伪数组
*
* 2.什么是伪数组?
* 有0到length-1的属性, 并且有length属性,其实就是一个对象
*/
var $div = $("div");
console.log($div);
console.log($div[0].innerText); var arr = [1, 3, 5];
console.log(arr);
});
</script>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>
五：静态方法和实例方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script>
// 1.定义一个类
function AClass() {}
// 2.给这个类添加一个静态方法
// 直接添加给类的就是静态方法
AClass.staticMethod = function() {
alert("staticMethod");
};
// 静态方法通过类名调用
AClass.staticMethod(); // 3.给这个类添加一个实例方法
AClass.prototype.instanceMethod = function() {
alert("instanceMethod");
};
// 实例方法通过类的实例调用
// 创建一个实例(创建一个对象)
var a = new AClass();
// 通过实例调用实例方法
a.instanceMethod();
a.staticMethod(); //报错，静态方法不能通过实例方法调用
</script>
</head>
<body></body>
</html>
六： jQuery静态方法each和 js foreach方法 比较
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script src="js/jquery-1.12.4.js"></script>
<script>
var arr = [1, 3, 5, 7, 9];
var obj = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5 };
/*
第一个参数: 遍历到的元素
第二个参数: 当前遍历到的索引
注意点:
原生的forEach方法只能遍历数组, 不能遍历伪数组(是一个对象，还有长度)
*/
arr.forEach(function(value, index) {
console.log(index, value);
});
obj.forEach(function(value, index) {
console.log(index, value);
}); // 1.利用jQuery的each静态方法遍历数组
/*
第一个参数: 当前遍历到的索引
第二个参数: 遍历到的元素
注意点:
jQuery的each方法是可以遍历伪数组的
*/
// $.each(arr, function (index, value) {
// console.log(index, value);
// });
// $.each(obj, function (index, value) {
// console.log(index, value);
// });
</script>
</head>
<body></body>
</html>
七： jQuery静态方法map和 js map方法 比较
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script src="js/jquery-1.12.4.js"></script>
<script>
var arr = [1, 3, 5, 7, 9];
var obj = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5 };
// 1.利用原生JS的map方法遍历
/*
第一个参数: 当前遍历到的元素
第二个参数: 当前遍历到的索引
第三个参数: 当前被遍历的数组
注意点:
和原生的forEach一样,不能遍历的伪数组
*/
// arr.map(function (value, index, array) {
// console.log(index, value, array);
// });
// obj.map(function (value, index, array) {
// console.log(index, value, array);
// });
/*
第一个参数: 要遍历的数组
第二个参数: 每遍历一个元素之后执行的回调函数
回调函数的参数:
第一个参数: 遍历到的元素
第二个参数: 遍历到的索引
注意点:
和jQuery中的each静态方法一样, map静态方法也可以遍历伪数组
*/
// $.map(arr, function (value, index) {
// console.log(index, value);
// });
var res = $.map(obj, function(value, index) {
console.log(index, value);
return value + index;
}); var res2 = $.each(obj, function(index, value) {
console.log(index, value);
return value + index;
}); /*
jQuery中的each静态方法和map静态方法的区别:
each静态方法默认的返回值就是, 遍历谁就返回谁
map静态方法默认的返回值是一个空数组 each静态方法不支持在回调函数中对遍历的数组进行处理
map静态方法可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回
*/
console.log(res); //[1, 4, 7, 10, 13]
console.log(res2); //{0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5}
</script>
</head>
<body></body>
</html>
八：jQuery其他常用的静态方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script src="js/jquery-1.12.4.js"></script>
<script>
/*
$.trim();
作用: 去除字符串两端的空格
参数: 需要去除空格的字符串
返回值: 去除空格之后的字符串
*/
/*
var str = " lnj ";
var res = $.trim(str);
console.log("---"+str+"---");
console.log("---"+res+"---");
*/ // 多个的时候不起作用
var str2 = " qw er ";
var res2 = $.trim(str2);
console.log("----" + str2 + "----"); // 真数组
var arr = [1, 3, 5, 7, 9];
// 伪数组
var arrlike = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5 };
// 对象
var obj = { name: "lnj", age: "33" };
// 函数
var fn = function() {};
// window对象
var w = window; /*
$.isWindow();
作用: 判断传入的对象是否是window对象
返回值: true/false
*/
/*
var res = $.isWindow(w);
console.log(res);
*/ /*
$.isArray();
作用: 判断传入的对象是否是真数组
返回值: true/false
*/
/*
var res = $.isArray(w);
console.log(res);
*/
/*
$.isArray();
作用: 判断传入的对象是否是一个函数
返回值: true/false
注意点:
jQuery框架本质上是一个函数
(function( window, undefined ) {
})( window );
*/
var res = $.isFunction(jQuery);
console.log(res);
</script>
</head>
<body></body>
</html>
九：holdReady方法 暂停ready执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script src="js/jquery-1.12.4.js"></script>
<script>
// $.holdReady(true); 作用: 暂停ready执行
$.holdReady(true);
$(document).ready(function() {
alert("ready");
});
</script>
</head>
<body>
<button>回复ready事件</button>
<script>
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function() {
//恢复reday执行
$.holdReady(false);
};
</script>
</body>
</html>
十：jQuery内容选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
div {
width: 50px;
height: 100px;
background: red;
margin-top: 5px;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
// 编写jQuery相关代码
// :empty 作用:找到既没有文本内容也没有子元素的指定元素
// var $div = $("div:empty");
// $div.text("我是猪")
// console.log($div); // :parent 作用: 找到有文本内容或有子元素的指定元素
// var $div = $("div:parent");
// console.log($div);
// console.log($div[0].innerText); // :contains(text) 作用: 找到包含指定文本内容的指定元素
// var $div = $("div:contains('我是div')");
// console.log($div); // :has(selector) 作用: 找到包含指定子元素的指定元素
// var $div = $("div:has('span')");
// console.log($div);
});
</script>
</head>
<body>
<div></div>
<div>我是div</div>
<div>他们我是div123</div>
<div><span></span></div>
<div><span>我的</span></div>
<div><p></p></div>
</body>
</html>
十一：jQuery attr 和 prop 的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
/*
1.attr(name|pro|key,val|fn)
作用: 获取或者设置属性节点的值
可以传递一个参数, 也可以传递两个参数
如果传递一个参数, 代表获取属性节点的值
如果传递两个参数, 代表设置属性节点的值 注意点:
如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
如果是设置:找到多少个元素就会设置多少个元素
如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增 2.removeAttr(name)
删除属性节点 注意点:
会删除所有找到元素指定的属性节点 */
// console.log($("span").attr("class"));
// $("span").attr("class", "box").attr("abc", "123").removeAttr("class name");
});
</script>
</head>
<body>
<span class="span1" name="it666"></span>
<span class="span2" name="lnj"></span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
/*
1.prop方法
特点和attr方法一致
2.removeProp方法
特点和removeAttr方法一致
*/
/*
$("span").eq(0).prop("demo", "it666");
$("span").eq(1).prop("demo", "lnj");
console.log($("span").prop("demo"));
$("span").removeProp("demo");
*/ /*
注意点:
prop方法不仅能够操作属性, 他还能操作属性节点 官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
*/
// console.log($("span").prop("class"));
// $("span").prop("class", "box"); console.log($("input").prop("checked")); // true / false
console.log($("input").attr("checked")); // checked / undefined
// $("input").prop("checked",false);
});
</script>
</head>
<body>
<span class="span1" name="it666"></span>
<span class="span2" name="lnj"></span> <input type="checkbox" checked />
</body>
</html>
十二：jQuery操作类的相关方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.class1 {
width: 100px;
height: 100px;
background: red;
}
.class2 {
border: 10px solid #000;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
/*
1.addClass(class|fn)
作用: 添加一个类
如果要添加多个, 多个类名之间用空格隔开即可 2.removeClass([class|fn])
作用: 删除一个类
如果想删除多个, 多个类名之间用空格隔开即可 3.toggleClass(class|fn[,sw])
作用: 切换类
有就删除, 没有就添加
*/
var btns = document.getElementsByTagName("button");
btns[0].onclick = function() {
// $("div").addClass("class1");
$("div").addClass("class1 class2");
};
btns[1].onclick = function() {
// $("div").removeClass("class2");
$("div").removeClass("class2 class1");
};
btns[2].onclick = function() {
$("div").toggleClass("class2 class1");
};
});
</script>
</head>
<body>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>
<div></div>
</body>
</html>
十三：jQuery文本插值的相关方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
/*
1.html([val|fn])
和原生JS中的innerHTML一模一样
2.text([val|fn])
和原生JS中的innerText一模一样
3.val([val|fn|arr])
*/
var btns = document.getElementsByTagName("button");
btns[0].onclick = function() {
$("div").html("<p>我是段落<span>我是span</span></p>");
};
btns[1].onclick = function() {
console.log($("div").html());
};
btns[2].onclick = function() {
$("div").text("<p>我是段落<span>我是span</span></p>");
};
btns[3].onclick = function() {
console.log($("div").text());
};
btns[4].onclick = function() {
$("input").val("请输入内容");
};
btns[5].onclick = function() {
console.log($("input").val());
};
});
</script>
</head>
<body>
<button>设置html</button>
<button>获取html</button>
<button>设置text</button>
<button>获取text</button>
<button>设置value</button>
<button>获取value</button>
<div></div>
<input type="text" />
</body>
</html>
十四：jQuery操作css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
// 编写jQuery相关代码
// 1.逐个设置
$("div").css("width", "100px");
$("div").css("height", "100px");
$("div").css("background", "red"); // 2.链式设置
// 注意点: 链式操作如果大于3步, 建议分开
$("div")
.css("width", "100px")
.css("height", "100px")
.css("background", "blue"); // 3.批量设置
$("div").css({
width: "100px",
height: "100px",
background: "red"
}); // 4.获取CSS样式值
console.log($("div").css("background"));
});
</script>
</head>
<body>
<div></div>
</body>
</html>
十五：jQuery获取元素位置和元素尺寸操作的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 200px;
background: red;
border: 50px solid #000;
margin-left: 50px;
position: relative;
}
.son {
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 50px;
top: 50px;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
// 编写jQuery相关代码
var btns = document.getElementsByTagName("button");
// 监听获取
btns[0].onclick = function() {
// 获取元素的宽度
console.log($(".father").width());
// offset([coordinates])
// 作用: 获取元素距离窗口的偏移位
console.log($(".son").offset().left);
// position()
// 作用: 获取元素距离定位元素的偏移位
console.log($(".son").position().left);
};
// 监听设置
btns[1].onclick = function() {
// 设置元素的宽度
// $(".father").width("500px") // $(".son").offset({
// left: 10
// }); // 注意点: position方法只能获取不能设置
// $(".son").position({
// left: 10
// }); $(".son").css({
left: "10px"
});
};
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
</body>
</html>
十六：jQuery的scrollTop方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>/title>
<style>
*{
margin: 0;
padding: 0;
}
.scroll{
width: 100px;
height: 200px;
border: 1px solid #000;
overflow: auto;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
// 编写jQuery相关代码
var btns = document.getElementsByTagName("button");
// 监听获取
btns[0].onclick = function () {
// 获取滚动的偏移位
// console.log($(".scroll").scrollTop());
// 获取网页滚动的偏移位
// 注意点: 为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法
// console.log($("body").scrollTop()+$("html").scrollTop());
if($(".scroll").scrollTop()==300){
// 获取当前滚动的距离
$(btns[0]).attr("hahaha","123"); }
}
btns[1].onclick = function () {
// 设置滚动的偏移位
$(".scroll").scrollTop(300);
// 设置网页滚动偏移位
// 注意点: 为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法
// $("html,body").scrollTop(300);
} });
</script>
</head>
<body>
<div class="scroll">很多内容</div>
<button>获取</button>
<button>设置</button>
</body>
</html>
十七：jQuery的事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
// 编写jQuery相关代码
/*
jQuery中有两种绑定事件方式
1.eventName(fn);
编码效率略高/ 部分事件jQuery没有实现,所以不能添加
2.on(eventName, fn);
编码效率略低/ 所有js事件都可以添加 注意点:
可以添加多个相同或者不同类型的事件,不会覆盖
*/
// $("button").click(function () {
// alert("hello lnj");
// });
// $("button").click(function () {
// alert("hello 123");
// });
// $("button").mouseleave(function () {
// alert("hello mouseleave");
// });
// $("button").mouseenter(function () {
// alert("hello mouseenter");
// });
$("button").on("click", function() {
alert("hello click1");
});
$("button").on("click", function() {
alert("hello click2");
});
$("button").on("mouseleave", function() {
alert("hello mouseleave");
});
$("button").on("mouseenter", function() {
alert("hello mouseenter");
});
});
</script>
</head>
<body>
<button>我是按钮</button>
</body>
</html>
十八：jQuery的事件移除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
function test1() {
alert("hello lnj");
}
function test2() {
alert("hello 123");
}
// 编写jQuery相关代码
$("button").click(test1);
$("button").click(test2);
$("button").mouseleave(function() {
alert("hello mouseleave");
});
$("button").mouseenter(function() {
alert("hello mouseenter");
}); // off方法如果不传递参数, 会移除所有的事件
// $("button").off();
// off方法如果传递一个参数, 会移除所有指定类型的事件
// $("button").off("click");
// off方法如果传递两个参数, 会移除所有指定类型的指定事件
$("button").off("click", test1);
});
</script>
</head>
<body>
<button>我是按钮</button>
</body>
</html>
十九：jQuery事件冒泡和默认行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
}
.son{
width: 100px;
height: 100px;
background: blue;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
// 编写jQuery相关代码
/*
1.什么是事件冒泡?
2.如何阻止事件冒泡
3.什么是默认行为?
4.如何阻止默认行为
*/
/*
$(".son").click(function (event) {
alert("son");
// return false;
event.stopPropagation();
});
$(".father").click(function () {
alert("father");
});
*/
$("a").click(function (event) {
alert("弹出注册框");
// return false;
event.preventDefault();
});
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<a href="http://www.baidu.com">注册</a>
<form action="http://www.taobao.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>
二十：jQuery事件自动触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
} .father {
width: 200px;
height: 200px;
background: red;
} .son {
width: 100px;
height: 100px;
background: blue;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
// 编写jQuery相关代码
$(".son").click(function(event) {
alert("son");
}); $(".father").click(function() {
alert("father");
});
// $(".father").trigger("click");
// $(".father").triggerHandler("click"); /*
trigger: 如果利用trigger自动触发事件,会触发事件冒泡
triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡
*/
// $(".son").trigger("click");
// $(".son").triggerHandler("click"); $("input[type='submit']").click(function() {
alert("submit");
}); /*
trigger: 如果利用trigger自动触发事件,会触发默认行为
triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发默认行为
*/
// $("input[type='submit']").trigger("click");
// $("input[type='submit']").triggerHandler("click"); $("span").click(function() {
alert("a");
});
// $("a").triggerHandler("click");
$("span").trigger("click");
});
</script>
</head> <body>
<div class="father">
<div class="son"></div>
</div>
<a href="http://www.baidu.com"><span>注册</span></a>
<form action="http://www.taobao.com">
<input type="text" />
<input type="submit" />
</form>
</body>
</html>
二十一：jQuery自定义事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
}
.son{
width: 100px;
height: 100px;
background: blue;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
// 编写jQuery相关代码
// $(".son").myClick(function (event) {
// alert("son");
// });
/*
想要自定义事件, 必须满足两个条件
1.事件必须是通过on绑定的
2.事件必须通过trigger来触发
*/
$(".son").on("myClick", function () {
alert("son");
});
$(".son").triggerHandler("myClick");
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<a href="http://www.baidu.com"><span>注册</span></a>
<form action="http://www.taobao.com">
<input type="text">
<input type="submit">
</form>
</body>
</html>
二十一：事件命名空间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 200px;
background: red;
}
.son {
width: 100px;
height: 100px;
background: blue;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
/*
想要事件的命名空间有效,必须满足两个条件
1.事件是通过on来绑定的
2.通过trigger触发事件
*/
$(".son").on("click.zs", function() {
alert("click1");
});
$(".son").on("click.ls", function() {
alert("click2");
});
// $(".son").trigger("click.zs");
$(".son").trigger("click.ls");
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<a href="http://www.baidu.com"><span>注册</span></a>
<form action="http://www.taobao.com">
<input type="text" />
<input type="submit" />
</form>
</body>
</html>
二十二：事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>31-jQuery事件委托</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
/*
1.什么是事件委托?
请别人帮忙做事情, 然后将做完的结果反馈给我们
*/
$("button").click(function() {
$("ul").append("<li>我是新增的li</li>");
}); /*
在jQuery中,如果通过核心函数找到的元素不止一个, 那么在添加事件的时候,jQuery会遍历所有找到的元素,给所有找到的元素添加事件
*/
// $("ul>li").click(function () {
// console.log($(this).html());
// });
/*
以下代码的含义, 让ul帮li监听click事件
之所以能够监听, 是因为入口函数执行的时候ul就已经存在了, 所以能够添加事件
之所以this是li,是因为我们点击的是li, 而li没有click事件, 所以事件冒泡传递给了ul,ul响应了事件, 既然事件是从li传递过来的,所以ul必然指定this是谁
*/
$("ul").delegate("li", "click", function() {
// 这里的this为什么是li呢？不应该是ul吗?
// 因为这里存在时间冒泡，点击的是li，因为ul没有存在事件，所有没触发，但是li有事件，所以触发li的事件
console.log($(this).html());
});
});
</script>
</head>
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ul>
<button>新增一个li</button>
</body>
</html>
二十三：jQuery鼠标移入移出事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 200px;
background: red;
}
.son {
width: 100px;
height: 100px;
background: blue;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
// 编写jQuery相关代码
/*
mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件
*/
/*
$(".father").mouseover(function () {
console.log("father被移入了");
});
$(".father").mouseout(function () {
console.log("father被移出了");
});
*/ /*
mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件
推荐大家使用
*/
/*
$(".father").mouseenter(function () {
console.log("father被移入了");
});
$(".father").mouseleave(function () {
console.log("father被移出了");
});
*/ /*
$(".father").hover(function () {
console.log("father被移入了");
},function () {
console.log("father被移出了");
});
*/ $(".father").hover(function() {
console.log("father被移入移出了");
});
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
二十四：jQuery实现Tab栏切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 440px;
height: 298px;
border: 1px solid #000;
margin: 50px auto;
}
.nav > li {
list-style: none;
width: 110px;
height: 50px;
background: orange;
text-align: center;
line-height: 50px;
float: left;
}
.nav > .current {
background: #ccc;
}
.content > li {
list-style: none;
display: none;
}
.content > .show {
display: block;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
/*
// 1.监听选项卡的移入事件
$(".nav>li").mouseenter(function () {
// 1.1修改被移入选项卡的背景颜色
$(this).addClass("current");
// 1.2获取当前移入选项卡的索引
var index = $(this).index();
// 1.3根据索引找到对应的图片
var $li = $(".content>li").eq(index);
// 1.4显示找到的图片
$li.addClass("show");
});
// 1.监听选项卡的移出事件
$(".nav>li").mouseleave(function () {
// 1.1还原选项卡的背景颜色
$(this).removeClass("current");
// 1.2获取当前移出选项卡的索引
var index = $(this).index();
// 1.3根据索引找到对应的图片
var $li = $(".content>li").eq(index);
// 1.4隐藏对应的图片
$li.removeClass("show");
});
*/
// 1.监听选项卡的移入事件
$(".nav>li").mouseenter(function() {
// 1.1修改被移入选项卡的背景颜色
$(this).addClass("current");
// 1.2还原其它兄弟选项卡的背景颜色
$(this)
.siblings()
.removeClass("current");
// 1.3获取当前移出选项卡的索引
var index = $(this).index();
// 1.4根据索引找到对应的图片
var $li = $(".content>li").eq(index);
// 1.5隐藏非当前的其它图片
$li.siblings().removeClass("show");
// 1.6显示对应的图片
$li.addClass("show");
});
});
</script>
</head>
<body>
<div class="box">
<ul class="nav">
<li class="current">H5+C3</li>
<li>jQuery</li>
<li>C语言</li>
<li>Go语言</li>
</ul>
<ul class="content">
<li class="show"><img src="data:images/11.jpg" alt="" /></li>
<li><img src="data:images/12.jpg" alt="" /></li>
<li><img src="data:images/13.jpg" alt="" /></li>
<li><img src="data:images/14.jpg" alt="" /></li>
</ul>
</div>
</body>
</html>
二十五：jQuery显示和隐藏动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background: red;
display: none;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
// 编写jQuery相关代码
$("button")
.eq(0)
.click(function() {
// $("div").css("display", "block");
// 注意: 这里的时间是毫秒
$("div").show(1000, function() {
// 作用: 动画执行完毕之后调用
alert("显示动画执行完毕");
});
});
$("button")
.eq(1)
.click(function() {
// $("div").css("display", "none");
$("div").hide(1000, function() {
alert("隐藏动画执行完毕");
});
});
$("button")
.eq(2)
.click(function() {
$("div").toggle(1000, function() {
alert("切换动画执行完毕");
});
});
});
</script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
</body>
</html>
二十六：jQuery展开和收起动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 300px;
background: red;
display: none;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
// 编写jQuery相关代码
$("button")
.eq(0)
.click(function() {
$("div").slideDown(1000, function() {
// alert("展开完毕");
});
});
$("button")
.eq(1)
.click(function() {
$("div").slideUp(1000, function() {
// alert("收起完毕");
});
});
$("button")
.eq(2)
.click(function() {
$("div").slideToggle(1000, function() {
// alert("收起完毕");
});
});
});
</script>
</head>
<body>
<button>展开</button>
<button>收起</button>
<button>切换</button>
<div></div>
</body>
</html>
二十七：jQuey实现折叠菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
list-style: none;
width: 300px;
margin: 100px auto;
/*border: 1px solid #000;*/
}
.nav > li {
border: 1px solid #000;
line-height: 35px;
border-bottom: none;
text-indent: 2em;
position: relative;
}
.nav > li:last-child {
border-bottom: 1px solid #000;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.nav > li:first-child {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.nav > li > span {
background: url("images/arrow_right.png") no-repeat center center;
display: inline-block;
width: 32px;
height: 32px;
position: absolute;
right: 10px;
top: 5px;
}
.sub {
display: none;
}
.sub > li {
list-style: none;
background: mediumpurple;
border-bottom: 1px solid white;
}
.sub > li:hover {
background: red;
}
.nav > .current > span {
transform: rotate(90deg);
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
// 1.监听一级菜单的点击事件
$(".nav>li").click(function() {
// 1.1拿到二级菜单
var $sub = $(this).children(".sub");
// 1.2让二级菜单展开
$sub.slideDown(1000);
// 1.3拿到所有非当前的二级菜单
var otherSub = $(this)
.siblings()
.children(".sub");
// 1.4让所有非当前的二级菜单收起
otherSub.slideUp(1000);
// 1.5让被点击的一级菜单箭头旋转
$(this).addClass("current");
// 1.6让所有非被点击的一级菜单箭头还原
$(this)
.siblings()
.removeClass("current");
});
});
</script>
</head>
<body>
<ul class="nav">
<li>
一级菜单<span></span>
<ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
一级菜单<span></span>
<ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
一级菜单<span></span>
<ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</body>
</html>
二十八：jQuery下拉菜单的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
list-style: none;
width: 300px;
height: 50px;
background: red;
margin: 100px auto;
}
.nav > li {
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
}
.sub {
list-style: none;
background: mediumpurple;
display: none;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
/*
在jQuery中如果需要执行动画, 建议在执行动画之前先调用stop方法,然后再执行动画
*/
// 1.监听一级菜单的移入事件
$(".nav>li").mouseenter(function() {
// 1.1拿到二级菜单
var $sub = $(this).children(".sub");
// 停止当前正在运行的动画：
$sub.stop();
// 1.2让二级菜单展开
$sub.slideDown(1000);
});
// 2.监听一级菜单的移出事件
$(".nav>li").mouseleave(function() {
// 1.1拿到二级菜单
var $sub = $(this).children(".sub");
// 停止当前正在运行的动画：
$sub.stop();
// 1.2让二级菜单收起
$sub.slideUp(1000);
});
});
</script>
</head>
<body>
<ul class="nav">
<li>
一级菜单
<ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单</li>
<li>一级菜单</li>
</ul>
</body>
</html>
二十九：jQuery淡入淡出动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
background: red;
display: none;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
// 编写jQuery相关代码
$("button")
.eq(0)
.click(function() {
$("div").fadeIn(1000, function() {
// alert("淡入完毕");
});
});
$("button")
.eq(1)
.click(function() {
$("div").fadeOut(1000, function() {
// alert("淡出完毕");
});
});
$("button")
.eq(2)
.click(function() {
$("div").fadeToggle(1000, function() {
// alert("切换完毕");
});
});
$("button")
.eq(3)
.click(function() {
$("div").fadeTo(1000, 0.2, function() {
// alert("淡入完毕");
});
});
});
</script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>淡入到</button>
<div></div>
</body>
</html>
三十：jQuer动画函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
margin-top: 10px;
background: red;
}
.two {
background: blue;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
// 编写jQuery相关代码
$("button")
.eq(0)
.click(function() {
/*
$(".one").animate({
width: 500
}, 1000, function () {
alert("自定义动画执行完毕");
});
*/
$(".one").animate(
{
marginLeft: 500
},
5000,
function() {
// alert("自定义动画执行完毕");
}
);
/*
第一个参数: 接收一个对象, 可以在对象中修改属性
第二个参数: 指定动画时长
第三个参数: 指定动画节奏, 默认就是swing
第四个参数: 动画执行完毕之后的回调函数
*/
$(".two").animate(
{
marginLeft: 500
},
5000,
"linear",
function() {
// alert("自定义动画执行完毕");
}
);
});
$("button")
.eq(1)
.click(function() {
$(".one").animate(
{
width: "+=100"
},
1000,
function() {
alert("自定义动画执行完毕");
}
);
});
$("button")
.eq(2)
.click(function() {
$(".one").animate(
{
// width: "hide"
width: "toggle"
},
1000,
function() {
alert("自定义动画执行完毕");
}
);
});
});
</script>
</head>
<body>
<button>操作属性</button>
<button>累加属性</button>
<button>关键字</button>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
三十一：jQuery的stop和delay方法的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.one {
width: 100px;
height: 100px;
background: red;
}
.two {
width: 500px;
height: 10px;
background: blue;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
// 编写jQuery相关代码
$("button")
.eq(0)
.click(function() {
/*
在jQuery的{}中可以同时修改多个属性, 多个属性的动画也会同时执行
*/
/*
$(".one").animate({
width: 500
// height: 500
}, 1000); $(".one").animate({
height: 500
}, 1000);
*/
/*
delay方法的作用就是用于告诉系统延迟时长
*/
/*
$(".one").animate({
width: 500
// height: 500
}, 1000).delay(2000).animate({
height: 500
}, 1000);
*/
$(".one").animate(
{
width: 500
},
1000
);
$(".one").animate(
{
height: 500
},
1000
); $(".one").animate(
{
width: 100
},
1000
);
$(".one").animate(
{
height: 100
},
1000
);
});
$("button")
.eq(1)
.click(function() {
// 立即停止当前动画, 继续执行后续的动画
// $("div").stop();
// $("div").stop(false);
// $("div").stop(false, false); // 立即停止当前和后续所有的动画
// $("div").stop(true);
// $("div").stop(true, false); // 立即完成当前的, 继续执行后续动画
// $("div").stop(false, true); // 立即完成当前的, 并且停止后续所有的
$("div").stop(true, true);
});
});
</script>
</head>
<body>
<button>开始动画</button>
<button>停止动画</button>
<div class="one" style="display: none"></div>
<div class="two"></div>
</body>
</html>
三十二：jQuery添加节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
/*
内部插入
append(content|fn)
appendTo(content)
会将元素添加到指定元素内部的最后 prepend(content|fn)
prependTo(content)
会将元素添加到指定元素内部的最前面 外部插入
after(content|fn)
会将元素添加到指定元素外部的后面 before(content|fn)
会将元素添加到指定元素外部的前面 insertAfter(content)
insertBefore(content)
*/
$("button").click(function() {
// 1.创建一个节点
var $li = $("<li>新增的li</li>");
// 2.添加节点
$("ul").append($li);
$("ul").prepend($li); // $li.appendTo("ul");
// $li.prependTo("ul"); // $("ul").after($li);
// $("ul").before($li);
// $li.insertAfter("ul");
});
});
</script>
</head>
<body>
<button>添加节点</button>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ul>
<div>我是div</div>
</body>
</html>
三十三：jQuery删除节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
/*
删除
remove([expr])
删除指定元素
empty()
删除指定元素的内容和子元素, 指定元素自身不会被删除
detach([expr])
*/
$("button").click(function() {
// $("div").remove();
// $("div").empty();
// $("li").remove("#item");
// 利用remove删除之后再重新添加,原有的事件无法响应
// var $div = $("div").remove();
// 利用detach删除之后再重新添加,原有事件可以响应
// var $div = $("div").detach();
// console.log($div);
// $("body").append($div);
});
// $("div").click(function () {
// alert("div被点击了");
// });
});
</script>
</head>
<body>
<button>删除节点</button>
<ul>
<li class="item">我是第1个li</li>
<li>我是第2个li</li>
<li class="item">我是第3个li</li>
<li>我是第4个li</li>
<li class="item">我是第5个li</li>
<li id="item">我是第78个li</li>
</ul>
<div>
我是div
<p class="qw">我是段落</p>
<p>hahah</p>
</div>
</body>
</html>
三十四：jQuery替换节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script src="../jQuery基础/js/jquery-1.12.4.js"></script>
<script>
$(function() {
/*
替换
replaceWith(content|fn)
replaceAll(selector)
替换所有匹配的元素为指定的元素
*/
$("button").click(function() {
// 1.新建一个元素
var $h6 = $("<h6>我是标题6</h6>");
// 2.替换元素
// $("h1").replaceWith($h6);
$h6.replaceAll("h1");
});
});
</script>
</head>
<body>
<button>替换节点</button>
<h1>我是标题1</h1>
<h1>我是标题1</h1>
<p>我是段落</p>
</body>
</html>
三十五:jQuery复制节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
// clone([Even[,deepEven]])
/*
如果传入false就是浅复制, 如果传入true就是深复制
浅复制只会复制元素, 不会复制元素的事件
深复制会复制元素, 而且还会复制元素的事件
*/
$("button")
.eq(0)
.click(function() {
// 1.浅复制一个元素
var $li = $("li:first").clone(false);
// 2.将复制的元素添加到ul中
$("ul").append($li);
});
$("button")
.eq(1)
.click(function() {
// 1.深复制一个元素
var $li = $("li:first").clone(true);
// 2.将复制的元素添加到ul中
$("ul").append($li);
}); $("li").click(function() {
alert($(this).html());
});
});
</script>
</head>
<body>
<button>浅复制节点</button>
<button>深复制节点</button>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
</ul>
</body>
</html>
三十六：jQuery原理
<script>
/*
1.jQuery的本质是一个闭包
2.jQuery为什么要使用闭包来实现?
为了避免多个框架的冲突
3.jQuery如何让外界访问内部定义的局部变量
window.xxx = xxx;
4.jQuery为什么要给自己传递一个window参数?
为了方便后期压缩代码
为了提升查找的效率
5.jQuery为什么要给自己接收一个undefined参数?
为了方便后期压缩代码
IE9以下的浏览器undefined可以被修改, 为了保证内部使用的undefined不被修改, 所以需要接收一个正确的undefined
*/
(function(window, undefined) {
var jQuery = function() {
return new jQuery.prototype.init();
};
jQuery.prototype = {
constructor: jQuery
};
jQuery.prototype.init.prototype = jQuery.prototype;
window.jQuery = window.$ = jQuery;
})(window);
</script>
jQuery的基本操作总结的更多相关文章
- jQuery的基本操作
jQuery就是一个js的库· 主要分为两部分: 1·寻找元素 (选择器,筛选器) 2·操作元素 (CSS的操作,属性的操 ...
- <day005>jQuery事件、文档基本操作 + 点赞事件
任务1: jQuery的基本操作 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...
- js，jQuery和DOM操作的总结（二）
jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...
- JQuery系列（1） - 选择器、构造函数、实例方法
概述 JQuery是一个JavaScript库,jQuery的核心思想是“先选中某些网页元素,然后对其进行某种处理”(find something, do something),也就是说,先选择后处理 ...
- 一些通用的js工具类，添加自定义插件
common_t.js /** * 通用工具组件 对原有的工具进行封装,自定义某方法统一处理<br> * ^_^ * * Author: em.D * Date: 2016-05-17 * ...
- 跟随屏幕滚动层、遮罩层、获取Div相对定位、整个屏幕、html文档的jquery基本操作
一.层跟随屏幕滚动 <div style="width:120px;height:120px;border:1px solid red; position:absolute; left ...
- Jquery Table 的基本操作
Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结. 首先建立一个通用的表格css 和一个 表格Table: table { border-collapse: ...
- （17）什么是jQuery（jq的流程和基本操作）
jQuery就是对原生js二次封装的工具类(在jq叫构造函数) jQuery就是一堆方法的集合,jq对象就可以直接调用这些方法来完成指定的需求 使用jq的流程: 1.在HTML页面倒入jq.js文件 ...
- jquery基本操作笔记
来源于:http://www.cnblogs.com/webcome/p/5484005.html jq和js 可以共存,不能混用: 1 2 3 4 5 6 $('.box').css('backgr ...
- jquery 的一些基本操作
日常使用中的操作记录,持续更新中: ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
随机推荐
- 数据标注工具 doccano
目录 安装 运行 doccano 使用 doccanno 上传数据 定义标签 添加成员 开始标注 导出数据 查看数据 统计 数据标注工具 Label-Studio 安装 打开命令行(cmd.termi ...
- 从 Docker Hub 拉取镜像受阻？这些解决方案帮你轻松应对
最近一段时间 Docker 镜像一直是 Pull 不下来的状态,感觉除了挂,想直连 Docker Hub 是几乎不可能的.更糟糕的是,很多原本可靠的国内镜像站,例如一些大厂和高校运营的,也陆续关停了, ...
- 读懂反向传播算法（bp算法）
原文链接:这里 介绍 反向传播算法可以说是神经网络最基础也是最重要的知识点.基本上所以的优化算法都是在反向传播算出梯度之后进行改进的.同时,也因为反向传播算法是一个递归的形式,一层一层的向后传播误差即 ...
- FM20S用户手册-Linux开发环境搭建
- 分享一个国内可用的ChatGPT网站，免费无限制，支持AI绘画
背景 ChatGPT作为一种基于人工智能技术的自然语言处理工具,近期的热度直接沸腾. 作为一个AI爱好者,翻遍了各大基于ChatGPT的网站,终于找到一个免费!免登陆!手机电脑通用!国内可直接对话的C ...
- [oeasy]python0139_尝试捕获异常_ try_except_traceback
- 不但要有自己的报错 - 还要保留系统的报错 - 有可能吗? ### 保留报错 ! ...
- [oeasy]python0101_尾声_PC_wintel_8080_诸神的黄昏_arm_riscv
尾声 回忆上次内容 回顾了 ibm 使用开放架构 用 pc兼容机 战胜了 dec 小型机 apple 个人电脑 触击牺牲打 也破掉了 自己 软硬一体全自主的 金身 借助了 各种 软硬件厂商的 力量 最 ...
- 题解：AT_abc360_c [ABC360C] Move It
背景 机房大佬掉大分了,乐悲. 题意 给你几个箱子和每个箱子里装有的东西 \(a\) 和对应的重量 \(w\),现在要让每个箱子里都装有一个东西,每次可以移动任意一个箱子中的任意一个东西,代价为它的重 ...
- Python Kafka客户端confluent-kafka学习总结
实践环境 Python 3.6.2 confluent-kafka 2.2.0 confluent-kafka简介 Confluent在GitHub上开发和维护的confluent-kafka-pyt ...
- Vue 结合html2canvas和jsPDF实现html页面转pdf
结合html2canvas和jsPDF实现html页面转pdf By:授客 QQ:103355122 实践环境 win10 Vue 2.9.6 axios 0.18.0 html2ca ...