jQuery简介

jQuery是一个开源的，JavaScript脚本库。

jQuery体系

部署jQuery开发环境

1. 去网站下载jquery代码

脚下留心：从官方网站同一个版本可以下载2个文件，一个是源文件，一个是压缩文件，我们开发的时候使用压缩文件。

1. 在页面引入jQuery文件

jQuery选择器

jQuery中，所有的操作都要转成jQuery对象进行操作。通过$()将元素转成JQuery对象。

$()=jQuery()

基本选择器

id选择器、class选择器、标签选择器、组合选择器、后代选择器，子类选择器

<style type=”text/css”>

.rose{

background-color:#11e4e1;

}

.indianred{

background-color:#cd5d5c;

}

.red{

color:#F00;

}

</style>

<!—引入jQuery文件–>

<script type=”text/javascript” src=’js/jquery-1.11.3.min.js’></script>

<script type=”text/javascript”>

//但页面加载完成时

$(document).ready(function(e) {

//当按钮点击的时候

$(‘#btn’).click(function(e) {

//$(‘#first’).addClass(‘indianred’); //id选择器

//$(‘.second’).addClass(‘indianred’); //class样式

//$(‘th’).addClass(‘indianred’); //标签选择器

//$(‘#first,.second’).addClass(‘rose’); //组合选择器

//$(‘.second td’).addClass(‘red’); //后代选择器

//$(‘.second>td’).addClass(‘red’); //后代选择器

//$(‘#first+.second’).addClass(‘indianred’); //紧挨着#first的.second

$(‘#first~.second’).addClass(‘indianred’); //#first后所有的.second

});

});

</script>

<table border=’1′ bordercolor=’#000′ align=’center’ width=’500′>

<tr>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

</tr>

<tr id=’first’>

<td>张三</td>

<td>男</td>

<td>22</td>

</tr>

<tr class=’second’>

<td>李四</td>

<td>男</td>

<td>33</td>

</tr>

<tr class=’second’>

<td>王五</td>

<td>女</td>

<td>20</td>

</tr>

<tr class=’second’>

<th colspan=”3″><table width=”100%” border=”1″>

<tr>

<td>aa</td>

<td>bb</td>

<td>&nbsp;</td>

</tr>

</table></th>

</tr>

</table>

<input type=”button” value=”点击” id=”btn”>

过滤选择器

1. 位置过滤
   1. :first——第一个元素
   2. :last——最后一个元素
   3. :even——第偶数个元素（下标从0开始）
   4. :odd——第奇数个元素
   5. :eq(index)——第index元素
   6. :gt(index)——大于第index的元素
   7. :lt(index)——小于第index的元素

<style type=”text/css”>

.rose{

background-color:#11e4e1;

}

.indianred{

background-color:#cd5d5c;

}

.red{

color:#F00;

}

</style>

<script type=”text/javascript” src=”js/jquery-1.11.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#btn’).click(function(e) {

//$(‘tr:first’).addClass(‘indianred’); //第一个tr

//$(‘tr:last’).addClass(‘indianred’); //最后一个tr

//$(‘tr:even’).addClass(“indianred”); //第偶数个元素（下标从0开始)

//$(‘tr:odd’).addClass(“indianred”); //第奇数个元素

//$(‘tr:eq(2)’).addClass(‘indianred’); //第2个元素

$(‘tr:gt(1)’).addClass(‘indianred’); //大于1的元素

$(‘tr:lt(1)’).addClass(‘rose’); //小于1的元素

});

});

</script>

<table border=’1′ bordercolor=’#000′ align=’center’ width=’500′>

<tr>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

</tr>

<tr id=’first’>

<td>张三</td>

<td>男</td>

<td>22</td>

</tr>

<tr class=’second’>

<td>李四</td>

<td>男</td>

<td>33</td>

</tr>

<tr class=’second’>

<td>王五</td>

<td>女</td>

<td>20</td>

</tr>

</table>

<input type=”button” value=”点击” id=”btn”>

1. 内容过滤
   1. :contains(‘内容’)，包含指定内容的元素
   2. :has() 包含某个子元素
   3. : not() 去除某个元素
   4. :header 匹配所有标题h1~h6
   5. :empty 匹配所有空元素
   6. :parent 匹配父节点

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#btn’).click(function(e) {

//$(‘div:contains(“锄禾”)’).addClass(‘indianred’); //包含”锄禾”的div

