第二十五弹-jquery基础

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

• 库的的概念和意义是用来提供一些方法的集合，避免重复定义相同功能的函数并具有一定的模式兼容性。例如jquery
• 框架的相对于库更重量级一些，倾向于提供整套的解决方案，倾向于创造一些需要你来遵守的规则和范例。例如angular.js

---

2.jquery 能做什么？

jQuery 库包含以下特性：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX

HTML 元素选取 跟document.querySelectorAll()用法很相似

$("a")  返回所有的a元素
$(".category")返回所有的含有category类的元素
$("#header") 返回id为header的元素
$("ul li")  返回ul中的所有li
$("ul").find("li")   =$("ul li")
$("ul li").eq(0) 返回ul中的第一个li元素

• HTML 元素操作
  text() 设置或返回所选元素的文本内容
  html() 设置或返回所选元素的内容（包括 HTML 标记）
  val() 设置或返回表单字段的值
  attr() 设置或返回元素的属性

  
    
    
    
  
  
    

      
1
      
2
      
3
    
    点我
    

      

        
用户名
        

      
    
    
  
  

• CSS 操作

$("a").css("background-color","#ccc")  //直接给元素设置样式
//添加和移除CSS
$("a").removeClass("btn")
$("a").removeClass()
$("a").addClass("btn")

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

DOM元素是用原生js获取的，jquery元素是利用jquery选择器获取的
jquery ->DOM ：jquery [0]和jquery.get(0);
DOM->jquery :$(DOM)

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

事件的绑定：
第一种方法： 直接使用关键字绑定 $(...).click(handler(e))、$(...).keydown(handler(e)) 等

click 鼠标单击
dbclick 鼠标双击
** keydown** 键盘按下
** keypress** keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件
** keyup** 键盘弹起
** mouseover ** 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。与mouseout合用
** mouseenter ** 只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。与mouseleave合用
** mouseout ** 不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件
** mouseleave** 只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
** change** 当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。
** scroll ** 当用户滚动指定的元素时，会发生 scroll 事件
** focus** 当元素获得焦点时，发生 focus 事件

** blur ** 当元素失去焦点时，发生 focus 事件
** resize ** $("window").resize(function(e){}) 当浏览器窗口大小改变时触发
** hover ** 跟CSS中的hover一样 只不过触发函数要写两个

• mouseover和mouseenter 的区别

  
    
    
  
  
  
      
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
      
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
      

        
被触发的 Mouseover 事件
      
      

        
被触发的 Mouseenter 事件
      
      
      
  

Paste_Image.png

• mouseout 和mouseleave的区别

      
不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
      
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
      

        
被触发的 Mouseout次数 
      
      

        
被触发的 Mouseleave次数
      
      
      
      

Paste_Image.png

6.jquery 动画如何使用？

animate({params},speed,callback);
params 代表css属性集合
speed 代表 动画执行时间，可以是slow fast normal 三个字符串也可以是毫秒值
callback 是回调函数

Paste_Image.png

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

text() 设置或返回所选元素的文本内容,设置文本传入字符串参数
html() 设置或返回所选元素的内容（包括 HTML 标记）设置html传入字符串参数

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

• 获取表单输入的内容
  $("#name").val();
• 获取表单选择的内容

    
        2015年
        2016年
      
$("select option:selected").text()  //2015年 获取选中文本
$("select").val()             //2015 获取选中的值

• 设置和获取元素属性
  $(selector).css("background-color"); //获取样式
  $(selector).css("background-color","#ccc") //设置样式
  $("input").attr("placeholder","hello") //设置属性
  $("input").attr("placeholder") //获取属性

---

代码题：
代码

---

本教程版权归小韩同学和饥人谷所有，转载须说明来源

---

参考文档：
饥人谷课件-jquery基础
饥人谷课件-jquery基础2
事件绑定：参考自jquery中文API
常用的事件：参考自w3c事件