jQuery整理笔记一----jQuery开始
2014-05-30 14:40
309 查看
Jquery是一个快速、简洁的JavaScript框架,jQuery设计宗旨是：Write Less,Do More（写更少的代码,做更多的事情）。
一、Jquery框架优势：
1、轻量级
jQuery源代码压缩后仅仅有几十KB，是jQuery的先天优势，是任何其它框架无法比拟的。在jQuery官网上下载的最新的库文件版本是2.1.0，大小为82KB
2、兼容主流浏览器
jQuery能在常用的各种主流浏览器中正常运行，解决了JavaScript在不同浏览器上的差异性
3、操作比较方便
jQuery提供了强大的HTML元素选择功能。Sizzle引擎功能强大，能够支持CSS1到CSS3的所有选择器、Xpath选择器以及Jquery自定义选择器
4、优雅的语法规则
jQuery中最具特色的莫过于它的链式操作方式，即对发生在同一jQuery对象上的一组动作可直接连写而无需重复获取对象。这一点使得jQuery代码无比优雅
5、支持拓展功能
jQuery提供了丰富的插件支持。jQuery的易拓展性可以方便任何用户拓展jQuery的功能。
6、完善的ajax
jQuery将所有的ajax操作封装到$.ajax()中，使得用户在处理ajax操作的时候能够专心处理业务逻辑而无需关注复杂的浏览器兼容性以及XMLHttpRequest对象创建和使用的问题。
7、无污染
jQuery只建立了一个名为jQuery的对象，其所有的方法都在这个对象之下。另外一个别名$也是可以随时交出控制权的，不会污染其他对象，也不会与JavaScript对象发生冲突。
8、开源、完善的学习文档等。
二、一段最简单的jQuery代码
[html] view
plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Hello jQuery </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
alert('Hello jQuery')
})
$(function(){
alert('简写形式')
})
//-->
</script>
</head>
<body>
</body>
</html>
下面整理一下jQuery我们最常用也是最重要的一个事件$(document).ready(function())：
1、window.onload 和 $(document).ready(function())的区别
A、我们实际最容易发现的就是两者的可同时存在个数
对于window.onload来说只能同时存在一个
对于 $(document).ready(function())可以同时存在多个,顺序执行
B、是否有简写形式
window.onload没有
$(document).ready(function())有$(function())
C、最重要的一个区别是二者的执行时机
window.onload是页面中所有元素(包含元素关联的所有文件)都加载完毕后才执行。
而通过jQuery的$(function())，在DOM完全就绪时就可以被调用，此时页面上的所有元素对于jQuery而言都是可以访问的，但是这并不意味这这些元素的关联文件都已经加载完毕。
举个例子来说,有一个大型图库网站，加载页面的时候为所有图片添加了某些样式。当我们使用window.onload的时候，需要等到页面上所有的图片都加载出来之后才执行给图片添加样式的行为。而用$(function())，那么只需要DOM就绪就可以执行了，不需要等待所有图片加载完毕，显而易见，$(function())相比于window.onload效果更好，它能提高web页面的加载速度。
三、jQuery代码风格
[html] view
plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> jQuery代码风格 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
#menu{width:300px;}
.has_children{background:#555;color:#fff;cursor:pointer;}
.highlight{color:#fff;background:green;}
div{padding:0;margin:10px 0}
div a{background:#888;display:none;float:left;width:300px;}
</style>
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function(){
$(".has_children").click(function(){
$(this).addClass("highlight") //为当前元素增加highlight类
.children("a").show().end() //将子节点a元素显示出来并重新定位到上次操作的元素
.siblings().removeClass("highlight") //获取元素的兄弟元素并去掉他们的highlight类
.children("a").hide(); //将兄弟元素下的a元素隐藏
})
})
//-->
</script>
</head>
<body>
<div id="menu">
<div class="has_children">
<span>jQuery学习笔记一</span>
<a>1.1 aaaa</a>
<a>1.2 bbbb</a>
<a>1.3 cccc</a>
<a>1.4 dddd</a>
<a>1.5 eeee</a>
<a>1.6 ffff</a>
<a>1.7 gggg</a>
</div>
<div class="has_children">
<span>jQuery学习笔记二</span>
<a>2.1 aaaa</a>
<a>2.2 bbbb</a>
<a>2.3 cccc</a>
<a>2.4 dddd</a>
<a>2.5 eeee</a>
<a>2.6 ffff</a>
<a>2.7 gggg</a>
</div>
</div>
</body>
</html>
这是利用jQuery实现的一个导航栏，我们来看一下这段代码：
[html] view
plaincopy
$(".has_children").click(function(){
$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children ("a").hide();
})
意思是当鼠标单击到class为has_children元素上的时候：
A、为该元素增加样式highlight
B、将该元素的子节点中的a标签显示出来并重新定位到本身
C、找到该元素的兄弟元素并删除它们的highlight样式并将其子节点中的a标签隐藏
这里我们看到了jQuery强大的链式操作，一行代码就实现了导航栏的功能。但是有一点，这段代码都放在一行的话可读性会很不好，这里换一种方式，并且为其加上注释：
[html] view
plaincopy
$(".has_children").click(function(){
$(this).addClass("highlight") //为当前元素增加highlight类
<span style="white-space:pre"> </span>.children("a").show().end() //将子节点a元素显示出来并重新定位到上次操作的元素
.siblings().removeClass("highlight") //获取元素的兄弟元素并去掉他们的highlight类
<span style="white-space:pre"> </span>.children("a").hide(); //将兄弟元素下的a元素隐藏
})
代码格式调整后,易读性好了很多，总结下规范：
A、对于同一个对象不超过三个操作的可以写在一行
B、对于同一对象有多个操作,建议每一行写一个操作
C、对于多个对象的少量操作，可以考虑每个对象写一行，如果涉及到子元素，适当缩进
D、为代码添加注释
四、jQuery对象和DOM对象
1、获得方式
DOM(Document Object Model 文档对象模型)对象获取方式是通过JavaScript中的getElementById、getElementByTagName等方法获取到的。
如下：
[html] view
plaincopy
var domObj=document.getElementById("id") //获取DOM对象
var objHtml=domObj.innerHTML //使用JavaScript中的方法----innerHTML
jQuery对象就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，只要是jQuery对象就可以使用jQuery提供的方法
$("#foo").html() //获取id为foo的元素内的html代码 html()是jQuery内的方法。
注意：jQuery对象只能使用jQuery中提供的方法,不能使用DOM对象的方法,DOM对象只能使用JavaScript提供的方法，不能使用jQuery提供的方法。
2、jQuery对象与DOM对象的相互转换
在考虑两者之间的相互转换之前先约定好定义变量的风格。如果获取的对象为jQuery对象那么就在定义的变量前面加上$。例如
[html] view
plaincopy
var $variable=jQuery对象;
var variable=DOM对象;
(1)、jQuery对象转换成DOM对象：
当我们对jQuery封装的方法不能完全掌握或者jQuery没有封装的方法，那么我们需要将jQuery对象转换成DOM对象，然后调用JavaScript对象中的方法，jQuery提供了两种方法将jQuery对象转换成DOM对象，即index[] ,get(index)
A、jQuery对象是一个数组对象，可以通过[index]将其转换成DOM对象：
[html] view
plaincopy
var $cr=$("#id"); //jQuery对象
var cr=$cr[0]; //DOM对象
B、另一种方法是jQuery本身提供的，通过get(index)方法得到DOM对象
[html] view
plaincopy
var $cr=$("#id"); //jQuery对象
var cr=$cr.get(0); //DOM对象
（2）、DOM对象转换成jQuery对象
只需要用$把DOM对象包装起来就可以了
[html] view
plaincopy
var cr =document.getElementById('id') //DOM对象
var $cr=$(cr); //jQuery对象
通过以上方法可以任意的转换jQuery对象和DOM对象
3、实例研究
[html] view
plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
//jquery判断
function isChecked(){
var $ch=$("#agree");
if($ch.is(":checked")){
alert("jquery判断当前处于选中状态");
}else{
alert("jquery判断当前处于非选中状态");
}
}
//dom判断
function isChecked1(){
var $ch=$("#agree");
var ch=$ch.get(0);
if(ch.checked){
alert("dom判断当前处于选中状态");
}else{
alert("dom判断当前处于非选中状态");
}
}
//-->
</script>
</head>
<body>
<input type="checkbox" id="agree" name="a">同意
<input type="button" value="jQuery判断是否选中" onclick="isChecked()">
<input type="button" value="DOM判断是否选中" onclick="isChecked1()">
</body>
</html>
一、Jquery框架优势：
1、轻量级
jQuery源代码压缩后仅仅有几十KB，是jQuery的先天优势，是任何其它框架无法比拟的。在jQuery官网上下载的最新的库文件版本是2.1.0，大小为82KB
2、兼容主流浏览器
jQuery能在常用的各种主流浏览器中正常运行，解决了JavaScript在不同浏览器上的差异性
3、操作比较方便
jQuery提供了强大的HTML元素选择功能。Sizzle引擎功能强大，能够支持CSS1到CSS3的所有选择器、Xpath选择器以及Jquery自定义选择器
4、优雅的语法规则
jQuery中最具特色的莫过于它的链式操作方式，即对发生在同一jQuery对象上的一组动作可直接连写而无需重复获取对象。这一点使得jQuery代码无比优雅
5、支持拓展功能
jQuery提供了丰富的插件支持。jQuery的易拓展性可以方便任何用户拓展jQuery的功能。
6、完善的ajax
jQuery将所有的ajax操作封装到$.ajax()中，使得用户在处理ajax操作的时候能够专心处理业务逻辑而无需关注复杂的浏览器兼容性以及XMLHttpRequest对象创建和使用的问题。
7、无污染
jQuery只建立了一个名为jQuery的对象，其所有的方法都在这个对象之下。另外一个别名$也是可以随时交出控制权的，不会污染其他对象，也不会与JavaScript对象发生冲突。
8、开源、完善的学习文档等。
二、一段最简单的jQuery代码
[html] view
plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Hello jQuery </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
alert('Hello jQuery')
})
$(function(){
alert('简写形式')
})
//-->
</script>
</head>
<body>
</body>
</html>
下面整理一下jQuery我们最常用也是最重要的一个事件$(document).ready(function())：
1、window.onload 和 $(document).ready(function())的区别
A、我们实际最容易发现的就是两者的可同时存在个数
对于window.onload来说只能同时存在一个
对于 $(document).ready(function())可以同时存在多个,顺序执行
B、是否有简写形式
window.onload没有
$(document).ready(function())有$(function())
C、最重要的一个区别是二者的执行时机
window.onload是页面中所有元素(包含元素关联的所有文件)都加载完毕后才执行。
而通过jQuery的$(function())，在DOM完全就绪时就可以被调用，此时页面上的所有元素对于jQuery而言都是可以访问的，但是这并不意味这这些元素的关联文件都已经加载完毕。
举个例子来说,有一个大型图库网站，加载页面的时候为所有图片添加了某些样式。当我们使用window.onload的时候，需要等到页面上所有的图片都加载出来之后才执行给图片添加样式的行为。而用$(function())，那么只需要DOM就绪就可以执行了，不需要等待所有图片加载完毕，显而易见，$(function())相比于window.onload效果更好，它能提高web页面的加载速度。
三、jQuery代码风格
[html] view
plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> jQuery代码风格 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
#menu{width:300px;}
.has_children{background:#555;color:#fff;cursor:pointer;}
.highlight{color:#fff;background:green;}
div{padding:0;margin:10px 0}
div a{background:#888;display:none;float:left;width:300px;}
</style>
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function(){
$(".has_children").click(function(){
$(this).addClass("highlight") //为当前元素增加highlight类
.children("a").show().end() //将子节点a元素显示出来并重新定位到上次操作的元素
.siblings().removeClass("highlight") //获取元素的兄弟元素并去掉他们的highlight类
.children("a").hide(); //将兄弟元素下的a元素隐藏
})
})
//-->
</script>
</head>
<body>
<div id="menu">
<div class="has_children">
<span>jQuery学习笔记一</span>
<a>1.1 aaaa</a>
<a>1.2 bbbb</a>
<a>1.3 cccc</a>
<a>1.4 dddd</a>
<a>1.5 eeee</a>
<a>1.6 ffff</a>
<a>1.7 gggg</a>
</div>
<div class="has_children">
<span>jQuery学习笔记二</span>
<a>2.1 aaaa</a>
<a>2.2 bbbb</a>
<a>2.3 cccc</a>
<a>2.4 dddd</a>
<a>2.5 eeee</a>
<a>2.6 ffff</a>
<a>2.7 gggg</a>
</div>
</div>
</body>
</html>
这是利用jQuery实现的一个导航栏，我们来看一下这段代码：
[html] view
plaincopy
$(".has_children").click(function(){
$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children ("a").hide();
})
意思是当鼠标单击到class为has_children元素上的时候：
A、为该元素增加样式highlight
B、将该元素的子节点中的a标签显示出来并重新定位到本身
C、找到该元素的兄弟元素并删除它们的highlight样式并将其子节点中的a标签隐藏
这里我们看到了jQuery强大的链式操作，一行代码就实现了导航栏的功能。但是有一点，这段代码都放在一行的话可读性会很不好，这里换一种方式，并且为其加上注释：
[html] view
plaincopy
$(".has_children").click(function(){
$(this).addClass("highlight") //为当前元素增加highlight类
<span style="white-space:pre"> </span>.children("a").show().end() //将子节点a元素显示出来并重新定位到上次操作的元素
.siblings().removeClass("highlight") //获取元素的兄弟元素并去掉他们的highlight类
<span style="white-space:pre"> </span>.children("a").hide(); //将兄弟元素下的a元素隐藏
})
代码格式调整后,易读性好了很多，总结下规范：
A、对于同一个对象不超过三个操作的可以写在一行
B、对于同一对象有多个操作,建议每一行写一个操作
C、对于多个对象的少量操作，可以考虑每个对象写一行，如果涉及到子元素，适当缩进
D、为代码添加注释
四、jQuery对象和DOM对象
1、获得方式
DOM(Document Object Model 文档对象模型)对象获取方式是通过JavaScript中的getElementById、getElementByTagName等方法获取到的。
如下：
[html] view
plaincopy
var domObj=document.getElementById("id") //获取DOM对象
var objHtml=domObj.innerHTML //使用JavaScript中的方法----innerHTML
jQuery对象就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，只要是jQuery对象就可以使用jQuery提供的方法
$("#foo").html() //获取id为foo的元素内的html代码 html()是jQuery内的方法。
注意：jQuery对象只能使用jQuery中提供的方法,不能使用DOM对象的方法,DOM对象只能使用JavaScript提供的方法，不能使用jQuery提供的方法。
2、jQuery对象与DOM对象的相互转换
在考虑两者之间的相互转换之前先约定好定义变量的风格。如果获取的对象为jQuery对象那么就在定义的变量前面加上$。例如
[html] view
plaincopy
var $variable=jQuery对象;
var variable=DOM对象;
(1)、jQuery对象转换成DOM对象：
当我们对jQuery封装的方法不能完全掌握或者jQuery没有封装的方法，那么我们需要将jQuery对象转换成DOM对象，然后调用JavaScript对象中的方法，jQuery提供了两种方法将jQuery对象转换成DOM对象，即index[] ,get(index)
A、jQuery对象是一个数组对象，可以通过[index]将其转换成DOM对象：
[html] view
plaincopy
var $cr=$("#id"); //jQuery对象
var cr=$cr[0]; //DOM对象
B、另一种方法是jQuery本身提供的，通过get(index)方法得到DOM对象
[html] view
plaincopy
var $cr=$("#id"); //jQuery对象
var cr=$cr.get(0); //DOM对象
（2）、DOM对象转换成jQuery对象
只需要用$把DOM对象包装起来就可以了
[html] view
plaincopy
var cr =document.getElementById('id') //DOM对象
var $cr=$(cr); //jQuery对象
通过以上方法可以任意的转换jQuery对象和DOM对象
3、实例研究
[html] view
plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
//jquery判断
function isChecked(){
var $ch=$("#agree");
if($ch.is(":checked")){
alert("jquery判断当前处于选中状态");
}else{
alert("jquery判断当前处于非选中状态");
}
}
//dom判断
function isChecked1(){
var $ch=$("#agree");
var ch=$ch.get(0);
if(ch.checked){
alert("dom判断当前处于选中状态");
}else{
alert("dom判断当前处于非选中状态");
}
}
//-->
</script>
</head>
<body>
<input type="checkbox" id="agree" name="a">同意
<input type="button" value="jQuery判断是否选中" onclick="isChecked()">
<input type="button" value="DOM判断是否选中" onclick="isChecked1()">
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery整理笔记一----jQuery开始
- jQuery整理您的笔记----jQuery开始
- jQuery整理笔记一----jQuery开始
- jQuery整理笔记八----jQuery的Ajax
- jQuery整理笔记五----jQuery事件
- Jquery插件写法笔记整理
- Jquery插件写法笔记整理
- jquery学习笔记---jqGrid学习笔记 完整整理
- jQuery整理笔记三----jQuery过滤函数
- jQuery整理笔记三----jQuery过滤函数
- jQuery整理笔记四----jQuery操作DOM
- 从今天开始，要整理自己的学习笔记
- [转]jQuery学习笔记81--下拉框,单选框,多选框整理
- jQuery整理笔记七----几个经典表单应用
- jQuery整理笔记七----几个经典表单应用 .
- jQuery整理笔记六----jQuery动画
- c#/asp.net/html/css/js/jquery 实用小方法 整理笔记
- 今天开始重新整理我的RUP学习笔记
- 刚开始学习Jquery的一些笔记被我翻出来了
- 开始整理几年技术生涯的经验和笔记