《jQuery权威指南》学习笔记之第1章 jQuery开发入门
来源：互联网 发布：断点续传 java 编辑：程序博客网 时间：2024/05/29 04:48
1.1jQuery概述
1.1.1认识jQuery
主旨:以更少的代码，实现更多的功能(Write less, do more)
1.1.2jQuery基本功能
1. 访问和操作DOM元素
2. 控制页面样式
3. 对页面事件的处理
4. 大量插件在页面中的应用
5. 与Ajax技术的完美结合
1.1.3搭建jQuery开发环境
1. 下载jQuery文件库
2. 引入jQuery文件库
1.1.4编写第一个简单的jQuery应用
示例1-1 编写第一个简单的jQuery程序
<!DOCTYPE html><html><head><title>第一个简单的jQuery程序</title><script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script><script type="text/javascript">$(document).ready(function() {alert("您好,欢迎来到jQuery世界");})$(function(){alert("您好,欢迎来到jQuery世界");})</script></head><body></body></html>1.1.5 jQuery程序的代码风格
1. "$"美元符的实用
2. 事件操作链接式书写
示例1-2 jQuery事件的链式写法
<html><head><title>jQuery事件的链式写法</title><script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script><style type="text/css">.divFrame {width: 500px;border: solid 2px #666;font-size:20pt}.divTitle {background-color: #eee;padding: 10px}.divContent {padding: 5px;display: none}.divCurrColor {background-color: Red}</style><script type="text/javascript">$(function() {$(".divTitle").click(function() {$(this).addClass("divCurrColor").next(".divContent").css("display", "block");});});</script></head><body><div class="divFrame"><div class="divTitle">主题</div><div class="divContent"><a href="#">链接一</a> <br /><a href="#">链接二</a> <br /><a href="#">链接三</a> <br /></div></div></body></html>1.2jQuery的简单应用
1.2.1jQuery访问DOM对象
1. 什么是DOM对象
2. 什么是jQuery对象
1.2.2jQuery控制DOM对象
示例1-3 使用传统的jQuery方法访问DOM对象(jQuery)
<html><head><title>控制DOM对象</title><style type="text/css">.divFrame {width: 260px;border: solid 1px #666;font-size: 15pt}.divTitle {background-color: #eee;padding: 5px}.divContent {padding: 8px;font-size: 9pt}.divTip {width: 244px;border: solid 1px #666;padding: 8px;font-size: 9pt;margin-top:5px;display: none}.txtCss {border: solid 1px #ccc}.divBtn {padding-top: 5px}.divBtn .btnCss {border: solid 1px #535353;width: 60px}</style><script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script><script type="text/javascript">$(function() {$("#Button1").click(function() {//var oTxtValue = $("#Text1").val();//var oRdoValue = $("#Radio1").is(":checked") ? "男" : "女";//var oChkValue = $("#Checkbox1").is(":checked") ? "已婚" : "未婚";//$("#divTip").css("display", "block").html(oTxtValue + "<br />" + oRdoValue + "<br />" + oChkValue);});});</script></head><body><div class="divFrame"><div class="divTitle">请输入如下信息</div><div class="divContent">姓名:<input id="Text1" type="text" class="txtCss" /><br />性别:<input id="Radio1" name="rdoSex" type="radio" value="男" />男<input id="Radio2" name="rdoSex" type="radio" value="女" />女 <br />婚否:<input id="Checkbox1" type="checkbox" /><div class="divBtn"><input id="Button1" type="button" value="提交" class="btnCss" onclick="btnClick();" /></div></div></div><div id="divTip" class="divTip"></div></body></html>示例1-3-1 使用传统的javascript方法访问DOM对象
<html><head><title>控制DOM对象</title><style type="text/css">.divFrame {width: 260px;border: solid 1px #666;font-size: 15pt}.divTitle {background-color: #eee;padding: 5px}.divContent {padding: 8px;font-size: 9pt}.divTip {width: 244px;border: solid 1px #666;padding: 8px;font-size: 9pt;margin-top:5px;display: none}.txtCss {border: solid 1px #ccc}.divBtn {padding-top: 5px}.divBtn .btnCss {border: solid 1px #535353;width: 60px}</style><script type="text/javascript">function btnClick() {//获取文本框的值var oTxtValue = document.getElementById("Text1").value;//获取单选框的值var oRdoValue = (Radio1.checked) ? "男" : "女";//获取复选框的值var oChkValue = (Checkbox1.checked) ? "已婚" : "未婚";//显示提示文本元素document.getElementById("divTip").style.display = "block";//设置文本元素的内容document.getElementById("divTip").innerHTML = oTxtValue + "<br />" + oRdoValue + "<br />" + oChkValue;}</script></head><body><div class="divFrame"><div class="divTitle">请输入如下信息</div><div class="divContent">姓名:<input id="Text1" type="text" class="txtCss" /><br />性别:<input id="Radio1" name="rdoSex" type="radio" value="男" />男<input id="Radio2" name="rdoSex" type="radio" value="女" />女 <br />婚否:<input id="Checkbox1" type="checkbox" /><div class="divBtn"><input id="Button1" type="button" value="提交" class="btnCss" onclick="btnClick();" /></div></div></div><div id="divTip" class="divTip"></div></body></html>1.2.3 jQuery控制页面CSS
示例1-4 jQuery控制CSS样式
<html><head><title></title><script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script><style type="text/css">.divDefalut {width: 260px;font-size: 10pt;padding: 5px;}.divClick {width: 260px;border: solid 1px #666;font-size: 10pt;background-color: #eee;padding: 5px;}</style><script type="text/javascript">$(function() {$(".divDefalut").click(function() {$(this).toggleClass("divClick").html("点击后的样式");});});</script></head><body><div class="divDefalut">点击前的样式</div></body></html>1.3本章小结
主要是jQuery的介绍没有什么好讲的！
代码下载地址:点击打开链接
- 《jQuery权威指南》学习笔记之第1章 jQuery开发入门
- 《jQuery权威指南》学习笔记之第2章 jQuery选择器
- 《jQuery权威指南》学习笔记之第3章 jQuery操作DOM
- 《jQuery权威指南》学习笔记之第4章 jQuery中的事件与应用
- 《jQuery权威指南》学习笔记之第4章 jQuery中的事件与应用
- 《jquery权威指南》学习笔记--第二章
- jquery权威指南学习笔记
- jQuery权威指南 学习笔记
- JQuery开发权威指南——学习笔记
- Javascript权威指南学习笔记--Jquery类库
- jQuery权威指南第二版学习笔记（第二章）
- 【笔记】 《js权威指南》- 第19章 JQuery类库 - 19.1 JQuery基础
- 【笔记】 《js权威指南》- 第19章 JQuery类库 - 19.2 JQuery getter setter
- jQuery权威指南之第一二章
- jQuery权威指南第二版学习笔记（第一章）
- jQuery权威指南（第2版）
- jQuery权威指南读书笔记1-初识jQuery
- jQuery 学习笔记 之二 附： jQuery入门指南教程列表
- 用Eclipse连接Bluestacks进行调试
- Android-解析/生成xml、文件读写、数据库操作
- Maven入门（一）（HelloMaven）
- 递归趣文
- dll文件加载失败
- 《jQuery权威指南》学习笔记之第1章 jQuery开发入门
- UML类图关系（泛化 、继承、实现、依赖、关联、聚合、组合）
- 大型网站的优化1 —— 页面静态化
- Android-内容提供者、ListView点击事件、观察者、监听短信/联系人
- SQL语句整理
- style.left不起作用
- 设计模式——小单例有大秘密
- 内核对象句柄表
- 我的著译（目录）