//$(‘div:has(p)’).addClass(‘indianred’); //含有p标记的div

//$(‘div:has(#first)’).addClass(‘indianred’); //含有#first的div

//$(‘div:not(.no1)’).addClass(‘indianred’); //去除掉.no1的div

//$(‘:header’).addClass(‘indianred’); //选中所有的h1~h6

//$(‘:empty’).addClass(’empty’); //匹配所有空元素

$(‘#first:parent’).addClass(’empty’); //匹配#first的父节点

});

});

</script>

<div class=”first no1″><p>锄禾日当午</p></div>

<div class=”first”><p id=”first”>汗滴禾下土</p></div>

<h1>一级标题</h1>

<h2>二级标题</h2>

<div></div>

<input type=”button” value=”点击” id=”btn” />

1. 子元素过滤选择器
   1. :first-child——父元素的第一个子元素
   2. :last-child——父元素的最后一个子元素
   3. :only-child——父元素只有一个元素的节点
   4. :nth-child(编号,even,odd)——父元素下的指定编号，偶数，奇数的子元素

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#btn’).click(function(e) {

//$(‘li:first-child’).addClass(‘indianred’); //li父元素的第一个子元素

//$(‘li:last-child’).addClass(‘indianred’); //li父元素的最后一子元素

//$(‘li:only-child’).addClass(‘indianred’); //li父元素只有一个元素的节点

//$(‘li:nth-child(2)’).addClass(‘indianred’); //li父元素下第2个子元素，从1开始

//$(‘li:nth-child(even)’).addClass(‘indianred’); //li父元素下第偶数个子元素

$(‘li:nth-child(odd)’).addClass(‘indianred’); //li父元素下第奇数个子元素

});

});

</script>

<ul>

<li>三国演义</li>

<li>水浒传</li>

<li>西游记</li>

</ul>

<ul>

<li>钢铁侠</li>

<li>超人</li>

</ul>

<ul>

<li>大棒子</li>

</ul>

<input type=”button” value=”点击” id=”btn” />

1. 表单过滤选择器
   1. :input——匹配input, select, textarea，button标签
   2. :text——匹配文本框
   3. :password——匹配密码框
   4. :enabled——可以的元素
   5. :radio——单选按钮
   6. :checkbox——复选框
   7. :checked——选中的元素

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#btn’).click(function(e) {

//$(‘:input’).addClass(‘indianred’); //表示input,select,textarea，button标签

//$(‘:text’).addClass(‘indianred’); //文本框

//$(‘:password’).addClass(‘indianred’); //密码框

//$(‘:enabled’).addClass(‘indianred’); //可用的元素

//$(‘:radio,:checkbox’).addClass(‘style1’); //单选按钮和复选框

$(‘:checked’).addClass(‘style1’); //选中的元素

});

});

</script>

姓名：<input type=”text” disabled=”disabled”/><br />

密码：<input type=”password” /><br />

性别：<input type=”radio” name=”sex” value=”男” checked=”checked” />男

<input type=”radio” name=”sex” value=”女” />女<br />

爱好：<input type=”checkbox” value=”爬山” checked=”checked” />爬山

<input type=”checkbox” value=”游泳” />游泳 <br />

籍贯：<select>

<option>上海</option>

<option>北京</option>

</select><br />

意见和建议：<textarea></textarea> <br />

<input type=”submit” value=”提交” />

<input type=”reset” value=”重置” />

<input type=”button” value=”点击” id=”btn” />

<button>这也是按钮</button>

1. 属性过滤选择器
   1. [属性]：匹配带有指定属性的元素
   2. [属性=value]：匹配属性=value的元素
   3. [属性!=value]：匹配属性!=value的元素
   4. [属性^=value]：匹配属性以value开头的元素
   5. [属性$=value]：匹配属性以value结尾的元素
   6. [属性*=value]：匹配属性以包含value的元素
   7. [属性1=value1][属性2=value2]：同时具有属性1和属性2的元素

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#btn’).click(function(e) {

//$(‘:text[class]’).addClass(‘indianred’); //带有class属性的文本框元素

//$(‘[class]’).addClass(‘indianred’); //带有class属性的所有元素

//$(‘:text[name=firstname]’).addClass(‘indianred’); //name=firstname的文本框元素

//$(‘:text[name!=firstname]’).addClass(‘indianred’); //name!=firstname的文本框元素

