JQuery的基础和应用
<参考文档>
1、什么是？
DOM的作用：提供了一种动态的操作HTML元素的方法。
jQuery是一个优秀的js库。用来操作HTML元素的工具。
jQuery和DOM关系：DOM--树。jQuery是多个DOM模型的集合。
jQuery设计核心理念：write less,do more;
DOM获取id的值：document.getElementById("id");
jQuery获取id的值: $("#id");$=jQuery
jQuery的缺点：效率会下降。
注意点：jQuery可以和DOM混用。
2005诞生-------11年了。
2、相关作用？
1、获取HMTL元素---id，name,tag......
2、动态改变页面中的css样式和属性。
<p color="red" style="id:p1;" id="p1">
css样式。name="p1" input disabled="disabled"
3、动态的改变页面内容。
var p1=document.getElementById("p1");
p1.value="";
4、事件响应。
click;focus,blur......鼠标的移动等........
5、快速实现通信
ajax---对异步请求的支持非常的缜密。功能非常的完成。
6、提供页面基本动画需求
淡入，淡出，擦除，移动。。。。。。
3、怎么用？
第一步:下载包......
第二步:配置
本机配置:<script src="js/..."></script>
联网配置：< src="http://ajax.googleapis.com/ajax/jquery/1.6.4/jquery.min.js">
第一种：< script type= "text/javascript" src= "js/jquery-1.7.2.min.js" ></script >
第二种：< script type= "text/javascript" src= "./js/jquery-1.7.2.min.js" ></script >
第三步：测试；
4、选择器
基本选择器
- id选择器：$("#p1").css({"color":"red","font-size":"50px"});
- 类选择器：$(".p1").css("color","red");
- 标签选择：$("p").css("color","blue");
- 选择后过滤：$("p[class='p1']").css("color","blue");
- 通配符选择器:$("div *").css("color","blue");（注意，星号前有空格键）
- 组选择器：$("h2,#div1,.p2,[title='p2']").css("color","yellow");
伪类选择器：选择符前有一个 ":"(冒号)
特定位置选择器：:first,:last,:eq()
- $("tr:last").css("background-color","red"); --------表格的最后一行变成红色
- $("tr:first").css("background-color","red");
- $("p").eq(0).css(); -----得到第一个<P>标签
指定范围选择器:（多用表格）
- :even， //奇数行
- :odd, //偶数行
- gt(),
- lt()
注意点：指定范围选择器在表格的使用中非常的方便。
< script type= "text/javascript" >
$( function() {
//随着页面自动加载
//$("#p1").css({"color":"red","font-size":"20px"});
//$(".p2").css("color","red");
// $("p[class='p1']").css("color","blue");
//$("div *").css("color", "green");
// $("h2,#div1,.p2,[title='p2']").css("color", "yellow");
// $("tr:first").css("background-color","red");
// $("tr:last").css("background-color","green");
// $("tr").eq(1).css("background-color","blue");
// $("tr:even").css("background-color","blue");
// $("tr:odd").css("background-color","green");
$( "tr:gt(1)").css( "background-color" , "blue" );
$( "tr:lt(1)").css( "background-color" , "red" );
});
</ script>
5、属性和css操作
属性操作： attr();
css样式操作： css("","");css({"":"","":""});
6、获取文本和值？
文本：text();<p>hello</p> $("#p3").text()
值 val() ：主要正对于表单元素中的value中的值。
7、事件控制
jQuery中定了bind统一的接口，来为每一个匹配的标签添加事件控制。
案例：点击p标签，让字体变成红色。
1、事件注册
bind
$("p").bind();
2、toggle
可以为click是绑定两个方法
3、hover:可以模仿悬停事件和鼠标移上去和鼠标离开。
8、综合案例。
综合案例1：使用jQuery完成密码是否一致判断。
< script type= "text/javascript" src= "js/jquery-1.7.2.min.js" ></script >
< script type= "text/javascript" >
$( function() {
$( "#username").focus( function(){
if($( "#username").val()== "请输入用户名" )
$( this).val( "");
});
$( "#username").blur( function(){
if($( "#username").val()== "")
$( this).val( "请输入用户名" );
});
$( "#pwd").focus( function(){
if($( "#pwd").val()== "请输入密码" )
$( this).val( "");
});
$( "#pwd").blur( function(){
if($( "#pwd").val()== "")
$( this).val( "请输入密码" );
if($( "#pwd").val()==$( "#username").val()){
$( "#s1").text( "用户名可用" ).css("color" ,"green" );
} else{
$( "#s1").text( "用户名不可用" ).css("color" ,"red" );
}
});
});
</ script>
</ head>
< body>
<input id = "username" type= "text" value= "请输入用户名" />< span id = "s1"></ span>
<br >
<input id = "pwd" type= "text" value= "请输入密码" />
</ body>
综合案例2：全选，反选，全部选，选中的值
< script type= "text/javascript" src= "js/jquery-1.7.2.min.js" ></script >
< script type= "text/javascript" >
$( function() {
$( "#qx").click( function(){
var chks=$( "input[type='checkbox']" );
for( var i=0; i<chks.length;i++){
chks[i].checked= true;
}
});
$( "#fx").click( function(){
var chks=$( "input[type='checkbox']" );
for( var i=0; i<chks.length;i++){
chks[i].checked=!chks[i].checked;
}
});
$( "#qbx").click( function(){
var chks=$( "input[type='checkbox']" );
for( var i=0; i<chks.length;i++){
chks[i].checked= false;
}
});
$( "#test").click( function(){
$( "input:checkbox[name='chks']:checked" ).each(
function(){
alert($( this).val());
});
});
});
</ script>
</ head>
< body>
<input type = "checkbox" name= "chks" value= "100" />
<input type = "checkbox" name= "chks" value= "200" />
<input type = "checkbox" name= "chks" value= "300" />
<input type = "checkbox" name= "chks" value= "400" />
<input type = "button" id= "qx" value= "全选" >
<input type = "button" id= "fx" value= "反选" >
<input type = "button" id= "qbx" value= "全不选" >
<input type = "button" id= "test" value= "选中的值" />
</ body>
综合案例3：隔行变色
综合案例4：克隆。
< script type= "text/javascript" >
$( function() {
var i=0;
$( "#tab1").click( function(){
/* var b2=$("table").clone();
$("#tab1").append(b2); */ ----------克隆
i++;
$( "#tab1").append( "<p>我是" +i+"</p>" );
});
});
</ script>
< style type= "text/css" >
table {
width: 800px;
border: 1px solid black;
border-collapse: collapse;
}
tr {
height: 25px;
}
td {
border: 1px solid black;
}
</ style>
</ head>
< body>
<input type = "button" id= "b1" value= "" >
<input type = "checkbox" id= "c1" value= "100" checked= "checked" />
<input type = "checkbox" />
<input type = "checkbox" />
<input type = "checkbox" checked= "checked" />
<table id = "">
<tr >
<td ></td >
<td ></td >
<td ></td >
</tr >
<tr >
<td ></td >
<td ></td >
<td ></td >
</tr >
<tr >
<td ></td >
<td ></td >
<td ></td >
</tr >
</table >
< span id= "tab1" >点击我 </span >
</ body>
