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. JQuery设置checkbox的值，取checkbox的值，设置radio的值，取radio的值，设置下拉选select的值，取select的值

     一.复选框设置参数 html代码如下: <div class="flsm_btns">         <input type="hidden&q ...

  2. 视音频编解码学习工程：TS封装格式分析器

    =====================================================视音频编解码学习工程系列文章列表: 视音频编解码学习工程:H.264分析器 视音频编解码学习工 ...

  3. Css中的盒子结构padding和margin的区别

    之前写过一个padding和marfgin的区别的博客见地址:http://blog.csdn.net/qq_32059827/article/details/50998965.那里只是笼统介绍了一下 ...

  4. 高性能C++网络库libtnet实践：comet单机百万连接挂载测试

    最近在用go语言做一个挂载大量长连接的推送服务器,虽然已经完成,但是内存占用情况让我不怎么满意,于是考虑使用libtnet来重新实现一个.后续我会使用comet来表明推送服务器. 对于comet来说, ...

  5. C语言中sizeof与strlen区别

    本文转载自:http://www.2cto.com/kf/201109/105100.html 1. 以字符串形式出现的,编译器都会为该字符串自动添加一个0作为结束符,如在代码中写"abc& ...

  6. Java进阶(五十一)Could not create the view: An unexpected exception was thrown

    Java进阶(五十一)Could not create the view: An unexpected exception was thrown 今天打开Myeclipse10的时候,发现server ...

  7. StarUML添加自定义approach和profile

    来源:fasiondog 添加Approch StarUML中的Approch也就是创建项目时的模板,其中预定义了所使用方法的模型和视图.StarUML默认Approach如下: StarUML的Ap ...

  8. Mapreduce 框架解析

    MapReduce过程解析 一.客户端 Map-Reduce的过程首先是由客户端提交一个任务开始的. public static RunningJob runJob(JobConf job) thro ...

  9. Linux网络设置(第二版) --Linux网络设置

    Linux网络设置 --网络配置文件与命令 个 附- 服务程序可以不使用固定端口,但是一般对外公开的WebServer不会改变端口,但是像SSH一般推荐更改,可以回避扫描 nmap [IP地址] #扫 ...

  10. SpriteBuilder切换解决方案以及CCB的修改与保存

    在SpriteBuilder中切换解决方案非常简单,可以按cmd+数字键即可. 如上图可以看到数字键1,2,3分别对应于3中不同的解决方案. 注意:当通过在CCB中包含一个Sub File Node的 ...