jQuery常见问题

1, jQuery 能做什么?

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

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

jQuery对象和DOM原生对象的区别
对于jquery对象,只能使用jquery提供的API
原生对象需要去使用原生对象的属性和方法

  • jQuery对象和DOM原生对象的转换
    jquery对象可以通过加下标的方法来变成DOM原生对象,从而使用原生对象的方法。而一个原生对象,也可以通过用$包裹一下原生的对象,就能变为jquery对象。
<div id="container">
    <ul>
        <li>001</li>
        <li class="active">002</li>
        <li>003</li>
    </ul>
</div>
<script>
    $('#container li');//[li,li.active,li]
    $('#container li')[0]; //变为原生DOM对象 <li>001</li>
    document.querySelector('.active'); //原生DOM对象 <li class="active">002</li>
    $(document.querySelector('.active'));// 变为jquery对象  [li.active, context: li.active]
</script>

对于上述例子,如果想得到第二项的元素,又不想将其变为DOM元素对象的话,可以使用.eq()方法。
$('#container li').eq(1); //[li.active, prevObject: n.fn.init(3), context: document]
依然是jquery对象

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

  • 在jQuery中,绑定事件的方法包括:.bind(),.delegate(),.live(),.on()等。

  • .bind():绑定事件,这是一个相对而言比较高效、快捷,且兼容性较好的绑定方法;
    .unbind():解绑事件,与.bind()方法相对应;
    .delegate():绑定事件,它可以自行选择它要附加的DOM元素进行绑定;
    .live():绑定事件,这种方法的原理相当于直接使用根一级的document来进行事件代理,目前该方法已被废弃;
    .on():绑定事件,在jQuery1.8版本之后,我们基本统一使用.on()替代其它的方法来进行事件的绑定;
    .off():解绑事件,与.on()方法相对应。

  • 在目前的jQuery版本中通常推荐使用on/off来对事件进行绑定和解绑。

  • on(event[,selector][,data],handler(eventObject))

on()方法的各个参数的意思
1.event
一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,例如: "click" , "keydown.myPlugin" 或者".myPlugin"
2.selector
一个选择器字符串,用于过滤出被选中元素中能触发事件的后代元素。如果选择器是null或者忽略了该选择器,那么被选中的元素总是能触发事件
3.data
当一个事件被触发时,要传递给事件处理函数的event.data
4.handler(eventObject)
当事件被触发时,执行的函数。若该函数只是要执行return false的话,那么参数位置可以简写成false

使用举例:

  • 普通事件绑定,最简单的用法
    $('div').on('click',function (e) {//可以简写为$('div').click(...)
        console.log(this);
        console.log(e);
    })
  • 事件委托或者事件代理,想让div下面所有的span绑定事件,可以把事件绑定到div上
    $('div').on('click','span',function (e) {
        console.log(this);
        console.log(e);
    })
  • 可以在绑定的时候给事件处理程序传递一些参数
    $('div').on('click',{name: 'byron',age: 24},function (e){
        console.log(e.data);
        console.log(e.data.name);
        console.log(e.data.age);
    })

需要注意的是,要用this或者e.target的话,因为这两个都是原生的DOM对象,所以要使用jquery的时候,要转换成jquery对象在使用。例如var $this = $(this);

4,jQuery 如何展示/隐藏元素?

.hide([duration][,easing][,complete])

用于隐藏元素,没有参数的时候等同于直接设置display属性
.css('display','none')
1.duration 动画持续多久
2.easing 表示过渡使用哪种缓动函数,jq自身提供"linear"和"swing"
3.complete 在动画完成时执行的函数

.show([duration][,easing][,complete])

显示元素,使用和hide类似

.toggle([duration][,easing][,complete])

用来切换元素的隐藏,显示。类似于toggleClass,使用方法和hide show一样

渐变

.fadeIn([duration][,easing][,complete])

通过淡入的方式显示匹配元素

.fadeOut([duration][,easing][,complete])

淡出的方式隐藏匹配元素

.fadeToggle([duration][,easing][,complete])

滑动

.slideDown([duration][,easing][,complete])

用滑动动画显示一个元素,方法将会给匹配元素的高度的动画,这会导致页面的下面部分滑下去,弥补了显示的方式

.slideUp([duration][,easing][,complete])

5,jQuery 动画如何使用?

.animate(properties [duration][,easing][,complete])

  • properties是一个css属性和值的对象,动画将根据这组对象移动。

  • duration:动画过程持续的时长。默认值为"normal",可以将其设置为"slow"或 "fast",也可以直接设置数值来规定时长,单位为毫秒

  • easing:过渡使用哪种缓动函数。jQuery自身提供"linear" 和 "swing",其他效果可以使用jQuery Easing Plugin插件

  • complete:在动画完成时执行的函数。

  • 停止动画 finish() 和 stop()
    当一个元素调用.stop()时,当前正在运行的动画将会立即停止。例如,一个元素正在被.slideUp()隐藏的过程中,调用.stop(),该元素依然会有一部分是处于显示状态的。由于元素上的动画尚未执行完成,所以动画完成时执行的回调函数是不会被调用的。
    如果同一元素调用多个动画方法,尚未被执行的动画被放置在元素的效果队列中,这些动画不会开始,直到第一个完成。当调用.stop()的时候,队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行。
    如果提供jumpToEnd参数,并且值为true时,当前动画将停止,但该元素上的 CSS 属性会被立刻修改成动画的目标值。用上面的.slideUp()为例子,该元素将立即隐藏。如果提供回调函数将立即被调用。

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

html()

html()方法读写两用,可以修改和获取元素的innerHTML

  • 没有传递参数的时候,返回元素的innerHTML
  • 传递了参数时,修改元素的innerHTML为传递的参数

读写两用的方法基本都类似。

  • 如果结果是多个赋值操作,会给每个结果都赋值
  • 如果结果多个,获取值的时候,返回结果集中的第一个对象的相应值
text()

和html()类似,对应DOM的innerText

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

.val([value])

读写双用,用于处理input的value。

<input type="text" value="hello">
<script>
    console.log($('input').val());
    $('input').val('world');
    console.log($('input').val());
</script>
.attr()

获取/修改元素特定属性的值

<input type="text" value="hello">
<script>
    $('input').attr('type'); //text 获取目标元素的type属性的值
    $('input').attr('type','checkbox'); //设置type属性值为checkbox
</script>

移除属性用removeArrt()方法

css()

和arrt()很像,用来处理元素的css

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

推荐阅读更多精彩内容