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});
});
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#b2").removeClass("hide");
}else {
$("#b2").addClass("hide");
}
});
$("#b2").on("click", function () {
$(window).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>
浙公网安备 33010602011771号