Day_05JQuery

Day_05-JQuery

JS主流框架

• JQuery , ExtJs, DWR,Prototype...
• JQuery(js的类库)是JavaScript的框架
  
  
  

注意:字JQuery中$符号就是JQuery,

在执行顺序上,JQuery 的效率要比js要高

• // JQuery的方式：相当于页面加载的事件,可以执行多次.效率比window.onload要高.
• //window.onload 等页面加载完成后执行该方法.
• //$(function(){}):等页面的DOM树绘制完成后进行执行.
  
  
  

JQuery的引用方式

​        <script src="../../js/jquery.js"></script>

JQuery的两种调用function的语法各式

​        JQuery和JS在页面加载事件上不同,

• JS在页面加载的事件只能执行一次
• JQuery在页面加载的事件上可以多次执行,多次使用
  ​
• 第一种
  
  
  

  
  $(function(){
  ​
  });

• 第二种
  
  
  

  
  $(document).ready(function(){
  ​
  });JS和JQuery的对象转换  
  JS-JQ的转换
          $(JS的对象);
  ​
  JQ-JS的转换
          $(JS的对象).get(0)或$(JS的对象)[0]效果

• 基本
  
  
  

  
  show([s,[e],[fn]])
  hide([s,[e],[fn]]) _____隐藏方法
  格式:
      $(document).ready(function(){
           $("要隐藏的标签").click(function(){
            $(this).hide();
    });

• 滑动
  
  
  

  
  slideDown(,[e],[fn]) ______向下滑动
  slideUp([s,[e],[fn]])   ______向上滑动
  两者的用法;
      * 使用一:Jq对象.slideDown();
      * 使用二:Jq对象.slideDown(“slow”); // slow,normal,fast
      * 使用三:Jq对象.slideDown(毫秒值); // 1000
      * 使用四:Jq对象.slideDown(毫秒值,function(){});
  slideToggle(,[e],[fn])

• 淡入淡出
  
  

  
  fadeIn(,[e],[fn])  ___淡入
  fadeOut(,[e],[fn])   ___淡出
  使用格式:
      * 使用一:Jq对象.slideUp();
      * 使用二:Jq对象.slideUp(“slow”); // 可传参数slow,normal,fast
      * 使用三:Jq对象.slideUp(毫秒值); // 1000
      * 使用四:Jq对象.slideUp(毫秒值,function(){});
  例如:
      
  fadeTo([,o,[e],[fn]])
  fadeToggle([s,[e],[fn]])

• 自定义
  
  

  
  $(selector).animate({params},speed,callback);  用来创建自定义对象   ____自定义动画
  stop([c],[j])
  delay(d,[q])
  finish([queue])
  toggle(); ____单击切换函数

JQuery的选择器

• id选择器
  
  
  • $("#id")
    
    
• 类选择器
  
  
  • $(".类名")
    
    
• 元素选择器
  
  
  • $("元素名称")
    
    
• 通配符选择器
  
  
  • $(“*”)
    
    
• 并列选择器
  
  
  • $(“选择器,选择器,选择器”)
    
    
  
  

选择器的层级关系

​         后代选择器：使用空格   所有后代包含孙子及以下的元素

​        子元素选择器：使用>    第一层的元素（儿子）

​        下一个元素:使用+      下一个同辈元素

​        兄弟元素:使用~        后面所有的同辈元素

JQurey的选择器

• 基本过滤选择器：
• odd  :     even :
  
  

用JQuery来获取元素属性值

•   
    $("#id").prop({"","",""}) 获得属性的值
    $("#id").prop("src")修改属性的值
    $("#id").prop("src")一次性修改多个属性
  

获取HTML,文本和val

• 不传参数的情况下代表返回的是HTML文件
  
  
  • $(this).html();
    
    
• 传参数的情况下,我们可以传入Html标签
  
  
  • $(this).html("<p>标签<p>");
    
    
• html的方法会覆盖原有的HTML
• appendTo()  只是在原有的基础上在尾部添加
  
  
  • $("标签")appendTo("选择器等..");
    
    
  
  

JQuery的核心

JQuery的方法只能用JQuery的对象来调用,它的核心函数是$()

• 括号里面可以写
  
  
  • 选择器
  • 原生的JS对象
  • 数组
    
    
  
  

JQuery种的两种循环方式

• each()
  ​        第一种:   i代表下标,n代表遍历的每个元素
  
  
  • $("").each(function(i,n ){})
    
    
  ​        第二种:
  • $.each(Object,function(i,n){})
    
    
  
  

Day_05JQuery

Day_05-JQuery

JS主流框架

• JQuery , ExtJs, DWR,Prototype...
• JQuery(js的类库)是JavaScript的框架
  
  
  

注意:字JQuery中$符号就是JQuery,

在执行顺序上,JQuery 的效率要比js要高

• // JQuery的方式：相当于页面加载的事件,可以执行多次.效率比window.onload要高.
• //window.onload 等页面加载完成后执行该方法.
• //$(function(){}):等页面的DOM树绘制完成后进行执行.
  
  
  

JQuery的引用方式

​        <script src="../../js/jquery.js"></script>

JQuery的两种调用function的语法各式

​        JQuery和JS在页面加载事件上不同,

• JS在页面加载的事件只能执行一次
• JQuery在页面加载的事件上可以多次执行,多次使用
  ​
• 第一种
  
  
  

  
  $(function(){
  ​
  });

• 第二种
  
  
  

  
  $(document).ready(function(){
  ​
  });JS和JQuery的对象转换  
  JS-JQ的转换
          $(JS的对象);
  ​
  JQ-JS的转换
          $(JS的对象).get(0)或$(JS的对象)[0]效果

• 基本
  
  
  

  
  show([s,[e],[fn]])
  hide([s,[e],[fn]]) _____隐藏方法
  格式:
      $(document).ready(function(){
           $("要隐藏的标签").click(function(){
            $(this).hide();
    });

• 滑动
  
  
  

  
  slideDown(,[e],[fn]) ______向下滑动
  slideUp([s,[e],[fn]])   ______向上滑动
  两者的用法;
      * 使用一:Jq对象.slideDown();
      * 使用二:Jq对象.slideDown(“slow”); // slow,normal,fast
      * 使用三:Jq对象.slideDown(毫秒值); // 1000
      * 使用四:Jq对象.slideDown(毫秒值,function(){});
  slideToggle(,[e],[fn])

• 淡入淡出
  
  

  
  fadeIn(,[e],[fn])  ___淡入
  fadeOut(,[e],[fn])   ___淡出
  使用格式:
      * 使用一:Jq对象.slideUp();
      * 使用二:Jq对象.slideUp(“slow”); // 可传参数slow,normal,fast
      * 使用三:Jq对象.slideUp(毫秒值); // 1000
      * 使用四:Jq对象.slideUp(毫秒值,function(){});
  例如:
      
  fadeTo([,o,[e],[fn]])
  fadeToggle([s,[e],[fn]])

• 自定义
  
  

  
  $(selector).animate({params},speed,callback);  用来创建自定义对象   ____自定义动画
  stop([c],[j])
  delay(d,[q])
  finish([queue])
  toggle(); ____单击切换函数

JQuery的选择器

• id选择器
  
  
  • $("#id")
    
    
• 类选择器
  
  
  • $(".类名")
    
    
• 元素选择器
  
  
  • $("元素名称")
    
    
• 通配符选择器
  
  
  • $(“*”)
    
    
• 并列选择器
  
  
  • $(“选择器,选择器,选择器”)
    
    
  
  

选择器的层级关系

​         后代选择器：使用空格   所有后代包含孙子及以下的元素

​        子元素选择器：使用>    第一层的元素（儿子）

​        下一个元素:使用+      下一个同辈元素

​        兄弟元素:使用~        后面所有的同辈元素

JQurey的选择器

• 基本过滤选择器：
• odd  :     even :
  
  

用JQuery来获取元素属性值

•   
    $("#id").prop({"","",""}) 获得属性的值
    $("#id").prop("src")修改属性的值
    $("#id").prop("src")一次性修改多个属性
  

获取HTML,文本和val

• 不传参数的情况下代表返回的是HTML文件
  
  
  • $(this).html();
    
    
• 传参数的情况下,我们可以传入Html标签
  
  
  • $(this).html("<p>标签<p>");
    
    
• html的方法会覆盖原有的HTML
• appendTo()  只是在原有的基础上在尾部添加
  
  
  • $("标签")appendTo("选择器等..");
    
    
  
  

JQuery的核心

JQuery的方法只能用JQuery的对象来调用,它的核心函数是$()

• 括号里面可以写
  
  
  • 选择器
  • 原生的JS对象
  • 数组
    
    
  
  

JQuery种的两种循环方式

• each()
  ​        第一种:   i代表下标,n代表遍历的每个元素
  
  
  • $("").each(function(i,n ){})
    
    
  ​        第二种:
  • $.each(Object,function(i,n){})