pkcile
commented
3 years ago JQuery的测试文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// document.write("Hello world!");
</script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<style>
/* 初始化 */
div,
li,
pre,
ul,
body,
html {
margin: 0;
padding: 0;
}
ul {
width: 800px;
margin: 0 auto;
}
li {
list-style: none;
}
/* 每个区 */
li {
margin-top: 20px;
}
/* 代码区域 */
pre {
background-color: black;
color: white;
width: 800px;
overflow: auto;
/* margin: 0 auto; */
padding: 10px;
}
/* button区域 */
button {
display: block;
text-align: left;
background-color: white;
background-color: rgba(0, 0, 0, 0);
padding: 5px;
/* margin: 2px 0 3px 0; */
width: 820px;
padding: 10px;
}
/* 结果展示 */
div {
width: 800px;
margin: 0 auto;
}
.show_result {
background: rgba(11, 22, 33, .2);
}
</style>
</head>
<body>
<!--
1.想法：另一台服务器 --- 内存中 --- 物理介质中
2.知识总结：
html中显示标签，实体的使用
-->
<!-- <button>按钮</button> -->
<!-- <button id="id_test"></button> -->
<ul class="show_items">
<li>
<button>1.1 基本选择器，*、<b>标签名</b>、id、class、合并一起</button>
<pre>
$("ul li:eq(0)").click(function() {
$(".show_result").html("能获取的元素个数" + $("button").length);
})
</pre>
</li>
<li>
<button>1.2 层次选择器 后代元素、子元素、下一相邻元素、元素后兄弟元素</button>
<pre>
$("ul li:eq(1) button").click(function (e) {
$(".show_result").html("能获取的此处的下一相邻元素");
console.log(this);
console.log(e.target);
console.log($(this)[0]);
// this == e.target == $(this)[0]，基本相等
console.log($(".show_items+div")[0]);
//元素选择器选择不了/限定不了的；可以用元素的方法来继续限制，如元素的遍历、祖先、子、兄弟、过滤
console.log($(this).css("color", "red"));
// console.log($(this).next().css("backgroundColor", "blue"));
})
</pre>
</li>
<li>
<button>1.3 过滤选择器 基本过滤 内容过滤 可见性过滤 属性过滤 子元素过滤 表单对象过滤</button>
<pre>
$("ul li:eq(2) button").click(function() {
$(".show_result").html("获取div元素的最后一个，并设置其文字颜色为蓝色");
//基本过滤
$("div:last").css("color", "blue");
//内容过滤
$("div:contains('好看')").css("color", "red");
//可见性过滤
$("div:visible").css("fontSize", "28px");
//属性过滤
$("div[class]").css("background", "white");
//子元素过滤
$("ul li:nth-child(1)").css("background", "yellow");
//表单元素过滤
$("input:checked").css("width", "100px").css("height", "100px");
console.log($("input:checked"));
})
</pre>
</li>
<li>
<button>2.1 文档的遍历、祖先、子、兄弟、过滤 </button>
<pre>
$("ul li:eq(3) button").click(function() {
// $(".show_result").html("DOM文档操作之元素遍历");
$("div").each(function(index, element) {
// alert("遍历测试");
// console.log(element.innerHTML);
// alert(element.innerHTML + index + "测试");
$(".show_result").html("DOM文档操作之元素遍历测试" + (index + 1));
});
})
</pre>
</li>
<li>
<button>2.2 文档的属性操作 基本属性 样式属性 表单属性</button>
<pre>
$("ul li:eq(4) button").click(function() {
$(".show_result").html("DOM文档操作之元素属性操作");
//基本属性
//取得
console.log($("input").attr("type"));
//设置
$("input").attr("hello", "world");
//删除
$("input").removeAttr("hello", "world");
//样式属性
$(".show_result").html("DOM文档操作之元素样式属性操作");
// $("div").addClass("show_result");
// $("div").removeClass("show_result");
$("div").toggleClass("show_result");
//表单属性val
$("input[type=text]").val("show_result");
})
</pre>
</li>
<li>
<button>2.3 文档的内容操作 获取和设置html内容或文本内容</button>
<pre>
$("ul li:eq(5) button").click(function() {
$(".show_result").html("DOM文档操作之元素内容的操作");
//获取文本内容
console.log($("div").text());
//获取html内容
console.log($("div").html());
//设置文本内容
$("div").text("<h1>我来测试来了<h1>");
//设置html内容
// $("div").html("<h1>我来测试来了</h1>");
});
</pre>
</li>
<li>
<button>2.4 文档的节点操作 </button>
<pre>
$("ul li:eq(6) button").click(function() {
$(".show_result").html("DOM文档操作之文档节点的操作");
//节点的追加
//子节点的追加
$("#id_test").append("1");
$("#id_test").prepend("<h1>2</h1>");
$("<h1>3</h1>").appendTo("#id_test");
$("<h1>4</h1>").prependTo("#id_test");
//兄弟节点的追加
$("#id_test").after("<h1>5<h1>");
$("#id_test").before("<h1>6<h1>");
$("<h1>7</h1>").insertAfter("#id_test");
$("<h1>8<h1>").insertBefore("#id_test");
//节点的替换
// $("#id_test").replaceWith("<h1>替换测试</h1>");
$("<h1>替换测试2</h1>").replaceAll("#id_test");
//节点的删除
$("div").empty();
$("div").remove();
//节点的复制
$('li:eq(0)').clone().appendTo('ul');
$('li:eq(0)').clone(true).appendTo('ul');
$('ul').append($('li:eq(0)').clone(true));
console.log($('li:eq(0)').clone(true));
//节点的包裹
// 外包
$("li").wrap('<div></div>');
$("li").wrap('div');
$("ul").wrapAll('div');
//内包
$("ul").wrapInner('h1');
});
</pre>
</li>
<li>
<button>2.5 JQuery对象与DOM对象的互转</button>
<pre>
$("ul li:eq(7) button").click(function() {
$(".show_result").html("DOM文档操作之JQuery对象与DOM对象的互转");
alert("测试测试，自己体会");
});
</pre>
</li>
<li>
<button>3.1 事件的使用</button>
<pre>
$("ul li:eq(7) button").click(function() {
$(".show_result").html("DOM文档操作之JQuery对象与DOM对象的互转");
alert("测试测试，自己体会");
});
</pre>
</li>
<li>
<button>3.2 动画的使用</button>
<pre>
$("ul li:eq(9) button").click(function() {
$(".show_result").html("动画的使用");
$('ul').toggle('slow','linear');
});
</pre>
</li>
<li>
<button>3.3 ajax测试成功</button>
<pre>
$("ul li:eq(10) button").click(function() {
$(".show_result").html("AJAX的使用");
$.ajax('jquery.html', {
data: {name: 'wpk', test: '666'},
success: function(msg) {
alert("ajax测试成功");
console.log(msg);
}
});
});
</pre>
</li>
</ul>
<div>一个大肥妞，真的很好看</div>
<div> <input type="checkbox"> <input type="text" value="666"></div>
<div id="id_test">id_test</div>
<div id="id_copy_test"><h1>id_copy_test</h1></div>
<div class="show_result"></div>
<script>
console.log($("ul li"));
$("ul li:eq(0)").click(function () {
$(".show_result").html("能获取的button元素个数" + $("button").length);
});
$("ul li:eq(1) button").click(function (e) {
$(".show_result").html("能获取的此处的下一相邻元素");
console.log(this);
console.log(e.target);
console.log($(this)[0]);
// this == e.target == $(this)[0]，基本相等
console.log($(".show_items+div")[0]);
//元素选择器选择不了/限定不了的；可以用元素的方法来继续限制，如元素的遍历、祖先、子、兄弟、过滤
console.log($(this).css("color", "red"));
// console.log($(this).next().css("backgroundColor", "blue"));
});
$("ul li:eq(2) button").click(function() {
$(".show_result").html("获取div元素的最后一个，并设置其文字颜色为蓝色");
//基本过滤
$("div:last").css("color", "blue");
//内容过滤
$("div:contains('好看')").css("color", "red");
//可见性过滤
$("div:visible").css("fontSize", "28px");
//属性过滤
$("div[class]").css("background", "white");
//子元素过滤
$("ul li:nth-child(1)").css("background", "yellow");
//表单元素过滤
$("input:checked").css("width", "100px").css("height", "100px");
console.log($("input:checked"));
});
$("ul li:eq(3) button").click(function() {
// $(".show_result").html("DOM文档操作之元素遍历");
$("div").each(function(index, element) {
// alert("遍历测试");
// console.log(element.innerHTML);
// alert(element.innerHTML + index + "测试");
$(".show_result").html("DOM文档操作之元素遍历测试" + (index + 1));
});
});
$("ul li:eq(4) button").click(function() {
$(".show_result").html("DOM文档操作之元素属性操作");
//基本属性
//取得
console.log($("input").attr("type"));
//设置
$("input").attr("hello", "world");
//删除
$("input").removeAttr("hello", "world");
//样式属性
$(".show_result").html("DOM文档操作之元素样式属性操作");
// $("div").addClass("show_result");
// $("div").removeClass("show_result");
$("div").toggleClass("show_result");
//表单属性val
$("input[type=text]").val("show_result");
});
$("ul li:eq(5) button").click(function() {
$(".show_result").html("DOM文档操作之元素内容的操作");
//获取文本内容
console.log($("div").text());
//获取html内容
console.log($("div").html());
//设置文本内容
$("div").text("<h1>我来测试来了<h1>");
//设置html内容
// $("div").html("<h1>我来测试来了<h1>");
});
$("ul li:eq(6) button").click(function() {
$(".show_result").html("DOM文档操作之文档节点的操作");
//节点的追加
//子节点的追加
$("#id_test").append("1");
$("#id_test").prepend("<h1>2</h1>");
$("<h1>3</h1>").appendTo("#id_test");
$("<h1>4</h1>").prependTo("#id_test");
//兄弟节点的追加
$("#id_test").after("<h1>5<h1>");
$("#id_test").before("<h1>6<h1>");
$("<h1>7</h1>").insertAfter("#id_test");
$("<h1>8<h1>").insertBefore("#id_test");
//节点的替换
// $("#id_test").replaceWith("<h1>替换测试</h1>");
$("<h1>替换测试2</h1>").replaceAll("#id_test");
//节点的删除
$("div").empty();
$("div").remove();
//节点的复制
$('li:eq(0)').clone().appendTo('ul');
$('li:eq(0)').clone(true).appendTo('ul');
$('ul').append($('li:eq(0)').clone(true));
console.log($('li:eq(0)').clone(true));
//节点的包裹
// 外包
$("li").wrap('<div></div>');
$("li").wrap('div');
$("ul").wrapAll('div');
//内包
$("ul").wrapInner('h1');
});
$("ul li:eq(7) button").click(function() {
$(".show_result").html("DOM文档操作之JQuery对象与DOM对象的互转");
alert("测试测试，自己体会");
});
$("ul li:eq(8) button").click(function() {
$(".show_result").html("事件的使用");
$("div").toggle();
});
$("ul li:eq(9) button").click(function() {
$(".show_result").html("动画的使用");
$('ul').toggle('slow','linear');
});
$("ul li:eq(10) button").click(function() {
$(".show_result").html("AJAX的使用");
$.ajax('jquery.html', {
data: {name: 'wpk', test: '666'},
success: function(msg) {
alert("ajax测试成功");
console.log(msg);
}
});
});
</script>
</body>
</html>
JQuery的初步覆盖性总结
1.JQuery的入门
1.1什么是JQuery
1.2JQuery的引入和简单使用
可以注意到其中script标签存在integrity和crossorigin属性，JQuery官网的解释： The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libraries are loaded from a third-party source. 大概意思是：integrity和crossorigin属性保证资源不被篡改，可用于SRI检测 SRI检测，子资源完整性（SRI）的检查， Subresource Integrity (SRI) checking SRI英文参考：https://www.w3.org/TR/SRI/
crossorigin：可选。配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。crossorigin= "anonymous"配置文件请求不必设置凭据标志。crossorigin="use-credentials"设置凭据 标志，意味着出站请求会包含凭据。
integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI， Subresource Integrity）。如果接收到的资源的签名与这个属性指定的签名不匹配，则页面会报错， 脚本不会执行。这个属性可以用于确保内容分发网络（CDN，Content Delivery Network）不会提 供恶意内容。
<!DOCTYPE html>
例子： $("p").html("文字内容：1111
222
"); 第一部分：选择器，即("p") 第二部分：改变的类型，html、css、click 第三部分：改变的内容，("改变的文字内容")、(function() {alert("点击触发的函数");})基本选择器，通配符(*)、标签名(p、div……)、id、class、混合（p, #id） 例子： $("h1")、$("p")、$("h1,p,div") 完整： $("h1").html("
测试
"); $("p").html("测试
"); $("h1,p,div").html("测试
");层次选择器，后代元素、子元素、兄弟元素 例子： $("p span")、$("p>span")、$("p+div")、$("p~div") 完整： $("p span").html("捕捉到");
过滤选择器，基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤。 特征：以冒号开头 例子： $("div:last") 完整： //基本过滤 $("div:last").css("color", "blue"); //内容过滤 $("div:contains('好看')").css("color", "red"); //可见性过滤 $("div:visible").css("fontSize", "28px"); //属性过滤 $("div[class]").css("background", "white"); //子元素过滤 $("ul li:nth-child(1)").css("background", "yellow"); //表单元素过滤 $("input:checked").css("width", "100px").css("height", "100px");
1.遍历：常用的each()来迭代 例子： $(selector).each(function(index,element){}) 完整： $("div").each(function(index, element) { console.log(element.innerHTML); alert(element.innerHTML + index + "测试"); });
2.元素追加限制：即在获取元素后，可根据元素继续获得如祖先、后代、同胞或继续限定元素 常用场景，this代表的元素想要获取相邻元素时 例子：$(this).next().css("backgroundColor", "blue") 完整： $("ul li:eq(1) button").click(function (e) { console.log(this); console.log(e.target); console.log($(this)[0]); // this == e.target == $(this)[0]，基本相等 console.log($(".show_items+div")[0]); //元素选择器选择不了/限定不了的；可以用元素的方法来继续限制，如元素的遍历、祖先、子、兄弟、过滤 console.log($(this).css("color", "red")); console.log($(this).next().css("backgroundColor", "blue")); })
HTML属性的修改，基本属性 class属性 表单value属性、css属性 1.基本属性，文档元素属性的获得、设置、删除 2.class属性，CSS样式的添加、移除和添加移除开关 3.表单value属性，获取、设置 完整： //基本属性 //取得 console.log($("input").attr("type")); //设置 $("input").attr("hello", "world"); //删除 $("input").removeAttr("hello", "world");
//样式属性 $(".show_result").html("DOM文档操作之元素样式属性操作"); // $("div").addClass("show_result"); // $("div").removeClass("show_result"); $("div").toggleClass("show_result");
//表单属性val $("input[type=text]").val("show_result");
操作元素内容的方法主要包括html()和text()方法。 1.html()方法用于获取或设置元素的HTML内容， 2.text()方法用于获取或设置元素的文本内容。 完整： //获取文本内容 console.log($("div").text()); //获取html内容 console.log($("div").html()); //设置文本内容 $("div").text("
我来测试来了
"); //设置html内容 $("div").html("
我来测试来了
");文档节点操作，节点的追加、节点的替换、节点的删除、节点的复制、节点的包裹 完整： //节点的追加 //子节点的追加 $("#id_test").append("1"); $("#id_test").prepend("
2
"); $("3
").appendTo("#id_test"); $("4
").prependTo("#id_test"); //兄弟节点的追加 $("#id_test").after("5
"); $("#id_test").before("
6
"); $("
7
").insertAfter("#id_test"); $("8
").insertBefore("#id_test");
//节点的替换 // $("#id_test").replaceWith("
替换测试
"); $("替换测试2
").replaceAll("#id_test");//节点的删除 $("div").empty(); $("div").remove();
//节点的复制 $('li:eq(0)').clone().appendTo('ul'); $('li:eq(0)').clone(true).appendTo('ul'); $('ul').append($('li:eq(0)').clone(true)); console.log($('li:eq(0)').clone(true));
//节点的包裹
'); $("li").wrap('div'); $("ul").wrapAll('div');// 外包 $("li").wrap('
//内包 $("ul").wrapInner('h1');
事件类型：页面加载、点击、移入、移出、移动、获取焦点、提交（submit）、选择（select） 完整： $("button").click(function() { alert("点击事件测试");
});
参数： speed：slow、fast、固定值 easing：swing、linear function：完成动画执行的函数 opacity：透明度 完整： $("button").click(function() { $('ul').toggle('slow','linear');
});
方法\说明 load(url,[data],[function]) 载入远程HTML文件代码并插入至DOM元素中 $.ajax(url,[settings]) 通用的Ajax方法，可发送请求并载入数据 $.get(url,[data],[function],[type]) 通过GET方式发送请求并载入数据 $.post(url,[data],[function],[type]) 通过POST方式发送请求并载入数据 $.getJSON(url,[data],[function]) 通过GET方式发送请求并载入JSON数据 $.getScript(url,[function]) 通过GET方式发送请求并载入JavaScript数据 完整： $.ajax('jquery.html', { data: {name: 'wpk', test: '666'}, success: function(msg) { alert("ajax测试成功"); console.log(msg); } });