jQuery 学习笔记（一）

1-2 jQuery 语法 API

3- 网络 前后端数据交互 ajax

4-5 项目 列表渲染 ajax

6- 项目 UI框架 后台系统（方式）

要点

1. 了解什么是JS框架和库
2. 了解jQuery背景和优点
3. 掌握jQuery引入方式和入口函数的使用
4. 掌握jQuery事件绑定语法
5. 了解jQuery中的动画函数的使用
6. 掌握jQuery中文本内容的访问和写入
7. 掌握jQuery对象和DOM对象间的相互转换
8. 掌握css和标签属性的修改方法
9. 掌握jQuery常用选择器及方法

一、什么是JS框架和库

JS框架和库都是将原本JS的部分功能集合成一个JS文件，并且在使用的时候，引入这个文件，便可以使用这里面的功能。

库和框架区别：

• 框架（framework）通常是强制执行解决方案的一种方式，就像一个模具，需要你把所需的原材料放在模具里面，然后成品就会出来，由于模具已经建好，所以原材料不能乱加，人家要什么你就给什么，这时控制权在模具，框架就像一门语言，有自己的世界。
• 库（library）的形式就不同，控制权在用户手中，想实现什么功能就实现什么功能，库只是帮你封装了大量实用的函数，帮助你实现自己的目的。

举例说明：

假如我们要买一台电脑。框架为我们提供了已经装好的电脑，我们只要买回来就能用，但你必须把整个电脑买回来。这样用户自然轻松许多，但你想自定义某个部件将需要修改这个框架。

而库就如自己组装的电脑。库为我们提供了很多部件，我们需要自己组装，如果某个部件库未提供，我们也可以自己做。库的使用非常灵活，但没有框架方便。

二、什么是jQuery

jQuery也是JS框架中的一种，它是2006年由一个17岁的美国人——约翰·莱西格创作出来的，可以说这是曾经世界上流行最为广泛的JS框架，没有之一，统治了JS十多年时间。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N2QCD6vi-1628045964990)(./images/author.png)]

但是，现在jQuery并没有自称自己是个框架——

jQuery is a fast, small, and feature-rich JavaScript library——出自jQuery官网

API中文文档

2.1、jQuery优点

• 轻量级
• 免费开源
• 完善的文档
• 丰富的插件支持
• 完善的Ajax功能
• 不会污染顶级变量
• 强大的选择器功能
• 出色的DOM操作封装
• 出色的浏览器兼容性
• 可靠的事件处理机制
• 隐式迭代和链式编程操作

主旨口号：write less，do more（写的更少,干的更多，以更少的代码,实现更多的功能)

2.2、jQuery的基本功能

1. 访问和操作DOM元素
   既减少了代码的编写,又大大提高 了用户对页面的体验度。
2. 控制页面的CSS样式
   更方便快捷的来操作CSS样式，且jQuery 已经完成了浏览器兼容性处理。
3. 完善的Ajax网络请求
   使用AJAX可以极大提高用户体验和程序性能，jQuery框架中提供了专门处理网络请求的AJAX组件，使用jQuery中提供的方法来实现AJAX网络请求。
4. 页面标签事件处理
   让表现层与功能开发分离
5. 整套的动画特效实现
   可以满足开发中常见的动画效果实现，而且使用简单方便。
6. 好用的工具方法和强大的插件支持
   利用插件机制程序员可以方便的对原有的框架和功能进行扩展。这些插件的使用,极大丰富了页的展示效果

三、第一个jQuery程序

3.1、引入方式

1. 引入jquery-3.5.1.min.js文件，通过script标签的src属性引入；
2. 建议在body的尾部引入，效率更高；
3. 注意：不要在引入文件的那个script标签之间书写代码！
4. 版本问题：
   1. 要做IE兼容性处理，建议引入1.0版本
   2. 涉及安全性问题，需要3.0以上

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NNZm2IhX-1628045964999)(./images/System security vulnerabilities.jpg)]

3.2、入口函数

JQ的入口函数相当于原生JS的window.onload事件。

// 原生JS写法：
window.onload = function(){...}
  
// jQuery写法一：
jQuery(document).ready(function(){...})

console.log(jQuery===$);//说明$就是jQuery对象的简写
                                  
// jQuery写法二：
$(document).ready(function(){...})

