Python学习第六模块笔记（Web开发基础之jQuery）

1、jQuery是什么

jQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

jQuery版本：jQuery现有1.x、2.x和3.x版本，其中3.x版本为最新版本，兼容新版浏览器；1.x版本可兼容IE6/7/8版本的浏览器。

2、使用jQuery

jQuery API中文文档，猛戳这里。

2.1、引入jQuery及DOM与jQuery间的转换

下载的jQuery为js代码文件，可直接在HTML种通过<script>标签引入该js文件，调用时jQuery使用关键字jQuery或者$表示。

jQuery转换为DOM：jQuery对象[0]

DOM转换为jQuery：$(DOM对象)

2.2、选择器

jQuery种的选择器类似CSS选择器。

基本选择器：

• id选择器：$(“#id”)
• 标签选择器：$(“标签”)
• class选择器：$(“.class”)
• 组合选择器：$(“选择器,选择器,…”)，同时匹配多个选择器
• *：匹配所有元素

层级选择器：

• $(“选择器 选择器”)：查找指定选择器下的选择器

基本筛选器：

• :first：获取第一个元素，$(“选择器:first”)
• :last：获取最后一个元素，$(“选择器:last”)
• :eq(index)：匹配一个给定索引的元素，索引从0开始计数$(“选择器:eq(index)”)

属性选择器：

• [attribute]：匹配包含给定属性的元素
• [attribute=value]：匹配给定的属性是某个特定值的元素
• [attribute!=value]：匹配所有不含有指定的属性，或者属性不等于特定值的元素

2.3、筛选器

过滤：

• eq(index)：获取当前链式操作中第N个jQuery对象，返回jQuery对象，参数大于0时正向选取，为负数时反向选取，比如-1为倒数第一个
• first()：获取第一个元素
• last()：获取最后一个元素
• hasClass(class)：检查当前的元素是否含有某个特定的类，如果有则返回true

查找：

• children()：取得一个包含匹配元素集合中每一个元素的所有子元素的元素集合，可以通过可选的表达式来过滤所匹配的子元素
• find()：搜索所有与指定表达式匹配的元素，可以通过可选的表达式来过滤所匹配的子元素
• next()：取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合，可以通过可选的表达式来过滤所匹配的子元素
• nextAll()：查找当前元素之后所有的同辈元素，可以通过可选的表达式来过滤所匹配的子元素
• nextUntil(expr, filter)：查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止；expr，用于筛选祖先元素的表达式；filter，一个字符串，其中包含一个选择表达式匹配元素
• offsetParent()：返回父元素中第一个position设置为relative或者absolute的元素，此方法仅对可见元素有效
• parent()：取得一个包含所有匹配元素的唯一父元素的元素集合，可以通过可选的表达式来过滤所匹配的子元素
• parents()：取得一个包含所有匹配元素的祖先元素的元素集合（不包含根元素），可以通过可选的表达式来过滤所匹配的子元素
• parentUntil(expr, filter)：查找当前元素的所有父辈元素，直到遇到匹配的那个元素为止；expr，用于筛选祖先元素的表达式；filter，一个字符串，其中包含一个选择表达式匹配元素
• prev()：取得一个包含匹配元素集合中每一个元素紧邻的前一个同辈元素的元素集合，可以通过可选的表达式来过滤所匹配的子元素
• prevAll()：查找当前元素之前所有的同辈元素，可以通过可选的表达式来过滤所匹配的子元素
• prevUntil(expr, filter)：查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止；expr，用于筛选祖先元素的表达式；filter，一个字符串，其中包含一个选择表达式匹配元素
• siblings()：取得一个包含匹配元素集合中每一个元素的所有唯一同辈元素的元素集合，可以通过可选的表达式来过滤所匹配的子元素

2.4、属性操作

属性

• attr()： 设置或返回被选元素的属性值
• removeAttr()： 从每一个匹配的元素中删除一个属性
• prop()： 设置或返回被选元素的属性值，用于checkbox、radio
• removeProp()：删除由prop()方法设置的属性值

CSS

• addClass()：为每个匹配的元素添加指定的CSS
• removeClass()：从所有匹配的元素中删除全部或指定的CSS
• toggleClass()：如果存在则删除，不存在则添加

HTML代码/文本/值

• html()：取得第一个匹配元素的HTML内容
• text()：取得所有匹配元素的内容
• val()：取得匹配元素当前的value值

2.5、文档操作

内部插入

• append()：向每个匹配元素的内部追加内容
• appendTo()：把所有匹配的元素追加到另一个指定的元素集合中
• prepend()：向每个匹配的元素内部前置内容
• prependTo()：把所有匹配的元素前置到另一个指定元素集合中

外部插入

• after()：在每个匹配的元素之后插入内容
• before()：在每个匹配的元素之前插入内容
• insertAfter()：把所有匹配的元素插入到另一个指定的元素集合的后面
• insertBefore()：把所有匹配的元素插入到另一个指定的元素集合的前面

删除

• empty()：删除匹配的元素集合中所有的子节点
• remove()：从DOM中删除所有匹配的元素

2.6、CSS操作

CSS

• css()：返回或设置匹配元素的样式属性

位置

• offset()：获取或设置匹配元素在当前window的相对偏移
• position()：获取或设置匹配元素相对父元素的偏移
• scrollTop()：获取或设置匹配元素相对滚动条顶部的偏移
• scrollLeft()：获取或设置匹配元素相对滚动条左侧的偏移

尺寸

• height()：获取或设置匹配元素当前计算的高度值(px)
• width()：获取或设置第一个匹配元素当前计算的宽度值(px)
• innerHeight()：获取或设置第一个匹配元素内部区域高度(包括补白、不包括边框)
• innerWidth()：获取或设置第一个匹配元素内部区域宽度(包括补白、不包括边框)
• outerHeight()：获取或设置第一个匹配元素外部高度(默认包括补白和边框)
• outerWidth()：获取或设置第一个匹配元素外部宽度(默认包括补白和边框)

2.7、事件绑定

• on(“事件”, function(){})：在选择元素上绑定一个或多个事件
• off(“事件”, function(){})：在选择元素上移除一个或多个事件
• bind(“事件”, function(){})：在3.0中被on取代
• unbind(“事件”, function(){})：在3.0中被off取代
• delegate(“事件”, function(){})：可用于为新增标签绑定事件
• undelegate(“事件”, function(){})：可用于为新增标签移除绑定事件

注：在当函数返回false时，即阻止该事件发生。

2.8、Ajax

$.ajax({
    url: "",    // 发送请求到某个URL
    type: "",    // 发送请求的方式，如GET或POST
    data: {},    // 发送的数据，可使用$(选择器).serialize()一次提交form里的所有数据
    traditional: true,    // 可以在data中发送数组等非字符串类型
    dataType: "JSON",    // 将服务端返回的字符串进行序列化
    success:function(data){},    // data即为服务端返回的数据，当服务端返回信息时该函数被调用
    error:function(){},    // 当服务端没有接收到请求或处理失败该函数被调用
})

2.9、Cookie

jQuery可以通过jQuery Cookie插件来简单的操作Cookie。

<script src="jquery.cookie.js"></script>

//获取Cookie
$.cookie("xxx");

//设置Cookie
$.cookie(key, value, {expires:n, path:"/", domain:"域名", secure:ture/false});
//参数：
       expires  -->  有效期，单位天，可设置为数字或日期对象，默认不写则关闭浏览器时清除Cookie
       path     -->  生效路径
       domain   -->  生效域名
       secure   -->  HTTPS传输

//删除Cookie
$.cookie("xxx", null)

2.10、自定义扩展与自执行函数

自定义扩展

可以使用以下两种方式自定义扩展：

1. $.extend({“扩展名”:function(){}})，调用方法：$.扩展名
2. $.fn.extend({“扩展名”:function(){}})，调用方法：$(选择器).扩展名

自执行

$(function(){})，当页面的整个框架加载完成（只加载框架不加载具体元素）后自动执行。

自执行函数，(function(arg){})(jQuery)，可以用于解决多个扩展的全局变量或方法名相同而造成的冲突。