1.jquery简介
jQuery 是一个 JavaScript 库。它极大的简化了 JavaScript 编程。
jQuery对JavaScript进行了一系列的封装,极大的解放了开发人员的双手,将开发人员从繁琐的JavaScript代码中解放了出来。
举个十分简单的例子:
场景:获取获取id为mid的标签的值,
在javascript中:
document.getElementById().value;
而在jQuery中:
$("#mid").val();
这只是一个小小的例子,却不难看出jQuery的锋利。
下面开始正式进入jQuery的学习。
2.jquery的获取
获取jQuery有两种方式,一种是到官网上去下载,另一种是通过CDN引用
1.官网下载 (推荐)
网址:http://jquery.com/download/
官网上有两个版本的 jQuery 可供下载:
- Production version - 用于实际的网站中,已被精简和压缩。
- Development version - 用于测试和开发(未压缩,是可读的代码)
下载完毕后使用script标签将它引用到HTML页面中即可使用,方式如下
<head> <script src="jquery-1.10.2.min.js"></script> </head>
2.CDN方式引用
如果您不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它。
百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。
如果你的站点用户是国内的,建议使用百度、又拍云、新浪等国内CDN地址,如果你站点用户是国外的可以使用谷歌和微软。
下面介绍几个CDN地址:
a.百度 CDN:
<head> <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"> </script> </head>
b.新浪CDN
<head> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script> </head>
c.谷歌CDN
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> </head>
3.jQuery的语法
基础语法:$(selector).action()
1.美元符号定义 jQuery
2.选择符(selector)"查询"和"查找" HTML 元素
3.jQuery 的 action() 执行对元素的操作
例如:$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
4.jQuery的九大选择器
1.基本选择器(最常用)
a.元素选择器
例:获取所有的div元素: $("div")
b.id选择器
例:获取id为mid的元素: $("#mid")
c.class选择器
例:获取class为mclass的元素: $(".mclasss") 注:mclass前面的点是class选择器的标志。
此外,多个选择器可以并列使用,只需在中间加上逗号隔开即可。
例:设置所有div元素和id为mid的元素的背景色为#FF00FF:$("div,#mid").css("background","#FF00FF");
2.层次选择器
a.获取body内的所有div $("body div")
b.获取body内的子<div> $("body>div") 注:与a不同的是b中body标签与div标签是父子关系
c.获取id为div2的标签的下一个div标签 $("#div2+div")
3.基础过滤选择器
a.获取第一个 div 元素 $("div:first")
b.获取最后一个div元素 $("div:last")
c.获取class不是mclass的所有div元素 $("div:not(.mclass)")
d.获取索引值为偶数的div元素 $("div:even")
e.获取索引值为奇数的div元素 $("div:odd")
f.获取索引值大于2的div元素 $("div:gt(2)")
g.获取索引值为2的div元素 $("div:eq(2)")
h.获取索引值小于2的div元素 $("div:lt(2)")
4.内容选择器
a.获取含有文本“text”的div元素 $("div.contains('text')")
b.获取不含有文本“text”的div元素 $("div:not(:contains('text'))")
c.获取不包括子元素的空div元素 $("div:empty")
d.获取含有子元素的非空div元素 $("div:parent")
e.获取含有class为mclass的div元素 $("div:has(.mclass)")
5.可见度过滤选择器
a.获取所有可见的div元素 $("div:visible")
b.获取所有不可见的div元素 $("div:hidden")
6.属性过滤器
a.获取含有属性name的div元素 $("div[name]")
b.获取属性name值等于nm的div元素 $("div[name=nm]")
c.获取属性name值不等于nm的div元素 $("div[name!=nm]")
7.子元素过滤选择器
8.表单对象属性过滤器
9.表单选择器
/********************待续***********************************/
最怕一生碌碌无为,还说平凡难能可贵。