JQuery技术介绍总结

1.什么是JQuery,有什么好处
     JQuery是一个JavaScript框架或脚本库.它将一些原始js脚本封装,提供了一些函数,便于脚本开发.
  类似jQuery框架很多,例如prototype,ExtJs,yahoo等.
     好处就是:应用方便,便于客户端JavaScript和Ajax编程.
     
2.jQuery框架原理
  jQuery提供了很多功能函数和多种类型的选择器.
  1)利用jQuery编程步骤:
    a.先利用选择器将页面中的元素获取.
    b.然后使用函数进行操作. 
  2)什么是jQuery对象
    利用jQuery选择器选出的对象才是jQuery对象.
  jQuery对象是一个集合,集合元素是原有js中DOM对象.
注意:只有jQuery对象才可以使用jQuery提供的函数
  3)对象类型的转换
    a.将一个DOM对象转换成jQuery对象
      $(DOM对象)
    b.将一个jQuery对象转换成DOM对象
     //获取jQuery对象集合中的第一个DOM对象
     jQuery对象[0] 或者 jQuery对象.get(0)
    c.将一个字符串转换成jQuery对象
      $(字符串)
  4)页面载入完毕后执行指定函数fn.
   $(document).ready(fn); 或者 $(fn);
   
3.jQuery选择器
  1).基本选择器
    a.按id属性值选择,如果有特性元素如.,需要使用\\转义
      $("#id值") $("#b\\.d") id="b.d"
    b.按class属性值选择,可以有多个,只要有一个符合就返回结果
      $(".class值")
    c.按元素名称选择,指向DOM节点的标签名,用于搜索元素
      $("元素名称")
    d.选取页面中所有元素 
      $(*)
    e.选取多个元素,并将匹配到的元素合并到一个结果内
      $("#c1,#c2,...")
  2).层级选择器
    a.父子关系,在给定的父元素下匹配所有的子元素
      $("选择器1>选择器2")
    b.祖先后代关系,在给定的祖先元素下匹配所有的后代元素
      $("选择器1 选择器2")
    c.前后关系,匹配所有紧接在 prev 元素后的 next 元素
      $("pre + next")
    d.兄弟关系,匹配prev元素之后的所有siblings元素
      $("选择器1 ~ 选择器2")
      $("form > a")表单中的第一个a
      <form>
        <a><a>
        <div>
          <a></a>
        </div>
      </form>
  3).简单选择器
    a.匹配找到的第一个元素 :first 如:表格的第一行 tr:first
    b.匹配找到的最后一个元素 :last 如:表格的最后一行 tr:last
    c.匹配所有索引值为偶数的元素,从0开始计数 :even 如:查找表格的1、3、5...行（即索引值0、2、4...）
    d.匹配所有索引值为奇数的元素,从0开始计数 :odd  如:查找表格的2、4、6行（即索引值1、3、5...） 
    e.选指定元素 :eq(索引) 如:$("tr:eq(1)") 找到第一行元素
    f.匹配所有大于给定索引值的元素 :gt(索引)
    g.匹配所有小于给定索引值的元素 :lt(索引)
    h.去除所有与给定选择器匹配的元素 :not(选择器) 如:$("input:not("#b1")")
    i.匹配如 h1, h2, h3之类的标题元素 :header
    j.匹配所有正在执行动画效果的元素 :animated
 4).内容选择器
    a.根据指定文本信息选择
     :contains(text)
    b.匹配没有子元素或者文本为空
     :empty
    <div>jack1234</div>
    <div></div>
    <div/>
    $("div:contains('jack')") 
    $("div:empty")
    c.匹配含有选择器所匹配的元素的元素 :has(元素) 如:$("div:has(p)")
    d.匹配含有子元素或者文本的元素 :parent
 5).可见性选择器
    a.选择不可见元素
      :hidden
    b.选择可见元素
      :visible
 6).属性选择器
    a.按属性值做条件选择
    [属性名=属性值]
    $("input[name='name属性值']")
 7).表单元素选择器
    a.匹配所有 input, textarea, select 和 button 元素
      :input
    b.选择type="text"类型的输入框
      :text
    b.其他:password,:hidden,:radio,:button,:image,:file
 8).表单对象属性选择器
    a.选择可用表单元素
      :enabled 如:查找所有可用的input元素 $("input:enabled")
    b.选择不可用表单元素
      :disabled
    c.匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
      :checked
    d.选择被选中的select的option
      :selected 
    
4.属性和样式函数
  1)属性函数
   a.属性操作
     attr(属性名);//返回属性值
     attr(属性名,属性值);//设置属性名=属性值
   b.value属性操作
     val();//返回value属性值
     val(值);//设置value=值
   c.获取div或span等元素的文本信息操作
     text();//返回元素中的文本内容
     text(值);//设置元素中的文本内容
   d.获取和设置div等元素的信息,当作html信息处理
     html();取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
     html(值);设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
   e.class属性操作
     addClass(值);//设置元素class="值"
     removeClass(值);//删除class属性中的值
  2)css样式函数
   a.css样式控制
     css(样式属性);//获取样式属性值
     css(样式属性,值);//设置样式属性值
   b.宽和高的控制
     width();//获取元素的宽
     width(值);//设置元素的宽度
     height();//获取元素的高
     height(值);//设置元素的高度


