JQuery第一讲
jQuery简介
jQuery是一个开源的，JavaScript脚本库。
jQuery体系
部署jQuery开发环境
- 去网站下载jquery代码
脚下留心：从官方网站同一个版本可以下载2个文件，一个是源文件，一个是压缩文件，我们开发的时候使用压缩文件。
- 在页面引入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> </td>
</tr>
</table></th>
</tr>
</table>
<input type=”button” value=”点击” id=”btn”>
过滤选择器
-
位置过滤
- :first——第一个元素
- :last——最后一个元素
- :even——第偶数个元素（下标从0开始）
- :odd——第奇数个元素
- :eq(index)——第index元素
- :gt(index)——大于第index的元素
- :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”>
-
内容过滤
- :contains(‘内容’)，包含指定内容的元素
- :has() 包含某个子元素
- : not() 去除某个元素
- :header 匹配所有标题h1~h6
- :empty 匹配所有空元素
- :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” />
-
子元素过滤选择器
- :first-child——父元素的第一个子元素
- :last-child——父元素的最后一个子元素
- :only-child——父元素只有一个元素的节点
- :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” />
-
表单过滤选择器
- :input——匹配input, select, textarea，button标签
- :text——匹配文本框
- :password——匹配密码框
- :enabled——可以的元素
- :radio——单选按钮
- :checkbox——复选框
- :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>
-
属性过滤选择器
- [属性]：匹配带有指定属性的元素
- [属性=value]：匹配属性=value的元素
- [属性!=value]：匹配属性!=value的元素
- [属性^=value]：匹配属性以value开头的元素
- [属性$=value]：匹配属性以value结尾的元素
- [属性*=value]：匹配属性以包含value的元素
- [属性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>
操作属性
- jQuery对象.attr(属性)：获取对象的属性值，只获取第一个元素
- jQuery对象.attr(属性,值)：将值付给所有的jQuery对象
- jQuery对象.attr(属性,function(){}); //将函数的返回值付给属性
- jQuery对象.attr({属性:属性值,属性:属性值})
- jQuery对象.removeAttr(属性名)
操作类
- addClass(类名)——添加类
- removeClass(类名)——删除类
- toggleClass(类名)——交替
直接样式操作
- css(name)：获取样式的值
- css(name,value)：给样式赋值
- css({样式:值，样式:值})
offset()：偏移
坐标原点是浏览器客户端的左上角
注意：
宽度、高度操作
- width()：获取宽度
- width(value)：设置宽度
- height()：获取高度
- height(value)：设置高度
操作HTML和文本
- html()：获取HTML代码
- html(value)：将value作为HTML付给元素
- text()：获取文本
- text(value)：将value的值作为文本付给元素
值操作
- val()：获取值
- 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()实现选中功能
- 能够在html代码中引入jQuery库
- 能够理解选择器的作用
- 能够说出或使用多种选择器
- 能够组合使用选择器
- 能够使用jQuery操作html属性
- 能够使用jQuery操作css属性
- 能够熟练使用jQuery()的页面载入事件ready()
- 能够理解each()的作用
- 能够使用each()方法遍历jQuery对象
- 能够解释dom对象和jQuery对象的区别
- 能够将dom对象和jQuery对象相互转换
- 能够使用bind()方法绑定事件
- 能够熟练使用jQuery的常规事件绑定语法
- 能够使用事件切换方法hover(),toggle()
- 能够使用jQuery的基本特效方法 show(),hide(),toggle()
- 能够使用jQuery的滑动特效方法 slideDown(),slideUp(),slideToggle()
- 能够使用jQuery的淡入淡出特效方法
- 能够将内容插入到元素内部或外部
- 能够清空元素内容或删除元素本身
- 能够使用replaceWith()替换元素
- 能够复制指定元素
- 能够把内容从外面包裹上新元素
- 能够使用元素查找或匹配的多个方法
- 能够理解jQuery中插件的作用
- 能够制作自定义插件
- 能够使用jQuery实现ajax的get请求
- 能够使用jQuery实现ajax的post请求
