jQuery整理您的笔记----jQuery开始
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代码
<!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、我们实际最easy发现的就是两者的可同一时候存在个数
对于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代码风格
<!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实现的一个导航栏。我们来看一下这段代码：
$(".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强大的链式操作，一行代码就实现了导航栏的功能。可是有一点。这段代码都放在一行的话可读性会非常不好。这里换一种方式，而且为其加上凝视：
$(".has_children").click(function(){
$(this).addClass("highlight") //为当前元素添加highlight类
.children("a").show().end() //将子节点a元素显示出来并又一次定位到上次操作的元素
.siblings().removeClass("highlight") //获取元素的兄弟元素并去掉他们的highlight类
.children("a").hide(); //将兄弟元素下的a元素隐藏
})
代码格式调整后,易读性好了非常多，总结下规范：
A、对于同一个对象不超过三个操作的能够写在一行
B、对于同一对象有多个操作,建议每一行写一个操作
C、对于多个对象的少量操作。能够考虑每一个对象写一行，假设涉及到子元素，适当缩进
D、为代码加入凝视
四、jQuery对象和DOM对象
1、获得方式
DOM(Document Object Model 文档对象模型)对象获取方式是通过JavaScript中的getElementById、getElementByTagName等方法获取到的。
例如以下：
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对象那么就在定义的变量前面加上$。
比如
var $variable=jQuery对象;
var variable=DOM对象;
(1)、jQuery对象转换成DOM对象：
当我们对jQuery封装的方法不能全然掌握或者jQuery没有封装的方法。那么我们须要将jQuery对象转换成DOM对象，然后调用JavaScript对象中的方法。jQuery提供了两种方法将jQuery对象转换成DOM对象，即index[] ,get(index)
A、jQuery对象是一个数组对象。能够通过[index]将其转换成DOM对象：
var $cr=$("#id"); //jQuery对象
var cr=$cr[0]; //DOM对象
B、还有一种方法是jQuery本身提供的，通过get(index)方法得到DOM对象
var $cr=$("#id"); //jQuery对象
var cr=$cr.get(0); //DOM对象
（2）、DOM对象转换成jQuery对象
仅仅须要用$把DOM对象包装起来就能够了
var cr =document.getElementById('id') //DOM对象
var $cr=$(cr); //jQuery对象
通过以上方法能够随意的转换jQuery对象和DOM对象
3、实例研究
<!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是目前使用最广泛的javascript函数库. 据统计 ...
- jQuery整理笔记文件夹
jQuery整理笔记文件夹 jQuery整理笔记一----jQuery開始 jQuery整理笔记二----jQuery选择器整理 jQuery整理笔记三----jQuery过滤函数 jQuery整理笔 ...
- jQuery整理笔记七----几个经典表单应用
1.文本框获得(失去)焦点 当文本框获得输入焦点时,将该文本框高亮显示,算不得一个应用,仅仅是一个小技巧,能够提高用户体验. <!DOCTYPE html PUBLIC "-//W3C ...
- 阮一峰：jQuery官方基础教程笔记
jQuery是目前使用最广泛的javascript函数库. 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库.微软公司甚至把jQuery作为他们的官方库. 对于网页开发者来 ...
- WebService使用JSON格式传递笔记+JQuery测试
原文WebService使用JSON格式传递笔记+JQuery测试 因为一些因素,必须改写WebService,很传统,但是很多公司还在用.. 因为XML 的关系,不想让他传递数据的时候过度肥大,所以 ...
- 学习笔记--jQuery基础
学习笔记也算总结知识点,有些示例可能没有具体到元素,直接给出的语法.大家有基本理解在看可能会好些. jQuery使用前提,需要安装jQuery库 jQuery 库是一个 JavaScript 文件,您 ...
- jQuery源码学习笔记一
学习jQuery源码,我主要是通过妙味视频上学习的.这里将所有的源码分析,还有一些自己弄懂过程中的方法及示例整理出来,供大家参考. 我用的jquery v2.0.3版本. var rootjQuery ...
- jquery源码学习笔记三：jQuery工厂剖析
jquery源码学习笔记二:jQuery工厂 jquery源码学习笔记一:总体结构 上两篇说过,query的核心是一个jQuery工厂.其代码如下 function( window, noGlobal ...
- jquery源码学习笔记二：jQuery工厂
笔记一里记录,jQuery的总体结构如下: (function( global, factory ) { //调用factory(工厂)生成jQuery实例 factory( global ); }( ...
随机推荐
- 将cocos2dx+lua创建的游戏port到windows phone
在整个Port的过程中遇到的问题总结例如以下 1.一定要使用最新版本号的cocos2dx,原因大家看一下changelog就知道了,近期的cocos2dx版本号都是在修windows phone上的b ...
- 《Tips for Optimizing C/C++ Code》译文
前不久在微博上看到一篇非常好的短文讲怎样对C/C++进行性能优化,尽管其面向的领域是图形学中的光线跟踪,可是还是具有普遍的意义,将其翻译成中文,希望对大家写高质量代码有帮助. 1. 牢记阿姆达 ...
- net大型分布式电子商务架构
net大型分布式电子商务架构 背景 构建具备高可用,高扩展性,高性能,能承载高并发,大流量的分布式电子商务平台,支持用户,订单,采购,物流,配送,财务等多个项目的协作,便于后续运营报表,分析,便于运维 ...
- 【转】JAVA 网络编程
网络编程 网络编程对于很多的初学者来说,都是很向往的一种编程技能,但是很多的初学者却因为很长一段时间无法进入网络编程的大门而放弃了对于该部分技术的学习. 在 学习网络编程以前,很多初学者可能觉得网络编 ...
- 相关Python分割操作
刚论坛python文本 http://bbs.byr.cn/#!article/Python/1693 攻克了一个关于python分片的问题. 问题: uesrList = ['1','2','3', ...
- Teams（uva11609+组合）
I - Teams Time Limit:1000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Submit cid=7795 ...
- 谈论高并发（十二）分析java.util.concurrent.atomic.AtomicStampedReference看看如何解决源代码CAS的ABA问题
于谈论高并发(十一)几个自旋锁的实现(五岁以下儿童)中使用了java.util.concurrent.atomic.AtomicStampedReference原子变量指向工作队列的队尾,为何使用At ...
- Linux在device is busy处理
在Linux管理umount设备时,时常会遇到"device is busy", 假设umount一个文件系统碰到这样的情况.而且你并没有在所需卸载的文件夹下.那么非常可能实用户或 ...
- 补间动画实现（tween）
1.补间动画的概念: 补间动画:仅仅须要开发人员设置好动画的開始与结束的关键帧 中间帧有喜用计算机补齐. 2.种类:分为4种: ①alpha 透明度 ②alpha 透明度 ③translate 位置移 ...
- hdu 1025 Constructing Roads In JGShining’s Kingdom 【dp+二分法】
主题链接:pid=1025">http://acm.acmcoder.com/showproblem.php?pid=1025 题意:本求最长公共子序列.但数据太多. 转化为求最长不下 ...