jQuery整理您的笔记----jQuery开始

时间：2022-05-22 20:15:34

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开始的更多相关文章

  1. jQuery官方基础教程笔记&lpar;转载&rpar;

    本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...

  2. jQuery整理笔记文件夹

    jQuery整理笔记文件夹 jQuery整理笔记一----jQuery開始 jQuery整理笔记二----jQuery选择器整理 jQuery整理笔记三----jQuery过滤函数 jQuery整理笔 ...

  3. jQuery整理笔记七----几个经典表单应用

    1.文本框获得(失去)焦点 当文本框获得输入焦点时,将该文本框高亮显示,算不得一个应用,仅仅是一个小技巧,能够提高用户体验. <!DOCTYPE html PUBLIC "-//W3C ...

  4. 阮一峰：jQuery官方基础教程笔记

    jQuery是目前使用最广泛的javascript函数库. 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库.微软公司甚至把jQuery作为他们的官方库. 对于网页开发者来 ...

  5. WebService使用JSON格式传递笔记&plus;JQuery测试

    原文WebService使用JSON格式传递笔记+JQuery测试 因为一些因素,必须改写WebService,很传统,但是很多公司还在用.. 因为XML 的关系,不想让他传递数据的时候过度肥大,所以 ...

  6. 学习笔记--jQuery基础

    学习笔记也算总结知识点,有些示例可能没有具体到元素,直接给出的语法.大家有基本理解在看可能会好些. jQuery使用前提,需要安装jQuery库 jQuery 库是一个 JavaScript 文件,您 ...

  7. jQuery源码学习笔记一

    学习jQuery源码,我主要是通过妙味视频上学习的.这里将所有的源码分析,还有一些自己弄懂过程中的方法及示例整理出来,供大家参考. 我用的jquery v2.0.3版本. var rootjQuery ...

  8. jquery源码学习笔记三：jQuery工厂剖析

    jquery源码学习笔记二:jQuery工厂 jquery源码学习笔记一:总体结构 上两篇说过,query的核心是一个jQuery工厂.其代码如下 function( window, noGlobal ...

  9. jquery源码学习笔记二：jQuery工厂

    笔记一里记录,jQuery的总体结构如下: (function( global, factory ) { //调用factory(工厂)生成jQuery实例 factory( global ); }( ...

随机推荐

  1. DiscuzX 论坛首页 和 分 区设置版块横排

    在论坛看到很多新手站长在咨询怎么样才可以设置和Discuz! 官方论坛首页一个分区下面横排3个板块或者更多呢?如下图: 下面我一起来操作下: 论坛 后台 论坛 板块管理 分区 编辑 图一: 图二: 说 ...

  2. UML精粹4 - 对象图，包图，部署图，用例

    对象图object diagram 对象图是某个时间点上的对象在系统中的快照,也经常被称为实例图.一般在展示组合对象结构时比较有用.例如 组合结构的类图 一个时刻的对象图 包图package diag ...

  3. Windows 2012 安装 &period;net framework 3&period;5

    使用 PowerShell, 指定源文件路径然后进行安装: Install-WindowsFeature NET-Framework-Core –Source D:\Sources\sxs 使用命令提 ...

  4. 初识EasyUI

    1.下载Jquery_EasyUI文档,将里面的spket-1.6.18.jar复制放到适合的位置(随意,不要有中文路径).使用命令行将其安装:  进入到文件目录下:   弹出安装界面选择下一步: 选 ...

  5. Linux kernel 内存损坏漏洞

    漏洞名称: Linux kernel 内存损坏漏洞 CNNVD编号: CNNVD-201310-143 发布时间: 2013-10-11 更新时间: 2013-10-11 危害等级: 中危   漏洞类 ...

  6. 【高德地图API】如何打造十月妈咪品牌地图？

    原文:[高德地图API]如何打造十月妈咪品牌地图? 摘要:品牌地图除了地图,商铺标点外,还有微博关注,路线查询等功能. ---------------------------------------- ...

  7. IOS 第三方库之-MBProgressHUD的使用详解

    转自作者: weidfyr  http://www.aiuxian.com/article/p-3121607.html 1,MBProgressHUD常用属性和用法Demo - (void)test ...

  8. sqlyog连接mysql8&period;0

    1.本人安装的是mysql8.0社区版,安装包名称:mysql-installer-community-8.0.12.0.msi,可自行到官网下载. 2.安装完成后用sqlyog连接数据库出现密码乱码 ...

  9. jq三级联动

    test.html <div class="a_list"> <div class="a_title">商城分类:</div&gt ...

  10. python金融反欺诈-项目实战

    python信用评分卡(附代码,博主录制) https://study.163.com/course/introduction.htm?courseId=1005214003&utm_camp ...

相关文章