JQuery学习笔记

Chapter one初识jQuery

1.2测试jQuery

在jQuery库中，$是jQuery的别名，如：$()相当于jQuery（）

注意：在使用JQuery进行开发的时候如果在做所有事情之前，希望jQuery操作DOM文档，就必须保证在DOM载入完毕后开始执行，应该使用ready事件作为处理HTML文档的开始。

1.4JQuery的核心功能

1.对外接口单一让使用更简单

2.链式语法让编码更加的快速和优雅

3.模仿CSS选择器让选取元素更加的精确的灵活

4.拓展接口让JQuery更开放，富有活力

1.5容易混淆的几个概念

ＤＯＭ对象是文档对象模型

ＪＱｕｅｒｙ对象实际上是普通的ＪａｖａＳｃｒｉｐｔ对象，他其中包含了ＤＯＭ对象的集合。

ＪＱｕｅｒｙ对象不能调用ＤＯＭ对象的方法，ＤＯＭ也不能调用ＪＱｕｅｒｙ对象的方法和属性，如果非要使用的话，可以把JQuery对象转换为DOM对象

，方法有两种：一种是借助数组下标来读取JQuery对象集合中的某个ＤＯＭ对象；例如：

<!DOCTYPE html>

<!--我们可以把JQuery对象转化为DOM对象，看function函数-->

<html>

<head lang="en">

<meta charset="UTF-8">

<script src="../jquery/jquery-1.11.3.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

var  $li=$("li");

var li=$li[0];

alert(li.innerHTML);

})

</script>

<title>learn</title>

</head>

<body>

<ul>

<li>what are you</li>

<li>ia an mdai</li>

</ul>

</body>

</html>

第二种是借助ＪＱｕｅｒｙ对象方法，例如：

<!DOCTYPE html>

<!--我们可以把JQuery对象转化为DOM对象，看function函数,这是利用get()函数实现的-->

<html>

<head lang="en">

<meta charset="UTF-8">

<script src="../jquery/jquery-1.11.3.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

var  $li=$("li");

var li=$li.get(0);

alert(li.innerHTML);

})

</script>

<title>learn</title>

</head>

<body>

<ul>

<li>what are you</li>

<li>ia an mdai</li>

</ul>

</body>

</html>

同样我们也可以把ＤＯＭ对象转化为ＪＱｕｅｒｙ对象，这比较简单只要把它作为参数传给＄（）就可以了

<!DOCTYPE html>

<!--我们可以把JQuery对象转化为DOM对象，看function函数,这是利用get()函数实现的-->

<html>

<head lang="en">

<meta charset="UTF-8">

<script src="../jquery/jquery-1.11.3.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

var li=document.getElementsByTagName("li");

var $li=$(li［０］);

alert($li.html());

})

</script>

<title>learn</title>

</head>

<body>

<ul>

<li>what are you</li>

<li>ia an mdai</li>

</ul>

</body>

</html>

因此ＪＱｕｅｒｙ对象和ＤＯＭ对象是可以相互转换的，因为他们的操作的对象都是ＤＯＭ对象。ＪＱｕｅｒｙ对象是由很多个ＤＯＭ对象组成的，简单的来说ＪＱｕｅｒｙ对象就是ＤＯＭ对象组成的数组，而ＤＯＭ对象只是一个单个的DOM元素

另外针对ｌｏａｄ和ｒｅａｄｙ，要知道的是ｌｏａｄ只能够被编写一次，但是ｒｅａｄｙ可以多次编写，也就是说＄（）可以出现多次

Ｃｈａｐｔｅｒｔｗｏ使用选择器

２.１基本选择器

＃ＩＤ，他的返回值是单个元素

Ｅｌｅｍｅｎｔ，他的返回值是同类型集合元素

，ｃｌａｓｓ，他的返回值是类

＊，他的返回值是所有的元素

ＳｅｌｅｃｔｏｒＮ，分别选择选择器组中每个选择器匹配的元素，然后合并返回所有的元素，相当于或

