jQuery选择器_Dom操作_样式_事件处理

1、说说库和框架的区别?

  • 库是一个数据仓库,里面放了各种可以利用的API,由于库的内部已经做了各种底层的封装和各种兼容实现,因此可以调用提供的API接口来实现我们需要的功能,而不需要复杂的代码和加工,因此使代码得到优化,效率提高。
  • 框架则是为解决一个(一类)问题而开发的产品,框架用户一般只需要使用框架提供的类或函数,即可实现全部功能。可以说,框架是库的升级版。开发者在使用框架的时候,必须使用这个框架的全部代码。
  • 不同点
  • 库是工具的集合,框架是一整套的解决方案。
  • 库可以被我任意调用,而框架是我解决问题要遵守的规则(简化:我控制和我被控制的区别)。

2、jQuery 能做什么?

jQuery是一个兼容多浏览器的JavaScript库,核心理念是write less,do more,它的语法设计可以使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax等。除此之外,jQuery还提供API让开发者编写插件。总之,使用jQuery能使开发者很轻松的开发出功能强大的静态或动态页面

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

区别:

  • jQuery对象是在DOM原生对象上做了一层包装,只能使用jQuery对象方法,不能使用DOM原生对象方法
  • DOM原生对象只能使用DOM原生对象方法,不能使用jQuery对象方法

转换:

  • jQuery对象转原生JS
  • $('#btn')[0]
  • $('#btn').get(0)
  • 原生JS转jQuery对象
  • $(this)
  • $(document.getElementById('btn'))

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

  • jQuery中如何绑定事件?
    jQuery 提供了四种事件监听的方式,分别为bind、live、delegate、on
    对应的四种解绑方式是unbind、die、undelegate、off
  • bind、unbind、delegate、live、on、off都有什么作用?
  • bind() 为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。执行bind()时,事件处理函数会绑定到每个匹配元素上。使用bind()所有button元素绑定了click事件,是为当时文档中存在的每个button元素绑定click事件。如果之后你向文档中添加了新的button元素,绑定事件不会对其生效。
    $(selector).bind(event,data,function)
    event 必需。规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
    data 可选。规定传递到函数的额外数据。
    function 必需。规定当事件发生时运行的函数。
  • unbind() 方法移除被选元素的事件处理程序。
    $(selector).unbind(event,function)
    event 可选。规定删除元素的一个或多个事件由空格分隔多个事件值.如果只规定了该参数,则会删除绑定到指定事件的所有函数。
    function 可选。规定从元素的指定事件取消绑定的函数名。
  • delegate() 函数用于为指定元素的一个或多个事件绑定事件处理函数。
    此外,你还可以额外传递给事件处理函数一些所需的数据。即使是执行delegate()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数仍然对其有效。
    $(selector).delegate(childSelector,event,data,function)
    childSelector 必需。规定要附加事件处理程序的一个或多个子元素。
    event 必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
    data 可选。规定传递到函数的额外数据。
    function 必需。规定当事件发生时运行的函数。
  • live() 为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。执行live()函数之后新添加的元素,只要它匹配当前jQuery对象的选择器,绑定的事件处理函数仍然对其有效。
    $(selector).live(event,data,function)
    event 必需。规定附加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
    data 可选。规定传递到该函数的额外数据。
    function 必需。规定当事件发生时运行的函数。
  • on() 在选定的元素上绑定一个或多个事件处理函数,提供绑定事件处理的所有功能。
    $(selector).on(type, [selector], [data], fn )
    没有selector时,就和bind一样
    有selector时,就像delegate一样
  • off()函数用于移除元素上绑定的一个或多个事件的事件处理函数,主要用于解除由on()函数绑定的事件处理函数
  • 从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind()、 delegate()、 live()等事件函数。on()支持直接在目标元素上绑定事件,也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下,即使是执行on()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数也对其有效。推荐使用on()方法和 off()方法
  • on()事件代理
$('.ct').on('mouseleave','li',function(){
      //$(this).removeClass('hover')
      $(this).find('.cover').css('display','none')
    })

5、jquery 如何展示/隐藏元素?

  • 展示元素有 .show() 和 .css("display", "block") 方法
  • 隐藏元素有 .hide() 和.css("display", "none") 方法
  • 展示/隐藏 相互切换: .toggle()方法

6、 jquery 动画如何使用?

$(selector).animate({styles},speed,easing,callback)
必须参数 styles 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 easing 可选。规定在动画的不同点中元素的速度。默认值是 "swing"。"swing" - 在开头/结尾移动慢,在中间移动快。"linear" - 匀速移动
可选的 callback 参数是动画完成后所执行的函数名称。

注意:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "backgroundColor:red")

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

  • $('p').html() 获取p元素html内容
    $('p').html('内容') 设置p元素html内容
  • $('p').text() 获取p元素文本内容
    $('p').text('内容') 设置p元素text内容

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

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

推荐阅读更多精彩内容