Day05 JQuery

JQueryJQuery的概述

• JQ是JS的一个框架(JS的类库).对传统的JS进行了封装。
• JS的常用框架
  • JQuery,ExtJS,DWR,Prototype...
    
    
  
  

JQuery的入门

• 引入JQuery的js文件.
  • <script src = "../../js/jquery-1.11.3.min.js"></script>
    
    
• JQuery的入口函数：
  
  

//页面绘制完DOM树后执行
$(function(){
   
});
​
$(document).ready(function(){
   
});

• JS对象和JQ对象的转换
  • JS转JQ
    • $("")
      
      
  • JQ转JS
    • $d1.get(0)
    • $d1[0]
      
      
    
    
  
  

JQ的显示和隐藏

• show()
• hide()
• slideDown()
• fadeIn()
• fadeOut()
• animaate()自定义动画
• toggle()单击切换函数
  
  

JQ的选择器基本选择器id选择器

• $("#id")
  
  

类选择器

• $(".类名")
  
  

元素选择器

• $("元素名称")
  
  

通配符选择器

• $("*")
  
  

并列选择器

• $("选择器,选择器...")
  
  

层级选择器后代选择器

• 使用空格,包含孙子及以下的元素
  
  

子元素选择器

• 使用>号,第一层元素
  
  

下一个元素

• 使用+        下一个同辈元素
  
  

兄弟元素

• 使用~        后面的所有同辈元素
  
  

基本过滤选择器

• first
• last
• even
• odd
  
  

内容选择器属性选择器

• [attribute = value]
  
  

表单选择器

• :input
• :text
  
  

表单属性选择器

• :enabled
• :disabled
• :checked
• :selected
  
  

JQ对属性的操作方法

• prop();新版本的方法
  • $("").prop("src");
  • $("").prop("src","test.jpg"");
  • $("").prop({"src":"test.jpg","width":"100"});
    
    
  
  

JQ的DOM操作

• 常用方法
  • append();
  • appendTo();
  • remove();
    
    
• html:
  • html()
  • text()
  • val()
    
    
  
  

JQuery的委派和绑定

• 事件的绑定
  
  

$("p").bind("click",function(){
​
});
​
$("p").on("click","dblclick",function(){
​
});

鼠标的悬停事件:hover

• 如果鼠标悬停只想有样式的效果:可以使用CSS的伪类
• 除了样式的效果还有别的业务逻辑的操作,hover函数
  
  

• 事件的委派
  • 适用于通过脚本穿件的元素,委派给已经存在的父类
    
    
  
  

<script>
    $("#parent").delegate(".children","click",function(){
        
    });
</script>JQuery的遍历
$("img").each(function(i,n){
    i:遍历的下标
    n:遍历出来的每一个元素  
});
​
$.each(object,function(i,n){
    object:待遍历的数组
    i:遍历的下标
    n:遍历出来的每一个元素
});查找和过滤

• parent()
• find()
• is()
  
  

• :selected
• :checked
  
  

Day05 JQuery

JQueryJQuery的概述

• JQ是JS的一个框架(JS的类库).对传统的JS进行了封装。
• JS的常用框架
  • JQuery,ExtJS,DWR,Prototype...
    
    
  
  

JQuery的入门

• 引入JQuery的js文件.
  • <script src = "../../js/jquery-1.11.3.min.js"></script>
    
    
• JQuery的入口函数：
  
  

//页面绘制完DOM树后执行
$(function(){
   
});
​
$(document).ready(function(){
   
});

• JS对象和JQ对象的转换
  • JS转JQ
    • $("")
      
      
  • JQ转JS
    • $d1.get(0)
    • $d1[0]
      
      
    
    
  
  

JQ的显示和隐藏

• show()
• hide()
• slideDown()
• fadeIn()
• fadeOut()
• animaate()自定义动画
• toggle()单击切换函数
  
  

JQ的选择器基本选择器id选择器

• $("#id")
  
  

类选择器

• $(".类名")
  
  

元素选择器

• $("元素名称")
  
  

通配符选择器

• $("*")
  
  

并列选择器

• $("选择器,选择器...")
  
  

层级选择器后代选择器

• 使用空格,包含孙子及以下的元素
  
  

子元素选择器

• 使用>号,第一层元素
  
  

下一个元素

• 使用+        下一个同辈元素
  
  

兄弟元素

• 使用~        后面的所有同辈元素
  
  

基本过滤选择器

• first
• last
• even
• odd
  
  

内容选择器属性选择器

• [attribute = value]
  
  

表单选择器

• :input
• :text
  
  

表单属性选择器

• :enabled
• :disabled
• :checked
• :selected
  
  

JQ对属性的操作方法

• prop();新版本的方法
  • $("").prop("src");
  • $("").prop("src","test.jpg"");
  • $("").prop({"src":"test.jpg","width":"100"});
    
    
  
  

JQ的DOM操作

• 常用方法
  • append();
  • appendTo();
  • remove();
    
    
• html:
  • html()
  • text()
  • val()
    
    
  
  

JQuery的委派和绑定

• 事件的绑定
  
  

$("p").bind("click",function(){
​
});
​
$("p").on("click","dblclick",function(){
​
});

鼠标的悬停事件:hover

• 如果鼠标悬停只想有样式的效果:可以使用CSS的伪类
• 除了样式的效果还有别的业务逻辑的操作,hover函数
  
  

• 事件的委派
  • 适用于通过脚本穿件的元素,委派给已经存在的父类
    
    
  
  

<script>
    $("#parent").delegate(".children","click",function(){
        
    });
</script>JQuery的遍历
$("img").each(function(i,n){
    i:遍历的下标
    n:遍历出来的每一个元素  
});
​
$.each(object,function(i,n){
    object:待遍历的数组
    i:遍历的下标
    n:遍历出来的每一个元素
});查找和过滤

• parent()
• find()
• is()
  
  

• :selected
• :checked