--------------------------------------------------------------------------------------------------
jquery框架
① jquery是一个 javascript框架/javascript 库
为什么出现 javascript框架?
比如: 为了获取 id 对应对象
document.getElementById('id号');
为了获取标签名获取对象
document.getElmentsByTagName("tagname");
如果使用框架
$('#id') $('.classname')
如果使用jquery框架发送 ajax请求
Jquery.send(..);
得出结论是: 使用js框架可以提高我们开发js的效率
② write less do more
③ jquery是一个轻量级的js库,给使用者提供一系列的函数
④ 目前流行的js库有:
- jquery 2. extjs 3. prototype 4. dwr(运行服务器) 5. dojo
如何在zend studio 安装一个插件(apatana) 可以提示js的函数和 属性,目前这个工具很流行
u 下面我演示如何安装
① 先下载aptana插件 www.aptana.org
② 安装的方式有两种
在线安装(推荐)
离线安装 (首先下载插件包)
- help->software->find and install->search for new featrue .. ->new archived site->选中你的aptana.zip ->finish->选中aptana zip复选框
如果提示某个jar安装不成,则去掉这个jar选项
安装时,大概3分钟.
快速入门案例
- 使用jquery开发在网页打开是,提示一句话: "hello,world"!
<!--如果使用jquery,则需要引入jquery库-->
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script>
//$(document)是一个jquery 对象
//document是dom对象
$(document).ready(function(){
window.alert('hello,world');
}
);
</script>
☞ 在使用jquery开发中,有两种对象 1. jquery对象 2. dom对象, 如果是jquery对象则只能使用jquery库提供的方法, 如果是dom对象,则只能使用 js本身提供的方法.
分析一下,为什么可以使用jquery方法?
<script type="text/javascript">
function Dog(){
}
Dog.prototype={
ready: function(){
window.alert('ok');
}
}
var dog1=new Dog();
dog1.ready();
</script>
u 什么事jquery对象
jquery对象就是对dom对象进行包装,这样就可以使用jquery的方法, jquery对象和dom对象可以相互转换,方法是:
<!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=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript">
//说明jquery对象和dom对象区别
function testing(){
//使用传统的方法来获取test
//obj1是dom对象
var obj1=document.getElementById("test");
window.alert(obj1.value);
//如果是jquery对象,规定一个jquery对象名是 $开头
var $obj2=$('#test');
alert($obj2.val());
//他们之间是否能够相互转换.
//dom->jquery
//var $obj3=$(obj1); // $(document).ready()..
//window.alert($obj3.val());
//jquery->dom对象?
//在jquery开发中,把一个对象当做集合处理
//有两种方法.1.
var obj4=$obj2[0]; //obj4就是dom
//现在
alert("obj4 valu="+obj4.value);
//第二种方法 把jquery->dom
var obj5=$obj2.get(0);
alert("obj5 val="+obj5.value)
}
</script>
</head>
<body>
<input type="text" id="test" value="test"/>
<input type="button" οnclick="testing()" value="点击" />
</body>
</html>
u jquery的选择器
- 基本选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
</head>
<body>
<input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1"/>
<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b2"/>
<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF" id="b3"/>
<input type="button" value=" 改变所有元素的背景色为 #00FF33" id="b4"/>
<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF" id="b5"/>
<div id="one" class="mini">
div id为one
</div>
<div id="two">
div id为two
</div>
<div id="three" class="mini">
div id为three
</div>
<span id="s_one" class="mini">
span one
</span>
<span id="s_two">
span two
</span>
</body>
<script language="JavaScript">
//************改变 id 为 one 的元素的背景色为 #0000FF***********
/*function abc(){
document.getElementById("one").style.background="#0000FF";
}*/
//jquery的id选择器去和按钮绑定一个事件
//$('#b1')表示选中 b1这个控件
//$('#b1').click 给b1这个按钮绑定 click事件
//function(){
// window.alert('yes');
//} 表示点击b1按钮时,究竟做什么
$('#b1').click(
function(){
$('#one').css("background","#0000FF");
}
);
//*****改变 class 为 mini 的所有元素的背景色为 #FF0033
$('#b2').click(
function (){
$('.mini').css("background"," #FF0033");
}
);
//******改变元素名为 <div> 的所有元素的背景色为 #00FFFF
$('#b3').click(
function (){
$('div').css("background","#00FFFF");
}
);
//******改变所有元素的背景色为 #00FF33
$('#b4').click(
function(){
$("*").css("background","#00FF33");
}
);
//*****改变所有的<span>元素和 id 为 two class .mini 的元素的背景色为 #3399FF
$('#b5').click(
function(){
//??
$('span,#two,.mini').css("background","#3399FF");
}
)
//***********end*************
</script>
</html>
练习案例:
代码:
<!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=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<script type="text/javascript">
$('p').click(
function(){
//this表示当前被点击元素,但是此时我们当做dom对象
//window.alert(this.innerHTML);
//$(this) 表示当前被点击元素,但是此时我们当做jquery对象
window.alert($(this).html());
//window.alert('ok');
}
);
</script>
</body>
</html>
u 层次选择器的
- prev + next 表示选择 prev 的下一个元素 (强调 : 同一级)
- prev ~ siblings 表示选择 prev 的后面所有元素(强调 : 同一级)
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
</head>
<body>
<input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF" id="b1"/>
<input type="button" value="改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2"/>
<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3"/>
<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF" id="b4"/>
<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF" id="b5"/>
<div id="one" class="mini">
div id为one
</div>
<div id="two">
div id为two
<div id="two01">
id twoo1
</div>
<div id="two02">
id twoo2
</div>
</div>
<div id="three" class="mini">
div id为three
<div id="three01">
id three01
</div>
</div>
<span id="s_one" class="mini">
span one
</span>
<span id="s_two">
span two
</span>
</body>
<script language="JavaScript">
//*******改变 <body> 内所有 <div> 的背景色为 #0000FF
$('#b1').click(function(){
$('div').css("background","#0000FF");
})
//*******改变 <body> 下 <div> 的背景色为 #0000FF
$('#b2').click(function(){
$('body > div').css("background","#0000FF");
})
//改变 id 为 one 的下一个 <div> 的背景色为 #0000FF(选择一个)
$('#b3').click(function(){
$('#one + div').css("background","#0000FF");
})
//*******改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF
$('#b4').click(function(){
$('#two ~ div').css("background","#0000FF");
})
//****改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF
$('#b5').click(function(){
$("#two").siblings("div").css("background","#0000FF");
})
</script>
</html>
u 过滤选择器
① 基础过滤选择器
所有的案例如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
</head>
<body>
<h1>XXXX</h1>
<h2>XXXXXXX</h2>
<h3>XXXXXXXXX</h3>
<input type="button" value="改变第一个 div 元素的背景色为 #0000FF" id="b1"/>
<input type="button" value="改变最后一个 div 元素的背景色为 #0000FF" id="b2"/>
<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF" id="b3"/>
<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF" id="b4"/>
<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF" id="b5"/>
<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF" id="b6"/>
<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF" id="b7"/>
<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF" id="b8"/>
<input type="button" value=" 改变所有的标题元素的背景色为 #0000FF" id="b9"/>
<input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 #0000FFF" id="b10"/>
<div id="one" class="mini">
div id为one
</div>
<div id="two">
div id为two
<div id="two01">
id twoo1
</div>
<div id="two02">
id twoo2
</div>
</div>
<div id="three" class="one" >
div id为three class one
<div id="three01">
id three01
</div>
</div>
<div id="mover">
执行动画
</div>
<span id="s_one" class="mini">
span one
</span>
<span id="s_two">
span two
</span>
</body>
<script language="JavaScript">
//函数
function ca(){
$("#mover").slideToggle("slow",ca);
}
//调用
ca();
//*****改变第一个 div 元素的背景色为 #0000FF
$('#b1').click(
function(){
//$('div:first').css("background","#0000ff");
$("div:eq(0)").css("background","#0000ff");
}
);
//*****改变最后一个 div 元素的背景色为 #0000FF
//所谓最后一个指的是是从上到下,从左到右去搜,最后的一个
$('#b2').click(
function(){
$('div:last').css("background","#0000ff");
}
);
//***改变class不为 one 的所有 div 元素的背景色为 #0000FF
$('#b3').click(
function(){
//先选择所有div,然后再过滤(select mysql )
$("div:not(.one)").css("background","#0000ff");
}
);
//********改变索引值为偶数的 div 元素的背景色为 #0000FF
$('#b4').click(
function(){
//:表示过滤
$("div:odd").css("background","#0000ff");
}
);
//5
//*****改变索引值为大于 3 的 div 元素的背景色为 #0000FF
$('#b6').click(
function(){
$("div:gt(3)").css("background","#0000ff");
}
);
//改变索引值为等于 3 的 div 元素的背景色为 #0000FF
$('#b7').click(
function(){
$("div:eq(3)").css("background","#0000ff");
}
);
//**改变索引值为小于 3 的 div 元素的背景色为 #0000FF
$('#b8').click(
function(){
$("div:lt(3)").css("background","#0000ff");
}
);
//****改变所有的标题元素的背景色为 #0000FF
$('#b9').click(
function(){
$(":header").css("background","#0000ff");
}
);
//***改变当前正在执行动画的所有元素的背景色为 #0000FFF
$('#b10').click(
function(){
//怎么样吧颜色在重新找回的.
$(":animated").css("background","red");
}
);
</script>
</html>
-----
练习
代码:
<!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=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
</head>
<body>
<h1>第一个表格</h1>
<table border="1" width="400px">
<tr><td>1</td><td>1</td></tr>
<tr><td>2</td><td>2</td></tr>
<tr><td>3</td><td>3</td></tr>
<tr><td>4</td><td>4</td></tr>
<tr><td>5</td><td>5</td></tr>
<tr><td>6</td><td>6</td></tr>
</table>
<h1>第二个表格</h1>
<table border="1" width="400px">
<tr><td>1</td><td>1</td></tr>
<tr><td>2</td><td>2</td></tr>
<tr><td>3</td><td>3</td></tr>
<tr><td>4</td><td>4</td></tr>
<tr><td>5</td><td>5</td></tr>
<tr><td>6</td><td>6</td></tr>
</table>
<script type="text/javascript">
$("table:eq(0) tr:even").css("background","red");
$("table:eq(0) tr:odd").css("background","blue");
//第二个表格
$("table:eq(1) tr:even").css("background","green");
$("table:eq(1) tr:odd").css("background","yellow");
</script>
</body>
</html>
代码
u 内容选择器
根据内容来选择你需要的元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
</head>
<body>
<h1>XXXX</h1>
<h2>XXXXXXX</h2>
<h3>XXXXXXXXX</h3>
<input type="button" value="改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF" id="b1"/>
<input type="button" value="改变不包含子元素(或者文本元素) 的 div 的背景色为 #0000FF" id="b2"/>
<input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF" id="b3"/>
<input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF" id="b4"/>
<input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色" id="b5"/>
<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF" id="b6"/>
<div id="xxxx">
<div id="one" class="mini">
div id为one
</div>
</div>
<div id="two">
div id为two
<div id="two01">
id twoo1
</div>
<div id="two02">
id twoo2
</div>
</div>
<div id="three" class="one" >
div id为three class one
<div id="three01">
id three01
</div>
</div>
<div id="four" class="one" >
XXXXXXXXXX
</div>
<div id="five" class="one" >
</div>
<div id="mover">
执行动画
</div>
<span id="s_one" class="mini">
span one
</span>
<span id="s_two">
span two
</span>
</body>
<script language="JavaScript">
//********改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF
$('#b1').click(function(){
$("div:contains('di')").css("background","#0000ff");
})
//**************改变不包含子元素(或者文本元素) 的 div 的背景色为 #0000FF
$('#b2').click(function(){
$("div:empty").css("background","red");
})
//******改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF
$('#b3').click(function(){
//这个是元素本身
$("div:.mini").css("background","green");
//这个元素它父元素
//$("div:has('.mini')").css("background","green");
})
//****改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF
$('#b4').click(function(){
//这个是元素本身
$('div:parent').css("background","yellow");
})
//*****改变不含有文本 di; 的 div 元素的背景色
$('#b5').click(function(){
//这个是元素本身
$("div:not(contains('di'))").css("background","red");
})
//****改变索引值为大于 3 的 div 元素的背景色为 #0000FF
$('#b6').click(function(){
//这个是元素本身
$("div:gt(3)").css("background","#0000ff");
})
//***
</script>
</html>
u 可见度选择器
该选择器,是根据元素的可见性来选择对象
----------------------------------
u jquery的属性选择器
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
</head>
<body>
<h1>XXXX</h1>
<h2>XXXXXXX</h2>
<h3>XXXXXXXXX</h3>
<input type="button" value="含有属性title 的div元素." id="b1"/>
<input type="button" value="属性title值等于test的div元素" id="b2"/>
<input type="button" value="属性title值不等于test的div元素(没有属性title的也将被选中)" id="b3"/>
<input type="button" value="属性title值 以te开始 的div元素" id="b4"/>
<input type="button" value="属性title值 以est结束 的div元素" id="b5"/>
<input type="button" value="属性title值 含有es的div元素" id="b6"/>
<input type="button" value="选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素" id="b7"/>
<input type="hidden" value="hidden1"/>
<input type="hidden" value="hidden2"/>
<input type="hidden" value="hidden3"/>
<input type="hidden" value="hidden4"/>
<div id="one" title="test">
div id为one test
</div>
<div id="one" title="texxx">
div id为one texxx
</div>
<div id="one" title="xxxest">
div id为one texxx
</div>
<div id="one" title="xxxesxxxxxt">
div id为one xxxesxxxxxt
</div>
<div id="two" title="ate">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div id="three" class="one" >
XXXXXXXXX
</div>
</body>
<script language="JavaScript">
//*****含有属性title 的div元素.
$("#b1").click(
function(){
$("div[title]").css("background","green");
}
);
//****属性title值等于test的div元素
$("#b2").click(
function(){
$("div[title=\"test\"]").css("background","green");
}
);
//属性title值不等于test的div元素(没有属性title的也将被选中)
$("#b3").click(
function(){
$("div[title!='test']").css("background","red");
}
);
//属性title值 以te开始 的div元素
$("#b4").click(
function(){
$("div[title^='te']").css("background","red");
}
);
//属性title值 以est结束 的div元素
$("#b5").click(
function(){
$("div[title$='est']").css("background","red");
}
);
//属性title值 含有es的div元素
$("#b6").click(
function(){
$("div[title*='es']").css("background","red");
}
);
//选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素
//我们的过滤方式有两种 :
//比如选出文本中含有 abc的 div $("div:contains['abc']")
$("#b7").click(
function(){
//选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素
$("div[title*='es'][id]").css("background","red");
}
);
</script>
</html>
u 子元素选择器
根据该元素是父元素下出现的位置来选中子元素.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
</head>
<body>
<h1>XXXX</h1>
<h2>XXXXXXX</h2>
<h3>XXXXXXXXX</h3>
<input type="button" value="每个class为one的div父元素下的第2个子元素" id="b1"/>
<input type="button" value="每个class为one的div父元素下的第一个子元素" id="b2"/>
<input type="button" value="每个class为one的div父元素下的最后一个子元素" id="b3"/>
<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素" id="b4"/>
<div class="one">
<div id="one" class="one" >
XXXXXXXXX one
</div>
<div id="two" class="one" >
XXXXXXXXX two
</div>
<div id="three" class="one" >
XXXXXXXXX three
</div>
<div id="four" class="one" >
XXXXXXXXX four
</div>
</div>
<div class="one">
<div id="one" class="one" >
XXXXXXXXX one
</div>
</div>
</body>
<script language="JavaScript">
//****每个class为one的div父元素下的第2个子元素
$('#b1').click(
function(){
$("div .one:nth-child(1)").css("background","red");
}
);
//*****每个class为one的div父元素下的第一个子元素
$('#b2').click(
function(){
$("div .one:first-child").css("background","red");
// $("div .one:nth-child(1)").css("background","red");
}
);
//*****每个class为one的div父元素下的最后一个子元素
$('#b3').click(
function(){
$("div .one:last-child").css("background","red");
}
);
//**如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素
$('#b4').click(
function(){
$("div .one:only-child").css("background","red");
}
);
</script>
</html>
u 表单对象选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="js/jquery-1.3.1.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<form>
<input type="text" /><br/>
<input type="checkbox" /><br/>
<input type="radio" /><br/>
<input type="image" /><br/>
<input type="file" /><br/>
<input type="submit" /><br/>
<input type="reset" /><br/>
<input type="password" /><br/>
<input type="button" value="按钮1" /><br/>
<select><option/></select><br/>
<textarea></textarea><br/>
<button>按钮2</button><br/>
</form>
</body>
<script language="JavaScript">
//选择所有的button
var buttons=$(':button');
alert(buttons.length);
var buttons=$("input[type='button']");
alert(buttons.length);
</script>
</html>
小结: 我们在获取表单元素时候,有两种方式
- $(":表单元素名") [input button file img....] ,这种方式选择最全.
- $("input[type='button']"); 这种方式<input type="button"/>
u 表单对象属性选择器
$("select option:selected")
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
</head>
<body>
<h1>XXXX</h1>
<h2>XXXXXXX</h2>
<h3>XXXXXXXXX</h3>
<input type="button" value="利用 jQuery 对象的 val() 方法改变表单内 type=text 可用 <input> 元素的值" id="b1"/>
<input type="button" value="利用 jQuery 对象的 val() 方法改变表单内 type=text 不可用 <input> 元素的值" id="b2"/>
<input type="button" value="利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/>
<input type="button" value="利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/>
<br>
<input type="text" value="篮球1"/>
<input type="text" value="篮球2"/>
<input type="text" value="篮球3" disabled="true"/>
<input type="text" value="篮球4" disabled="true"/>
<br>
<input type="checkbox" value="爱好1"/>爱好1
<input type="checkbox" value="爱好2"/>爱好2
<input type="checkbox" value="爱好3"/>爱好3
<input type="checkbox" value="爱好4"/>爱好4
<br>
<select name="job" size=9 multiple="multiple">
<option value="选项1">选项1^^</option>
<option value="选项2">选项2^^</option>
<option value="选项3">选项3^^</option>
<option value="选项4">选项4^^</option>
<option value="选项5">选项5^^</option>
<option value="选项6">选项6^^</option>
</select>
<select id="hsp" name="edu">
<option value="博士">博士^^</option>
<option value="硕士">硕士^^</option>
<option value="本科">本科^^</option>
<option value="小学">小学^^</option>
</select>
</body>
<script language="JavaScript">
//*利用 jQuery 对象的 val() 方法改变表单内 type=text 可用 <input> 元素的值
$("#b1").click(function(){
$("input[type='text']:enabled").val("hello");
})
//**利用 jQuery 对象的 length 属性获取多选框选中的个数
$("#b3").click(function(){
// alert($(":checkbox:checked").length);
alert($("input[type='checkbox']:checked").length);
})
//****利用 jQuery 对象的 text() 方法获取下拉框选中的内容
$("#b4").click(function(){
//alert($("select option:selected").text());
//必须 用这个 val()函数把每个值打印;
var $objs=$("select option:selected");
/* $.each($objs,function(){
alert($(this).val());
});*/
/* $.each($objs,function(i,n){
// alert(n.value);
alert($(n).val());
})*/
/* $objs.each(function(){
window.alert($(this).val());
})*/
$objs.each(function(i,n){
window.alert("ok"+$(n).val());
})
})
</script>
</html>
☞ 总结一下过滤器使用的方式
$("div:contains('di')"); //内容
$("div[type]")//属性
$("div .one")// 选中div 中含 class 为 .one 的div元素
$("div, .one")// 选中div 和 class 为 .one 的div元素
☞总结jquery对象集合遍历的四种形式
//必须 用这个 val()函数把每个值打印;
var $objs=$("select option:selected");
/* $.each($objs,function(){
alert($(this).val());
});*/
/* $.each($objs,function(i,n){
// alert(n.value);
alert($(n).val());
})*/
/* $objs.each(function(){
window.alert($(this).val());
})*/
$objs.each(function(i,n){
window.alert("ok"+$(n).val());
})
☞如何使用我们的选择器
总结如下:
1.使用什么样的选择器根据需求定
2.如果针对文档内容,则使用内容选择器
3.如果是选择父子(祖先、后代)元素则使用层次选择器
4. 如果是根据id/class/tagname/使用基本选择器
5. 如果是选择表单中的元素,则使用表单选择器、表单对象属性选择器
6. 根据可见性选择元素,则使用可见性选择器
7. 如果是选择某个元素中包含某个属性(属性值),则使用属性选择器
8. !!!如果考虑对选中的元素,要进行过滤,则使用过滤选择器,(有三种方法)
$("div:contains('di')"); //内容
$("div[type]")//属性
$("div .one")// 选中div 中含 class 为 .one 的div元素
u jquery如何操作dom
jquery的dom操作分为三种 (js)
① xml dom
② html dom
③ css dom
查找节点,然后去通过attr函数去修改或者设置属性的值.
--------------------------------------------------------------------------
jquery的dom操作
u 创建对象
使用jquery的 $() 来创建一个dom对象, 并包装成一个jquery对象返回
快速入门:
如果传统的dom方法.
//添加重庆li到 上海下(使用dom的传统方法)
function test1(){
var myli=document.createElement("li");
myli.setAttribute("id","cq");
myli.setAttribute("name","chongqing");
myli.innerHTML="重庆";
document.getElementById("city").appendChild(myli);
}
如果使用的 jquery方法
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
<script type="text/javascript" src="../js/jquery-1.3.1.js"></script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="sh" name="shanghai">上海</li>
</ul>
<input type="button" id="b1" value="添加重庆li到 上海下"/><br/>
<input type="button" id="b2" value="添加成都li到 北京前"/><br/>
</body>
<script language="JavaScript">
//*****添加重庆li到 上海下
$("#b1").click(function(){
//jquery方法
//<li id='cq' name=''chongqing>重庆</li>
//有两种方法
//1.一步到位********
// $myli=$("<li id='cq' name='chongqing'>重庆</li>");
//先使用内部插入
//$('#city').append($myli) :表示 在 $('#city')对象内部后面添加一个 $myli对象
// $('#city').append($myli);
//1.end ....一步到位********
//2.逐步添加我们的dom对象
$myli=$("<li></li>");//<===>$myli=$("<li/>");
$myli.text("重庆"); //=> <li>重庆</li>
$myli.attr("id","cq");//==><li id='cq'>重庆</li>
$myli.attr("name","chongqing");
//把$myli添加到上海
$('#city').append($myli) :表示 在 $('#city')对象内部后面添加一个 $myli对象
//$('#city').append($myli);
//如果使用appendTo这应当这样使用
//$myli.appendTo($("#city")); :表示把$myli添加到 $("#city")对象的内部后面
$myli.appendTo($("#city"));
})
//***添加成都li到 北京前
$("#b2").click(function(){
//jqury方法
$myli=$("<li id='cq' name='chongqing'>成都</li>");
//$('#city').prepend($myli);
$myli.prependTo($('#city'));
})
</script>
</html>
$aaa.append($bbb);
$bbb.appendTo($aaa);
我们看看外部插入:
核心代码如下:
$('#b4').click(function(){
//使用外部插入
//一步到位
//$("#bj").after("<li id='cd' name='chengdu '>成都</li>");
$("<li id='cd' name='chengdu '>成都</li>").insertAfter($('#bj'));
})
$('#b5').click(function(){
//使用外部插入
//一步到位
//$("#jl") 对象前面添加 "<li id='cd' name='chengdu '>成都</li>";
var $jl=$("<li id='cd' name='chengdu '>成都</li>");
//$("#jl").before($jl);
$jl.insertBefore($('#jl'));
})
l 使用jquery去查找某个对象,如果这个对象(id/class...)不存在,jquery不报错, val()
<script type="text/javascript">
//alert($('#text2').val());
alert(document.getElementById("text2").value);
//dom,这样处理
/*if(document.getElementById("text2")){
alert(document.getElementById("text2").value);
}else{
window.alert("ok");
}*/
</script>
u 删除节点
代码 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
<script type="text/javascript" src="../js/jquery-1.3.1.js"></script>
</head>
<body>
您喜欢的城市:<br>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="sh" name="shanghai">上海</li>
<li id="tj" name="tianjin">天津</li>
</ul>
您爱好的游戏:<br>
<ul id="game">
<li id="fk" name="fakong">反恐</li>
<li id="cq" name="chuangqi">传奇</li>
</ul>
<p>Hello</p> how are <p>you?</p>
<p name="test">Hello, <span>Person</span> <a href="#">and person</a></p>
<input type="button" value="删除所有p" id="b1"/>
<input type="button" value="所有p清空" id="b1"/>
<input type="button" value="删除上海这个li" id="b3"/>
</body>
<script language="JavaScript">
//*****删除所有p
// $("p").remove();
//***所有p清空
$("p").empty();
//****删除上海这个li
$("#b3").click(function(){
$("#sh").remove();
})
</script>
</html>
u 复制节点
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
<script type="text/javascript" src="../js/jquery-1.3.1.js"></script>
</head>
<body>
<button>保存</button><br><br><br><br><br>
///<br>
<p>段落</p>
<p>段落2</p>
<p>段落2</p>
<p>段落2</p>
<p>段落2</p>
</body>
<script language="JavaScript">
$("p").click(function(){
window.alert($(this).text());
});
//$("p").clone()表示复制一份 $("p"),但是没有复制事件
//$("p").clone(true)表示复制一份 $("p"),同时复制事件
$("p").clone(true).insertAfter($('button'));
</script>
</html>
u 节点替换
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
<script type="text/javascript" src="../js/jquery-1.3.1.js"></script>
</head>
<body>
<p>Hello</p><p>cruel</p><p>World</p>
</body>
<script language="JavaScript">
//with : 用什么去替换什么
// $("p").replaceWith("<input type='button' value='按钮'><br/>");
// $("<a href='#'>sohu</a>").replaceAll($("p"));
$("p").replaceWith("<a href='#'>sohu</a><br/>");
</script>
</html>
在jquery开发中有这样几个函数,可以获取值,同时也可以设置值
- val() val(val)
- html() html(val)
$("#div1").html("<p>hello</p>")
- text() text(val)
$("#div1").text("<p>hello</p>");
4. attr(name) attr(name,val)
$('#div1').attr("title");
$(''#div1).attr("title","abc");
- css("css名字"), css("css名字",val)
$("#div1").css("backgorund");
$("#div1").css("backgorund","red");
removeAttr(): 删除指定元素的指定属性
<a href='http://www.sohu.com' id="a1">soho</a>
$("#a1").removeAttr("href");
$("#a1").attr("href","http://www.baidu.com");
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>XXX</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.3.1.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<!--value 就是默认值 可以通过 this.defaultValue来访问-->
<input type="text" value="用户邮箱/手机号/用户名" id="b1"/><br>
<input type="password" value="" id="b2"/><br>
<input type="button" value="登陆" id="b3"/>
<br>
</body>
<script language="JavaScript">
$(document).ready(function (){
//当dom对象加载完毕后,给 b1绑定一个focus事件
$("#b1").focus(function(){
//获取当前值
$curVal=$(this).val();
if($curVal==this.defaultValue){
//应当设置""
$(this).val("");
}else{
$(this).val($curVal);
}
})
//在绑定一个事件 blur
$("#b1").blur(function(){
//获取当前值
$curVal=$(this).val();
if($curVal==""){
$(this).val(this.defaultValue);
}else{
$(this).val($curVal);
}
})
});
</script>
</html>
***如何获取子元素和兄弟元素的方法:
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
<script type="text/javascript" src="../js/jquery-1.3.1.js"></script>
</head>
<body>
<input type="button" value="查找所有子元素" id="b2"/>
<input type="button" value="获取后面的同辈元素" id="b3"/>
<input type="button" value="获取前面的同辈元素" id="b4"/>
<input type="button" value="获取所有的同辈元素" id="b5"/>
<div >
ccccccc
</div>
<div class="one">
<div id="one" >
XXXXXXXXX one
</div>
<div id="two" >
XXXXXXXXX two
</div>
<div id="three" >
XXXXXXXXX three
</div>
<div id="four" >
XXXXXXXXX four
</div>
</div>
<div>
tttttttttt
</div>
<div>
aaaaaaa
</div>
<div>
bbbbbb
</div></body>
<script language="JavaScript">
//**查找所有子元素(class 为 one 的div的子元素)
$("#b2").click(function(){
window.alert('aaaa');
/* $(".one").children().each(function(){
alert($(this).text());
})*/
//指定获取第几个子孩子
alert($(".one").children().eq(1).text());
})
//***获取后面的同辈元素(class 为 one 的div的子元素)
$("#b3").click(function(){
//获取.one后面所有的兄弟
// $(".one").nextAll().each(function(){
// alert($(this).text());
// })
//获取.one后面的第2兄弟
alert($(".one").nextAll().eq(1).text());
})
//**获取前面的同辈元素(class 为 one 的div的子元素)
$("#b4").click(function(){
//获取.one前面所有的兄弟
// $(".one").prevAll().each(function(){
// alert($(this).text());
//})
//获取.one前面的第1兄弟
alert($(".one").prevAll().eq(0).text());
alert($(".one").prev().text());
})
//**获取所有的同辈元素
$("#b5").click(function(){
$(".one").siblings().each(function(){
alert($(this).text());
})
})
//***
</script></html>
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="../js/jquery-1.3.1.js"></script>
</head>
<body>
<form method="post" action="">
请选择您的爱好!
<br><input type="checkbox" id="checkedAll_2"/>全选/全不选
<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="游泳"/>游泳
<input type="checkbox" name="items" value="唱歌"/>唱歌
<br/>
<input type="button" id="CheckedAll" value="全 选"/>
<input type="button" id="CheckedNo" value="全不选"/>
<input type="button" id="CheckedRev" value="反 选"/>
<input type="button" id="send" value="提 交"/>
</form>
</body>
<script language="JavaScript">
$("#checkedAll_2").click(
function (){
if(this.checked){
$("input[name='items']").attr("checked","checked");
}else{
//$("input[name='items']").attr("checked","");
$("input[name='items']").removeAttr("checked");
}
}
);
$('#CheckedAll').click(function(){
$("input[name='items']").attr("checked", "checked");
}
);
$('#CheckedNo').click(function(){
$("input[name='items']").attr("checked", "");
}
);
//反选
$('#CheckedRev').click(function(){
$("input[name='items']").each(function(){
if(this.checked){
$(this).attr("checked","");
}else{
$(this).attr("checked","checked");
}
})
}
);
</script>
</html>
小结: jquery和ajax整合的使用方法
使用jquery的方法
- load(url,[data,],[callfunction])
这个load方法把我们ajax自行写的代码包装,
url表示向哪个php发送ajax请求.
data数据是可以选填 ,但是格式有要求 应当按照 json格式来发送, 一旦有这个数据则,load将以post方式提交, 如果没有数据 ,可以设置null,则默认以get方式提交
callfunction :形式 function(data,textstatus,xmlHttpRequest);
data :表示从服务器返回数据(string)
textstatus:表示文本状态succuss, error, notmodify, timeout
xmlHttpRequest,就是XMLHttpRequest对象
返回的数据可能是text/xml/json, 这时你需要用不同的方法来处理,然后使用jquery来显示到某个适当位置
说明 : load方法需要用jquery 对象来调用.
jquery.load();
- get(url,[data,][callfunction]);
- post(url,[data,][callfunctino]);
这个post方法可以不依赖某个jquery对象,它可以直接调用
$.post();
url也是向某个php发送数据.
data 也是可以选填的,格式仍然遵守json格式 {"name":"sp"}; $_POST['name'];
该函数返回的值就是xmlHttpRequest 对象
callfunction函数只能有两个参数. data,textstatus
-------------------------------
最新版的jquery性能最好 jquery性能提升 来源:http://www.jb51.net/article/32524.htm 这个了解即可
-----