Jquery 小总结文档:API中文文档一、什么是JS框架和库 (第一天) 框架通常是强制执行解决方案的一种方式库

文档:API中文文档

一、什么是JS框架和库 (第一天)

框架通常是强制执行解决方案的一种方式
库的形式不同,库只是封装了大量实用的函数,实现自己想要实现的功能

二、什么是jQuery

Jquery是js框架的一种
Jquery的优点,轻量级,免费开源,完善的文档,丰富的插件支持...
jQuery的基本功能,访问和操作DOM元素,完善的Ajax请求....

三、第一个jQuery程序

3.1 引入方式

1.通过script标签src属性引入;

2.建议在body的尾部引入，效率更高；

3.做兼容引1.0版本,安全性引3.0以上版本

3.2 入口函数

// 原生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转JQ对象
// 使用$()包裹起来就可以用转成成JQ对象
document.getElementsByTagName(element)    
==>   
$( document.getElementsByTagName(element) )
this<------>$(this)

// JQ转JS对象
// 方法一：
$(element).get(0)  ==> document.getElementsByTagName(element)
// 方法二：
$(element)[0]  ==> document.getElementsByTagName(element)

六、css样式修改

//语法  $(selector).css()  
console.log( $('div').css('width') );     
//这段代码可以获取div的宽度    只有一个参数 获取其值

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

七、标签属性的修改

7.1、修改属性的两个方法

// 修改标签的属性
$(element).attr(“k”,”v”);
$(element).prop(“k”,”v”);

  <a href="https://www.baidu.com" target="_blank">百度</a>
  <button>按钮</button>
  // 一个参数获取
  console.log($("a").attr("href"));
  // 两个参数 修改
  $("a").attr("href","https://www.wolfcode.cn");
  // 传一个对象参数 -----设置多个属性
   $("a").attr({
        "href":"https://www.wolfcode.cn",
         target:"_self"
    }).text("突突突"); 
   //1.一个参数------获取
   console.log($("a").prop("href"));
   // 2.两个参数-------设置
   $("a").prop("href","https://www.wolfcode.cn");
   // 传一个对象参数 -----设置多个属性
   $("a").prop({
         "href":"https://www.wolfcode.cn",
           target:"_self"
    }).text("叩丁狼");

7.2、prop和attr的区别

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

<input id="chk1" type="checkbox" />
<input id="chk2" type="checkbox" checked="checked" /> 
    <div yyds="有一点骚"></div>
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script>
  // 1.表单元素中的体现
  // 表单元素中(原生的属性中)   尽可能使用prop方法
         console.log($("#ch1").attr("checked"));// checked
        console.log($("#ch2").attr("checked"));// undefined
        console.log("--------------------------------");
        console.log($("#ch1").prop("checked"));// true
        console.log($("#ch2").prop("checked"));// false 
        // $("#ch1").prop("checked",false);
        // $("#ch1").attr("checked",false);
   // 2. 自定义属性中的体现
   // 自定义属性中  只能使用attr方法
        // console.log($("div").prop("yyds"));
        // console.log($("div").attr("yyds"));
 $("#chk2").prop("checked",false);

7.3、parent方法

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

7.4、 siblings方法(排他)

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

7.5、children方法

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

八、动态设置class的方法 (第二天)

8.1、索引值方法

$(selector).index();// 获取索引值方法

// 原生方法
var btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
    btns[i].setAttribute("myindex", i);
    btns[i].onclick = function () {
      	console.log(this.getAttribute("myindex"));
    };
}
// JQ index方法
$("button").click(function(){	
  var index = $(this).index();
  console.log(index);
})

8.2、 addClass与removeClass方法

// 给某个元素添加类名，理论上，一个标签可以添加无数多个类名，用空格分开
$(selector).addClass(“className1  className2  className3”)
// 给某个元素移除类名
$(selector).removeClass(“className1  className2  className3”)

8.3、 toggleClass 方法

// 切换某个元素的类名（添加或删除）
$(selector).toggleClass(“className”)

九、表单相关方法

9.1、val获取表单中的值

// ()内部写入文本可以实现修改功能
$('input').val()
$('textarea').val()

<select id="selectBrowser">
    <option value="1">pc</option>
    <option value="2">phone</option>
    <option value="3">pad</option>
</select>
<script>
    $("#selectBrowser").change(function(){
        console.log($(this).val());
    })
