[置顶] 强大的JQuery
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的更多相关文章
- jQuery实现表格行上移下移和置顶
jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...
- jQuery操作table数据上移、下移和置顶
jQuery 操作table中的tr换行的步骤如下: 1.获取当前tr var $tr = $(this).parents("tr"); 2.移动tr //上移 $tr.prev( ...
- jQuery 元素的选中, 置顶、上移、下移、置底、删除
如截图: <ul> <li class="li01" onclick="C_columnSetTop(this)"><i>& ...
- jquery实现标签上移、下移、置顶
eg:如在后台的标签列表中,实现上移.下移.置顶功能 思路: 1.先用到的克隆方法.clone(true): 即把当前要移动的项先保存好,备于后用. 2.找到当前标签所对应的相关元素及其相关方法: 如 ...
- jquery——制作置顶菜单
置顶菜单: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- jquery中的置顶,置底,向上,向下的排序功能
css .selectedLi{background: #f0ad4e;color:#fff;} html部分 <ul class="seetSelect2" id='sys ...
- [知了堂学习笔记]_css3特效第二篇--行走的线条&&置顶导航栏
一.行走的线条. 效果图(加载可能会慢一点儿,请稍等...): html代码: <div class="movingLines"> <img src=" ...
- css3特效第二篇--行走的线条&&置顶导航栏
一.行走的线条. 效果图(加载可能会慢一点儿,请稍等...): html代码: <div class="movingLines"> <img src=" ...
- 自定义置顶TOP按钮
简述一下,分为三个步骤: 1. 添加Html代码 2. 调整Css样式 3. 添加Jquery代码 具体代码如下: <style type="text/css"> #G ...
随机推荐
- Fragment使用
当我们需要动态的多界面切换的时候,就需要将UI元素和Activity融合成一个模块.在2.3中我们一般通过各种Activity中进行跳转来实现多界面的跳转和单个界面动态改变.在4.0或以上系统中就可以 ...
- 从C到C++,C语言与C++的关系
C语言是1972年由美国贝尔实验室的D.M.Ritchie研制成功的.它不是为初学者设计的,而是为计算机专业人员设计的.大多数系统软件和许多应用软件都是用C语言编写的.但是随着软件规模的增大,用C语言 ...
- SuperSocket源码解析之配置系统
一 继承Net配置系统 Net应用程序配置机制跟程序集引用大致类似,均具有继承性,如iis几乎每个应用程序都会有一个Web.config,比如我们使用vs2012以上版本创建一个web应用程序会自带一 ...
- mysql导入sql文件过大或连接超时的解决的方法
前段时间出差在现场开发的时候,导入数据库老是出问题.最后发现了一个奇妙sql语句交给实施,仅仅要导入出错就把例如以下语句运行就能够了.至今屡试不爽. set global max_allowed_pa ...
- poll调用深入解析
poll调用深入解析http://blog.csdn.net/zmxiangde_88/article/details/8099049 poll调用和select调用实现的功能一样,都是网络IO利用的 ...
- 如何在VC中显示透明背景位图
简单的调用系统API. Windows NT/2000/XP: Included in Windows 2000 and later.Windows 95/98/Me: Included in Win ...
- inner join、left join、right join中where和and的作用
inner join.left join.right join中where和and的作用 .内连接(自然连接): 只有两个表相匹配的行才能在结果集中出现 2.外连接: 包括 (1)左外连接 (左边的 ...
- Android实时获取音量(单位:分贝)
基础知识 度量声音强度,大家最熟悉的单位就是分贝(decibel,缩写为dB).这是一个无纲量的相对单位,计算公式如下: 分子是测量值的声压,分母是参考值的声压(20微帕,人类所能听到的最小声压).因 ...
- EasyUI - Panel 面板控件
效果: html代码: <div id="p" style="padding: 10px;"> <p>panel content.< ...
- net core与golang web
Asp.net core与golang web简单对比测试 最近因为工作需要接触了go语言,又恰好asp.net core发布RC2,就想简单做个对比测试. 下面是测试环境: CPU:E3-1230 ...