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')设置样式属性