// jQuery写法三：
$().ready(function(){...})

// jQuery写法四*重点*：
$(function(){...})

四、常用方法

4.1、事件绑定

语法：

$(selector).事件(function(){...});
$(selector).on(事件, function(){...});

代码举例：

// 原生的事件绑定
var btns = document.getElementsByTagName('button');

for(var i=0;i<btns.length;i++){
    btns[i].onclick=function(){
     	console.log(this);
    }
}

// onclick事件在JQ里可以直接写成click
$('button').click(function(){
    console.log(this);
})

// 没有封装的事件需要用on
$('body').on('touchstart', function () {
    $('p').css({'background': '#f00'});
    console.log("用户手指触摸到屏幕...");
});

4.2、显示、隐藏与切换

语法：

$(selector).show(time); // 显示， time表示动画时长，单位为毫秒，下同
$(selector).hide(time); // 隐藏
$(selector).toggle(time); // 切换
//注意：凡是函数都要加 括号，函数就是所谓的方法，方法就是函数！

代码举例：

 // eq(索引)就是获取元素列表对应索引的某个元素——是一个JQ对象
// 点击第1个按钮，让显示的元素隐藏
$('button:eq(0)').click(function(){
    // 参数 - 动画过渡时间(500)
    $('div').hide(500);
})

// 点击第2个按钮，让隐藏的元素显示
$('button:eq(1)').click(function(){
    $('div').show();
})

// 点击第3个按钮，切换元素的隐藏显示
$('button:eq(2)').click(function(){
    $('div').stop().toggle(300);//动画阻断
})

五、访问html内容和访问文本内容

5.1、JQ中访问和修改文本

语法：

$(selector).html();	 // 获取与修改选择器中的html内容
$(selector).text();	 // 获取与修改选择器中的文本内容

代码举例：

$('div').text('我是div标签');
$('div').html('<p>我是p标签</p>');

5.2、jQuery对象和DOM对象相互转换

使用jQuery（$）获取的页面元素叫做JQ对象

而原生JS中使用document获取的页面元素称为JS对象（DOM对象）

不同对象之间是不能使用对方的方法的。也就是说JS的对象只能JS调用，如果JQ想要用的话，就必须进行对象转换。比如：this<------>$(this)

$("div").click(function(){
	$(this).html("文本内容")
})

JS转JQ对象：

// 使用$()包裹起来就可以用转成成JQ对象
document.getElementsByTagName(element)    
==>   
$( document.getElementsByTagName(element) )

JQ转JS对象：

// 方法一：
$(element).get(0)  ==> document.getElementsByTagName(element)
// 方法二：
$(element)[0]  ==> document.getElementsByTagName(element)

六、css样式修改

语法：

$(selector).css()  

css本身也是一个函数，其中的格式有两种：

第一种为单属性修改：
$(selector).css('key', 'value');    //只能修改一个属性和一个属性值

第二种为多属性修改：
$(selector).css({
  'key': 'value',
  'key': 'value'
   ....
})                      //可以多属性修改，理论上可以修改无限多个属性

拓展：

访问某个元素的css属性，可以直接这么写：$(selector).css(k);

举例：

console.log( $('div').css('width') );     //这段代码可以获取div的宽度

七、标签属性的修改

7.1、修改属性的两个方法

src、href、class、style、action等都属于标签属性，标签属性的修改不包括在css属性修改的范围之内。它的修改方法是：

$(element).attr(“k”,”v”);
$(element).prop(“k”,”v”);

书写格式与css属性修改相同。

代码举例：

<script src="./jquery-3.5.1.min.js"></script>
<script>
$(function(){	
	$("button").click(function(){	
    // $('a').attr('href', 'http://baidu.cn').attr('target', '_blank');
		$("a").prop({
			"href":"http://baidu.com",
			"target":"_self"
		});
	})
})
</script>

<body>
<button>篡改跳转链接</button>
<div>
    <a href="http://wolfcode.cn" target="_blank">跳转到叩丁狼官网</a>
</div>
</body>

7.2、prop和attr的区别

• 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
• 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

<input id="chk1" type="checkbox" />
<input id="chk2" type="checkbox" checked="checked" />

像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。

console.log($("#chk1").prop("checked"));//false
console.log($("#chk2").prop("checked"));//true

如果上面使用attr方法，则会出现：

