1. 操作样式之直接操作 CSS
- .CSS("color")
- .CSS("color","red") // 设置值
用法:
修改单个属性:$(".c1").CSS()
修改多个属性:$({"color":"red","font-size":"18px"})
位置相关:
- offset() // 获取匹配元素在当前的窗口的相对偏移或设置元素位置 (传参数才是设置)
- position() // 获取匹配元素相对父元素的偏移
- scrollTop() // 获取匹配元素相对滚动条顶部的偏移
- scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
相关示例:(根据滚动条判断设置返回顶部功能的位置)
- <!DOCTYPE HTML>
- <HTML lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="x-ua-compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>
- 位置相关示例之返回顶部
- </title>
- <style>
- .c1 { width: 100px; height: 200px; background-color: red; } .c2 { height:
- 50px; width: 50px; position: fixed; bottom: 15px; right: 15px; background-color:
- #2b669a; } .hide { display: none; } .c3 { height: 100px; }
- </style>
- </head>
- <body>
- <button id="b1" class="btn btn-default">
- 点我
- </button>
- <div class="c1">
- </div>
- <div class="c3">
- 1
- </div>
- <div class="c3">
- 2
- </div>
- <div class="c3">
- 3
- </div>
- <div class="c3">
- 4
- </div>
- <div class="c3">
- 5
- </div>
- <div class="c3">
- 6
- </div>
- <div class="c3">
- 7
- </div>
- <div class="c3">
- 8
- </div>
- <div class="c3">
- 9
- </div>
- <div class="c3">
- 10
- </div>
- <div class="c3">
- 11
- </div>
- <div class="c3">
- 12
- </div>
- <div class="c3">
- 13
- </div>
- <div class="c3">
- 14
- </div>
- <div class="c3">
- 15
- </div>
- <div class="c3">
- 16
- </div>
- <div class="c3">
- 17
- </div>
- <div class="c3">
- 18
- </div>
- <div class="c3">
- 19
- </div>
- <div class="c3">
- 20
- </div>
- <div class="c3">
- 21
- </div>
- <div class="c3">
- 22
- </div>
- <div class="c3">
- 23
- </div>
- <div class="c3">
- 24
- </div>
- <div class="c3">
- 25
- </div>
- <div class="c3">
- 26
- </div>
- <div class="c3">
- 27
- </div>
- <div class="c3">
- 28
- </div>
- <div class="c3">
- 29
- </div>
- <div class="c3">
- 30
- </div>
- <div class="c3">
- 31
- </div>
- <div class="c3">
- 32
- </div>
- <div class="c3">
- 33
- </div>
- <div class="c3">
- 34
- </div>
- <div class="c3">
- 35
- </div>
- <div class="c3">
- 36
- </div>
- <div class="c3">
- 37
- </div>
- <div class="c3">
- 38
- </div>
- <div class="c3">
- 39
- </div>
- <div class="c3">
- 40
- </div>
- <div class="c3">
- 41
- </div>
- <div class="c3">
- 42
- </div>
- <div class="c3">
- 43
- </div>
- <div class="c3">
- 44
- </div>
- <div class="c3">
- 45
- </div>
- <div class="c3">
- 46
- </div>
- <div class="c3">
- 47
- </div>
- <div class="c3">
- 48
- </div>
- <div class="c3">
- 49
- </div>
- <div class="c3">
- 50
- </div>
- <div class="c3">
- 51
- </div>
- <div class="c3">
- 52
- </div>
- <div class="c3">
- 53
- </div>
- <div class="c3">
- 54
- </div>
- <div class="c3">
- 55
- </div>
- <div class="c3">
- 56
- </div>
- <div class="c3">
- 57
- </div>
- <div class="c3">
- 58
- </div>
- <div class="c3">
- 59
- </div>
- <div class="c3">
- 60
- </div>
- <div class="c3">
- 61
- </div>
- <div class="c3">
- 62
- </div>
- <div class="c3">
- 63
- </div>
- <div class="c3">
- 64
- </div>
- <div class="c3">
- 65
- </div>
- <div class="c3">
- 66
- </div>
- <div class="c3">
- 67
- </div>
- <div class="c3">
- 68
- </div>
- <div class="c3">
- 69
- </div>
- <div class="c3">
- 70
- </div>
- <div class="c3">
- 71
- </div>
- <div class="c3">
- 72
- </div>
- <div class="c3">
- 73
- </div>
- <div class="c3">
- 74
- </div>
- <div class="c3">
- 75
- </div>
- <div class="c3">
- 76
- </div>
- <div class="c3">
- 77
- </div>
- <div class="c3">
- 78
- </div>
- <div class="c3">
- 79
- </div>
- <div class="c3">
- 80
- </div>
- <div class="c3">
- 81
- </div>
- <div class="c3">
- 82
- </div>
- <div class="c3">
- 83
- </div>
- <div class="c3">
- 84
- </div>
- <div class="c3">
- 85
- </div>
- <div class="c3">
- 86
- </div>
- <div class="c3">
- 87
- </div>
- <div class="c3">
- 88
- </div>
- <div class="c3">
- 89
- </div>
- <div class="c3">
- 90
- </div>
- <div class="c3">
- 91
- </div>
- <div class="c3">
- 92
- </div>
- <div class="c3">
- 93
- </div>
- <div class="c3">
- 94
- </div>
- <div class="c3">
- 95
- </div>
- <div class="c3">
- 96
- </div>
- <div class="c3">
- 97
- </div>
- <div class="c3">
- 98
- </div>
- <div class="c3">
- 99
- </div>
- <div class="c3">
- 100
- </div>
- <button id="b2" class="btn btn-default c2 hide">
- 返回顶部
- </button>
- <script src="jquery-3.3.1.min.js">
- </script>
- <script>
- $("#b1").on("click",
- function() {
- $(".c1").offset({
- left: 200,
- top: 200
- });
- });
- $(Windows).scroll(function() {
- if ($(Windows).scrollTop() > 100) {
- $("#b2").removeClass("hide");
- } else {
- $("#b2").addClass("hide");
- }
- });
- $("#b2").on("click",
- function() {
- $(Windows).scrollTop(0);
- })
- </script>
- </body>
- </HTML>
尺寸:
- height()
- width()
- innerHeight()
- innerWidth()
- outerHeight()
- outerWidth()
文本操作:
- text("<a href='https://www.baidu.com'>baidu</a>") // 不识别 HTML 标签, 将原样输出
- HTML("<a href='https://www.baidu.com'>baidu</a>") // 识别 HTML 标签, 自动将 a 转为 HTML 标签
值:
- val() // 取得元素的当前值 (传参数表示设置值)
- val([val1,val2]) // 设置 checkbox,select 的值
属性操作:
1. 用于 ID 等或自定义属性 (获取文本类)
- attr(attrName) // 返回第一个匹配元素的属性值
- attr(attrName,attrValue)// 为所有匹配元素设置一个属性值
- attr({k1:v1,k2:v2}) // 为所有元素设置多个属性值
- removeAttr() // 从每一个匹配的元素中删除一个属性
2. 用于 checkbox 和 radio(获取布尔值)
- prop() // 获取属性 (判断是否被选中)
- removeProp() // 移除属性
绑定事件的方式:
- $(".item-title").click(function () {
- $(this).next().toggleClass("hide").parents().siblings().find("item-body").addClass("hide");
- })
- # 简单的自定义登录校验:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 登录验证
- </title>
- <style>
- .error{ color:red; }
- </style>
- </head>
- <body>
- <form action="">
- <div>
- <label for="input-name">
- 用户名
- </label>
- <input type="text" id="input-name" name="name">
- <span class="error">
- </span>
- </div>
- <div>
- <label for="input-passwd">
- 密码
- </label>
- <input type="password" id="input-passwd" name="passwd">
- <span class="error">
- </span>
- </div>
- <div>
- <input type="button" id="btn" value="提交">
- </div>
- </form>
- <script src="jquery-3.4.1.min.js">
- </script>
- <script>
- $("#btn").click(function() {
- // 获取输入框的值
- var username = $("#input-name").val();
- var password = $("#input-passwd").val();
- if (username.length === 0) {
- $("#input-name").siblings(".error").text("用户名不能为空")
- }
- if (password.length === 0) {
- $("#input-passwd").siblings(".error").text("密码不能为空")
- }
- })
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3209193.html