</script>

9.2、trim去除前后空格

$.trim()    // 表单输入时去除前后空格，我们可以用：

var val = $('input').val();
if( $.trim(val)=="" ){
  	alert('请重新输入');
}

十、节点控制

10.1、增加子节点（重点）

// 在某个元素的子级中，往后面添加节点
$(element).append('子节点')
// 在某个元素的子级中，往前面添加节点
$(element).prepend('子节点')

<input type="text">
  <button class="before">往前添加</button>
<button class="after">往后添加</button>
<ul>
  <li>我本来就存在</li>
</ul>
<script>
  // 点击增加一个li标签在ul的最前
  $('.before').click(function(){
    var val = $.trim($('input').val());
    if(val)$('ul').prepend('<li>'+val+'</li>');
    $('input').val("");
  })
  // 点击增加一个li标签在ul的最后
  $('.after').click(function(){
    var val = $.trim($('input').val());
    if(val)$('ul').append('<li>'+val+'</li>');
    $('input').val("");
  })
</script>

10.2、增加同级节点（重点）

// 在element之前添加兄弟节点
$(element).before('兄弟节点') 
// 在element之后添加兄弟节点
$(element).after('兄弟节点')

<button>兄弟前添加</button>
<button>兄弟后添加</button>
<div>
  <p class="brother"></p>
</div>
<script>
  // 点击增加一个标签在p.brother之前
  $('button').eq(0).click(function(){
    $('.brother').before('<p>我是前p</p>');
  })
  // 点击增加一个标签在p.brother之后
  $('button').eq(1).click(function(){
    $('.brother').after('<p>我是后p</p>');
  })
</script>

10.3、节点的删除（重点）

// 将element节点中的子级节点包括内容清空
$(element).empty();
// 删除element节点包括内容
$(element).remove();

$('button').eq(0).click(function(){
  $('ul').empty();  // 清空ul中的内容
})
$('button').eq(1).click(function(){
  $('ul').remove(); // 直接删除ul
})

104、节点的替换

// 用后者替代前者   $(element1).replaceWith(element2);

$('button').click(function(){
    // p替代li
    $('li').eq(1).replaceWith(`<p>这是个p标签</p>`);
})

十一、事件委托

事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。

事件委托的作用：

性能要好（为多个相同元素绑定事件）
针对新创建的元素，直接可以拥有事件（为不存在的元素绑定事件）

// 事件和函数是必填的，子级选择器选填（不填就是普通事件绑定）
$(selector).on(事件,children,function(e){...})

// 1ms之后再添加一下li元素
setTimeout(function () {
  	$('ul').append('<li>6</li>')
}, 1)
// 普通事件绑定（办不到）
// $('li').click(function(){
//     var index=$(this).index()+1
//     console.log(index);
// })
// 事件委托（重点）
$('ul').on('click', 'li', function () {
    var index = $(this).index() + 1
    // 此时this指向的是‘li’
    console.log(this, index);
})
// 事件解绑
$('ul').click(function(){
    console.log(111);
})
$("button").click(function(){
    $('ul').off('click', 'li')
})
// 另一种诡异写法（JQ项目很多这样的写法）
setTimeout(function () {
  	$('ul').append('<li onclick="getIndex(this)">6</li>')
}, 1)
function getIndex(myThis){
    var index=$(myThis).index()+1
    console.log(index);
}

十二、键盘事件和键码

12.1、键盘事件

$(selector).事件(function(){...});
$(selector).keydown(function(){...});// 键盘按下事件
$(selector).keyup(function(){...});// 键盘松开事件

12.2、键码

e.keyCode -- 键码

十三、计算机网络基础

web服务三要素：

统一资源标识符（URI），这是一个统一的为资源定位的系统
超文本传送协议（HTTP）
超文本标记语言（HTML）

13.1、CS 架构 VS BS 架构

CS 即 Client/Server（客户机/服务器）结构

BS 即 Browser/Server（浏览器/服务器）结构

13.2、浏览器访问网站的基本过程

13.2.1、基本概念

IP地址

要想使网络中的计算机能够进行通信，必须为每台计算机指定一个标识号，通过这个标识号来指定接受数据的计算机或者发送数据的计算机。在TCP/IP协议中，这个标识号就是IP地址，它可以唯一标识一台计算机。相当于电话号码和电话。