console.log($("#chk1").attr("checked"));//undefined
console.log($("#chk2").attr("checked"));//"checked"

尤其的在设置的时候prop的强大就体现出来了

// $("#chk2").attr("checked",undefined);
$("#chk2").prop("checked",false);

八、jQuery常用选择器

8.1、基础选择器

基本选择器	语法	功能
ID选择器	$(’#ID’)	找到匹配指定ID的元素
元素(标签)选择器	$(‘element’)	找到指定的元素
class选择器	$(’.class’)	找到匹配指定class的元素
通配符选择器	$(’*’)	匹配所有元素
并集(组合)选择器	$(‘sel,sel’)	多个选择器匹配的元素合并

层级选择器	语法	功能
后代选择器	$(‘parent child’)	当前元素的所有后代元素
直接后代选择器	$(‘parent>child’)	当前元素所有的子元素
下一个兄弟	$(‘prev+next’)	当前元素的下一个元素
后面所有兄弟	$(‘prev~siblings’)	当前元素后面的所有兄弟元素

提供可练习的html代码：

<button>选择所有段落标签</button>
<button>选择class为left的标签</button>
<button>选择id为box的标签</button>
<button>选择所有不分类型标签</button>
<button>选择ul里面的li标签</button>
<button>选择body下的第一级所有标签并添加边框</button>
<button>选择p后的一个div</button>
<button>选择p后的所有div</button>
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<div class="left">类选择器</div>
<div class="left">类选择器</div>
<div id="box">id选择器</div>
<ul>
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
</ul>
<ol>
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
</ol>

8.2、筛选选择器

基本筛选选择器	语法
获取第一个元素	$(‘ele:first’)
获取最后一个元素	$(‘ele:last’)
获取指定索引的元素	$(‘ele:eq(index)’) 方法eq(index)
获取所有元素除某个	$(‘ele:not(selector)’)
获取索引为偶数的元素	$(‘ele:even’)
获取索引为奇数的元素	$(‘ele:odd’)
获取大于该索引元素	$(‘ele:gt(index)’)
获取小于于该索引元素	$(‘ele:lt(index)’)
获取所有标题类型元素	$(‘ele:header’)

提供可练习的html代码：

<button>选择第一个li</button>
<button>选择最后一个li</button>
<button>选择所有li排除最后一个</button>
<button>选择所有li排除第二个</button>
<button>选择所有索引值为偶数个li</button>
<button>选择所有索引值为奇数个li</button>
<button>选择大于第5个的li</button>
<button>选择小于第5个的li</button>
<button>选择等于第5个的li</button>
<button>选择所有标题标签</button>
<ul>
	<li>这是一个li</li>
	<li>这是一个li</li>
	<li>这是一个li</li>
	<li>这是一个li</li>
	<li>这是一个li</li>
	<li>这是一个li</li>
	<li>这是一个li</li>
	<li>这是一个li</li>
	<li>这是一个li</li>
	<li>这是一个li</li>
</ul>
<h1>标题1标签</h1>
<h2>标题2标签</h2>
<h3>标题3标签</h3>

8.3、级别选择器相关方法

8.3.1、parent方法

$(selector).parent() 表示选中所有匹配元素的唯一父元素。

练习（关闭悬浮广告）

提供html与css代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关闭悬浮广告</title>
    <style>
        div {
            width: 150px;
            height: 300px;
            border: 1px solid #000;
            background: #ccc;
            position: fixed;
            top: 150px;
        }

        .left {
            left: 0;
        }

        .right {
            right: 0;
        }

        .left button {
            float: right;
        }

        .right button {
            float: left;
        }
    </style>
</head>
<body>
    <div class="left">左边的广告<button>×</button></div>
    <div class="right">右边的广告<button>×</button></div>
    <p>段落</p>
  	<!-- ...这里是100个p标签 -->
    <p>段落</p>
</body>
</html>

《关闭悬浮广告》解决方案：

// 原生JS方法：
// 选中所有button
var oBtns = document.getElementsByTagName('button');
for(var i=0;i<oBtns.length;i++){
    oBtns[i].onclick = function(){
        // 找到父级，把父级display=none
        // console.log( this.parentNode );
        this.parentNode.style.display = "none";
    }
}

// JQ方法：
$('button').click(function(){
    // 选择这个按钮的父级 - 这个$(this)     父级.parent()
    $(this).parent().hide();
})

8.3.2、 siblings方法

$(selector).siblings() 表示选中某个元素同级的元素，括号内有写元素，表示选中同级的某个元素，如果没有书写，则表示选中同级的所有元素！

练习（排他思想）

提供html与css代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排他思想</title>
    <style>
        button{background: none;}
    </style>
</head>
<body>
    <button>第1个按钮</button>
    <button>第2个按钮</button>
    <button>第3个按钮</button>
    <button>第4个按钮</button>
    <button>第5个按钮</button>
    <button>第6个按钮</button>
</body>
</html>

《排他思想》解决方案：

// 原生JS方法
var btns = document.getElementsByTagName('button');
for(var i=0;i<btns.length;i++){
    btns[i].onclick = function(){
      for(var k=0;k<btns.length;k++){
          btns[k].style.background = "none";
      }
      this.style.background = "pink";
    }
}

// JQ方法：
$('button').click(function(){
    // siblings()兄弟节点，
    // 两个方法都是作用于$(this)的，可以使用链式编程
    $(this).css('background', 'skyblue').siblings('button').css('background', 'none');
})

8.3.3、 children方法

$(selector).children() 表示选中某个元素的子级元素，括号内有写元素，表示选中子级中的某个元素，如果没有书写，则表示选中子级的所有元素！

练习（书城特效）：

提供html与css代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书城特效</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
            list-style: none;
        }

        ul {
            background: url(images/top.png) no-repeat;
            width: 320px;
            border: 1px solid #000;
            margin: 50px auto;
            padding-top: 50px;
        }

        li {
            padding-left: 20px;
            line-height: 50px;
            color: #f60;
            cursor: pointer;
        }

        p {
            background: url(images/01.jpg) no-repeat 0 center;
            padding-left: 30px;
        }

        img {
            display: none;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <p>怎样在不为人知的情况 15.10元</p>
            <img src="images/img.jpg" alt="">
        </li>
        <li>
            <p>怎样在不为人知的情况 15.10元</p>
            <img src="images/img.jpg" alt="">
        </li>
        <li>
            <p>怎样在不为人知的情况 15.10元</p>
            <img src="images/img.jpg" alt="">
        </li>
        <li>
            <p>怎样在不为人知的情况 15.10元</p>
            <img src="images/img.jpg" alt="">
        </li>
        <li>
            <p>怎样在不为人知的情况 15.10元</p>
            <img src="images/img.jpg" alt="">
        </li>
        <li>
            <p>怎样在不为人知的情况 15.10元</p>
            <img src="images/img.jpg" alt="">
        </li>
        <li>
            <p>怎样在不为人知的情况 15.10元</p>
            <img src="images/img.jpg" alt="">
        </li>
        <li>
            <p>怎样在不为人知的情况 15.10元</p>
            <img src="images/img.jpg" alt="">
        </li>
        <li>
            <p>怎样在不为人知的情况 15.10元</p>
            <img src="images/img.jpg" alt="">
        </li>
        <li>
            <p>怎样在不为人知的情况 15.10元</p>
            <img src="images/img.jpg" alt="">
        </li>
    </ul>
</body>
</html>

《书城特效》解决方案：

// 原生JS方法
var lis = document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
    // 鼠标移入
    lis[i].onmouseenter = function(){
        // 让p标签隐藏
        this.children[0].style.display = "none";
        // 让img显示
        this.children[1].style.display = "block";
    }
    // 鼠标移出
    lis[i].onmouseleave = function(){
        // 让p标签显示
        this.children[0].style.display = "block";
        // 让img隐藏
        this.children[1].style.display = "none";
    }
}

// JQ 方法

// 初级解决方案
// mouseover 、 mouseout 是一对儿，机制相同。会冒泡
// mouseenter 、 mouseleave是一对儿，机制相同。不冒泡
$('li').mouseenter(function(){
  $(this).children('img').show().siblings().hide();
})
$('li').mouseleave(function(){
  $(this).children('p').show().siblings().hide();
})

// 中级解决方案
$('li').hover(function(){
  $(this).children('img').show().siblings().hide();
}, function(){
  $(this).children('p').show().siblings().hide();
})

// 高级解决方案
$('li').hover(function(){
  $(this).children().toggle();
})