首页 > 代码库 > python成长之路16
python成长之路16
阅读(72)
一：jQuery是一个兼容多浏览器的javascript类库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀，jQuery的核心是先找到一个元素然后对其进行操作，jQuery分为1版本和2版本及以上的，1版本兼容IE6/IE7/IE8，而jquery 2版本及以上不再兼容IE8及以下的浏览器，因此要兼容低版本的浏览器就要用jquery 1版本，另外jquery还分为压缩版和非压缩版，压缩版在线上使用，非压缩版在开发调试的时候使用：
jquery-3.1.0.js #非压缩版，可浏览性强，便于人类识别jquery-3.1.0.min.js #压缩版，将多行合并，更简洁，便于机器识别官方下载地址：http://jquery.com/download/
所有版本下载：http://www.jq22.com/jquery-info122
中文教程：http://www.php100.com/manual/jquery/
1.1：这么好的jquery该如何使用呢?
1.1.1：导入文件并简单替换text内容：
<body> <div id="id1">123</div><script type="text/javascript" src="css/jquery-1.8.3.js"></script> <!--建议在body的最下面进入导入文件，可以保证用户先看到页之后在加载效果，否则一直在加载js效果不成功用户可能会关闭页面不看了 当页面框架加载完成之后执行下面的代码--> <!--$代表的是jQuery对象，是自动创建的, $("#id1").text("jack")等于document.getElementById("id1")获取到id再取到text赋值--> <script> $(function() { $("#id1").text("jack") } );</script></body>#执行结果：
1.1.2：通过jQuery找到指定的标签并为其添加class:
<head> <meta charset="UTF-8"> <title>Title</title> <style> .ii { background-color: #00AAFF; } </style></head><body> <div id="id1">123</div> <div class="yy"><h2>123</h2></div> <div class="yy"><h2>456</h2></div> <div class="yy"><h2>789</h2></div><script type="text/javascript" src="css/jquery-1.8.3.js"></script> <!--建议在body的最下面进入导入文件，可以保证用户先看到页之后在加载效果，否则一直在加载js效果不成功用户可能会关闭页面不看了 当页面框架加载完成之后执行下面的代码--> <!--$代表的是jQuery对象，是自动创建的, $("#id1").text("jack")等于document.getElementById("id1")获取到id再取到text赋值--> <script> $(function() { $("#id1").text("我是被替换的内容"); $(".yy").addClass("ii"); } );</script></body>#执行结果：
1.1.3:jQuery和JS和HTML的关系:
首先了HTML是实际展示在用户面前的用户可以直接体验到的，JS是操作HTML的他能改变HTML实际展示给用户的效果,首先了解JS是一门语言，他是运行在浏览器上的,jQuery是什么呢？他是对JS进行了封装，成了一个类库，就类似于python中的类，我们用的时候直接掉类库了就行了非常方便.
1.2:基本选择器，
http://www.php100.com/manual/jquery/index.html ：
1.2.1：id选择器：比较常用的，根据给定的ID匹配一个元素。
$("#i1").removeClass("hide") #找到一个id找到标签移除一个class[<div id="i1" class>…</div>]1.2.2：标签选择器，根据给定的元素标签名匹配所有元素 ，常用的
$("div") #获取所有的标签，结果是一个数组 [<div id="i1" class>…</div>, <div class="item"></div>, <div class="item">…</div>, <div class="c1">123</div>, <div class="item"></div>, <div id="i2"></div>] 1.2.3：类选择器，根据给定的css类名匹配元素，常用的
$(".item") #获取所有class是item的标签[<div class="item"></div>, <div class="item">…</div>, <div class="item"></div>]1.2.4.层级标签选择器，将每一个选择器匹配到的元素合并后一起返回,你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内，比较常用
$(“.item div,a”) #获取类是item下的div和a标签
[<div class=”c1″>123</div>, <a>baidu</a>]
1.2.4：所有的元素（*），比较多的用于集合上下文搜索：
HTML 代码:<div>DIV</div><span>SPAN</span><p>P</p>jQuery 代码:$("*")结果:[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]1.2.5：组合选择器，对某个元素下的一个或多个的元素之间的匹配：
HTML 代码:<div>div</div><p class="myClass">p class="myClass"</p><span>span</span><p class="notMyClass">p class="notMyClass"</p>jQuery 代码:$("div,span,p.myClass")结果:[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]1.3：层级选择器，
1.3.1:ancestor descendant:在给定的祖先元素下匹配所有的后代元素,ancestor任何有效选择器,任何有效选择器任何有效选择器:
找到表单中所有的 input 元素HTML 代码:<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset></form><input name="none" />jQuery 代码:$("form input")结果:[ <input name="name" />, <input name="newsletter" /> ]1.3.2:parent > child,在给定的父元素下匹配所有的子元素，parent任何有效选择器，child用于匹配元素的选择器，并且它是第一个选择器的子元素。
匹配表单中所有的子级input元素。HTML 代码:<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset></form><input name="none" />jQuery 代码:$("form > input")结果:[ <input name="name" /> ]1.3.3:prev + next：prev 元素后的next元素，prev任何有效的选择器，next一个有效的选择器并且紧接着第一个选择器
匹配所有跟在 label 后面的 input 元素HTML 代码:<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset></form><input name="none" />jQuery 代码:$("label + input")结果:[ <input name="name" />, <input name="newsletter" /> ]1.3.4:prev ~ siblings：匹配 prev 元素之后的所有siblings元素，prev是任何有效选择器，siblings一个选择器，并且它作为第一个选择器的同辈
找到第一个与表单同辈的 input 元素HTML 代码:<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset></form><input name="none" />jQuery 代码:$("form ~ input")结果:[ <input name="none" /> ]1.3.5：其他方法
$(":input") #找到所有的input标签，冒号是特殊的[<input type="button" value="button">, <input type="checkbox">, <input type="file">, <input type="hidden">, <input type="image">, <input type="password">, <input type="radio">, <input type="reset">, <input type="submit">, <input type="text">, <select>…</select>, <textarea></textarea>, <button>Button</button>]$(":text")[<input type="text">] #找到所有的input标签并且类型等于text，这个和$(‘input[type=‘text‘]‘)效果是一样的$(":text,password") 找到所有的input的标签并且type=‘text‘或type=‘password‘的标签,这是一个组合选择器[<input type="text">]1.4：jQuery基本筛选器：
1.4.1:first、last，获取第一个和最后一个元素：
HTML代码：<ul> <li>list item1</li> <div> <li>list item7</li> </div> <li>list item2</li> <li>list item3</li> <li>list item4</li> <li>list item5</li> <div> <li>list item7</li> <div> <div> <h1>sss</h1> <li>item8</li> </div> </div> </div></ul>jQuery代码：$("li:first") #第一个li[<li>list item1</li>]$("li:last") #最后一个li[<li>item8</li>]1.4.1：not，不是li的元素：
$("li:not(div,a,span)") #对获取到的结果进行过滤，不包含div，a和spa标签[<li>list item1</li>, <li>list item7</li>, <li>list item2</li>, <li>list item3</li>, <li>list item4</li>, <li>list item5</li>, <li>list item7</li>, <li>item8</li>]1.4.2：even和odd，匹配偶数基数额元素，从0开始计数，表格的1/3/5行等于索引的0/2/4….
<ul> <li>list item1</li> <div> <li>list item7</li> </div> <li>list item2</li> <li>list item3</li> <li>list item4</li> <li>list item5</li> <div> <li>list item7</li> <div> <div> <h1>sss</h1> <li>item8</li> </div> </div> </div></ul>结果如下：$("li:even") #偶数的索引从0开始，0/2/4/8/10[<li>list item1</li>, <li>list item2</li>, <li>list item4</li>, <li>list item7</li>]$("li:odd") #计数的索引从1开始，1/3/5/7/9[<li>list item7</li>, <li>list item3</li>, <li>list item5</li>, <li>item8</li>]1.4.3:gt/lt/eq 大于等于小于一个索引的所有值：
$("li:lt(4)")[<li>list item1</li>, <li>list item7</li>, <li>list item2</li>, <li>list item3</li>]$("li:gt(4)")[<li>list item5</li>, <li>list item7</li>, <li>item8</li>]$("li:eq(4)")[<li>list item4</li>]1.5：属性选择器
1.5.1:attribute：匹配博涵在给定属性的元素名,在jquery1.3中@符号已经被废除，如果要兼容最新版本只要简单去掉@符号即可
HTML代码:<div id="i7"> <li>list item7</li> <div class="c1"> <div id="i8"> <h1>sss</h1> <li>item8</li> </div> </div></div>#结果如下$("div") #所有div[<div id="i7">…</div>, <div class="c1">…</div>, <div id="i8">…</div>]$("div[id]") #获取到所有所有id属性的div[<div id="i7">…</div>, <div id="i8">…</div>]$("div[class]") #获取到所有有class属性div[<div class="c1">…</div>]1.5.2：attribute=value，匹配给定的属性是某个特定值的元素：
HTML代码：<input type="checkbox" name="newsletter" value="Hot Fuzz" /><input type="checkbox" name="newsletter" value="Cold Fusion" /><input type="checkbox" name="accept" value="Evil Plans" />#结果如下：$("input[name=‘newsletter‘]") #获取所有有newsletter属性的input标签[<input type="checkbox" name="newsletter" value="Hot Fuzz">, <input type="checkbox" name="newsletter" value="Cold Fusion">]$("input[name=‘newsletter‘]").attr(‘checked‘,true) #给获取到的标签添加一个新的属性[<input type="checkbox" name="newsletter" value="Hot Fuzz" checked="checked">, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="checked">]1.5.3：attribute=value，匹配给定的属性是某个特定值的元素attribute!=value，匹配所有不含有指定的属性，或者属性不等于特定值的元素，此选择器等价于 :not([attr=value])，要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])
$("input[name!=‘newsletter‘]") #查找到没有属性newsletter或属性值不等于newsletter的所有input标签[<input type="checkbox" name="accept" value="Evil Plans">]$("input[name!=‘newsletter‘]").attr(‘checked‘,true) #对查找到标签进行操作赋值[<input type="checkbox" name="accept" value="Evil Plans" checked="checked">]1.5.4：attribute^=value，匹配给定的属性是以某些值开始的元素
1.5.5：attribute$=value，匹配给定的属性是以某些值结尾的元素
1.5.6：attribute*=value，匹配给定的属性是以包含某些值的元素
$("input[name^=‘newsletter‘]") #匹配所有以newsletter开头的input标签，会在所有层级的标签中找[<input type="checkbox" name="newsletter" value="Hot Fuzz" checked="checked">, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="checked">]$("input[name$=‘sletter‘]") #匹配所有以sletter结尾的[<input type="checkbox" name="newsletter" value="Hot Fuzz" checked="checked">, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="checked">]$("input[name*=‘sletter‘]") #匹配属性当中包含指定的值[<input type="checkbox" name="newsletter" value="Hot Fuzz">, <input type="checkbox" name="newsletter" value="Cold Fusion">, <input type="checkbox" name="newsletter" value="Hot Fuzz">, <input type="checkbox" name="newsletter" value="Cold Fusion">]1.5.7：[selector1][selector2][selectorN]，复合属性选择器，需要同时满足多个条件时使用。
HTML代码：<input id="i1" type="checkbox" name="newsletter" value="Hot Fuzz" /><input type="checkbox" name="newsletter" value="Cold Fusion" /><div> <div> <input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> </div></div><input type="checkbox" name="accept" value="Evil Plans" />结果如下：$("input[id][name$=‘sletter‘]") #先找到有id属性的标签，在找到含有name以sletter结尾的标签[<input id="i1" type="checkbox" name="newsletter" value="Hot Fuzz">]1.6:子元素查找操作
1.6.1： :first-child 查找其第几个孩子，专门用于查找操作孩子的,类似的:first只匹配第一个元素，而此选择符将为每个父元素匹配一个子元素
HTML代码：<ol> <li>list item1</li> <div> <li> <h2>xxx</h2>list </li> </div> <li>list item2</li> <li>list item3</li> <li>list item4</li> <li>list item5</li> <div id="i7"> <li>list item7</li> <div class="c1"> <div id="i8"> <h1>sss</h1> <li>item8</li> </div> </div> </div></ol>结果如下：$("ol li:first-child") #找到ol下的li下的第一个子元素，包含匹配到的子元素的子子孙孙[<li>list item1</li>, <li>…</li><h2>xxx</h2>"list "</li>, <li>list item7</li>1.6.2：:last-child 匹配最后一个子元素，:last，只匹配最后一个元素，而此选择符将为每个父元素匹配最后一个子元素
HTML 代码：<ol> <li>John</li> <li>Karl</li> <li>Brandon</li></ol><ol> <li>Glen</li> <li>Tane</li> <li>Ralph</li></ol>结果如下：$("ol li:first-child") #第一个匹配的元素[<li>John</li>, <li>Glen</li>] $("ol li:last-child") #最后一个匹配的元素[<li>Brandon</li>, <li>Ralph</li>]1.7：表单类操作，表单类是input[type=xxx]的简写
1.7.1：input，匹配所有input,textarea, select 和button元素
1.7.2：text，匹配所有的单行文本框
HTML代码：<form> <input type="button" value="Input Button"/> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option</option></select> <textarea></textarea> <button>Button</button></form>结果如下：$(":input") #匹配所有input的表单，[<input type="button" value="Input Button">, <input type="checkbox">, <input type="file">, <input type="hidden">, <input type="image">, <input type="password">, <input type="radio">, <input type="reset">, <input type="submit">, <input type="text">, <select>…</select>, <textarea></textarea>, <button>Button</button>]$(":text") #文本框,等于匹配了<input type="text">[<input type="text">]1.7.3：:password，匹配所有密码框
1.7.4：:radio，匹配所有单选按钮
1.7.5：:checkbox，查找所有复选框
HTML代码<form> <input type="button" value="Input Button"/> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option</option></select> <textarea></textarea> <button>Button</button></form>结果如下：$(":password")[<input type="password">]$(":radio")[<input type="radio">]$(":checkbox")[<input type="checkbox">]1.7.6：:submit，查找所有提交按钮
1.7.7：:image，匹配所有图像域
$(":submit")[<input type="submit">, <button>Button</button>]$(":image")[<input type="image">]1.7.8：:reset，查找所有重置按钮
1.7.9：:button，匹配所有按钮
1.7.10: file，匹配所有文件域
HTML代码：<form> <input type="button" value="Input Button"/> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option</option></select> <textarea></textarea> <button>Button</button></form>结果如下：$(":reset")[<input type="reset">]$(":button")[<input type="button" value="Input Button">, <button>Button</button>]$(":file")[<input type="file">]1.8:表单对象属性
1.8.1:enabled，匹配所有可用元素
1.8.2:disabled，匹配所有不可用元素
HTML代码：<form> 北京：<input name="i1" type="checkbox" checked="checked" disabled="disabled"/> 上海：<input name="i1" type="checkbox" /> 深圳：<input name="i1" type="checkbox" checked="checked"/><br> 男：<input name="n1" type="radio" selected="selected"/> 女：<input name="n1" type="radio" checked="checked"/> <select> <option value="1" selected="selected">1</option> <option value="http://www.mamicode.com/2">2</option> <option value="3">3</option> </select></form>结果如下：$("input:enabled")[<input name="i1" type="checkbox">, <input name="i1" type="checkbox" checked="checked">, <input name="n1" type="radio" selected="selected">, <input name="n1" type="radio" checked="checked">]$("input:disabled")[<input name="i1" type="checkbox" checked="checked" disabled="disabled">]
1.8.3:checked，匹配所有选中的被选中元素(复选框/单选框等,select中的option),对于select元素来说获取选中推荐使用selected
1.8.4:selected，匹配所有选中的option元素
<form> 北京：<input name="i1" type="checkbox" checked="checked" disabled="disabled"/> 上海：<input name="i1" type="checkbox" /> 深圳：<input name="i1" type="checkbox" checked="checked"/><br> 男：<input name="n1" type="radio" selected="selected"/> 女：<input name="n1" type="radio" checked="checked"/> <select> <option value="1" selected="selected">1</option> <option value="2">2</option> <option value="3">3</option> </select></form>结果如下：$("input:checked")[<input name="i1" type="checkbox" checked="checked" disabled="disabled">, <input name="i1" type="checkbox" checked="checked">, <input name="n1" type="radio" checked="checked">]$("select option:selected")[<option value="1" selected="selected">1</option>]python成长之路16
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。