JQuery的初步覆盖性总结

pkcile
680 阅读4分钟

JQuery的初步覆盖性总结

1.JQuery的入门

1.1什么是JQuery

  • 我理解JQuery的作用：
1.对HTML节点元素的选定、遍历
2.对HTML属性的修改、内容的操作、节点的操作
3.事件、动画、AJAX的使用
  • JQuery与通用库，通用库的定义：
我们都知道JavaScript有很多库和框架，那么JQuery到底是来干什么的呢？ JQuery概况为是一个流行的通用库。
通用 JavaScript 库提供适应任何需求的功能
所有通用库都致力于通过将常用功能封装为新 API 来补偿浏览器接口、弥补实现差异。其中有些 API 与原生功能相似，而另一些 API 则完全不同。通用库通常会提供与 DOM 的交互，对 Ajax 的支持，还有辅助常见任务的实用方法。

1.2JQuery的引入和简单使用

  • JQuery的引入
JQuery的引入通常有两种，一种是用script标签；一种是使用npm引用；我们介绍第一种引用方式
script标签，实例：
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

可以注意到其中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）不会提
供恶意内容。
  • JQuery的简单使用
<!DOCTYPE html>
<html lang="zh">
<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>JQuery的初步使用</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
</head>
<body>
<script>
    //相当于window.onload

    //第一种写法
    $().ready(function() {
        alert('第一种写法');
    });
    //第二种写法
    jQuery().ready(function() {
        alert("第二种写法");
    });
    //第三种写法
    $(function() {
        alert("第三种写法");
    })
    //第四种写法
    $(document).ready(function() {
        alert("第四种写法");
    })
</script>
</body>
</html>

2.对HTML节点元素的选定、遍历

  • JQuery的基本格式
例子： $("p").html("文字内容：1111<h1>222</h1>");
第一部分：选择器，即("p")
第二部分：改变的类型，html、css、click
第三部分：改变的内容，("改变的文字内容")、(function() {alert("点击触发的函数");})
  • 基本选择器的基本使用
基本选择器，通配符(*)、标签名(p、div……)、id、class、混合（p, #id）
例子：
$("h1")、$("p")、$("h1,p,div")
完整：
$("h1").html("<h2>测试</h2>");
$("p").html("<h2>测试</h2>");
$("h1,p,div").html("<h2>测试</h2>");
  • 层次选择器的基本使用
层次选择器，后代元素、子元素、兄弟元素
例子：
$("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"));
})

3.对HTML属性的修改、内容的操作、节点的操作

HTML属性的修改

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("<h1>我来测试来了<h1>");
//设置html内容
$("div").html("<h1>我来测试来了</h1>");

节点的操作

文档节点操作，节点的追加、节点的替换、节点的删除、节点的复制、节点的包裹
完整：
//节点的追加
//子节点的追加
$("#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');

4.事件、动画、AJAX的使用

  • 事件的使用
事件类型：页面加载、点击、移入、移出、移动、获取焦点、提交（submit）、选择（select）
完整：
$("button").click(function() {
    alert("点击事件测试");          
});
  • 动画的使用
参数：
speed：slow、fast、固定值
easing：swing、linear
function：完成动画执行的函数
opacity：透明度
完整：
$("button").click(function() {
    $('ul').toggle('slow','linear');         
});
  • AJAX的使用
方法\说明
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);
    }
});

5.参考

1.Web高级编程老师的PPT 2.w3school，遍历，www.w3school.com.cn/jquery/jque… 3.jquery官网，jquery的cdn引入及说明，code.jquery.com/

avatar
文章
阅读
粉丝