Jquery

1. Jquery概念

jQuery 是一个 JavaScript 库
jQuery 库包含以下特性：
  1. HTML 元素选取
  2. HTML 元素操作
  3. CSS 操作
  4. HTML 事件函数
  5. JavaScript 特效和动画
  6. HTML DOM 遍历和修改
  7. AJAX

2. 库和框架的区别

1. 库:库可以看作是一种方法的集合，他不会特定的去解决某些问题，他是将所有的方法整合在一个库中，供使用者使用，Jquery可以看成一个库，它提供了相当多的方法和函数。

2. 框架:框架的含义是一个骨架，它封装了某领域内处理流程的控制逻辑，所以我们经常说框架是一个半成品的应用。由于领域的种类是如此众多，所以框架必须具有针对性，比如，专门用于解决底层通信的框架，或专门用于医疗领域的框架。框架中也包含了很多元素，框架中的所有元素都为了实现一个共同的目标而相互协作

3. jquery 能做什么？

  1. HTML 元素选取
  2. HTML 元素操作
  3. CSS 操作
  4. HTML 事件函数
  5. JavaScript 特效和动画
  6. HTML DOM 遍历和修改
  7. AJAX

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

• 区别：

jquery对象是通过jquery选择器选择的对象，得到的是类数组对象，有自己的独有的属性和方法；DOM原生对象是通过JS选择器获得的对象,有自己的属性和方法。二者不能够混用，否则会报错。

1.原生DOM对象：根据W3C DOM规范，DOM是HTML与XML的应用接口（API）。通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。DOM对象，即是我们用传统的方法(javascript)获得的对象。

2.jQuery对象：jquery对象其实是一个javascript的数组这个数组对象包含125个方法和4个属性4个属性分别是：
   (1)jquery 当前的jquery框架版本号
   (2)length 指示该数组对象的元素个数
   (3)context 一般情况下都是指向HtmlDocument对象
   (4)selector 传递进来的选择器内容 如：#yourId或.yourClass等

• 如何转换：

获取jquery对象：$('#header');
获取DOM对象 ：document.getElementById('header');
jquery转原生DOM对象：$('#header')[0];
DOM对象转jquery:$(DOM对象)；

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

jQuery中绑定事件的方法有：bind()，live()，delegate()，on()。
与之对应的移除事件的方法有：unbind()，die()，undeleate()，off()。
其中live()和die()在jQuery1.7中以弃用，bind()、unbind(),delegate()、undeleate()在在jQuery3.0中以弃用。

• bind:bind()是最直接的、存在最久的绑定方法，但它不会绑定到在它执行完后动态添加的那些元素上。

    

            
item1
            
item2
            
item3
            
item4
    
        
    

• unblind:用于移除指定元素绑定的事件

 

            
item1
            
item2
            
item3
            
item4
    
        
    

• live:这个方法用到了事件委托的概念来处理事件的绑定,它将事件绑定到了document上，所以在它执行之后添加的元素仍然可以触发绑定事件。

 

            
item1
            
item2
            
item3
            
item4
    
        
    

• delegate:delegate()有点像live(),不同于.live()的地方在于，它不会把事件全部绑定到document,而是由你决定把它放在哪儿(事件代理)。

    

            
item1
            
item2
            
item3
            
item4
    
        
    

• on:提供了一种统一绑定事件的方法，它替代了.bind(), .live(), .delegate()这三种方法。

 

            
item1
            
item2
            
item3
            
item4
    
        
    

• off:提供了一种统一移除绑定事件的方法，它替代了.unbind(), .die(), .undelegate()这三种方法。

    

            
item1
            
item2
            
item3
            
item4
    
        
    

• 推荐使用on()和off()方法.

6..jquery 如何展示/隐藏元素？

jquery中可以使用hide()和show()的方法进行展示和隐藏元素
如：

  

        隐藏
        展示
        
hello world
    
    
    

7. jquery 动画如何使用？

jQuery animate() 方法用于创建自定义动画。
语法：$(selector).animate({params},speed,callback);
1.必需的 params 参数定义形成动画的 CSS 属性。

2.可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

3. 可选的 callback 参数是动画完成后所执行的函数名称。

效果

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

text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容（包括 HTML 标记）

• 获取：

这是段落中的粗体文本。

• 设置：

 console.log( $('#test').html('hello' )); // 
这是段落中的粗体文本。被替换成hello 
console.log( $('#test').text('hello' )); //
这是段落中的粗体文本。hello

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

val() 设置或返回表单字段的值
attr() 设置或返回元素的属性

• 获取：

这是段落中的粗体文本。

这是链接
 ![](http://img1.imgtn.bdimg.com/it/u=1245538184,752165177&fm=23&gp=0.jpg)
   

• 设置：

这是段落中的粗体文本。

这是链接
 ![](http://img1.imgtn.bdimg.com/it/u=1245538184,752165177&fm=23&gp=0.jpg)
   

练习

练习1
练习2
练习3