5.事件函数
  1)页面载入
    $(document).ready(fn)或$(fn)
  2)基本事件
    click();//触发单击事件,执行单击事件
    click(fn);//为元素绑定一个单击处理fn(函数)
    focus();//获取焦点
    focus(fn);
    change();//选项改变
    change(fn);
    blur();//失去焦点
    blur(fn);
    mouseover;
    mouserout;
    hover;=mouseover+mouseout
    unload(fn);//设置浏览器卸载页面前执行
  3)事件切换函数
    a.hover(over,out);鼠标移上去和移开两个事件,移上去执行over函数,移开执行out函数  
    b.toggle(fn1,fn2,...);为一个元素绑定多个不同的事件,每次单击调用不同的fn.
  4)事件处理函数
    a.bind("事件类型",fn);为元素绑定指定类型的事件处理函数
     $("#b1").click(fn);
     $("b1").bind("click",fn);
    b.unbind("事件类型");
     为元素取消绑定的处理函数
     $("#b1").unbind("click");
     $("#b1").unbind();//所有的事件取消
    c.trigger("事件类型")
     触发元素绑定的事件处理.
     $("#b1").click();
     $("#b1").trigger("click");
    d.live("事件类型",fn)
     为现有和将来的动态添加的元素
     绑定指定类型的事件


6.文档处理
   1)创建文档对象
     $("字符串")
   2)将文档对象添加到页面
     append(对象);//将对象插入到元素内部末尾处
     prepend(对象);//将对象值插入到元素内部的前面
     after(对象);//将对象值插入到元素后面
     before(对象);//将对象值插入到元素前面
   3)将文档元素删除
     empty();//将元素内容清空
     remove();//将元素删除
   4)将文档元素复制
     clone();//复制元素
     clone(true);//深度复制,可以将关联事件复制
   5)将文档元素利用新元素包裹起来
     wrap(html);//利用指定的html元素将原有元素包裹起来
   6)将文档元素替换
     replaceWith(html);//利用html元素替换原有文档对象 
========================================================================================
1.特效函数
  主要实现隐藏和显示功能。
  1)基本
    show();//将元素显示
    show(speed);//在指定speed时间内完成显示
         speed参数值有:'slow','normal','fast',也可以使用数字1000,2000(毫秒)
    hide();//将元素隐藏
    hide(speed);//在指定时间内隐藏
    toggle();//切换隐藏和显示
  2)滑动效果(改变元素宽和高)
    slideDown(speed);//将元素按照宽度和高度变化的形式显示
    slideUp(speed);//将元素隐藏          
  3)淡入淡出效果(改变元素的透明度)
    fadeIn(speed);//将元素显示
    fadeOut(speed);//将元素隐藏
    
2.筛选函数
  基于现有jQuery元素对象查找其他元素.
  1)过滤
   a.eq(索引)
      获取jQuery对象集合中某一个元素
   b.not(选择器)
      从jQuery对象集合中将符合选择器的元素排除,返回剩下的元素.
   c.is(选择器)
      从jQuery对象集合中获取符合选择器的元素
   d.slice(begin,[end])
      从jQuery对象集合中获取begin-end的子元素    
  2)查找
   a.find(选择器)
     从当前jQuery集合中将符合选择器的后代元素返回.
   b.children(选择器)
     从当前jQuery集合中将符合选择器的子元素返回
   c.parent()
     获取当前jQuery对象的父元素
   d.siblings()
     获取当前jQuery对象的兄弟
   
3.工具函数
   a.$.trim(str)
    字符串过滤空格,只过滤前后空格
   b.$.each(集合,fn)
    循环操作,每一个元素触发fn处理
===================================================================
1.Ajax函数
 a.$.get()以ajax方式发送一个get的url请求
   $.get(
     url,//请求url
     data,//请求提交的数据
     function,//成功处理的回调函数
     returnDataType//服务器返回的数据类型
   );
   
 b.$.post()以ajax方式发送一个post的url请求,与$.get参数相同
 
 c.$.getJSON()以ajax方式发送一个get的url请求,服务器返回的数据是json
   $.getJSON(
     url,//请求url
     data,//请求提交的数据
     function,//成功处理的回调函数
   );
  
 d.$.getScript()以ajax方式发送一个get的url请求,服务器返回的数据是script脚本.
   利用该函数实现异步方式加载较大的js函数库
   $.getScript("js/test.js")
    
 e.$.ajax()
   发送一个Ajax请求,该函数是jQuery底层实现,$.get()和$.post()基于$.ajax()函数实现.
   
   $.ajax(
    {
     async:true,//同步false,异步true
     data:json对象,//发送到服务器的数据
     url:"ariline.do",//请求地址
     success:fn,//请求处理成功后的回调函数
     error:fn,//请求处理失败后的回调函数
     dataType:"json"//服务器响应的数据类型
    }
       );
  
  f load()函数:采用ajax方式加载一个jsp,填充到指定的div或span中.
    div对象.load("text.jsp");//将text.jsp加载到div对象中
    
  2)Ajax事件函数:可以在请求处理中追加处理
    ajaxStart(fn);在ajax请求处理开始时,执行fn
    ajaxSuccess(fn);在ajax请求处理从成功时,执行fn
    ajaxError(fn):在ajax请求处理失败时,执行fn
    
 工具性函数
  $.("#f").serialize();获取输入的参数 结果如name="sd"&passw=""
  
2.jQuery插件(了解)
 1)插件的使用步骤:
  a.首先引入jquery核心脚本库
  b.然后引入jquery插件脚本库
  c.利用jquery插件提供的扩展函数