jQuery简单入门练习.docx
《jQuery简单入门练习.docx》由会员分享，可在线阅读，更多相关《jQuery简单入门练习.docx（48页珍藏版）》请在冰豆网上搜索。
jQuery简单入门练习
01简单的jQuery程序
DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http:
//www.w3.org/TR/html4/loose.dtd">
Inserttitlehere--引入外部独立的jQuery.js文件-->
--文本标签-->
//DOM
varusername=document.getElementById（"username"）;
alert（username.value）;
//jQuery
var$username=$（"#username"）;
alert（$username.val（））;
1.JQuery要进行使用，导入外部的js文件
2.jQuery的写法使用$作为标示符
3.获取它的id，格式：
$（“#id”）;
4.获取id的值，格式：
.val（）;
02//DOM对象转换成jQuery对象：
$（DOM对象）
DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http:
//www.w3.org/TR/html4/loose.dtd">
Inserttitlehere--引入js文件-->
varusername=document.getElementById（"username"）;
//DOM对象转换成jQuery对象：
$（DOM对象）
var$username=$（username）;
alert（$username.val（））;
1.在进行DOM对象转换成jQuery对象，格式：
$（DOOM对象）
03jQuery对象转换成DOM对象
DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http:
//www.w3.org/TR/html4/loose.dtd">
Inserttitlehere
//jQuery
var$username=$（"#username"）;
//jQuery对象是数组对象：
jQuery对象[索引值]
//jQuery对象转换成DOM对象
varusername=$username.get（0）;
alert（username.value）;
1.由于jQuery是数组对象：
jQuery对象[索引值]
2.Jquery就提供了一个get（）方法获取其下标
3.转换完成之后，通过DOM提供的value属性，获取DOM的value的值
04对比事件处理机制
DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http:
//www.w3.org/TR/html4/loose.dtd">
Inserttitlehere
//DOM
//varusername=document.getElementById（"username!
!
"）;
//if（!
username）{
//alert（"id不存在"）;
//}else{
//alert（username.value）;
//}
//jQuery
var$username=$（"#username111"）;
alert（$username.val（））;
1.在jQuery事件处理机制方式中，如果没有这个值的时候会输出undefined
01基本选择器
DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http:
//www.w3.org/TR/html4/loose.dtd">
Inserttitlehere--引入jQuery和css樣式-->
//
$（document）.ready（function（）{
$（"#btn1"）.click（function（）{
$（"#one"）.css（"background","yellow"）;
}）;
//
$（"#btn2"）.click（function（）{
//支持类似于批操作
$（".mini"）.css（"background","yellow"）;
}）;
//
$（"#btn3"）.click（function（）{
$（"div"）.css（"background","yellow"）;
}）;
//
$（"#btn4"）.click（function（）{
$（"*"）.css（"background","yellow"）;
}）;
//
$（"#btn5"）.click（function（）{
$（"span,#two"）.css（"background","yellow"）;
}）;
}）;
手动重置页面元素
点击下列按钮时先自动重置页面
基本选择器.
--控制按钮-->
--测试的元素-->
id为one,class为one的div
class为mini
升级会员 