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');
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!