ID选择器的用法：
语法结构：
$(“#id”)或者JQuery（“#ID”）

这种ID选择器在JavaScript里面的用法是

Document.getelementbyid(“id”)

注意：如果ID选择器中含有特殊的字符那么要用双斜杠对特殊字符进行转义

比如一个ID地址是 [dix] 那么他的JQuery就应该写成以下的形式

$(“#\\[dix\\]”)  前面一个\\是用来把 [ 进行转义的,后面一个\\是用来把  ] 进行转义的

标签选择器的用法：
语法结构 ：
$（“标签名字”)

这种标签选择器在JavaScript里面的用法是：
 document.getelementbytagname(“tagname”)

如果要用JavaScript写的话那么要记住他的前面不是$(),而是window.onload,如下例子的表示形式：

<script type="text/javascript">

window.onload=function() {

document.getElementById("name1").style.color="red";

}

</script>

jQuery的学习笔记的更多相关文章

  1. jQuery源代码学习笔记_工具函数_noop/error/now/trim

    jQuery源代码学习笔记_工具函数_noop/error/now/trim jquery提供了一系列的工具函数,用于支持其运行,今天主要分析noop/error/now/trim这4个函数: 1.n ...

  2. jQuery的学习笔记4

    JQuery学习笔记3 2.9属性选择器 属性选择器就是根据元素的属性和属性值作为过滤条件,来匹配对应的DOM元素.属性选择器一般都以中括号作为起止分界符 它的形式如下: ［attribute］ ［a ...

  3. jQuery的学习笔记2

    jQuery学习笔记 Day two Chapter two 选择器 类选择器 语法结构:$(“.classname”) javascript里面没有类选择器所以这个时候使用jQuery会更加的简便 ...

  4. jQuery 基础学习笔记总结（一）

    Jquery 学习笔记 总结 感想: 此前在做站点时用到过jquery相关,特别是Ajax相关技术.但是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料基本的了解下Jquery的特 ...

  5. Jquery Mobile 学习笔记(一)

    1.模拟器,IOS:XCODE GENYMOTION  ANDROID:ECLIPSE GENYMOTION 2.jquery mobile data-role=page 代表一个页面 data-po ...

  6. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.4.Tabs控件

    之前,我们已经介绍了 jQuery UI 库,CSS 框架.下面,我们将学习这些有增强可视化效果,高度可配置的用户交互组件. Tab 的特性是,点击 tab 后,会高亮该 tab,并显示他的关联con ...

  7. Jquery mobile 学习笔记

    最近学习移动开发,接触到了phonegap,然后又需要开始学习jquery mobile.掌握两者是开发轻应用的前提 在学习jquery mobile中,遇到了许多问题让初学者很是头疼,无意间找到这个 ...

  8. jQuery api 学习笔记(1)

      之前自己的jquery知识库一直停留在1.4的版本,而目前jquery的版本已经更新到了1.10.2了,前天看到1.10中css()竟然扩充了那么多用法,这2天就迫不及待的更新一下自己的jquer ...

  9. jQuery源代码学习笔记：jQuery.fn.init(selector,context,rootjQuery)代码具体解释

    3.1 源代码 init: function( selector, context, rootjQuery ) { var match, elem, ret, doc; // Handle $(&qu ...

随机推荐

  1. SwiftyiRate中文说明

    SwiftyiRate Github SwiftyiRate Swift语言实现的app内评分,简单易用. Requirements Integration Usage Initialization ...

  2. [Ext.Net]TreePanel+gridPanel实例

     @小花要完整例子,尝试一下图文并茂,力求完整. gridPanel TreePanel.JPG (27.49 KB, 下载次数: 16) 下载附件  保存到相册 2013-1-6 11:24 上 ...

  3. 【Unity Shaders】Using Textures for Effects——通过修改UV坐标来滚动textures

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

  4. Linux内核中SPI总线驱动分析

    本文主要有两个大的模块:一个是SPI总线驱动的分析 (研究了具体实现的过程): 另一个是SPI总线驱动的编写(不用研究具体的实现过程). 1 SPI概述 SPI是英语Serial Peripheral ...

  5. php 运行linux命令 与 linux下命令行执行php

    1.php运行linux命令 exec函数:string exec(string command, string [array], int [return_var]);  执行函数后不输出结果,返回最 ...

  6. Java-HttpServlet

    /** * * Provides an abstract class to be subclassed to create * an HTTP servlet suitable for a Web s ...

  7. LDA实现

    topic model本质上就一个套路,在doc-word user-url user-doc等关系中增加topic层,扩充为2层结构,一方面可以降维,另一方面挖掘深层次的关系,用户doc word ...

  8. 用xml来编写动画

    我们可以使用代码来编写所有的动画功能,这也是最常用的一种做法.不过,过去的补间动画除了使用代码编写之外也是可以使用XML编写的,因此属性动画也提供了这一功能,即通过XML来完成和代码一样的属性动画功能 ...

  9. Android特效专辑(五)——自定义圆形头像和仿MIUI卸载动画—粒子爆炸

    Android特效专辑(五)--自定义圆形头像和仿MIUI卸载动画-粒子爆炸 好的,各位亲爱的朋友,今天讲的特效还是比较炫的,首先,我们会讲一个自定义圆形的imageView,接着,我们会来实现粒子爆 ...

  10. mysql随笔

    MySQL查询优化器--非SPJ的优化 MySQL查询优化器--非SPJ优化(一)--GROUPBY优化 http://blog.163.com/li_hx/blog/static/183991413 ...