接着昨天的内容:
筛选器
1. :first
2. :last
3. :eq(index)
4. :gt(index)
5. :lt(index)
6. :even
7. :odd
8.not(元素选择器)// 这里是移除所有满足not条件的标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签9.has(元素选择器)//从后代元素中查找,选取所有包含一个或者多个标签在其内的标签
$("div:has(h1)")// 找到所有后代中有h1标签的div标签$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签=====>我们可以用另一种方式写出来$("div .c1")这样写更加简洁注:一般使用的时候我们都是用.not()和.has()方法来直接替代,更加便捷
属性选择器:
[attribute][attribute=value]// 属性等于
<input type="text"><input type="password"><input type="checkbox">
[attribute!=value]// 属性不等于
$("input[type=‘checkbox‘]");// 取到checkbox类型的input标签$("input[type!=‘text‘]");// 取到类型不是text的input标签表单常用筛选：
:text:password
:file
:radio:checkbox
:submit:reset:button
例子：
$(":checkbox") ?// 找到所有的checkbox表单对象属性:
:enabled
:disabled
:checked
:selected
举例:
<form>
?<input name="email" disabled="disabled" />
?<input name="id" />
</form>
$("input:enabled") ?// 找到可用的input标签
<select id="s1"> ?<option value="beijing">北京市</option> ?<option value="shanghai">上海市</option> ?<option selected value="guangzhou">广州市</option> ?<option value="shenzhen">深圳市</option></select>$(":selected") ?// 找到所有被选中的option
筛选器方法
1. 下一个（同级的标签/弟弟标签）
- next()
- nextAll()
- nextUntil(“终止条件”) ?(不包含终止条件)
举例:
$("#id").next() ?//这里是找到指定id值后面的标签$("#id").nextAll() ?//指定id值后面的所有标签$("#id").nextUntil("#i2") ?//指定id值后面的标签一直找到id值为i2就不找了,不包含i2的
2. 上一个（同级的标签/姐姐标签）
- prev()
- prevAll()
- prevUntil(“终止条件”) (不包含终止条件)
举例:
$("#id").prev() ?//同上,找到指定id值的前面一个标签$("#id").prevAll() ?//找到指定id值的前面所有标签$("#id").prevUntil("#i2") ?//找到指定id值的前的标签一直到id值为i2就不找了,不包含i2
3. 父标签系列
- parent()
-parents()
-parentsUntil()
$("#id").parent() //找到当前元素的父标签
$("#id").parents() ?// 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
儿子标签------->$("#id").children(); //儿子们
兄弟标签-------->$("#id").siblings(); //兄弟们
简单粗暴的查找方法:
$("#id").find() //所有所有与指定表达式匹配的元素
还有一些其他的方法:
.first() //获取匹配的第一个元素
.last() //获取匹配的最后一个元素
.not() //从匹配的元素的集合中删除与指定表达式匹配的元素
.has() //保留包含特定后代的元素,去掉那些不含有指定后代的元素.
左侧菜单示例:
<!DOCTYPE html><html lang="zh-CN"><head> ???<meta charset="UTF-8"> ???<meta http-equiv="x-ua-compatible" content="IE=edge"> ???<title>jQuery-left_menu</title> ???<style> ?????????????.left{ ???????????position:fixed; ???????????left:0; ???????????top:0; ???????????width:20%; ???????????background-color:darkgrey; ???????????height:100%; ???????} ???????.right{ ???????????width:80%; ???????} ???????.title{ ???????????text-align:center; ???????????padding:10px 15px; ???????????border-bottom:1px solid red; ???????} ???????.content{ ???????????background-color:#336699; ???????} ???????.content>div { ???????????padding:10px; ???????????color:white; ???????????border-bottom:1px solid black; ???????} ???????.hide{ ???????????display:none; ???????} ???</style></head><body><div class="left"> ???<div class="item"> ???????<div class="title">menu-one</div> ???????<div class="content hide"> ???????????<div>111</div> ???????????<div>222</div> ???????????<div>333</div> ???????</div> ???</div> ???<div class="item"> ???????<div class="title" >menu-tow</div> ???????<div class="content hide"> ???????????<div>111</div> ???????????<div>222</div> ???????????<div>333</div> ???????</div> ???</div> ???<div class="item"> ???????<div class="title" >menu-three</div> ???????<div class="content hide"> ???????????<div>111</div> ???????????<div>222</div> ???????????<div>333</div> ???????</div> ???</div></div><div class="right"></div><script src="jquery-3.2.1.min.js"></script><script> ???var $titleEles = $(".title"); ???$titleEles.on("click", function(){ ???????$(this).next().toggleClass("hide").parent(). ???????siblings(".item").children(".content"). ???????addClass("hide"); ???})</script></body></html><!DOCTYPE html><html lang="en"><haed> ???<meta charset="UTF-8"> ???<title>menu-list</title> ???<!--<link href="4菜单.css" type="text/css" rel="stylesheet">--> ???<!--<script src="4菜单.js"></script>--> ???<style> ???????.left{ ???????????position:fixed; ???????????left:0; ???????????top:0; ???????????width:20%; ???????????background-color:darkgrey; ???????????height:100%; ???????} ???????.right{ ???????????width:80%; ???????} ???????.title{ ???????????text-align:center; ???????????padding:10px 15px; ???????????border-bottom:1px solid red; ???????} ???????.content{ ???????????background-color:#336699; ???????} ???????.content>div { ???????????padding:10px; ???????????color:white; ???????????border-bottom:1px solid black; ???????} ???????.hide{ ???????????display:none; ???????} ???</style> ???<!----><!--$("ths")[0].onclick=function(){$(".content").addClass("hide");这句话要和下面的那句话联合起来写作一句话才能达到效果--><!--用一个函数来包裹起来--><!--var $titleEles=$(".title"); ??这里声明一个变量--><!--$titleEles.on("click",function(){ ?//用得到的那个变量去绑定一个事件,--><!--那个事件再跟一个函数连接起来,在连接之前用到的动作是click点击的动作,还会有其他的动作,--><!--到时候会有不同的专属名词,所触发的动作需要用引号引起来,然后放到括号里面,--><!--$("ths").next(到这里这一步是找到所点击的this标签的同级的所有的下一个弟弟标签,--><!--因为我们的文档结构是"菜单栏"是可以点击,然后菜单栏里面所展示的的内容是另一个--><!--与之同级的div标签下面的内容,所以这里是需要用到同级的next方法,找到菜单栏所要--><!--展示的弟弟标签里面所包含的内容).toggleClass("hide"然后对那个标签进行操作,--><!--如果弟弟标签里面有hide就移除,否则就添加,就可以达到点击一次即展开,--><!--点击第二次即收起内容的效果).parent(继续接着寻找,所展示的内容的标签的父级标签,)--><!--.siblings(".item"然后在找父级标签的兄弟标签).children(".content"然后再接着去--><!--找父亲兄弟标签的孩子们标签,因为有两个孩子,所以需要做一下标记,找到有内容需要展示出来的那个标签,--><!--用类来作为限制).addClass("hide"然后找到之后就给他加上了hide这个属性,--><!--把里面的内容隐藏起来,因为我们只需要展示我们所选中的那个标签即可,--><!--没有被点击的则都隐藏起来);})–>--><!--// $(".content")[2].css("background-color","red")--> ???<!--</script>--></haed><body><div class="left"> ???<div class="item"> ???????<div class="title" >menu1</div> ???????<div class="content hide"> ???????????<div>1</div> ???????????<div>2</div> ???????????<div>3</div> ???????</div> ???</div> ???<div class="item"> ???????<div class="title" >menu2</div> ???????<div class="content hide"> ???????????<div>1</div> ???????????<div>2</div> ???????????<div>3</div> ???????</div> ???</div> ???<div class="item"> ???????<div class="title" >menu3</div> ???????<div class="content hide"> ???????????<div>1</div> ???????????<div>2</div> ???????????<div>3</div> ???????</div> ???</div></div><div class="right"></div><script src="jquery-3.2.1.min.js"></script><script> ???var $titleEles=$(".title"); ???$titleEles.on("click",function(){ ???????$(this).next().toggleClass("hide").parent().siblings(".item") ???????????.children(".content").addClass("hide"); ???})</script></body></html>操作标签:
样式操作:
样式类=======>
addClass(); //添加指定的样式类名.注:都要写成驼峰体
removeClass(); //移除指定的CSS类名.
hasClass(); //判断样式类是否存在 这里是返回的bool值
toggleClass(); //切换CSS类名,如果有就移除,没有则添加.
CSS操作:(很简单,就跟之前的css操作无异)
css("border","1px dashed red") //DOM操作:tag.style.border="1px dashed red"
示例:
$("p").css("border","1px dashed red"); //将所有的p标签边框都设置为1像素的红色虚线
位置:
offset() //获取当前窗口的偏移 {top:xx,left:xx} ----向左侧移动了多少,向右侧移动了多少
position() // 获取匹配元素相对父元素的偏移 {top:xx,left:xxx} ----->根据已经定位的父级标签向上偏移多少,向左偏移多少
scrollTop() //获取匹配元素相对滚动条顶部的偏移
scrollLeft() //获取匹配元素相对滚动条左侧的偏移
.offset() 方法允许检索一个元素相对于文档(document)的当前位置.和.position()的差别在于.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>返回顶部示例尺寸:
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
文本操作:
HTML代码:
html() //获取第一个匹配元素的html内容
html(val) //设置所有匹配元素的html内容
文本值:
text() //取得所有匹配元素的内容
text(val) //设置所有匹配元素的值
值:
val() //取得第一个匹配元素的当前值
val(val) //所有匹配元素的值
val(val1,val2) //设置checkbox,select的值
jQuery val赋值示例
<labelfor="s1">城市</label><selectid="s1"><optionvalue="beijing">北京市</option><optionvalue="shanghai">上海市</option><optionselectedvalue="guangzhou">广州市</option><optionvalue="shenzhen">深圳市</option></select><hr><labelfor="s2">爱好</label><selectid="s2"multiple="multiple"><optionvalue="basketball"selected>篮球</option><optionvalue="football">足球</option><optionvalue="doublecolorball"selected>双色球</option></select><hr><p>爱好</p><label><inputtype="checkbox"name="hobby"value="basketball"/> 篮球<inputtype="checkbox"name="hobby"value="football"/> 足球<inputtype="checkbox"name="hobby"value="doublecolorball"/> 双色球</label><p>性别</p><labelfor="radio1">女</label><inputid="radio1"type="radio"name="gender"value="female"/><labelfor="radio2">男</label><inputid="radio2"type="radio"name="gender"value="male"/><scriptsrc="jquery-3.2.1.min.js"></script><script>// 单选下拉框$("#s1").val("shanghai");// 多选下拉框$("#s2").val(["basketball","football"]);// checkbox$("input[name=‘hobby‘]").val(["basketball","football"]);// 单选框$("input[name=‘gender‘]").val(["female"]);</script>val赋值示例自定义登录示例:
<!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> ???.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-password">密码</label> ???<input type="password" id="input-password" name="password"> ???<span class="error"></span> ?</div> ?<div> ???<input type="button" id="btn" value="提交"> ?</div></form><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script> ?$("#btn").click(function () { ???var username = $("#input-name").val(); ???var password = $("#input-password").val(); ???if (username.length === 0) { ?????$("#input-name").siblings(".error").text("用户名不能为空"); ???} ???if (password.length === 0) { ?????$("#input-password").siblings(".error").text("密码不能为空"); ???} ?})</script></body></html>自定义登录校验示例属性操作:
attr(attrName) //返回第一个匹配元素的属性值
attr(attrName,attrValue) //为所有匹配元素设置一个属性值
attr({k1:v1,k2:v2}) //为所有匹配元素设置多个属性值
removeAttr() //从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() ///获取属性
removeProp() //移除属性
<input type="checkbox" value="1"><input type="radio" value="2"><script> ?$(":checkbox[value=‘1‘]").prop("checked", true); ?$(":radio[value=‘2‘]").prop("checked", true);</script>day 55 jQuery-part2
原文地址：https://www.cnblogs.com/2012-dream/p/8185163.html