jQuery学习笔记之入门


Posted in Javascript onDecember 14, 2016

最近在学习jQuery,在网上看到有几篇关于jQuery的文章,写的不错转载过来跟大家分享一下;

一、JQuery是什么

JQuery是什么?始终是萦绕在我心中的一个问题:

借鉴网上同学们的总结,可以从以下几个方面观察。

不使用JQuery时获取DOM文本的操作如下:

document.getElementById('info').value = 'Hello World!';

使用JQuery时获取DOM文本操作如下:

$('#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进行操作。

<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的各种方法。

$("#test").html();

意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法 。

这段代码的作用等同于用DOM实现代码:

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对象。

var v1 = $("#test") ; //jQuery对象
var v2 = $v1[0]; //DOM对象

通过.get(index)方法,得到相应的DOM对象。

var v1 = $("#test"); //jQuery对象
var v2 = v1.get(0); //DOM对象

DOM对象 -> JQuery对象

对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。如$(document.getElementById("test"))

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对象。

var v1 = $('#id');
var v2 = jQuery('#id');

以上两者是等同的。

所以"$"其实是一个符号,$()代替了jQuery(),当然你也可以使用其他的字符来代替"$"

var jq = jQuery.noConflict();
var v1 = jq('#id'); // 等同于var v1 = $('#id');

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
textarea的value是html文件源代码,存成html文件的代码
Apr 20 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
javascript:void(0)的问题使用探讨
Apr 10 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 Javascript
Bootstrap轮播图的使用和理解4
Dec 14 #Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 #Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 #Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 #Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 #Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 #Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 #Javascript
You might like
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
php递归函数怎么用才有效
2018/02/24 PHP
详解php用static方法的原因
2018/09/12 PHP
PHP函数积累总结
2019/03/19 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
基于jQuery的日期选择控件
2009/10/27 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
社区工作感言
2014/02/21 职场文书
网络编辑岗位职责
2014/03/18 职场文书
情况说明书格式范文
2014/05/06 职场文书
加油口号大全
2014/06/13 职场文书
教师节标语大全
2014/10/07 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
放假通知怎么写
2015/08/18 职场文书
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技