补充:
find:指找出元素后代的好方法；
$('div>p'); == $('div').find('p');
filter:指找出元素以逗号分隔开的同级元素的好方法;
$('div,.c1') == $('div').filter('.c1');
操作标签：
样式操作
样式类
1 addClass();// 添加指定的CSS类名。 2 removeClass();// 移除指定的CSS类名。 3 hasClass();// 判断样式存不存在 4 toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
1 //找到点击jq对象的下一级删除body里面的hide元素，然后再查看父级，接着遍历，然后再找到body类标签的增加hide进去; 2 $(this).next().removeClass('hide').parent().siblings().find('.body').addClass('hide');
示例:开关灯和模态框
CSS
html:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body { 8 margin: 0; 9 } 10 11 .c1, 12 .c2, 13 .c3{ 14 height: 200px; 15 width: 200px; 16 } 17 .c1 { 18 background-color: green; 19 position: relative; 20 left: 100px; 21 } 22 .c2 { 23 background-color: red; 24 position: absolute; 25 left: 200px; 26 } 27 .c3 { 28 background-color: blue; 29 position: relative; 30 left: 200px; 31 } 32 </style> 33 </head> 34 <body> 35 36 <div id="d1"> 37 《钗头凤》唐婉 38 <p id="p1"> 39 世情薄， 40 人情恶， 41 雨送黄昏花易落。 42 晓风干， 43 泪痕残， 44 欲笺心事， 45 独语斜阑， 46 难 难 难！ 47 </p> 48 </div> 49 <hr> 50 51 <div class="c1"> 52 <div class="c2"></div> 53 </div> 54 55 <div class="c3"> 56 57 </div> 58 <script src="jquery-3.3.1.min.js"></script> 59 </body> 60 </html>
DOM原生的修改CSS var pEle = document.getElementById("p1") eEle.style.color = 'green' jQuery修改CSS样式 $('#p1').css('color','red');
css('color','red'); //DOM操作：tag.style.color = 'red';
示例：
1 $('#p1').css('font-size','24px'); //通过css修改font-size的大小
$('p').css('color','red'); //将所有p标签的字体设置为红色
$('#p1').css({'border':'1px solid black','color':'blue'}); //可同时设置多个样式
位置：
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置 position()// 获取匹配元素相对父元素的偏移 scrollTop()// 获取匹配元素相对滚动条顶部的偏移 scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
demo：
1 $('.c3').offset({top:284,left:400})
2 $('.c2').position()
示例：下拉条
<!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.2.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> 返回顶部示例
$(window).scrollTop() //获取当前下拉标签的位置
$(window).scrollTop(0) //设置浮标的值
尺寸：
1 height() //高 2 width() //宽 3 innerHeight() //内容加padding的高 4 innerWidth() //内容加padding的宽 5 outerHeight() //内容加padding加边框 6 outerWidth()
html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>尺寸相关</title> 6 <style> 7 .c1 { 8 height: 100px; 9 width: 100px; 10 padding: 15px; 11 border: 5px solid red; 12 margin: 20px; 13 } 14 </style> 15 </head> 16 <body> 17 18 <div class="c1"></div> 19 <script src="jquery-3.3.1.min.js"></script> 20 </body> 21 </html>
jQ
1 $('.c1').height() 2 100 3 $('.c1').width() 4 100 5 $('.c1').width(200) 6 w.fn.init [div.c1, prevObject: w.fn.init(1)] 7 $('.c1').innerHeight() 8 130 9 $('.c1').outerHeight() 10 140
文本操作
HTML代码:
1 html() //获取第一个匹配元素的html内容 2 html(val) //设置所有匹配元素的html内容
//原生的document document.getElementById('d1').innerText = 'shuaiqibiren ' "shuaiqibiren " //jQuery的 $('#d1').text() "shuaiqibiren " $('#d1').text('kermit jam最帅，没有之一')
document.getElementById('d1').innerHTML = '<h1>Kermit真帅</h1>'
$('#d1').html('<h1>怎么都是帅，哎，好烦哦</h1>')
文本值：
text() //获取所有匹配元素的内容 text(val) //设置所有匹配元素的内容
值：
val() //获取第一个匹配元素的当前值 val(val) //设置所以匹配元素的值 val([val1,val2])
示例：
获取呗选中的checkbox或radio的值
1 <label for="c1">女</label> 2 <input name="gender" id="c1" type="radio" value="0"> 3 <label for="c2">男</label> 4 <input name="gender" id="c2" type="radio" value="1">
可以使用val()来获取jQuery的对象的值
$('input[name="gender"]:checked').val()
html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>登录注册示例</title> 6 <style> 7 .error { 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 14 15 <form action=""> 16 <p> 17 <label for="username">用户名</label> 18 <input type="text" id="username" name="username"> 19 <span class="error"></span> 20 </p> 21 <p> 22 <label for="pwd">密码</label> 23 <input type="password" id="pwd" name="pwd"> 24 <span class="error"></span> 25 </p> 26 27 <p> 28 <input type="submit" id="b1" value="登录"> 29 </p> 30 </form> 31 <script src="jquery-3.3.1.min.js"></script> 32 <script> 33 $("#b1").click(function () { 34 var flag = true; 35 $(".error").text(""); 36 37 var $username = $("#username"); 38 var $pwd = $("#pwd"); 39 // 取input框的值判断长度是否为0 40 if ($username.val().length === 0){ 41 // 用户名没有输入, 提示 42 $username.next().text("用户名不能为空！"); 43 flag = false; 44 } 45 if ($pwd.val().length === 0){ 46 // 用户名没有输入, 提示 47 $pwd.next().text("密码不能为空！"); 48 flag = false; 49 } 50 return flag; // 阻止后续事件的执行 51 }) 52 </script> 53 </body> 54 </html>
1 $('input[name="username"]').val(); 2 "Kermit jam很帅" 3 $('input[name="pwd"]').val(); 4 "henshuai"
登陆处理
1 $('#b1').click(function(){ 2 flag = true; 3 $('.error').text(""); 4 $username = $('#username').val() 5 $pwd = $('#pwd').val(); 6 if($username.val().length ===0){ //判断如果用户名为空就打印错误信息 7 $username.next().text('用户名不能为空;') 8 flag = false; 9 } 10 if ($pwd.val().length === 0){ //判断密码为空就打印错误信息 11 $pwd.next().text('密码不能为空@!'); 12 flag = false; 13 } 14 return flag; 15 });
属性操作：
比较少用 $('#d1').attr('s1','greate') //表示设置s1的属性为great $('#d1').attr({"num":"50","tedian":"gay"}) //设置num属性与特点属性 $('#d1').removeAttr() //删除属性
文档处理！！
添加到指定元素内部的后面
添加到指定元素内部的前面
$(A).append(B) //把B追加到A $(A).append(B) //把A追加到B
添加到指定元素外部的后面
$(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B
添加到指定元素外部的前面
$(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面
清除和清空元素
remove()// 从DOM中删除所有匹配的元素。 empty()// 删除匹配的元素集合中所有的子节点。
替换
replaceWith()
replaceAll()
克隆
clone() // 参数
克隆示例：
<!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> #b1 { background-color: deeppink; padding: 5px; color: white; margin: 5px; } #b2 { background-color: dodgerblue; padding: 5px; color: white; margin: 5px; } </style> </head> <body> <button id="b1">我是张家辉，做兄弟，来屠龙，屠龙宝刀，点击就送</button> <hr> <button id="b2">我是张家辉，做兄弟，来屠龙，屠龙宝刀，点击就送</button> <script src="jquery-3.2.1.min.js"></script> <script> // clone方法不加参数true，克隆标签但不克隆标签带的事件 $("#b1").on("click", function () { $(this).clone().insertAfter(this); }); // clone方法加参数true，克隆标签并且克隆标签带的事件 $("#b2").on("click", function () { $(this).clone(true).insertAfter(this); }); </script> </body> </html>