Ashun's 技術駅
ashun
2022-02-14
目录

22jQuery

# jQuery

[info] JavaScript 函数库

处理浏览器不兼容性并简化 HTML DOM 操作、事件处理、动画和 Ajax。

# 一、引入jq

//1.8以上的版本不再兼容ie8浏览器
<script src="<https://lib.baomitu.com/jquery/3.6.0/jquery.min.js>"></script>
1
2

# 二、使用jq

$("选择器")
1

# 三、文档就绪

$(function(){})

$(document).ready(function(){});
1
2
3

# 四、$和jQuery

$完全相等于jQuery
1

# 五、解决jq名称冲突

var jq=jQuery.noConflict()
1

# 六、选择器

//id选择器
var myElement = $("##id01");

//class
var myElements = $(".intro");

//标签名
var myElements = $("p");

//当前元素
$(this)
1
2
3
4
5
6
7
8
9
10
11

# 七、jq和js转换

//使用jq选择器获取的后的元素都称为jq对象。
//jq对象只能使用jq的方法，无法使用js原生方法。

//jq转js
console.log($("##app")[0].innerText)

//js转jq   
let app = document.querySelector("##app")
console.log($(app).html())
1
2
3
4
5
6
7
8
9

# 八、jq效果

# 1、样式操控

//样式化 HTML 元素
myElement.css("font-size","35px");

//添加class
myElement.addClass("");

//删除class
myElement.removeClass("");
1
2
3
4
5
6
7
8

# 2、隐藏/显示、淡入淡出、滑动

//隐藏 HTML 元素
myElement.hide();

//显示 HTML 元素
myElement.show();

//切换显示和隐藏
toggle()

//淡入
fadeIn()

//淡出
fadeOut()

//淡入淡出切换
fadeToggle()

//向下滑动
slideDown()

//向上滑动
slideUp()

//滑动切换
slideToggle()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 3、动画

//创建动画
$(selector).animate({params},speed,callback);

//停止动画
stop()

//链式调用
//jq允许我们在相同的元素上运行多条 jQuery 命令
$(".box").css({"width":"100px"}).addClass("box2")
1
2
3
4
5
6
7
8
9

# 九、jq html相关

# 1、文本操控

//获取和修改文本
myElement.text()

//获取和修改html（包括标签）
myElement.html()

//获取和修改value值
myElement.val()

//获取和修改属性
myElement.attr()

//获取和修改该元素的索引值
.index()
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 2、节点操控

//添加
append()

prepend()

after()

before()

//删除被选元素
remove()

//删除被选元素的子元素
empty()
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 3、尺寸

//设置或返回元素的宽度（不包括内边距、边框或外边距）
width()
height()

//返回元素的宽度（包括内边距）
innerWidth()
innerHeight()

//方法返回元素的宽度（包括内边距和边框）
outerWidth()
outerHeight()
1
2
3
4
5
6
7
8
9
10
11

# 4、jq遍历

//父元素
parents()

//子元素
children()

//找到被选元素
find()

//被选元素的所有同胞元素
siblings()

//下一个同胞元素
next()

//被选元素的所有跟随的同胞元素
nextAll()

//返回介于两个给定参数之间的所有跟随的同胞元素
nextUntil()

//下一个同胞元素
prev()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 5、jq过滤

//首个元素
first()

//最后一个元素
last()

//指定索引号的元素
eq()

//匹配的元素会被返回
filter()

//返回不匹配标准的所有元素
not()
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 十、jq ajax

# 1、创建jq ajax

$.ajax({})
1

# 2、参数

//发送请求的地址
url(必填)

//发送类型，默认使用get
type

//请求成功后的回调函数
success

//请求失败时调用此函数
error

//发送到服务器的数据
data

//设置请求超时时间（毫秒）。此设置将覆盖全局设置。
timeout

//这个对象用于设置 Ajax 相关回调函数的上下文。(修改this指针)
context

$.ajax({ url: "test.html", context: document.body, success: function(){
  $(this).addClass("done");
}});

//发送信息至服务器时内容编码类型(默认值: "application/x-www-form-urlencoded")
contentType

//发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头
beforeSend(XHR)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 3、案例

//发送登陆请求
var data = {
	"name":"小明123",
	"pwd":"123456"
}

$.ajax({
	url:"<http://vt.ossjk.com/login>",
	type:"POST",
	contentType:"application/json",
	data:JSON.stringify(data),
	success:function(res){
		console.log(res)
	}
})

