python成长之路16
一：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="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的更多相关文章
- 【Python成长之路】Python爬虫 --requests库爬取网站乱码（\xe4\xb8\xb0\xe5\xa）的解决方法【华为云分享】
[写在前面] 在用requests库对自己的CSDN个人博客(https://blog.csdn.net/yuzipeng)进行爬取时,发现乱码报错(\xe4\xb8\xb0\xe5\xaf\x8c\ ...
- （转）Python成长之路【第九篇】：Python基础之面向对象
一.三大编程范式 正本清源一:有人说,函数式编程就是用函数编程-->错误1 编程范式即编程的方法论,标识一种编程风格 大家学习了基本的Python语法后,大家就可以写Python代码了,然后每个 ...
- 【Python成长之路】装逼的一行代码：快速共享文件
[Python成长之路]装逼的一行代码:快速共享文件 2019-10-26 15:30:05 华为云 阅读数 335 文章标签: Python编程编程语言程序员Python开发 更多 分类专栏: 技术 ...
- python成长之路第三篇(1)_初识函数
目录: 函数 为什么要使用函数 什么是函数 函数的返回值 文档化函数 函数传参数 文件操作(二) 1.文件操作的步骤 2.文件的内置方法 函数: 一.为什么要使用函数 在日常写代码中,我们会发现有很多 ...
- 我的Python成长之路---第二天---Python基础（7）---2016年1月9日（晴）
再说字符串 一.字符串的编码 字符串的编码是个很令人头疼的问题,由于计算机是美国人发明的,他们很理所当然的认为计算机只要能处理127个字母和一些符号就够用了,所以规定了一个字符占用8个比特(bit)也 ...
- 我的Python成长之路---第一天---Python基础（1）---2015年12月26日（雾霾）
2015年12月26日是个特别的日子,我的Python成之路迈出第一步.见到了心目中的Python大神(Alex),也认识到了新的志向相投的伙伴,非常开心. 尽管之前看过一些Python的视频.书,算 ...
- 我的Python成长之路---第三天---Python基础（13）---2016年1月16日（雾霾）
五.Python的常用的内置函数 Python为我们准备了大量的内置函数,如下图所示 这里我们只讨论红框内的内置函数 abs(x) 返回一个数的绝对值(模),参数可以是真说或浮点数 >>& ...
- 我的Python成长之路---第四天---Python基础（16）---2016年1月23日（寒风刺骨）
四.正则表达式 字符串是编程时涉及到的最多的一种数据结构,对字符串进行操作的需求几乎无处不在.比如判断一个字符串是否是合法的Email地址,虽然可以编程提取@前后的子串,再分别判断是否是单词和 ...
- 我的Python成长之路---第三天---Python基础（12）---2016年1月16日（雾霾）
四.函数 日常生活中,要完成一件复杂的功能,我们总是习惯把“大功能”分解为多个“小功能”以实现.在编程的世界里,“功能”可称呼为“函数”,因此“函数”其实就是一段实现了某种功能的代码,并且可以供其它代 ...
随机推荐
- Java的static详解
static ['stætɪk] n. 静电:静电干扰 adj. 静态的:静电的:静力的 在计算机上我们译为:静态的.在Java种根据它修饰对象不同,我们可以划分为 1. static对象 2. st ...
- Android发展简单介绍
Android一词的本义指“机器人”,同一时候也是Google于2007年11月5日宣布的基于Linux平台的开源手机操作系统的名称,该平台由操作系统.中间件.用户界面和应用软件组成,号称是首个为移动 ...
- 关于Windows Phone的资源文件Build Action属性
最近一朋友问了一个问题,他想引用一个本地图片到页面上的Image控件,可是发现用Application的GetResourceStream得到的结果是个null值,当时第一个想到的就是他图片的Buil ...
- java web分享ppt大纲 －－ servlet容器简介
今天在公司分享了java web的ppt,把ppt大纲放在这里,希望可以帮助需要的人 servlet容器简介 定义 狭义上的,servlet容器为java Web应用提供运行时环境,负责管理servl ...
- Git跨平台中文乱码临时解决方案
Git 是一个非常优秀的分布式版本控制系统,最初为Linux Kernel版本管理进行量身定做.优点是,和其他版本控制系统相比,稳定,速度快,跨平台,易学易用,无需要花费成本.更多优点请点击阅读:ht ...
- C#DB2开发问题随记
最近公司有个小工具需要用到DB2数据库,以前没玩过DB2,觉得应该很容易就实现了. 这个小工具最开始用了Nhibernate来连接DB2,Nhibernate也是第一次用..实在是惭愧啊... 第一次 ...
- HOOK API （一）——HOOK基础+一个鼠标钩子实例
HOOK API (一)——HOOK基础+一个鼠标钩子实例 0x00 起因 最近在做毕业设计,有一个功能是需要实现对剪切板的监控和进程的防终止保护.原本想从内核层实现,但没有头绪.最后决定从调用层入手 ...
- 搜索（BFS）
Problem B: Fire! Joe works in a maze. Unfortunately, portions of the maze have caught on fire, and t ...
- 提高PHP编程效率
1.如果能将类的方法定义成static,就尽量定义成static,它的速度会提升将近4倍. 2.$row['id']的速度是$row[id]的7倍. 3.echo比print快,并且使用echo的多重 ...
- jQuery.validate 中文 API
名称 返回类型 描述 validate(options) Validator 验证所选的 FORM. valid() Boolean 检查是否验证通过. rules() Options 返回元素的验证 ...