1 概念
1.1 jquery概念
jquery:js组件
封装了很多简化js功能方法的组件(封装体)
富互联网技术：RIA(Rich Internet Applications)富互联网应用,具有高度互动性、丰富用户体验以及功能强大的客户端。
随着JavaScript、CSS、Ajax等技术的进步，越来越多的开发者将丰富多彩的程序及其功能进行封装，供其他人可以调用这些封装好的程序组件（框架）
常见的js组件：jquery、dojo、node.js ext.js
1.2 jquery功能
取得页面中的元素
修改页面的外观
改变页面的内容
响应用户的页面操作
为页面添加动态效果
无刷新获取服务器信息(ajax)
简化javascript任务
总结：jquery简化，封装和替代js
1.3 jquery的优势
轻量级 （Lightweight）
强大的选择器
出色的DOM操作封装
可靠的事件处理机制
出色的浏览器兼容性
1.4 学习jquery需要注意的事项和重点
-
重点1：jquery的选择器
-
重点2：jquery的常用方法
-
注意：不要把js、dhtml、jquery混淆
2 在页面引入jquery
2.1 在页面引入js文件
<!-- 引入本地js文件
<script type="text/javascript" src="jquery-1.6.4.min.js"></script> -->
<!-- 引入网络js文件-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
2.2 js和jquery的文档加载成功
<!-- 对比js的文件加载成功和jquery的文件加载成功 -->
<script type="text/javascript">
//js的onload事件只能注册一次：
window.onload=function(){
//alert("js的文件加载成功11");
}
window.onload=function(){
//alert("js的文件加载成功12");
}
</script>
<script type="text/javascript">
//jquery的文档加载成功事件 可以注册多次
$(function(){
//alert("jquery的文件加载成功111");
});
$(function(){
//alert("jquery的文件加载成功112");
});
//jquery的onload事件写法1：$(fn);
$(function(){
//alert("jquery的文件加载成功113");
});
//jquery的onload事件写法2：$().ready(fn);
$().ready(
function(){
//alert("jquery的文件加载成功114");
}
);
//jquery的onload事件写法3：$(document).ready(fn);
$(document).ready(
function(){
//alert("jquery的文件加载成功115");
}
);
</script>
2.3 实现各行变色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>各行变色</title>
<!-- 引入本地js文件
<script type="text/javascript" src="jquery-1.6.4.min.js"></script> -->
<!-- 引入网络js文件-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
table{
border:1px solid blue;
width:800px;
margin:10px auto;
border-collapse: collapse;
}
th,td{
border:1px solid blue;
padding:10px;
text-align: center;
}
.cla1{
background: #aaaaaa;
}
.cla2{
background: #66cc33;
}
</style>
</head>
<body>
<h1>通过css实现各行变色</h1>
<table id="tab_1">
<tr><th>学号</th><th>姓名</th><th>分数</th><th>性别</th></tr>
<tr class="cla1"><td>s0011</td><td>韩梅梅</td><td>11.9</td><td>女</td></tr>
<tr class="cla2"><td>s0012</td><td>韩梅1</td><td>12.9</td><td>女</td></tr>
<tr class="cla1"><td>s0013</td><td>韩梅2</td><td>13.9</td><td>女</td></tr>
<tr class="cla2"><td>s0014</td><td>韩梅3</td><td>41.9</td><td>女</td></tr>
<tr class="cla1"><td>s0015</td><td>韩梅4</td><td>51.9</td><td>女</td></tr>
</table>
<h1>通过js实现各行变色</h1>
<table id="tab_2">
<tr><th>学号</th><th>姓名</th><th>分数</th><th>性别</th></tr>
<tr ><td>s0011</td><td>韩梅梅</td><td>11.9</td><td>女</td></tr>
<tr ><td>s0012</td><td>韩梅1</td><td>12.9</td><td>女</td></tr>
<tr ><td>s0013</td><td>韩梅2</td><td>13.9</td><td>女</td></tr>
<tr ><td>s0014</td><td>韩梅3</td><td>41.9</td><td>女</td></tr>
<tr ><td>s0015</td><td>韩梅4</td><td>51.9</td><td>女</td></tr>
</table>
<script type="text/javascript">
window.onload=function(){
var collTr=document.getElementById("tab_2").getElementsByTagName("tr");
for(var i=1;i<collTr.length;i++){
collTr[i].className=i%2==0?"cla1":"cla2";
}
}
</script>
<h1>通过jquery实现各行变色</h1>
<table id="tab_3">
<tr><th>学号</th><th>姓名</th><th>分数</th><th>性别</th></tr>
<tr ><td>s0011</td><td>韩梅梅</td><td>11.9</td><td>女</td></tr>
<tr ><td>s0012</td><td>韩梅1</td><td>12.9</td><td>女</td></tr>
<tr ><td>s0013</td><td>韩梅2</td><td>13.9</td><td>女</td></tr>
<tr ><td>s0014</td><td>韩梅3</td><td>41.9</td><td>女</td></tr>
<tr ><td>s0015</td><td>韩梅4</td><td>51.9</td><td>女</td></tr>
</table>
<script type="text/javascript">
$(function(){
$("#tab_3 tr:even:not(:first)").addClass("cla1");
$("#tab_3 tr:odd").addClass("cla2");
});
</script>
</body>
</html>
3 jquery的选择器
3.0 基本页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery选择器：1 基本选择器</title>
<style type="text/css">
div,span,p{
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana;
}
div.bgRed {
width:55px;
height:55px;
background-color: #aaa;
font-size:12px;
}
div.hide {
display:none;
}
.none{
display: none;
}
</style>
</head>
<!-- 引入网络jquery文件:2-->
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<body>
<h3>jquery选择器：1 基本选择器</h3>
<input type="button" id="reset" value="手动重置" />
<script type="text/javascript">
$(function(){
$("#reset").click(function(){//onclick事件在jquery中对应的是click方法
$("*").removeAttr("style");//删除所有元素的style属性
});
});
</script>
<!-- 控制按钮 -->
<input type="button" value="改变 id为 one 的元素" id="btn1"/>
<input type="button" value="改变所有类为bgRed的元素" id="btn2"/>
<input type="button" value="改变元素名为 <div> 的元素" id="btn3"/>
<input type="button" value="改变所有元素" id="btn4"/>
<input type="button" value="改变所有span元素和 id 为two的元素" id="btn5"/>
<br><br>
<div class="one" id="one" >
id为one,class为one的div
<div class="bgRed">class为bgRed的div</div>
</div>
<div class="one">
class为one的div
<div class="bgRed">class为bgRed</div>
<div class="bgRed">class为bgRed</div>
</div>
<div class="one" id="two" style="background-color: #aaff00;" >
id为two,class为one的div
<div class="bgRed">class为bgRed的div</div>
</div>
<span id="mover">正在执行动画的span元素.</span>
<span class="none">我是隐藏的span</span>
<script type="text/javascript">
$(function(){
moveSpan();
});
function moveSpan(){
$("#mover").slideToggle(3000,moveSpan);//在三秒内切换可见性后 再执行自己
}
</script>
</body>
</html>
3.1 基本选择器
<!--
基本选择器：
通配符选择器 ： *
id选择器 ： #id值
类选择器 ： .class值
标签选择器 ： 标签名
组合选择器 ： 选择器1,选择器2...
-->
<!-- 控制按钮 -->
<input type="button" value="改变 id为 one 的元素" id="btn1"/>
<script type="text/javascript">
$(function(){
//在juery中onxxxx=fn事件对应的是xxxx(fn)方法
$("#btn1").click(function(){
$("#one").css("background-color","#cc3399");//设置样式
//alert($("#one").css("background-color"));//获取样式
});
});
</script>
<input type="button" value="改变所有类为bgRed的元素" id="btn2"/>
<script type="text/javascript">
$(function(){
$("#btn2").click(function(){
$(".bgRed").css("background-color","#cc99aa");//设置样式
});
});
</script>
<input type="button" value="改变元素名为 <div> 的元素" id="btn3"/>
<script type="text/javascript">
$(function(){
$("#btn3").click(function(){
$("div").css("background-color","#33aacc");//设置样式
});
});
</script>
<input type="button" value="改变所有元素" id="btn4"/>
<script type="text/javascript">
$(function(){
$("#btn4").click(function(){
$("*").css("background-color","#33aacc");//设置样式
});
});
</script>
<input type="button" value="改变所有span元素和 id 为two的元素" id="btn5"/>
<script type="text/javascript">
$(function(){
$("#btn5").click(function(){
$("span,#two").css("background-color","#33aacc");//设置样式
});
});
</script>
3.2 层次选择器
<!--
层次选择器：
父选择器 后代选择器： 选中指定父选择器下所有满足条件的后代元素
父选择器 > 子选择器：选中指定父选择器下所有满足条件的直接子元素
兄选择器 + 弟选择器： 选中紧挨的下一个弟元素
兄选择器 ~ 弟选择器： 选中所有满足条件的弟元素
-->
<!-- 控制按钮 -->
<input type="button" value="改变<body>内所有<div>元素" id="btn1"/>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("body div").css("background-color","#aa33cc");
});
});
</script>
<input type="button" value="改变<body>内子<div>元素" id="btn2"/>
<script type="text/javascript">
$(function(){
$("#btn2").click(function(){
$("body > div").css("background-color","#aa33cc");
});
});
</script>
<input type="button" value="改变id为one的下一个<div>元素" id="btn3"/>
<script type="text/javascript">
$(function(){
$("#btn3").click(function(){
$("#one + div").css("background-color","#aa33cc");
});
});
</script>
<input type="button" value="改变id为two的元素后面的所有span元素" id="btn4"/>
<script type="text/javascript">
$(function(){
$("#btn4").click(function(){
$("#two ~ span").css("background-color","#aa33cc");
});
});
</script>
3. 3 基本过滤选择器
<!--
基本过滤选择器：
:first 第一个
:last 最后一个
:even 索引是偶数的
:odd 索引是奇数的
:eq(n) 索引是n的
:gt(n) 索引>n的
:lt(n) 索引<n的
:not(selector) 指定选择器selector没有选中的
:header 所有的标题标签
:animated 所有执行动画的标签
-->
<!-- 控制按钮 -->
<input type="button" value="改变第一个<div>元素" id="btn1"/>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("div:first").css("background-color","#aa33cc");
});
});
</script>
<input type="button" value="改变class不为one的所有div元素" id="btn2"/>
<script type="text/javascript">
$(function(){
$("#btn2").click(function(){
$("div:not('.one')").css("background-color","#aa33cc");
});
});
</script>
<input type="button" value="改变索引值为偶数的div元素" id="btn3"/>
<script type="text/javascript">
$(function(){
$("#btn3").click(function(){
$("div:even").css("background-color","#aa33cc");
});
});
</script>
<input type="button" value="改变索引值为大于 3 且为奇数的 div元素" id="btn4"/>
<script type="text/javascript">
$(function(){
$("#btn4").click(function(){
//$("div:gt(3):odd").css("background-color","#aa33cc");//索引大于3 并且为奇数
$("div:odd:gt(3)").css("background-color","#aa33cc");
//0 1 2 3 4 5 6 7 8 9 10
//1 3 5 7 9
});
});
</script>
<input type="button" value="改变当前正在执行动画的所有元素" id="btn5"/>
<script type="text/javascript">
$(function(){
$("#btn5").click(function(){
$("*:animated").css("background-color","#aa33cc");
});
});
</script>
3.4 内容过滤选择器
<!--
内容过滤器选择器：
:contains(text) 包含指定文本的所有元素
:has(selector) 含有指定后代元素的父元素
:empty 不含文本和子元素的
:parent 包含文本或者子元素的
-->
<!-- 控制按钮 -->
<input type="button" value="改变含有文本‘di’的div元素" id="btn1"/>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("div:contains('di')").css("background-color","#aacc33");
});
});
</script>
<input type="button" value="改变不包含子元素(或者文本元素)的div元素" id="btn2"/>
<script type="text/javascript">
$(function(){
$("#btn2").click(function(){
$("div:empty").css("background-color","#aacc33");
});
});
</script>
<input type="button" value="改变含有 class为 bgRed元素的div元素" id="btn3"/>
<script type="text/javascript">
$(function(){
$("#btn3").click(function(){
$("div:has('.bgRed')").css("background-color","#aacc33");
});
});
</script>
3.5 可见性过滤选择器
<!--
可见性过滤器选择器：
:hidden 选中不可见的元素
input type="hidden"
style:display=none
:visible 选中可见的元素
-->
<!-- 控制按钮 -->
<input type="button" value="更改可见的span的样式" id="btn1"/>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("span:visible").css("background-color","#aacc33");
});
});
</script>
<input type="button" value="不可见的span的显示 并更改样式" id="btn2"/>
<script type="text/javascript">
$(function(){
$("#btn2").click(function(){
var $spanColl=$("span:hidden");
$spanColl.show();
$spanColl.css("background-color","#33cc33");
});
});
</script>
<input type="button" value="获取隐藏域的数据" id="btn3"/>
<script type="text/javascript">
$(function(){
$("#btn3").click(function(){
var $i1=$("input:hidden");
alert($i1.attr("name")+"="+$i1.attr("value"));
});
});
</script>
3.5 子元素过滤选择器
<h3>jquery选择器：5：子元素过滤选择器：选中符合条件的子元素</h3>
<!--
子元素过滤器选择器：选中符合条件的子元素
:nth-child(n) 获取第n个子元素：：：n从1开始
:first-child 获取第一个子元素
:last-child 获取最后一个子元素
:only-child 获取唯一的子元素
-->
<input type="button" id="reset" value="手动重置" />
<!-- 控制按钮 -->
<input type="button" value="选取每个class为one的父元素下的第2个子元素" id="btn1"/>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//注意：：：:nth-child(2)对子元素进行过滤 所以前面加空格
//$(".one *:nth-child(2)").css("background-color","#aa33cc");
//获取 1 4 7 10...子元素
$(".one div:nth-child(3n+1)").css("background-color","#aa33cc");
});
});
</script>
<input type="button" value="选取每个class为one的父元素下的第一个子元素." id="btn2"/>
<script type="text/javascript">
$(function(){
$("#btn2").click(function(){
//注意：：：:nth-child(2)对子元素进行过滤 所以前面加空格
$(".one *:first-child").css("background-color","#aa33cc");
});
});
</script>
<input type="button" value="选取每个class为one的父元素下的最后一个子元素." id="btn3"/>
<script type="text/javascript">
$(function(){
$("#btn3").click(function(){
$(".one *:last-child").css("background-color","#aa33cc");
});
});
</script>
<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>
<script type="text/javascript">
$(function(){
$("#btn4").click(function(){
$(".one *:only-child").css("background-color","#aa33cc");
});
});
</script>
3.6 属性过滤选择器
<h3>jquery选择器：6 属性过滤选择器：根据元素的属性进行过滤</h3>
<!--
属性过滤选择器：根据元素的属性进行过滤
[attrName] 选中包含指定属性的元素
[attrName=attrValue] 选中包含指定属性并且值为指定值的元素
[attrName!=attrValue] 选中指定属性不为指定值的元素和没有指定属性的元素
[attrName^=attrValue] 选中包含指定属性并且值以指定值开头的元素
[attrName$=attrValue] 选中包含指定属性并且值以指定值结尾的元素
[attrName*=attrValue] 选中包含指定属性并且值包含指定值的元素
[attrSeletor1][attrSeletor1][attrSeletor1] 属性选择器多重选择
-->
<input type="button" id="reset" value="手动重置" />
<!-- 控制按钮 -->
<input type="button" value="获取class=one的所有div元素" id="btn1"/>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("div[class='one']").css("background-color","#aa33cc");
});
});
</script>
<input type="button" value="选取包含title属性的div元素" id="btn2"/>
<script type="text/javascript">
$(function(){
$("#btn2").click(function(){
//包含title属性
//$("div[title]").css("background-color","#aa33cc");
//不包含title属性
$("div:not([title])").css("background-color","#aa33cc");
});
});
</script>
<input type="button" value="选取title属性值不为div111的所有div" id="btn3"/>
<script type="text/javascript">
$(function(){
$("#btn3").click(function(){
$("div[title!='div111']").css("background-color","#aa33cc");
});
});
</script>
<input type="button" value="获取title属性值包含1的所有元素" id="btn4"/>
<script type="text/javascript">
$(function(){
$("#btn4").click(function(){
$("[title*='1']").css("background-color","#aa33cc");
});
});
</script>
<input type="button" value="获取含有id属性和title值以div开头的所有元素" id="btn5"/>
<script type="text/javascript">
$(function(){
$("#btn5").click(function(){
$("[id][title^='div']").css("background-color","#aa33cc");
});
});
</script>
3.7 表单过滤选择器
<!--
:input 选中所有的input
:text 选中input type=xxx的
:password 选中input type=xxx的
:radio 选中input type=xxx的
:checkbox 选中input type=xxx的
:file 选中input type=xxx的
:image 选中input type=xxx的
:reset 选中input type=xxx的
:submit 选中input type=xxx的
:button 选中input type=xxx的
:hidden 选中input type=xxx的
-->
3.8 表单属性过滤选择器
<!--
:enabled 所有可用的组件
:disabled 所有不可用的组件：：disabled=disabled
:checked 所有选中的radio/checkbox
:selected 所有选中的option
-->
4 jquery对象和dom对象
//jquery对象和dom对象的区别 和相互转换
//通过js获取
alert("dhtml中获取的dom对象：：："+document.getElementById("div_1"));
//dhtml中获取的dom对象：：：[object HTMLDivElement]
alert("dom对象加上$()就变成了jquery对象：：："+document.getElementById("div_1")+"::::"+$(document.getElementById("div_1")));
alert("通过jquery的选择器中获取的jquery对象：：："+$("#div_1"));
//通过jquery的选择器中获取的jquery对象：：：[object Object]
alert("jquery对象永远都是集合：：：集合的元素个数："+$("#div_1").length);
alert("jquery对象转换为dom对象 只需要加下标即可："+$("#div_1")[0]);
alert("jquery对象转换为dom对象 调用get(index)也可以："+$("#div_1").get(0));
5 jquery中所有的方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jquery中的方法</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<style type="text/css">
div{
width:500px;
height:100px;
margin:10px;
border:1px solid blue;
}
.cla1{
background-color: #aaaaaa;
}
.cla2{
background-color: #aa00cc;
}
.cla3{
font-size: 30px;
}
.cla4{
color:blue;
}
ul{
border:1px solid blue;
width:400px;
padding:20px;
background-color: #aacc55;
}
li{
border:1px solid red;
margin:10px;
background-color: #55ccaa;
}
p{
margin:2px;
background-color: #55ccaa;
}
</style>
</head>
<body>
<div id="div_1" class="cla1" title="t1" style="color:red;font-size:20px;">div1<font color="red" size="5">font标签</font></div>
<div id="div_12" class="cla1" title="t1">div1<font color="red" size="5">font标签</font></div>
<div id="div_123" class="cla1" title="t1">div1<font color="red" size="5">font标签</font></div>
<font id="font11">id="font11" font标签</font><br/>
<font id="font12">id="font12" font标签</font><br/>
<font id="font13">id="font13" font标签</font><br/>
<input type="text" name="age" /><br/>
<input type="text" name="score" /><br/>
<h1>jquery中的方法</h1>
<!--
1: 属性相关的方法
1.1 attr(attrName) ;获取属性值
1.2 attr(attrName,attrValue) ;设置属性值
1.3 attr({attrName:attrValue,attrName:attrValue}) ;设置多个属性值
2: 对class属性操作的方法
2.1 addClass(className) ; 添加class样式
2.2 removeClass(className) ; 删除class样式
3: 文本、html、值相关的方法
3.1 html() 获取内部的html代码
3.2 html(htmlContent) 设置内部的html代码
3.3 text() 获取内部的文本内容
3.4 text(textContent) 设置内部的文本内容
3.5 val() 获取组件的value值
3.6 val(value) 设置组件的value值
4：样式操作相关的方法
4.1 css(attrName) 获取样式的值
4.2 css(attrName,attrValue) 设置样式的值
4.3 css({attrName:attrValue,attrName:attrValue}) 设置多个样式
5： 文档操作之添加相关的方法
5.1 append(content):内部末尾添加
5.2 prepend(content)：内部开头添加
5.3 after(content)：外部后面添加
5.4 before(content)：外部前面添加
6：其他相关的方法：
6.1 wrap(html) 使用参数标签包裹当前元素
6.2 empty() 清空当前元素内部的html代码 等价于html("")
6.3 remove() 移除当前元素
6.4 remove(selector) 移除被选择器选中的元素
6.5 clone() 复制当前元素
7: 集合相关的方法
注意1：jquery获取的元素都是集合
注意2：jquery对象转化为dom对象----jquery对象[索引]
注意3：dom对象转化为jquery对象----$(dom对象)
7.1 $.each(coll,fn(i,n)); i是元素的下标 n是元素(dom对象)
7.2 length属性; 获取jquery集合的元素个数
7.3 get(index); 获取jquery集合中下标为index的dom元素
-->
<h2>7：遍历集合方法：</h2>
<input type="button" value="测试5" onclick="test05()"/><br/>
<script type="text/javascript">
function test05(){
//获取所有div的html代码
$.each($("div"),function(i,n){
//alert(i+":::"+n);//[object HTMLDivElement]
//alert(i+":::"+$(n));//[object Object]
//alert(n.innerHTML+":::"+$(n).html());
});
//alert("获取div的个数：：："+$("div").length);
alert("获取第二个div的文本内容：：："+$("div").get(1).innerText);
alert("获取第二个div的文本内容：：："+$("div")[1].innerText);
}
</script>
<h2>6：其他相关的方法：</h2>
<input type="button" value="测试4" onclick="test04()"/><br/>
<span>span11</span><br/>
<span>span12</span><br/>
<span>span13</span><br/>
<div id="div0"></div>
<input type="button" value="按钮1" onclick="alert(11)" id="but1"/><br/>
<script type="text/javascript">
function test04(){
//使用p标签包裹所有的span标签
$("span").wrap("<p></p>");
//清空所有的li标签
//$("li").empty();
//$("li").html("");
//删除li标签
//$("li").remove();
//文本内容有1的li删除
$("li").remove(":contains('1')");
//$("#div0").append($("#but1")); 把but1添加到div0中
//在div0中添加一个和id="but1"完全相同的按钮
var $but1=$("#but1").clone();
$("#div0").append($but1);
}
</script>
<h2> 5： 文档操作之添加相关的方法</h2>
<ul>
<li>列表项11</li>
<li>列表项12</li>
<li>列表项13</li>
<li>列表项14</li>
</ul>
<input type="button" value="测试3" onclick="test03()"/>
<script type="text/javascript">
function test03(){
$("ul:first").append("<li>新添加的列表项：append</li>");
$("ul:first").prepend("<li>新添加的列表项：prepend</li>");
$("ul:first").after("<li>新添加的列表项：after</li>");
$("ul:first").before("<li>新添加的列表项：before</li>");
}
</script>
<h2>4：样式操作相关的方法</h2>
<input type="button" value="测试2" onclick="test02()"/>
<script type="text/javascript">
function test02(){
//获取div_1的color属性和font-size属性
//alert($("#div_1").css("color")+":::"+$("#div_1").css("font-size"));
//设置样式
//$("#div_12").css("color","blue");
$("#div_12").css({"color":"blue","font-size":"30px","background-color":"#cc66aa"});
}
</script>
<h2>3: 文本、html、值相关的方法</h2>
<input type="button" value="测试1" onclick="test01()"/>
<script type="text/javascript">
function test01(){
//获取div_1和font13的文本内容
//alert("文本内容："+$("#div_1").text()+":::"+$("#font13").text());
//获取div_1和font13的html代码
//alert("内部html代码："+$("#div_1").html()+":::"+$("#font13").html());
//获取age的值
//alert("组件的值："+$(":text[name='age']").val());
//alert($("font").text());//获取所有：font标签id="font11" font标签id="font12" font标签id="font13" font标签
//alert($("font").html());//只获取一个：id="font11" font标签
//alert($(":text").val());//只获取一个：111
//设置：value值
$(":text").val(333);
//设置：html
$("div").html("<input type='button' value='新添加的按钮' /> 1111");
}
</script>
<h2>1:属性相关的方法</h2>
<script type="text/javascript">
$(function(){
//获取div1的class值和title值
//alert($("#div_1").attr("class")+":::"+$("#div_1").attr("title"));
//设置class值为cla2
$("#div_1").attr("class","cla2");
//设置font标签的的color和size属性和class属性
$("font").attr({"class":"cla2","size":"7","color":"red"});
});
</script>
<h2>2:属性class相关的方法</h2>
<script type="text/javascript">
$(function(){
//给div_1添加cla3的样式
$("#div_1").addClass("cla3");
//alert($("#div_1").attr("class"));//cla2 cla3
//移除div_1的cla2的样式
$("#div_1").removeClass("cla2");
});
</script>
</body>
</html>
6 jquery中的事件
6.1 事件的总结
<!--
1 在js中事件都是 node.onxxxx=fn
在jquery中事件对应的都是xxxx方法: $node.xxxx(fn);
注意：jquery中的方法 事件可以注册多次
2 页面加载对应的是ready(fn) 等价于window.onload事件
注意1：jquery的文档加载成功事件可以注册多次
注意2：ready方法的三种写法
3 jquery提供了一些多事件关联的方法
toggle(fn1,fn2,fn3,fn4...) 每次点击会依次执行参数方法
hover(over,out) 设置鼠标悬停和移除事件对应的方法
4 事件绑定：bind(type,fn)
事件解除：unbind(type,fn)
-->
6.2 代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jquery中的事件</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<style type="text/css">
div{
width:100px;
height:100px;
margin:10px;
border:1px solid blue;
background-color: #aaaaaa;
}
.cla1{
background-color: #aaaaaa;
}
.cla2{
background-color: #aa00cc;
}
.cla3{
font-size: 30px;
}
.cla4{
color:blue;
}
ul{
border:1px solid blue;
width:400px;
padding:20px;
background-color: #aacc55;
}
li{
border:1px solid red;
margin:10px;
background-color: #55ccaa;
}
p{
margin:2px;
background-color: #55ccaa;
}
</style>
</head>
<body>
<h1>jquery中的事件</h1>
<!--
1 在js中事件都是 node.onxxxx=fn
在jquery中事件对应的都是xxxx方法: $node.xxxx(fn);
注意：jquery中的方法 事件可以注册多次
2 页面加载对应的是ready(fn) 等价于window.onload事件
注意1：jquery的文档加载成功事件可以注册多次
注意2：ready方法的三种写法
3 jquery提供了一些多事件关联的方法
toggle(fn1,fn2,fn3,fn4...) 每次点击会依次执行参数方法
hover(over,out) 设置鼠标悬停和移除事件对应的方法
4 事件绑定：bind(type,fn)
事件解除：unbind(type,fn)
-->
<div id="div1111">div1111</div>
<div id="div2222">div2222</div>
<input type="button" value="解除绑定f3" onclick="testUnBind()"/>
<script type="text/javascript">
$(function(){
//给div1111注册点击事件
$("#div1111")[0].onclick=f1;
$("#div1111").click(f1);
$("#div1111").mouseover(function(){ $("#div1111").css("background-color","#cc33aa");});
$("#div1111").mouseout(function(){ $("#div1111").css("background-color","#aaaaaa");});
//通过bind方法绑定事件
$("#div1111").bind("click",f2);
$("#div1111").bind("click",f3);
});
function f1(){alert("f1方法");}
function f2(){alert("f2方法");}
function f3(){alert("f3方法");}
function testUnBind(){
//解除对div1111点击事件的f3方法
//$("#div1111").unbind("click",f3);
//解除div1111点击事件绑定的所有方法
//$("#div1111").unbind("click");
//解除div1111的所有事件
$("#div1111").unbind();
}
</script>
<hr/>
<div id="div111">div111</div>
<div id="div222">div222</div>
<script type="text/javascript">
//给div111注册鼠标悬停和鼠标移除事件
$("#div111").mouseover(function(){
$("#div111").css("background-color","#cc33aa");
});
$("#div111").mouseout(function(){
$("#div111").css("background-color","#aaaaaa");
});
//给div222注册鼠标悬停和鼠标移除事件
$("#div222").hover(function(){
$("#div222").css("background-color","#cc33aa");
},function(){
$("#div222").css("background-color","#aaaaaa");
});
</script>
<hr/>
<div id="div11">div11</div>
<div id="div22">div22</div>
<script type="text/javascript">
function f11(){alert("11111"); }
function f12(){alert("11112"); }
function f13(){alert("11113"); }
//给div11注册一个点击事件：根据点击次数在f11 f12 f13之间循环执行
var i=0;
$(function(){
$("#div11").click(function(){
i=(i+1)%3;//0 1 2
if(i==0){f11();}
if(i==1){f12();}
if(i==2){f13();}
});
});
//给div22注册一个点击事件：根据点击次数在f11 f12 f13之间循环执行
$(function(){
$("#div22").toggle(f11,f12,f13);
});
</script>
<script type="text/javascript">
//文档加载成功
window.onload=function(){
//alert("dhtml的文档加载成功！");
};
//jquery中文档加载成功
$().ready(function(){
//alert("jquery的文档加载成功1！");
});
//写法1
$(document).ready(function(){
//alert("jquery的文档加载成功3！");
});
//写法2
$().ready(function(){
//alert("jquery的文档加载成功2！");
});
//写法3
$(function(){
//alert("jquery的文档加载成功4！");
});
</script>
<hr/>
<div id="div1">div1</div>
<div id="div2">div2</div>
<script type="text/javascript">
//通过js给div1注册事件
window.onload=function(){
document.getElementById("div1").onclick=function(){
alert("我是div11!");
}
document.getElementById("div1").onclick=function(){
alert("我是div12!");
}
$("#div1")[0].onclick=function(){
alert("我是div13!");
}
}
//通过jquery给div2注册事件
$(function(){
$("#div2").click(function(){
alert("我是div21!");
});
$("#div2").click(function(){
alert("我是div22!");
});
$(document.getElementById("div2")).click(function(){
alert("我是div23!");
});
});
</script>
</body>
</html>
7 动画效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jquery中的动画</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<style type="text/css">
div{
width:150px;
height:150px;
margin:10px;
border:1px solid blue;
background-color: #aaaaaa;
}
</style>
</head>
<body>
<h1>jquery中的动画</h1>
<!--
jquery中实现动画效果的方法
1：通过对角线的变化来更改元素的显示和隐藏
show(speed,collbackfn)
hide(speed,collbackfn)
toggle(speed,collbackfn)
2: 通过高度的变化来更改元素的显示和隐藏
slideDown(speed, [callback])
slideUp(speed, [callback])
slideToggle(speed, [callback])
3: 通过更改元素的可见度实现元素的显示和隐藏
fadeIn(speed, [callback])
fadeOut(speed, [callback])
4: 自定义动画
animate(params, [duration], [easing], [callback])
-->
<hr/>
<div id="div6" style="position:absolute;top:200px;left:200px;background-color: #cc33aa;">div6</div>
<input type="button" value="测试自定义动画animate2" onclick="testAnimate02()"/><br/>
<script type="text/javascript">
function testAnimate02(){
//让div6动起来 就是在更改top和left的值
//随机top和left
var topValue=parseInt(Math.random()*700);
var leftValue=parseInt(Math.random()*1400);
$("#div6").animate({top:topValue+"px",left:leftValue+"px"},3000,testAnimate02);
}
</script>
<hr/>
<div id="div5">div5</div>
<input type="button" value="测试自定义动画animate1" onclick="testAnimate01()"/><br/>
<script type="text/javascript">
function testAnimate01(){
$("#div5").animate({
width: "300px",
height: "50px",
fontSize: "30px",
borderWidth: 10
}, 1000 );
}
</script>
<hr/>
<div id="div4">div4444</div>
<input type="button" value="隐藏和显示04fadeOut" onclick="testFadeOut()"/><br/>
<input type="button" value="隐藏和显示04fadeIn" onclick="testFadeIn()"/><br/>
<input type="button" value="隐藏和显示04fadeInOut" onclick="testFadeInOut()"/><br/>
<script type="text/javascript">
function testFadeOut(){
$("#div4").fadeOut(3000,function(){alert("我隐藏了！");});
}
function testFadeIn(){
$("#div4").fadeIn(3000,function(){alert("我显示了！");});
}
function testFadeInOut(){
if($("#div4").is(":hidden")){
$("#div4").fadeIn(3000,testFadeInOut);
}else{
$("#div4").fadeOut(3000,testFadeInOut);
}
}
</script>
<hr/>
<div id="div3">div33333</div>
<input type="button" value="隐藏和显示03sildeUp" onclick="testSlideUp()"/><br/>
<input type="button" value="隐藏和显示03sildeDown" onclick="testSlideDown()"/><br/>
<input type="button" value="隐藏和显示03sildeUpDown" onclick="testSlideUpDown()"/><br/>
<input type="button" value="隐藏和显示03sildeToggle" onclick="testSlideToggle()"/><br/>
<script type="text/javascript">
function testSlideUp(){
$("#div3").slideUp("slow",function(){alert("我隐藏了！");});
}
function testSlideDown(){
$("#div3").slideDown("fast",function(){alert("我显示了！");});
}
function testSlideUpDown(){
if(!$("#div3").is(":hidden")){
$("#div3").slideUp(3000,testSlideUpDown);
}else{
$("#div3").slideDown(3000,testSlideUpDown);
}
}
function testSlideToggle(){
$("#div3").slideToggle(3000,testSlideToggle);
}
</script>
<hr/>
<div id="div1">div1111</div>
<input type="button" value="隐藏和显示01" onclick="test01()"/><br/>
<script type="text/javascript">
function test01(){
if($("#div1").css("display")=="none"){
$("#div1").css("display","block");
}else{
$("#div1").css("display","none");
}
}
</script>
<div id="div2">div2222</div>
<input type="button" value="隐藏和显示02hide" onclick="testHide()"/><br/>
<input type="button" value="隐藏和显示02show" onclick="testShow()"/><br/>
<input type="button" value="隐藏和显示02show_hide" onclick="testShowHide()"/><br/>
<input type="button" value="隐藏和显示02toggle" onclick="testToggle()"/><br/>
<script type="text/javascript">
function testHide(){
$("#div2").hide(3000,function(){alert("我隐藏了！");});
}
function testShow(){
$("#div2").show();
}
function testShowHide(){
//判断当前元素是隐藏还是显示
// 方法 is(selector) 判断当前元素是不是符合参数选择器
if($("#div2").is(":hidden")){
$("#div2").show(3000,testShowHide);
}else{
$("#div2").hide(3000,testShowHide);
}
}
function testToggle(){
$("#div2").toggle(3000,testToggle);
}
</script>
</body>
</html>
164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