//带token(令牌)的请求
$.ajax({
	url: "<http://vt.ossjk.com/getInfo>",
	type: "POST",
	beforeSend: function(xhr) {
		xhr.setRequestHeader("token",
			"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJqdGkiOiJhMjczYTMwM2QxZGI0ODRhODIyZGZjMWE2NzM2MGM3MiIsImlhdCI6MTU2Njg5OTQwNywic3ViIjoi5L2V5ZiJ5L-KMTIzIiwiaWQiOiI1MDk0MmJkMDk4MzI0MzM3YWE4MGJhZjk4MmRjYzI4ZiIsImV4cCI6MTU2Njg5OTc2N30.cuJkCUoHT5oCpyrlRW6JFjQV_q5URiQ2txoM7dqQSJQ"
		)
	},
	success: function(res) {
		console.log(res)
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 4、表单序列化

//将表单内容序列化成一个字符串
serialize()

//将页面表单序列化成一个JSON结构的对象。注意不是JSON字符串
serializeArray()
1
2
3
4
5

# 十一、练习

# 1、选项卡动画效果

<div class="tab">
  <div class="tab-title">
    <div class="on">标题一</div>
    <div>标题二</div>
    <div>标题三</div>
  </div>
  <div class="tab-content">
    <div class="on">123</div>
    <div>456</div>
    <div>789</div>
  </div>
</div>

<style>
.tab{
    width: 500px;
    height: 500px;
    border: 1px solid;
  }
  .tab-title{
    width: 100%;
    height: 100px;
    border-bottom: 1px solid;
  }
  .tab-title div{
    width: 100px;
    height: 100px;
    float: left;
    border-right: 1px solid;
    text-align: center;
    line-height: 100px;
  }
  .tab-title .on{
    background:pink;
  }
  .tab-content div{
    display: none;
  }
  .tab-content .on{
    display: block;
  }
$(".tab .tab-title div").click(function(){
  $(this).addClass("on").siblings().removeClass("on")
  let idx = $(this).index()
  $(".tab .tab-content div").eq(idx).addClass("on").siblings().removeClass("on")
})
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

# 2、jq插件

//index.html
<!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>
    <style>
      .tab{
        width: 500px;
        height: 500px;
        border: 1px solid;
      }
      .tab-title{
        width: 100%;
        height: 100px;
        border-bottom: 1px solid;
      }
      .tab-title div{
        width: 100px;
        height: 100px;
        float: left;
        border-right: 1px solid;
        text-align: center;
        line-height: 100px;
      }
      .tab-title .on{
        background:pink;
      }
      .tab-content div{
        display: none;
      }
      .tab-content .on{
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="tab">
      <div class="tab-title">
        <div class="on">标题一</div>
        <div>标题二</div>
        <div>标题三</div>
      </div>
      <div class="tab-content">
        <div class="on">123</div>
        <div>456</div>
        <div>789</div>
      </div>
    </div>

    <script src="<https://lib.baomitu.com/jquery/3.6.0/jquery.min.js>"></script>
    <script src="./tab.js"></script>
    <script>
      $(".tab").slides({
        "tab":".tab",
        "tabTitle":".tab-title",
        "tabContent":".tab-content",
        "autoPlay":true,
        "delaytime":2000
      })
    </script>
  </body>
</html>

<script>
//tab.js
!function($){
    $.fn.extend({
        "slides":function(options){
            let args = $.extend({
                "tab":".tab",
                "tabTitle":".tab-title",
                "tabContent":".tab-content",
                "autoPlay":false,
                "delaytime":1000
            },options)
 
            let that = $(`${args.tab}`)//tab
            let title = $(`${args.tabTitle}`).find("div")//title
            let content = $(`${args.tabContent}`).find("div")//content
            let idx = 0

            function show(idx){
                title.eq(idx).addClass("on").siblings().removeClass("on")
                content.eq(idx).addClass("on").siblings().removeClass("on")
            }
            function autoPlay(){
                setInterval(function(){
                    idx>=title.length-1 ? idx=0 : idx++
                    show(idx)
                },args.delaytime)
            }

            title.click(function(){
                idx = $(this).index()
                show(idx)
            })

            if(args.autoPlay){
                autoPlay()
            }
        }
    })
}(jQuery)
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
编辑 (opens new window)
上次更新: 2022/04/24, 13:33:34
21Ajax
23函数进阶

← 23函数进阶→

最近更新
01
课件-react路由-V6
01-22
02
课件-国际化
01-22
03
课件-redux-toolkit
01-22
更多文章>
Theme by Vdoing | Copyright © 2019-2024 Evan Xu | MIT License