欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery学习笔记之入门

程序员文章站 2022-06-20 18:20:46
最近在学习jquery,在网上看到有几篇关于jquery的文章,写的不错转载过来跟大家分享一下; 一、jquery是什么 jquery是什么?始终是萦绕在我心中的一个问...

最近在学习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');

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