Jquery

说说库和框架的区别?

JQ(Jquery,不是冰欺凌哦)就是JS的库,打个比方,比如新买的房子需要改水电,那么就需要水电工人师傅。水电工人师傅身上有个工具箱,里面可以放电笔啊,锤子啊,螺丝刀啊等常用工具。也可以是学生们工具盒里面的铅笔,原子笔,旋笔刀等。总之就是一堆工具的集合。

而框架呢,相当于给我们盖房子的开发商,房子已经盖好了,也就是说整体架构已经弄好了,这个呢开发商盖起的房子就是相当于框架。比如现在很火的backbone.js就是一个JS的框架。

JQ 能做什么?

1  操作以及遍历HTML文档
2  事件的处理
3  动画
4  Ajax

JQ对象和 DOM 原生对象有什么区别?如何转化?

我们直接看下图一看就明白了:

DOM和JQ.png

jquery中如何绑定事件?

jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码。下面我们来看下jQuery中绑定事件的方式都有哪些。
jQuery中提供了四种事件监听方式,分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off。

.bind()
$('a').bind('click', function() { alert("That tickles!") });

这是最简单的绑定方法了。JQuery扫描文档找出所有的$(‘a’)元素,并把alert函数绑定到每个元素的click事件上。

.live()
$('a').live('click', function() { alert("That tickles!") });

JQuery把alert函数绑定到$(document)元素上,并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上,它就查看该事件是否是一个click事件,以及该事件的目标元素与’a’这一CSS选择器是否匹配,如果都是的话,则执行函数。

.delegate()
$('#container').delegate('a', 'click', function() { alert("That tickles!") });

JQuery扫描文档查找$(‘#container’),并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。
为什么.delegate()要比.live()好用?

$('a').live('click', function() { blah() });// 或者$(document).delegate('a', 'click', function() { blah() });

后者实际上要快过前者,因为前者首先要扫描整个的文档查找所有的$(‘a’)元素,把它们存成jQuery对象。

.on()
// Bind
$( "#members li a" ).on( "click", function( e ) {} ); 
$( "#members li a" ).bind( "click", function( e ) {} ); 
// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} );//事件代理
 //注意子元素参数位置$( "#members" ).delegate( "li a", "click", function( e ) {} );
function aClick() {
  $("div").show().fadeOut("slow");
}

$("#bind").click(function () {
  $("body").on("click", "#theone", aClick)
    .find("#theone").text("Can Click!");
});

$("#unbind").click(function () {
  $("body").off("click", "#theone", aClick)
    .find("#theone").text("Does nothing...");
});

live方法被废弃
on事件绑定把上面三种方法统一了,用起来更方便.

jquery 如何展示/隐藏元素?

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

//speed : slow fast 毫秒数
//如果任何参数都不传的话,相当于修改 dom.style.display = block|none

jquery 动画如何使用?

$(selector).animate({params},speed,callback);
.animate( properties, options )
options是一组包含动画选项的值的集合。 常用的选项:

duration (default: 400):一个字符串或者数字决定动画将运行多久。默认值: "normal", 三种预定速度的字符串("slow", "normal", 或 "fast"或表示动画时长的毫秒数值(如:1000) )
easing (default: swing):一个字符串,表示过渡使用哪种缓动函数。jQuery自身提供"linear" 和 "swing",其他效果可以使用jQuery Easing Plugin插件
step:每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
complete:在动画完成时执行的函数

如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?

JQ DOM 获取

1 text() 元素文本内容
2 html() 包括HTML标记
3 val() 设置或返回表单字段的值
4 attr() 设置或返回表单元素的属性

text() 、html()、val() 如果括号内没有值的话 代表获取元素的文本内容、包括HTML标记的文本内容、和表单元素的value数值。如果有值得话代表设置元素的相关值。

attr() 只有一个参数的话,代表获取该元素属性的属性值。如果有两个数值的话,则代表重新设置该元素属性的属性值。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,569评论 4 363
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,499评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,271评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,087评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,474评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,670评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,911评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,636评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,397评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,607评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,093评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,418评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,074评论 3 237
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,092评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,865评论 0 196
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,726评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,627评论 2 270

推荐阅读更多精彩内容

  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,268评论 0 8
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,285评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,101评论 0 1
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,281评论 0 44
  • 先写一个继承DeviceAdminReceiver的子类: 在res目录下新建子目录xml,创建一个xml资源文件...
    学海摆渡人阅读 1,725评论 2 11