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. react-native版本升级

    时刻将React Native更新到最新的版本,可以获得更多API.视图.开发者工具以及其他一些好东西(译注:官方开发任务繁重,人手紧缺,几乎不会对旧版本提供维护支持,所以即便更新可能带来一些兼容上的 ...

  2. 总账：日记账导入流程(文档 ID 1591640.1)

    文档内容   概要   历史记录   详细信息   GL_INTERFACE_CONTROL   GL_INTERFACE_HISTORY   GL_IMPORT_REFERENCES   摘要   ...

  3. Touch Handling in Cocos2D 3.x(五)

    实现新英雄的放置功能 首先我们需要一个变量来保持我们当前移动英雄的引用,因此我们将添加一个私有实例变量.修改MainScene.m中的代码. 用: @implementation MainScene ...

  4. Struts Chain ClassCastException Aop

    我们知道struts的restult type 有很多,但主要就是四种 dispatch,rediret,chain,drdirectaction 要让数据从一个action传到另一个action,就 ...

  5. JSP编译成Servlet（一）语法树的生成——语法解析

    一般来说,语句按一定规则进行推导后会形成一个语法树,这种树状结构有利于对语句结构层次的描述.同样Jasper对JSP语法解析后也会生成一棵树,这棵树各个节点包含了不同的信息,但对于JSP来说解析后的语 ...

  6. BezierDemo开源项目的学习

    多看多学涨姿势,no zuo nuo die做暖男 1.概述 国际惯例,首先感谢一下开源作者. 这个项目主要是实现实现qq红点拖拽的效果 地址在https://github.com/chenupt/B ...

  7. ANDROID 中设计模式的采用--结构型模式

            结构型模式中的适配器模式.外观模式.装饰模式.代理模式都属于包装模式,都是对另外的类或对象的包装,只是各自的意图不同. 适配器模式通过对另外的类或对象的包装,将其接口转换为用户期望 ...

  8. 网站开发进阶(十三)window.onload用法详解

    window.onload用法详解 网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本 ...

  9. Android NFC开发（二）——Android世界里的NFC所具备的条件以及使用方法

    Android NFC开发(二)--Android世界里的NFC所具备的条件以及使用方法 NFC的应用比较广泛,而且知识面也是比较广的,所以就多啰嗦了几句,我还还是得跟着官方文档:http://dev ...

  10. boost::this_thread::sleep_for()死锁

    boost::this_thread::sleep_for()会死锁 (金庆的专栏) 发现睡眠1ms很容易死锁.boost::this_thread::sleep_for(boost::chrono: ...