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

1：说说库和框架的区别？

• 库
  库是一个数据仓库，里面放了各种可以利用的API，由于库的内部已经做了各种底层的封装和各种兼容实现，因此可以调用提供的API接口来实现我们需要的功能，而不需要复杂的代码和加工，因此使代码得到优化，效率提高 。
• 框架
  框架相当于一个模板，用来搭建一个项目的最基层的部分，框架内部可以根据不同项目的需要填入不同的内容。
  另外一种解释是：
  库是跟着你的思维走；
  框架是牵着你的思维跟他走；

2： jquery 能做什么？

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

JQuery封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互，特点是兼容性好，API友好，能写更少的代码做更多的事情。

3： jquery 对象和 DOM 原生对象有什么区别？如何转化？

• 区别：
  Dom是文档对象模型，通过dom节点能构建成一个基本的网页，jQuery对象是通过对dom对象的包装后产生的对象，jQuery对象能使用jQuery里的方法，如$("#ct").html();这段代码等同于document.getElementById("foo").innerHTML,jQuery对象无法使用Dom对象的任何方法，同理Dom对象也不能使用jQuery的方法。
• 转化：
  1.jQuery对象是一个类似数组的独享，可以通过[index]得到相应的Dom对象。
  例如$("#cr")是一个jQuery对象，$("#cr")[0]就能得到dom对象
  2.通过jQuery的get()方法，$("#cr").get(0)。
  3.Dom对象转化成jQuery对象，在dom对象外面用$()包裹起来就得到相应的jQuery对象。

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

• 用bind,delegate,live,on方法绑定事件。
• bind，delegate,live,on都是事件绑定方法，bind是最早期的适用于所有版本的事件绑定方式，和其他三种绑定方法不同的是，bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置。off() 方法移除用.on()绑定的事件处理程序，unbind() 方法移除用.bind()绑定的事件处理程序是解除绑定事件。
• 推荐使用on和off
• 使用on绑定事件使用事件代理的写法：

$('list').on('click','li',function(){
    console.log($(this));
})

5：jquery 如何展示/隐藏元素？

• 显示元素:$.show()
• 隐藏元素:$.hide()

  
    
  
  
    
我是HARRISKING!
    点我变消失
    点我变出现
    点我就切换
    
    
  

6： jquery 动画如何使用？

• 简单的动画：通过hide()和show()，fadeIn()，fadeOut()，函数并添加以毫秒为单位的参数来实现动画效果。
• 复杂的动画：通过animate()方法来实现。

  
    
    
    
  
  
    

    点我
    
    
  

动画有队列的概念，即当需要连续执行多个动画时，不需要一层层的放入函数中，而是直接下列即可，每次点击（操作）时，会向队列中添加这些操作，点击n次，则添加n次，执行n次。
解决方法具体请点击这里！

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

• 设置html：$.html(element)，获取html：$.html()
• 设置文本：$.text(element),获取文本：$.text()

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

• $("input").val(); //获得内容
• $("input").val(string); //设置内容
• $.attr(element) //获得属性
• $.attr(element,content). //设置属性

9：效果

• 代码：代码地址
• 预览：预览地址

111.png

10：效果

• 代码：代码地址
• 预览：预览地址

222.png

11：效果

• 代码：代码地址
• 预览：预览地址

333.png