查看本机IP

开始菜单-->运行-->cmd

ipconfig

端口号

通过IP地址可以连接到指定计算机，但如果想访问目标计算机中的某个应用程序，还需要指定端口号。在计算机中，不同的应用程序是通过端口号区分的。

查看某个程序的端口号

开始菜单-->运行-->cmd

输入 netstat -ano 即会显示所有进程占用的端口和进程的ID，并以数字的形式显示端口和IP。

然后打开进程管理器，在打开【进程】选项卡，然后点击菜单【查看】-【选择列】勾选【pid(进程标识符)】。然后自己匹配你要找的那个进程的PID即可查看到它所占用的端口。

Hosts文件

Hosts是一个没有扩展名的系统文件，可以用记事本等工具打开，其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”，当用户在浏览器中输入一个需要登录的网址时，系统会首先自动从Hosts文件中寻找对应的IP地址，一旦找到，系统会立即打开对应网页，如果没有找到，则系统会再将网址提交DNS域名解析服务器进行IP地址的解析。

查看Hosts

C:\Windows\System32\drivers\etc

0.0.0.0 域名

DNS

域名系统（英文：DomainNameSystem，缩写：DNS）是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。DNS使用TCP和UDP端口53。当前，对于每一级域名长度的限制是63个字符，域名总长度则不能超过253个字符。

13.2.2、基本流程

用户输入网址，浏览器请求DNS服务器, 获取域名对应的IP地址，请求连接该IP地址服务器，发送资源请求. (遵循HTTP协议) web服务器接收到请求, 并解析请求, 判断用户意图，获取用户想要的资源，(链接数据库从数据中获取数据) 将资源返回给http服务器程序， http服务器程序将资源数据通过网络发送给浏览器（响应给浏览器），浏览器解析呈现请求的数据

浏览器访问网站.png

13.2.3、http响应response报文格式

响应行
- 协议版本
- 状态码
  - HTTP/1.1 中定义了 5 类状态码。状态码由三位数字组成，第一个数字定义了响应的类别
    - 1XX 提示信息 - 表示请求已被成功接收，继续处理。
    - 2XX 成功 - 表示请求已被成功接收，理解，接受。
    - 3XX 重定向 - 要完成请求必须进行更进一步的处理。
    - 4XX 客户端错误 - 请求有语法错误或请求无法实现。
    - 5XX 服务器端错误 - 服务器未能实现合法的请求。
- 状态说明
响应头
- [头名: 头值]
空行
- "\r\n"
响应体
- 返回给客户端的具体数据

十四、AJAX技术简介

定义：ajax技术就是在页面不刷新情况下，和服务器端进行交互的技术。

14.1、兼容处理

 function createAjax() {   
 var request; 
 if(Windows.XMLHttpRequest){     
     request=new XMLHttpRequest();  
 }else{     
     request=new ActiveXObject("Microsoft.XMLHTTP"); //IE 5,IE6    
 }}

14.2、响应处理和响应流程

readyState 总共有 5 个状态值，分别为 0 ~ 4，每个值代表了不同的含义：
- 0：初始化，AJAX 对象还没有完成初始化
- 1：载入，AJAX 对象开始发送请求
- 2：载入完成，AJAX 对象的请求发送完成
- 3：解析，AJAX 对象开始读取服务器的响应
- 4：完成，AJAX 对象读取服务器响应结束
status 表示响应的 HTTP 状态码，常见状态码如下：
- 200 OK：请求成功
- 302 Found：重定向，新的 URL 会在 response 中的 Location 中返回，浏览器将会使用新的 URL 发出新的 Request
- 304 Not Modified：已缓存，文档已经被缓存，直接从缓存调用
- 400 Bad Request：客户端请求有语法错误，不能被服务器所理解
- 403 Forbidden：服务器收到但拒绝服务，引用外部资源触发防盗链
- 404 Not Found：找不到资源，请求资源不存在
- 500 Internal Server Error：服务端错误，服务器发生了不可预期的错误
- 503 Server Unavailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

14.3、使用ajax发送get请求

// 1、创建 AJAX 对象；new XMLHttpRequest()
// 2、设置请求路径，请求方式等；ajax.open(请求方式，路径)
// 3、绑定监听状态改变的处理函数，在处理函数可获取响应数据；ajax.onreadystatechange
// 4、发送请求。ajax.send

