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. Mybatis插件原理分析（二）

    在上一篇中Mybatis插件原理分析(一)中我们主要介绍了一下Mybatis插件相关的几个类的源码,并对源码进行了一些解释,接下来我们通过一个简单的插件实现来对Mybatis插件的运行流程进行分析. ...

  2. STL：list用法详解

    list容器介绍 相对于vector容器的连续线性空间,list是一个双向链表,它有一个重要性质:插入操作和删除操作都不会造成原有的list迭代器失效,每次插入或删除一个元素就配置或释放一个元素空间. ...

  3. Android JSON原生解析的几种思路，以号码归属地，笑话大全，天气预报为例演示

    Android JSON原生解析的几种思路,以号码归属地,笑话大全,天气预报为例演示 今天项目中要实现一个天气的预览,加载的信息很多,字段也很多,所以理清了一下思路,准备独立出来写一个总结,这样对大家 ...

  4. Dynamics CRM 2011/2013 通过Javascript给lookup字段赋值

    仅仅做下记录,因为老是用到但老是忘记 var value = new Array(); value[0] = new Object(); value[0].id = idValue; value[0] ...

  5. 《java入门第一季》之类小案例（模拟用户登录）

    首先是做一个用户登录的小案例.在此基础上加入其它逻辑. import java.util.Scanner; /* * 模拟登录,给三次机会,并提示还有几次.如果登录成功,就可以玩猜数字小游戏了. * ...

  6. 服务端技术进阶(六)Ant和Maven的作用是什么？两者之间功能、特点有哪些区别？

    服务端技术进阶(六)Ant和Maven的作用是什么?两者之间功能.特点有哪些区别? Ant和Maven都是基于Java的构建(build)工具.理论上来说,有些类似于(Unix)C中的make ,但没 ...

  7. android开发之http协议

    http协议学习系列 1. 基础概念篇 1.1 介绍 HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写.它的发展是万维网协会(World Wide Web C ...

  8. Java集合之Vector

    Vector是矢量队列,它继承了AbstractList,实现了List. RandomAccess, Cloneable, java.io.Serializable接口. Vector接口依赖图: ...

  9. HBase写数据

    1 多HTable并发写 创建多个HTable客户端用于写操作,提高写数据的吞吐量,一个例子: static final Configuration conf = HBaseConfiguration ...

  10. java工具类(四)之实现日期任意跳转

    Java实现日期任意跳转 项目开发过程中,需要进行订单提醒日期的设置,主要包括设置每月指定的日期或者指定的天数,代码如下: public static String DateOperation(Str ...