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');

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

赞 (0)

相关推荐

  • jQuery 获取select选中值及清除选中状态

    不会使用jQuery的后台真心伤不起,获取select下拉列表的值都让我搞了好一阵,然而并没有结束,恢复选中状态也是花了我半个小时. 这里先记一下省的以后会忘了. 获取jQuery中select下拉列表中的lang属性值: <span style="font-size:14px;"> var provinceSearch = $("#loc_province_search").find("option:selected").attr(

  • jQuery中值得注意的trigger方法浅析

    jQuery中值得注意的trigger方法浅析

    介绍 trigger方法的功能是在所选择的元素上触发指定类型的事件,其调用的语法格式为:trigger(type,[data]) ,其中参数type为触发事件的类型,参数data为可选项,表示在触发事件时,传递给函数的附件参数. 常用模拟 有时,不需要进行操作,也想模拟用户操作达到某些效果.比如在用户进入界面后就触发click事件,而不需要用户去点击. 在jquery中可以使用trigger完成. $("#btn").trigger("click")//触发id为b

  • jQuery中animate的几种用法与注意事项

    jQuery中animate的几种用法与注意事项

    一.animate语法结构 animate(params,speed,callback) params:一个包含样式属性及值的映射,比如{key1:value1,key2:value2} speed:速度参数[可选] callback:在动画完成时执行的函数[可选] 二.自定义简单动画 用一个简单例子来说明,实现单击某div在页面上横向飘动的效果. <style> #cube{ position:relative;/* 不加这句元素不能动 */ width:30px; height:30px;

  • jQuery实现字符串全部替换的方法

    本文实例讲述了jQuery实现字符串全部替换的方法.分享给大家供大家参考,具体如下: 与C# String类型的Replace方法不同,jQuery的Replace仅能替换第一个匹配的内容. 例如: var str = "a<br/>b<br/>c<br/>"; var Newstr = str.Replace("<br/>", ""); alert(Newstr); //内容为:ab<br/

  • jQuery内存泄露解决办法

    本文大家分享了jQuery内存泄露解决办法,供大家参考,具体内容如下 思路:为JQuery扩展删除jquery元素对象的方法,大大减轻内存泄露的压力 ;(function($){ if(!$.lui.widget) $.lui.widget = {}; //$.lui.newGuid()生成随机32位id //如果采用此方式多次生成jquery对象的话,html代码字符串会在内存中多次重复,占用额外的内容,也会有泄露.而$("<span></span>").at

  • jquery滚动条插件（可以自定义）

    以后用起来就方便了把 css文件引入 <link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css"> js引入 <script type="text/javascript" src="js/jquery.mCustomScrollbar.concat.min.js"></script&

  • 浅析Jquery操作select

    话不多说,请看代码: <select id="Select1"> <option value="one">一</option> <option value="two">二</option> <option value="thr">三</option> <option value="tho">四</optio

  • jquery实现简单的瀑布流布局

    jquery实现简单的瀑布流布局

    是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流从布局的角度来说,就是4个li标签.通过一定的事件(比如滚动条滚动多少px),然后读取之,再把数据动态地添加到页面中. 添加数据原则,不是根据li索引值来加,而是根据各列中高度最短的的那列动态添加.否则可能导致页面很难看(左右高度不统一). 实例涉及ajax方法.可在服务器环境下运行. 废话不多说了.直接上样式. <ul id=&qu

  • jQuery实现金额录入框

    前端开发过程中,通常会用到数值录入框,比如要求输入金额,禁止录入非数值字符,也禁止粘贴非数值字符,怎么实现呢? 首先通过(function($){  })(jQuery); 即时执行函数用于模块隔离,可以避免与其他功能模块.插件之间产生变量污染问题,所有私有的全局变量可以放在即时执行函数的头部. 然后在jquery原型上扩展numbox方法,直接上代码 (function ($) { // 数值输入框 $.fn.numbox = function (options) { var type = (

  • 基于jquery实现的鼠标悬停提示案例

    基于jquery实现的鼠标悬停提示案例

    //这是JS里的代码MOMO.js 因为刚学封装JQUERY插件 所以就做的稍微麻烦一点,其实在前台页面直接就可以用mouseover,mouseout,mousemove三个事件就行了 (function ($) { $.fn.extend({ "titleOver": function (e) { this[0].myTitle = this[0].title; this[0].title = ""; //创建div元素 var tooltip = "

  • 简单实现jquery焦点图

    本文实例为大家分享了jquery焦点图的实现代码,供大家参考,具体内容如下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>焦点图</title> <style type="text/css"> img{position: relative;} ul{list-style:

  • 基于jQuery实现的查看全文功能【实用】

    话不多说,请看具体实例 自己引用jQuery.js版本 查看全文---收起(文本内容少于四行,不显示查看全文---收起,超过五行时才显示出来并有此功能) <!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery1.7.2.min.js"></s

随机推荐