<body>
    <button id="btn">发送get请求</button>
<script>
    btn.onclick = function(){
        // 1、创建 AJAX 对象；
        var ajax = new XMLHttpRequest();
        // 2、设置请求路径，请求方式等；ajax.open(请求方式，路径)
        ajax.open('get', 'http://xxxxxxx');
        // 3、绑定监听状态改变的处理函数，在处理函数可获取响应数据；
        ajax.onreadystatechange = function(){
            // console.log(ajax.readyState);
            if(ajax.readyState==4 && ajax.status==200){
                // 此时获取服务器发过来的数据
                console.log(ajax.responseText)	
                //  JSON.stringify(),JSON.parse()
                // 得到的是字符串对象，需要用JSON.parse(txt)转对象
            }
        }
        // 4、发送请求。
        ajax.send();
    }
</script>
</body>

14.4、使用ajax发送post请求

<body>
	用户名：<input id="user" type="text"><br>
    密码：<input id="pwd" type="password"><br>
    <button id="btn">登录</button>
<script>
    // 后台要求携带参数：
    // 用户名 - username
    // 密码 - password
    btn.onclick = function () {
        // 1、创建 AJAX 对象
        var ajax = new XMLHttpRequest();
        // 2、设置请求路径，请求方式等
        ajax.open("post", "http://xxxxxxxxxxxx");
        // 3、设置请求头，不然无法传递参数到后台
        ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        // 4、绑定监听状态改变的处理函数
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {
                console.log(ajax.responseText);
            }
        }
        // 5、发送请求并携带参数
        ajax.send(`username=${user.value}&password=${pwd.value}`)
    }
</script>
</body>

总结：

需要获取数据的时候，使用get请求
需要传递参数给后台并完成某些功能的时候，使用post请求

14.5、jQuery 中 ajax 使用

使用.ajax()方法发送get请求：

$.get()方法接收四个参数：

url：请求 URL 地址
data：请求参数。
callback：请求成功时回调函数。
type：预期服务器返回的数据类型。

$('button').click(function(){
  $.ajax({
    type: "GET",
    url: "http://kumanxuan1.f3322.net:8809/travels/query",
    success: function(res){
      console.log(res);
    }
  })
})

使用.ajax()方法发送POST请求

$.post()方法同样接收四个参数：

url：请求 URL 地址
data：请求参数。
callback：请求成功时回调函数。
type：预期服务器返回的数据类型。

// 请求地址：
http://kumanxuan1.f3322.net:8809/users/login
// 携带参数：
用户名 - username
密码 - password
$('button').click(function(){
  $.ajax({
    url: "http://kumanxuan1.f3322.net:8809/users/login",
    type: "POST",
    data: {
      username: $('#username1').val(),
      password: $("password1").val()
    },
    success: function(res){
      console.log(res)
    }
  })
})

14.6、本地存储

14.6.1 localStorage

特点：

永久存在，除非主动删除；
同源都可以访问

语法：

保存数据：localStorage.setItem(key, value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();

14.6.2、sessionStorage

特点：

临时会话，关闭浏览器将不再存在；
同源都可以访问。

语法：

保存数据：sessionStorage.setItem(key, value);
读取数据：sessionStorage.getItem(key);
删除单个数据：sessionStorage.removeItem(key);
删除所有数据：sessionStorage.clear();

十五、简述前端框架

前端框架主要分为两种：

15.1、技术框架

JQuery、VueJs、ReactJs等，这些框架大多用于操作DOM，或者是处理数据，对于页面效果或数据处理是强项，但对UI美观能力较弱。

15.2、UI框架

Bootstrap、WEUI、VantUI、Ant-design、ElementUI等，这类框架是有人写好了大多数样式，你可以借助这些框架实现快速布局。

15.3、Bootstrap框架

官网： getbootstrap.com/

中文网址：www.bootcss.com/

15.4、Swiper轮播图

网址: www.swiper.com.cn/

15.4、jQuery的后台系统

4.1、iframe标签（重点）

功能：做页面嵌套

场景：后台系统切换子页面的时候经常用到

4.2、load方法（重点）

语法：

$(selector).load("xxx.html");

功能：载入 HTML 文件代码并插入至 DOM 中。

如果想从vscode发布到浏览器查看，需要使用 live server 查看，不要用 open in default browser 。

Jquery 小总结