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. numpy教程：矩阵matrix及其运算

    http://blog.csdn.net/pipisorry/article/details/48791403 numpy矩阵简介 NumPy函数库中存在两种不同的数据类型(矩阵matrix和数组ar ...

  2. python的sorted

    读入后,要进行组内排序,按groupseq字段排序后,然后统计前后两个项的个数,累加到全局. sorted函数使用如下: def sortlist(alllist):     sorted_key1_ ...

  3. 《java入门第一季》之类String类小案例

    案例一: /* * 需求:把数组中的数据按照指定个格式拼接成一个字符串 * 举例: * int[] arr = {1,2,3}; * 输出结果: * "[1, 2, 3]" * 分 ...

  4. 【Qt编程】基于Qt的词典开发系列<六>--界面美化设计

    本文讲一讲界面设计,作品要面向用户,界面设计的好坏直接影响到用户的体验.现在的窗口设计基本都是扁平化的,你可以从window XP与window 8的窗口可以明显感觉出来.当然除了窗口本身的效果,窗口 ...

  5. 开发资源库(repositiory)

    1.. 52研发网MTK软件 2.一流研发 3. android+MTK/华为的源代码及资料库(CryToCry96) 点击打开链接 4.android+MTK/华为/联想的源代码及资料库(lucka ...

  6. CCRenderBuffer初始化中的render state参数

    绘制纹理三角形的渲染状态(render state)已经被CCSprite基类设置过了,所以你可以简单的将self.renderState传递过去就可以了. 渲染状态是混合模式(blend mode) ...

  7. 100个Myeclipse6.5免费注册码

    下面提供了100个MyEclipse6.5的注册码供大家使用: register name:cghidigfa Serial:pLR8ZC-855550-6359775146444620 ------ ...

  8. Leetcode_234_Palindrome Linked List

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/47334465 Given a singly linked ...

  9. IOS 与ANDROID框架及应用开发模式对比一

    IOS 和ANDROID操作系统都是目前流行的移动操作系统,被移动终端和智能设备大量采用,两者都采用了先进的软件技术进行设计,为了方便应用开发两者都采用了先进的设计模式.两者在框架设计上都采用了什么技 ...

  10. linux文件查找及操作

    在linux下查找文件的办法最常用的就是find指令,让我们来看一下find指令如何来使用吧: find find . -name  txt             //在当前目录查找名字为txt的文 ...