Jquery DOM&事件

库和框架的区别

  • 看到的经典回答:
    • 框架帮你挖好坑,你来填!库是给你一把铲子你自己挖!
    • You call library ,Framework calls you.
  • 库是一些方法的集合;例如你想修改DOM元素时需要选中、修改、放回去步骤繁琐,这时我们可以自己写个函数来专门实现这种功能,你只需要放参数进来它就返回结果给你,不用重复写;这个函数就是库里面的方法,库里面放了很多方法。
  • 框架是设计好的结构,是个可拓展的半成品;例如有一群人都想建房子,那么框架会帮你打好地基、搭好承重梁,等于这个房子的主体搞定了,然后不同人按自己的需要去添砖加瓦去构建自己想要的房子;
  • 从本质上来看,库和框架都是为了减少我们的工作量而服务的。库是着眼于小方面帮你做好工具让你不用每次干活都先造工具,但你去干什么活它不管;而框架呢是着眼于大方面,把一些通用的、基础的(比如不管是谁每次建房子前都要先打地基)给打包在一起,要建房就把那一堆放上去,然后在此基础上再自己去做,但你要用对,建房地基包不能拿去做桥梁的!

jquery

  • jquery是一个又小又快功能丰富的javascript库,它可以让你对DOM元素的遍历和操作、事件、ajax和动画等变得更简单,不需要像原生js那么繁琐,它帮你封装好了,提供了很多API你只要去调用它就能返回结果给你,而且它的方法还兼容各个版本的浏览器。

jquery 对象和 DOM 原生对象的区别及互相转化

  • jauery对象的外层都是一个中括号包裹的,通过使用$( )得到的,类似[<p>我是段落</p>],只有jauery对象才能使用jquery的方法。因为是类数组对象,所以我们可以加个中括号包裹的数字即可得到原生DOM对象,[<p>我是段落</p>][0];另外jquery还提供了一个get方法来实现,如[<p>我是段落</p>].get(0)
  • DOM原生对象就是我们通过geElementBy xx得到的节点,例如<p>我是段落</p>;可以使用$( )来包裹DOM原生对象从而得到jquery对象,$(DOM原生对象)

jquery中事件绑定

  • jquery中使用on来绑定事件,对象.on('事件名称','处理函数')

bind、unbind、delegate、live、on、off的作用;

  • bind在jquery1.7之前的版本中用于直接给一个元素绑定事件,所以在绑定前元素必须是已存在的。
  • unbind可以移除元素上用bind绑定的事件,如果没有参数就移除元素上的所有事件。
  • delegate在jquery1.7之前的版本中使用,一般用于给父元素绑定一个或多个事件,只要匹配的子元素发生事件就会触发。
  • live在jquery1.7版本被废弃了,给匹配的所有元素绑定一个事件。
  • on给匹配的元素绑定事件处理函数,可以有多个事件。
  • off移除用on绑定的事件,如果没有参数则移除所有事件。

推荐使用on来绑定事件,因为它更灵活,而且旧版本中其他绑定方法它都能实现达成了统一。

使用on绑定事件使用事件代理的写法

  • 使用on绑定事件代理写法如下:为ul绑定事件,当li元素发生事件时,触发处理函数。

    $('ul').on('click', 'li', function(){ });
    

jquery 中如何展示/隐藏元素?

  • $().hide()来隐藏元素,可以设置参数来控制执行的时间、方式、回调参数等。
  • $().show()来隐藏元素,可以设置参数来控制执行的时间、方式、回调参数等。

jquery 动画的使用

  • 使用.animate( )来使用动画,元素.annimate(css属性:值,opts),opt里可以设置较多东西,时间、方式、速度、回调函数等,可以按需要去jquery官网查阅,对于css属性部分要注意必须是值可数字化的css属性,例如宽高可以而背景色就不行。

元素内部 HTML 内容设置和获取、元素内部文本的设置和获取?**

  • HTML内容使用jquery的.html( ),括号内不带内容表示获取所选对象的html内容,带内容的话则将用括号内的内容覆盖其内部html内容。原生js中用.innerHTML获取,用赋值来设置内容。
  • 文本内容使用jquery的.text( ),括号中不带内容表示获取所选对象的文本内容(注意同样是忽略html标签进行文本拼接),带内容的话则将用括号内的内容覆盖其内部html内容。原生js中用.innerText获取,用赋值来设置内容。

表单用户输入或者选择的内容设置和获取、元素属性的设置和获取

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

推荐阅读更多精彩内容

  • 1.说说库和框架的区别? 库主要是封装了某些函数的集合。框架也是。使用库是指,你的代码决定什么时候从库中调用一个特...
    墨月千楼阅读 417评论 0 2
  • 问答部分 一、说说库和框架的区别? 库~是一个提供了封装好很多方法的工具,在这个工具里面,用与不用都是由你决定,控...
    dengpan阅读 347评论 1 2
  • 问答 1.说说库和框架的区别? 类库(Class Library):类库就是一些类的集合,只要我们将一些可以复用的...
    鸿鹄飞天阅读 267评论 0 1
  • 1. 说说库和框架的区别? 类库是实现各种功能的类的集合,可以帮助编程人员简化工作,提高工作效率。就像一个小的工具...
    黄露hl阅读 143评论 0 1
  • 问答 说说库和框架的区别? 库为 Library ( 简写 Lib ),框架为 Framework。 库是将代码集...
    coolheadedY阅读 220评论 0 1