Python 第十三篇之二：jQuery基础
一：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">]
Python 第十三篇之二：jQuery基础的更多相关文章
- Python之路【第十三篇】：jQuery -暂无内容-待更新
Python之路[第十三篇]:jQuery -暂无内容-待更新
- Python开发【第十三篇】：jQuery（二）
http://www.bubuko.com/infodetail-1438296.html 处理完毕需要整理贴进来 Python之路[第十三篇]jQuery案例-Form表单&插件及扩展 ...
- python爬虫学习笔记（二）——基础篇之爬虫基本原理
1.什么是爬虫? 请求网站并提取数据的自动化程序 2.爬虫基本流程 2.1发起请求 通过HTTP库向目标站点发起请求,即发起一个Request,请求可以包含额外的headers等信息,等待服务器响应: ...
- Python 第十三篇之一：前端页面 js和dome
一:JavaScript: JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的 ...
- Python Web框架篇：Django Model基础
model是关于你的数据的单一的,确定的信息来源. 它包含您正在存储的数据的基本字段和行为.Django通过抽象化的模型层(models)为你的网络应用提供对于数据的结构化处理和操作处理,数据库相关的 ...
- Python+Selenium中级篇之-二次封装Selenium中几个方法
本文来介绍,如何把常用的几个webdriver的方法封装到自己写的一个类中去,这个封装过程叫二次封装Selenium方法.我们把打开站点,浏览器前进和后退,关闭和退出浏览器这这个方法封装到一个新写的类 ...
- docker学习篇（二）---- 基础篇
引言 在之前的学习中,我知道了docker的三大组件分别是----镜像,容器,仓库.了解了这三个组件也就初步理解了docker.所以我学习了这三个组件,并记录下来. 镜像 docker在运行一个容器时 ...
- Hibernate游记——装备篇《二》(基础配置示例)
<?xml version='1.0' encoding='utf-8'?> <!DOCTYPE hibernate-configuration PUBLIC "-//Hi ...
- Python知识点总结篇（二）
列表 列表:一个值,包含多个字构成的序列,用[ ]括起来,[]是一个空列表,不包含任何值,类似于空字符串,负数下标表示从后边开始,-1表示列表最后一个下标,它是一种可变的数据类型,值可以添加.删除或改 ...
随机推荐
- 无法在web服务器上启动调试,此项目在使用一个被配置为使用特定IP地址的网站。请在项目URL中指定计算机名称。
解决方案:IIS服务器管理-default web site 绑定-选择使用的IP-编辑-IP地址:全部未匹配
- HTML+CSS笔记 CSS入门续集
继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代(标签). 语法: p{color:red;} <p> ...
- ThinkPHP 3.1.2 视图-1
一.模板的使用 (重点) a.规则 模板文件夹下[TPL]/[分组文件夹/][模板主题文件夹/]和模块名同名的文件夹[Index]/和方法名同名的文件 [index].html(.tpl) 更换模板文 ...
- hpu校赛--雪人的高度（离散化线段树）
1721: 感恩节KK专场——雪人的高度 时间限制: 1 Sec 内存限制: 128 MB 提交: 81 解决: 35 [提交][状态][讨论版] 题目描述 大雪过后,KK决定在春秋大道的某些区间 ...
- Android API 中文（76）——AdapterView.OnItemLongClickListener
前言 本章内容是android.widget.AdapterView.OnItemLongClickListener,版本为Android 2.3 r1,翻译来自"cnmahj", ...
- hadoop权威指南 chapter1 Meet Hadoop
Meet Hadoop 1.1 Data!(数据) Most of the data is locked up in the largest web properties (like search e ...
- Ext JS学习第十二天 Ext基础之操作dom ； get与fly 方法
此文用来记录学习笔记 •嗯!首先,什么是DOM(Document Object Model) –W3C对DOM的定义:文档对象模型是一个平台,一个中立于语言的应用程序编程接口(API),允许程序访问并 ...
- Ext JS学习第九天 Ext基础之 扩展原生的javascript对象
此文来记录学习笔记: •Ext对于原生的javascript对象进行了一系列的扩展,我们把他们掌握好,更能深刻的体会Ext的架构,从而对我们的web开发更好的服务, 源码位置,我们可以从开发包的这个位 ...
- 前端CSS规范大全
一.文件规范 1.文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解): 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用 ...
- [转]SAP中找表的方法
http://blog.chinaunix.net/uid-24063584-id-2642334.html 分类: 18种根据屏幕字段查找数据库表数据的技巧 帮助 18种根据屏幕字段查找潜在数据 ...