//$(‘:text[name^=first]’).addClass(‘indianred’); //name属性的值以first开头的元素

//$(‘:text[name$=name]’).addClass(‘indianred’); //name属性的值以name结尾的元素

//$(‘:text[name*=stna]’).addClass(‘indianred’); //name属性中带有stna的元素

$(‘:text[name$=name][class]’).addClass(‘indianred’);//name属性的值以name结尾的元素，同时带有class属性

});

});

</script>

<input type=”text” name=”firstname” value=”张” class=’stu’ /> <br />

<input type=”text” name=”middlename” value=”三” /><br />

<input type=”text” name=”lastname” value=”峰” /><br />

<input type=”text” name=”firstcity” value=”上海” class /><br />

<input type=”button” value=”点击” id=”btn” />

<div class=””>锄禾日当午</div>

操作属性

1. jQuery对象.attr(属性)：获取对象的属性值，只获取第一个元素
2. jQuery对象.attr(属性,值)：将值付给所有的jQuery对象
3. jQuery对象.attr(属性,function(){}); //将函数的返回值付给属性
4. jQuery对象.attr({属性:属性值,属性:属性值})
5. jQuery对象.removeAttr(属性名)

操作类

1. addClass(类名)——添加类
2. removeClass(类名)——删除类
3. toggleClass(类名)——交替

直接样式操作

1. css(name)：获取样式的值
2. css(name,value)：给样式赋值
3. css({样式:值，样式:值})

offset()：偏移

坐标原点是浏览器客户端的左上角

注意：

宽度、高度操作

1. width()：获取宽度
2. width(value)：设置宽度
3. height()：获取高度
4. height(value)：设置高度

操作HTML和文本

1. html()：获取HTML代码
2. html(value)：将value作为HTML付给元素
3. text()：获取文本
4. text(value)：将value的值作为文本付给元素

值操作

1. val()：获取值
2. val(value)：给value属性赋值

each循环

方法一：$.each(数组/对象，回调函数)

方法二：jQuery元素.each(回调函数)

例题（复选框选择）

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

//全选

$(‘:button:first’).click(function(e) {

$(‘:checkbox’).attr(‘checked’,’checked’);

});

//反选

$(‘:button:eq(1)’).click(function(e) {

$(‘:checkbox’).each(function(index, element) {

$(this).attr(‘checked’,!$(this).attr(‘checked’));

});

});

//取消全选

$(‘:button:last’).click(function(e) {

$(‘:checkbox’).removeAttr(‘checked’);

});

});

</script>

<input type=”button” value=”全选” />

<input type=”button” value=”反选” />

<input type=”button” value=”取消全选” />

<form>

<input type=”checkbox” value=”读书” name=”hobby” />读书<br />

<input type=”checkbox” value=”游泳” name=”hobby”/>游泳<br />

<input type=”checkbox” value=”看报” name=”hobby”/>看报<br />

</form>

脚下留心：jQuery版本不同，有少部分方法也会有差异。

多学一招：通过val()实现选中功能

1. 能够在html代码中引入jQuery库
2. 能够理解选择器的作用
3. 能够说出或使用多种选择器
4. 能够组合使用选择器
5. 能够使用jQuery操作html属性
6. 能够使用jQuery操作css属性
7. 能够熟练使用jQuery()的页面载入事件ready()
8. 能够理解each()的作用
9. 能够使用each()方法遍历jQuery对象
10. 能够解释dom对象和jQuery对象的区别
11. 能够将dom对象和jQuery对象相互转换
12. 能够使用bind()方法绑定事件
13. 能够熟练使用jQuery的常规事件绑定语法
14. 能够使用事件切换方法hover(),toggle()
15. 能够使用jQuery的基本特效方法 show(),hide(),toggle()
16. 能够使用jQuery的滑动特效方法 slideDown(),slideUp(),slideToggle()
17. 能够使用jQuery的淡入淡出特效方法
18. 能够将内容插入到元素内部或外部
19. 能够清空元素内容或删除元素本身
20. 能够使用replaceWith()替换元素
21. 能够复制指定元素
22. 能够把内容从外面包裹上新元素
23. 能够使用元素查找或匹配的多个方法
24. 能够理解jQuery中插件的作用
25. 能够制作自定义插件
26. 能够使用jQuery实现ajax的get请求
27. 能够使用jQuery实现ajax的post请求