JQuery初识

为了简化JS的开发,一些JS库诞生了,JQuery就是其中的一个。JQuery是一个兼容多浏览器的Javascript框架。是轻量级的JS库。jQuery为用户提供了丰富的文档说明,使用户能更方便地处理HTML documents、events、实现动画效果,方便地为网站提供AJAX交互,同时还有许多插件可供选择。

JQuery导图

DOM对象与JQuery对象

DOM(Document Object Model)文档对象模型,每一份DOM都可以表示成一棵树。注意这里特别容易混乱的一个概念JQuery对象。JQuery不是JQuery对象,Jquery对象是通过JQuery包装DOM对象后产生的对象。JQUery对象是JQUery独有的。在JQuery对象中无法使用DOM对象的任何方法。

JQuery对象:

var $obj = $("#id");

DOM对象:

var domObj = document.getElementById("id"); 

JQuery对象和DOM对象相互转换。DOM对象才能使用DOM中的方法,不能使用JQuery对象中的方法。

JQuery对象转换成DOM对象:

var $cr=$("#cr"); //jquery对象
var cr = $cr[0]; //dom对象 也可写成 var cr=$cr.get(0);
alert(cr.checked); //检测这个checkbox是否给选中

DOM对象转换成JQuery对象:

var cr=document.getElementById("cr"); //dom对象
var $cr = $(cr); //转换成jquery对象

与Ajax应用

Ajax不需要插件支持,这样可以被绝大多数主浏览器所支持;能在不刷新整个页面的前提下更新数据,使得WEB应用程序能更为迅速地回应用户的操作;Ajax模式通过XMLHttpRequest对象向服务器端提交希望提交的数据,即按需发送;减轻服务器和带宽的负担。

JQuery对Ajax进行了封装,在JQuery中$.ajax()方法属于最底层的方法,第二层是load() 、$.get()和$.post()方法,第三层是$。getScript和$.getJSON()方法。

load()方法是JQUery中最为常用的Ajax方法,能载入远程HTML代码并插入到DOM中。代码如下:

 
$(function(){
$("#send").click(function(){
$("#resText").load("test.html");
});
});

编写插件

自己对JQuery中插件的初步理解是把JQuery中具有实现相似功能的事件封装起来,优化代码。通过参数的不同把不同的效果显示出来。

插件的格式与框架:返回一个JQuery对象

;(function(){ 
$.fn.extend({ 
"color":function(color){return this.css("color",color);//扩展了一个color方法}   }); })();

注意事项:

1.所有的对象方法应该附加到jQuery.fn对象上,而全局函数需要附加到jQuery对象上 
2.在插件内部 this指向的是获取的jQuery对象,而不像一般的方法,指向的是dom元素 
3.插件内部应避免使用$作为jQuery对象的别名,但可以使用闭包技巧。

4.一般情况下,插件应该返回一个jQuery对象,以保证可链式操作。

总结

学习需要整理,如果不整理那么学的东西越来越多,就会导致狗熊掰棒子式学习。关于JQuery的学习远远不止这些东西,这些理论上的东西先要学好了,总结了,在应用中发挥更大的作用,将它们发挥的淋漓尽致。学习就是这样,学习——学以致用——学习。

[置顶] 强大的JQuery的更多相关文章

  1. jQuery实现表格行上移下移和置顶

    jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...

  2. jQuery操作table数据上移、下移和置顶

    jQuery 操作table中的tr换行的步骤如下: 1.获取当前tr var $tr = $(this).parents("tr"); 2.移动tr //上移 $tr.prev( ...

  3. jQuery 元素的选中, 置顶、上移、下移、置底、删除

    如截图: <ul> <li class="li01" onclick="C_columnSetTop(this)"><i>& ...

  4. jquery实现标签上移、下移、置顶

    eg:如在后台的标签列表中,实现上移.下移.置顶功能 思路: 1.先用到的克隆方法.clone(true): 即把当前要移动的项先保存好,备于后用. 2.找到当前标签所对应的相关元素及其相关方法: 如 ...

  5. jquery——制作置顶菜单

    置顶菜单: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. jquery中的置顶,置底,向上,向下的排序功能

    css .selectedLi{background: #f0ad4e;color:#fff;} html部分 <ul class="seetSelect2" id='sys ...

  7. [知了堂学习笔记]_css3特效第二篇--行走的线条&&置顶导航栏

    一.行走的线条. 效果图(加载可能会慢一点儿,请稍等...): html代码: <div class="movingLines"> <img src=" ...

  8. css3特效第二篇--行走的线条&&置顶导航栏

    一.行走的线条. 效果图(加载可能会慢一点儿,请稍等...): html代码: <div class="movingLines"> <img src=" ...

  9. 自定义置顶TOP按钮

    简述一下,分为三个步骤: 1. 添加Html代码 2. 调整Css样式 3. 添加Jquery代码 具体代码如下: <style type="text/css"> #G ...

随机推荐

  1. mongodb进阶一之高级查询

    上篇文章我们讲了mongodb的crud基本操作 http://blog.csdn.net/stronglyh/article/details/46812579 这篇我们来说说mongodb的进阶-- ...

  2. hdu 4885 TIANKENG’s travel(bfs)

    题目链接:hdu 4885 TIANKENG's travel 题目大意:给定N,L,表示有N个加油站,每次加满油能够移动距离L,必须走直线,可是能够为斜线.然后给出sx,sy,ex,ey,以及N个加 ...

  3. Android中如何查找内存泄露

    1.首先确定是否有内存泄露及哪个程序造成. 1.1.内存泄露已弹出out of memory对话框的情况. 这种情况很简单,直接看对话框就知道是哪个应用的问题了.然后再分析该应用是否是因为内存泄露造成 ...

  4. Android创建与读取Excel

    主流的操作Excel的有两种方法,一种是通过poi包,另一种是通过jxl包.这里我主要讲解通过jxl包来读写Excel. 首先需要导入一个jxl.jar包. 下载地址:http://www.andyk ...

  5. opencv鼠标绘制直线 C++版

    因为需要在图片上标记直线,所以从网上找了相应的参考资料.但大多都是c风格的,于是自己就写了一个c++风格的. opencv2.4.11,win8.1,vs2013 #include <cv.h& ...

  6. 2015.7.17( NOI2015 day1 )

    今天早起做了NOI2015网络同步赛.... 最近NOI是越来越向NOIP靠拢了....但是我还是不会做..... 第一题:程序自动分析 先离散化一下..然后最多就剩20w个数 , 不等于就存起来.. ...

  7. 分析内存使用情况 (JavaScript)

    [此文档是初定版,随时可能进行更改.] JavaScript 内存分析器在 Visual Studio 2012 更新 1 和 Visual Studio 2013 中提供,旨在帮助你了解内存使用量和 ...

  8. OpenCV 例子代码的讲解、简介及库的安装 .

    转载请标明是引用于 http://blog.csdn.net/chenyujing1234 欢迎大家提出意见,一起讨论! 一.OpenCV介绍: OpenCV是由Intel性能基元(IPP)团队主持, ...

  9. poj3819 Coverage (求直线与圆的交占直线的百分比 )

    题意:给你一条直线和若干个圆,求圆与直线相交的长度占整条直线的比例 解题思路:通过定比分点的方法求出圆与直线的交占圆的比例. 第一步:(确定投影的方向是x轴还是y轴) (1)当直线的line.s(x, ...

  10. 【linux】arm mm内存管理

    欢迎转载,转载时请保留作者信息,谢谢. 邮箱:tangzhongp@163.com 博客园地址:http://www.cnblogs.com/embedded-tzp Csdn博客地址:http:// ...