jQuery学习笔记(一):入门【转】
由于工作的需要,发现JQuery是一个绕不开的东西,现在开始学习。
一、JQuery是什么
JQuery是什么?始终是萦绕在我心中的一个问题:
借鉴网上同学们的总结,可以从以下几个方面观察。
不使用JQuery时获取DOM文本的操作如下:
1
|
document.getElementById( 'info' ).value = 'Hello World!' ; |
使用JQuery时获取DOM文本操作如下:
1
|
$( '#info' ).val( 'Hello World!' ); |
嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开发人员更加专注于逻辑本身。
二、JQuery能做什么
jQuery使用户能更方便地处理HTML、events、实现动画效果,并且方便地为网站提供AJAX交互。
jQuery库包含以下功能:HTML元素选取、HTML元素操作、CSS操作、HTML事件函数、JavaScript特效和动画、HTML|DOM遍历和修改、AJAX、Utilities。
jQuery使用户方便快捷获取DOM元素、动态修改页面样式、动态改变DOM内容、响应用户的交互操作、为页面添加动态效果、统一Ajax操作、简化常见的JavaScript任务。
上述是对JQuery比较中肯的评价,节选其中的关键字可以粗略的观察到:
方便的选取DOM元素,操作DOM元素。(HTML元素选取、HTML元素操作、获取DOM元素、动态修改页面样式、动态改变DOM内容)
响应用户操作。(HTML事件函数、JavaScript特效和动画、响应用户的交互操作、为页面添加动态效果)
简化AJAX操作。(方便地为网站提供AJAX交互、统一Ajax操作)
即:方便DOM的选取和操作、响应用户操作、简化AJax操作。
三、DOM是什么
上述提到了DOM元素,不了解,查阅总结如下:
DOM 全称是 Document Object Model,是文档对象模型。
通过DOM元素,可以方便的操作HTML中的节点,比如获取节点的内容,添加某些元素,删除某些元素。
也就是说,DOM元素和HTML息息相关,它将HTML中的一个个标签封装成DOM元素,以便于JavaScript进行操作。
1
2
3
4
5
6
7
8
9
10
11
12
|
< html > < body > < div id="info"> < p >Test</ p > </ div > < script > window.onload = function(){ document.getElementById("info").innerHTML="success"; } </ script > </ body > </ html > |
其中document.getElementById("info")就是将id为info的标签封装成为一个DOM元素,接下来便可以方便的操作这个DOM对象,例如修改它的文本内容等等。
四、JQuery与DOM之间的关系
JQuery对象与DOM对象之间有什么区别?
先了解什么是JQuery对象:
JQuery对象就是用JQuery包装DOM之后产生的对象。JQuery对象是JQuery独有的,可以使用JQuery的各种方法。
1
|
$( "#test" ).html(); |
意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法 。
这段代码的作用等同于用DOM实现代码:
1
|
document.getElementById( "id" ).innerHTML; |
虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法。
还需要注意一点的是:
用#id作为选择器获取得的是jQuery对象,document.getElementById("id")得到的DOM对象,这两者并不等价。
另外,JQuery对象与DOM对象之间可以互相转换。
JQuery对象 -> DOM对象
两种转换方式将一个JQuery对象转换成DOM对象:[index]和.get(index);
jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。
12var
v1 = $(
"#test"
) ;
//jQuery对象
var
v2 = $v1[0];
//DOM对象
通过.get(index)方法,得到相应的DOM对象。
12var
v1 = $(
"#test"
);
//jQuery对象
var
v2 = v1.get(0);
//DOM对象
DOM对象 -> JQuery对象
对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。如$(document.getElementById("test"))
1
2
|
var v1=document.getElementById( "test" ); //DOM对象 var v2=$(v1); //jQuery对象 |
DOM对象转换为JQuery对象之后就可以使用JQuery的方法了。
需要再次强调注意的是:DOM对象才能使用DOM中的方法,jQuery对象是不可以用DOM中的方法。
五、JQuery中的“$”有什么作用
这个问题解决之后,还有一个疑问:我们经常在JQuery看见$('div')、$('#id')、$('.class')等类似的代码。那么其中的"$"究竟有什么作用呢?
$其实就是jQuery的别称。是jQuery提供的一个函数,用来将DOM元素、选择器包装成jQuery对象。
1
2
|
var v1 = $( '#id' ); var v2 = jQuery( '#id' ); |
以上两者是等同的。
所以"$"其实是一个符号,$()代替了jQuery(),当然你也可以使用其他的字符来代替"$"
1
2
|
var jq = jQuery.noConflict(); var v1 = jq( '#id' ); // 等同于var v1 = $('#id'); |
转载自:http://www.cnblogs.com/Lands-ljk/p/6042630.html
jQuery学习笔记(一):入门【转】的更多相关文章
- jQuery学习笔记(一):入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- python学习笔记--Django入门四 管理站点--二
接上一节 python学习笔记--Django入门四 管理站点 设置字段可选 编辑Book模块在email字段上加上blank=True,指定email字段为可选,代码如下: class Autho ...
- WebSocket学习笔记——无痛入门
WebSocket学习笔记——无痛入门 标签: websocket 2014-04-09 22:05 4987人阅读 评论(1) 收藏 举报 分类: 物联网学习笔记(37) 版权声明:本文为博主原 ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
- jQuery 学习笔记:jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
- jQuery学习笔记之插件开发(4)
jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...
随机推荐
- Grafana 安装
由于 Grafana 是存静态的,你只需要下载源代码解压,将它部署在 Nginx 上面就可以了,或者可以用 Python 的 SimpleHTTPServer 来跑 $ wget http://gra ...
- C# 重绘tabControl,添加关闭按钮(续)
在上一篇随笔中,添加关闭按钮是可以实现 ,但细心一点就会发现,每次关闭一个选项卡,tableControl都会自动跳到第一个页面,显然 这不是我们想要的,为此,我修改了部分的代码.除此之外,我还添加了 ...
- POJ 1061 同余方程
两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止.可是 它们出发之前忘记了一件很重要的事情,既没有问清楚对方的 ...
- 进程控制理论,王明学learn
进程控制理论 一.进程 进程是一个具有一定独立功能程序的一次运行活动. 1.1进程特点 1.动态性:进程的实质是程序的一次执行过程,进程是动态产生,动态消亡的 2.并发性:任何进程都可以同其他进程一起 ...
- list[C++]
//双向链表 #include <iostream> using namespace std; #include <list> int main(int argc, const ...
- I/O复用模型之select学习
linux下的I/O模型可以分为5种: 1.阻塞式I/O模型 2.非阻塞式I/O模型 3.I/O复用模型 4.信号驱动I/O模型 5.异步I/O模型 简单解释: 阻塞和非阻塞:就是说需要做一件事的时候 ...
- MVC3实现多个按钮提交
有时我们需要在同一个Form表单中进行多个按钮的提交,来完成不同的功能.因为MVC中一个表单默认只能提交到一个Action处理,相对比较麻烦. 1.使用客户端脚本 我们可以view中加上如下代码: & ...
- AOP动态代理解析5-cglib代理的实现
CGLIB是一个强大的高性能的代码生成包.它广泛地被许多AOP的框架使用,例如Spring AOP和dynaop,为他们提供方法的Interception(拦截).EasyMock和jMock是通过使 ...
- 分享Kali Linux 2016.2第47周镜像
分享Kali Linux 2016.2第47周镜像Kali Linux官方于11月20日发布Kali Linux 2016.2的第47周镜像.这次发布仍然包含11个镜像文件.其中,不仅包含Gnome桌 ...
- Temp文件夹缺少network service权限,webservice能访问,但是不能调用
给C:\WINDOWS\temp文件夹添加NETWORK SERVICE权限即可