十四:jquery

题目1: jQuery 能做什么?

  • 选择网页元素
  • 改变结果集
  • 元素的操作:取值和赋值,移动,复制,删除和创建
  • 工具方法
  • 事件操作
  • 特殊效果
  • AJAX

题目2: jQuery 对象和 DOM 原生对象有什么区别?如何转化?

  • 区别:
  1. jQuery选择器得到的jQuery对象和标准的JavaScript中document.getElementByld()取的的dom对象是两种不同的对象类型,两者不等价;
  2. jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法、乱使用会报错。
  • 转换:
  1. jQuery对象转是一个数据对象,通过[index]的方法
var $v = $("#v"); //jQuery对象
var v = $v[0]; //dom对象
alert(v.checked)  // 检测这个checkbox是否被选中

2.jQuery本身提供,通过。get(index)方法

var $v = $("#v"); //jQuery对象
var v = $v.get(0); //dom对象
alert(v.checked) //检测这个checkbox是否被选中

DOM对象转成jQuery对象
对于DOM对象只需要用$()把DOM对象包装起来,就可以得到jQuery对象

var  v = document.getElementByid('v'); //DOM对象
var $v = $(v); //jQuery对象

题目3:jQuery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?

  • bind()是最直接的绑定方法,会绑定事件类型和处理函数到DOM element上。这个方法是存在最久的,而且也很好的解决了浏览器在事件处理中的兼容问题。.click(), .hover()...这些非常方便的事件绑定,都是bind的一种简化处理方式对于利用ID选出来的元素是非常好的,不仅仅是很快的可以hook上去(因为一个页面只有一个id),而且当事件发生时,handler可以立即被执行(相对于后面的live, delegate)实现方式,但是它会绑定事件到所有的选出来的元素上,它不会绑定到在它执行完后动态添加的那些元素上,当元素很多时,会出现效率问题。
  • .live()方法用到了事件委托的概念来处理事件的绑定。它和用.bind()来绑定事件是一样的。.live()方法会绑定相应的事件到你所选择的元素的根元素上,即是document元素上。那么所有通过冒泡上来的事件都可以用这个相同的handler来处理了。它的处理机制是这样的,一旦事件冒泡到document上,jQuery将会查找selector/event metadata,然后决定那个handler应该被调用。
  • .delegate()有点像.live(),不同于.live()的地方在于,它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation.
  • .bind(), .live(), .delegate()都是通过.on()来实现的,.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的
  • 推荐使用on和off
  • on绑定事件使用事件代理的写法
$('.box li').on('click', function(){
    var str = $(this).text()
})

题目4:jQuery 如何展示/隐藏元素?

  • 展示:
$(selector).show(speed,callback);
可选的参数speed:规定元素从隐藏到完全可见的速度,默认为0.
可选的参数callback:show函数执行完之后,要执行的函数。
本质上show方法是修改元素的display为block
  • 隐藏
$(selector).hide(speed,callback);
参数同上,本质上hide方法是修改元素display为none。

题目5: jQuery 动画如何使用?

$(selector).animane({parement},speed,callback);

aninmate()方法用于创建自定义动画
params(必选)定义形成动画的CSS属性
speed(可选)规定效果的时长。值:slow,fast或秒。
callback(可选)动画完成后所执行的函数
.delay()设置一个定时器,以延迟执行队列中后续的项目。
.clearQueue()从列队中删除所有还没有运行过的项目。
.stop在匹配的元素上停止当前正在运行的动画。
.finish()针对匹配的元素停止当前正在运行的动画,删除所有的队列中的动画,并结束所有动画。

题目6:如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?

  • $(selector).html()设置HTML内容
  • $(selector).text()设置文本内容

题目7:如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?

  • val();获取表单输入框的值,有值的话就是设置
$('input').val()//获取值
$('input').val('11') //设置值
  • attr();获取属性,有值的话就是设置
$('img').attr('src')//获取属性
$('img').attr('src',newSrc) //设置属性

题目8: 使用 jQuery实现如下效果

效果

题目9:

效果

题目10:

效果

题目11:

效果

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

推荐阅读更多精彩内容

  • jQuery 能做什么 jQuery库为Web脚本编程提供了通用(跨浏览器)的抽象层,使得它几乎适用于任何脚本编程...
    RookieD阅读 210评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,321评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,159评论 0 1
  • 1、 jQuery 能做什么? jquery是一个丰富的js库,内部对js的很多复杂的方法进行了封装和加工,比如j...
    zh_yang阅读 1,400评论 6 13
  • 生活中总有那么一类人,事不关己高高挂起,与自己切身利益有关的事,她们总会想尽各种办法去让自己获益,俗话说得好,故意...
    追上执念与你阅读 1,620评论 0 0