jQuery是一个JavaScript函数库
jQuery库包含也上特性:
1、HTML元素选取
2、HTML元素操作
3、CSS操作
4、HTML事件函数
5、JAVASCRIPT特效和动画
6、AJAX
7、Utilites
JavaScript是HTML5以及所有现代中的默认脚本语言!
使用谷歌或微软的jQuery,有一个很大的优势:
许多用户在访问其他站点时,已经从谷歌或微软加载过jQuery。所有结果是,当他们访问的站点时,会从缓存中加载jQuery,这宋可以减少加载时间。同时,大多数CDN都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,这样也可以提高加载速度。


jQuery语法实例
$(this).hide() 隐藏当前的HTML元素。
$("#test").hide() 隐藏id="test"的元素。
$("p").hide() 隐藏所有

元素。
$(".test").hide() 隐藏所有class="test"的元素。
jQuery使用的语法是XPath与CSS选择语法的组合。
jQuery函数在一个document ready函数中,这是为了防止文档在完全加载(就绪)之前运行jQuery代码。如果在文档没有完全加载之前就运行函数,操作可能失败。
如:1、试图隐藏一个不存在的元素
2、获得未完全加载的图像的大小
jQuery元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML元素进行选择。
选择器允许您对HTML元素组或单个元素进行操作。
jQuery元素选择器
jQuery使用CSS选择器来选取HTML元素。
$("p")选择

元素。
$("p.intro")选取所有class="intro"的

元素。
$("p#demo")选取所有id="demo"的

元素。
jQuery属性选择器
jQuery使用XPath表达式来选择带有给定属性的元素。
$("[href]")选取所有带有href属性的元素。
$("[href='#']")选取所有带有href值等于"#"的元素。
$("[href='.jpg']")选取所有href值以“.jpg”结尾的元素。
jQuery CSS选择器可用于改变HTML元素的CSS属性
把所有P元素的背景色列改为红色
$("p").css("backgroud-color","red");
$("ul li:first")每个

    的第一个
  • 元素
    $("href$='.jpg'")所有带有以“.jpg”结尾的属性值的href属性
    $("div#intro.head")id="intro"的
    元素中的所有class=“head”的元素
    jQuery名称冲突
    var jq = jQuery.noConflict(),帮助您使用自己的名称(比如jq)来代替$符号。
    jQuery事件
    $(document).ready(function)将函数绑定到文档的就绪事件
    $(selector).click(function)触发或将函数绑定到被选元素的点击事件
    $(selector).dbclick(function)触发或将函数绑定到被选元素的双点击事件
    $(selector).click(function)触发或将函数绑定到被选元素的点击事件
    $(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件
    $(selector).hide(speed,callback);speed参数规定隐藏/显示的速度,可以取slow ,fast或毫秒
    $(selector).show(speed,callback);callback参数是隐藏或显示完成后所热行的函数名称。
    jQuery,可以通过toggle()方法来切换hide()和show()方法
    jQuery拥有下面四种fade方法
    fadeIn()淡入
    fadeOut()淡出
    fadeToggle()在淡入淡出方法之间进行切换
    fadeTo()允许渐变为给定的不透明度(值介于0与1)
    slideDown()向下滑动元素
    slideUp()向上滑动元素
    slideToggle()用于向上向下滑动之间
    $(selector).animate({params},speed,callback);用于创建自定义动画
    必需的params参数定义形成动画的CSS属性。
    可选的speed参数规定效果的时长
    可选的callback参数是动画完成后所执行的函数名称。
    $("button").click(function(){
    $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
    });
    });
    $(selector).stop(stopAll,goToEnd);
    可选的stopAll参数规定是否应该项清除动画队列。
    可选择的goToEnd参数规定是否立即完成当前动画。
    Callback函数在当前动画100%完成之后执行。
    用于DOM操作的jQuery方法:
    text()--设置或返回所选元素的文本内容
    html()--设置或返回所选元素的内容
    val()--设置或返回表单字段的值
    jQuery attr()方法用于获取属性值。
    $("button").click(function(){
    alert($("#w3s").attr("href"));
    })
    通过jQuery,可以很容易地添加新元素/内容
    append()-在被选元素的结尾插入内容
    prepend()-在被选元素的开头插入内容
    after()-在被选元素之后插入内容
    before()-在被选元素之前插入内容
    删除元素
    remove()-删除被选元素(及其子元素)
    empty()-从被选元素中删除子元素
    jQuery操作CSS
    addClass()-向被选元素添加一个或多个类
    removeClass()-从被选元素删除一个或多个类
    toggleClass()-对被选元素进行添加/删除类的切换操作
    css()-设置或返回样式属性
    jQuery尺寸的方法
    width()
    height()
    不包括内边距,边框,外边距
    innerWidth()方法返回元素的宽度
    innerHeigh()方法返回元素的高度
    包括内边距
    outerWidth()方法返回元素的宽度
    outerHeight()方法返回元素的高度
    包括内边距的边框
    outerWidth(true)方法返回元素的宽度
    outerHeight(true)方法返回元素的高度
    包括内边距,边框和外边距离
    jQuery提供了多种遍历DOM的方法,最大的种类是树遍历(tree-traversal)
    向上遍历DOM树
    这些jQuery方法很有用,它们用于向上遍历DOM树:
    parent() 返回被选元素的直接父元素,该方法只会向上一级对DOM树进行遍历
    返回每个元素的直接父元素
    $(document).ready(function(){
    $("span").parent();
    })
    parents() 返回被选元素的所有祖先元素,它一路向上直到文档的根元素
    返回所有元素的所有祖先
    $(document).ready(function(){
    $("span").parents();
    })
    返回所有元素的所有祖先,并且它是
      元素
      $(document).ready(function(){
      $("span").parents("ul");
      })
      parentsUntil()返回介于两个给定元素之间的所有祖先元素
      返回介于
      元素之间的所有祖先元素
      $(document).ready(function(){
      $("span").parentsUntil("div");
      })
      向下遍历DOM树,以查找元素的后代
      children()返回被选元素的所有直接子元素
      返回类名为“1”的所有

      元素,并且它们是

      的直接子元素
      $(document).ready(function(){
      $("div").children("p.1");
      })
      find()返回被选元素的所代元素,一路向下直到最后一个后代。
      返回属于
      后代的所有元素
      $(document).ready(function(){
      $("div").find("span");
      })
      返回
      的所有后代
      $(document).read(function(){
      $("div").find("*");
      })
      在DOM树中水平遍历
      siblings()返回被选元素的所有同胞元素
      返回属于

      的同胞元素的所有

      元素
      $(document).ready(function(){
      $("h2").siblings("p");
      })
      next()返回被选元素的下一个周胞元素
      $(document).ready(function(){

      $("h2").next();


      });
      nextAll()返回被选元素的所有跟随的同胞元素。
      返回

      的所有跟随的同胞元素
      $(document).ready(function(){
      $("h2").nextAll();
      })
      nextUntil()返回介于两个给定参数之间的所有跟随的同胞元素
      介于

      元素之间的所有同胞元素
      $(document).ready(function(){
      $("h2").nextUtil("h6");
      })
      prev()
      prevAll()
      prevUntil()
      以上三个都是返回前面的同胞元素
      jQuery遍历-过滤
      缩写搜索元素的范围
      first()返回被选元素的首个元素
      选取首个
      元素内部的第一个

      元素
      $(document).ready(function(){
      $("div p").first();
      })
      last()返回被选元素的最后一个元素
      选取最后一个

      元素内部的最后一个

      元素
      $(document).ready(function(){
      $("div p").last();
      })
      eq()返回被选元素中带有指定索引号的元素,索引号从0开始
      选择取第二个

      元素(索引号1)
      $(document).ready(function(){
      $("p").eq(1);
      })
      filter()允许您规定一个标准,不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回
      返回带有类名“intro”的所有

      元素
      $(document).ready(function(){
      $("p").filter("intro");
      })
      not()返回不匹配标准的所有元素,not()方法和filter()方法相反
      返回不带有类名"intro"的所有

      元素
      $(document).ready(function(){
      $("p").not("intro");
      })
      jQuery--AJAX简介
      AJAX是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新。
      AJAX=异步javaScript和XML
      不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示。
      load() 从服务器加载数据,并把返回的数据放入被选元素中
      $(selector).load(URL,data,callback);
      必需的URL 希望加载的URL
      可选的data 与请求一同发送的查询字符串键/值对集合
      可选的callback参数是load()方法完成后所执行的函数名称
      $("#div1").load("demo_test.txt"); 把文件的内容加载到指定的

      元素中
      $("#div1").load("demo_test.txt #p1"); 把文件中的 id="p1"的元素的内容,加载到指定的
      元素中
      callback 回调函数可以设置不同的参数:
      1 responseTxt - 包含调用成功的结果内容
      2 statusTxt - 包含调用的状态
      3 xhr - 包含XMLHttpRequest对象
      $.get() 通过HTTP GET请求从服务器上请求数据
      $.get(URL,callback);
      必需的URL 希望请求的URL
      可选的callback请求成功后所执行的函数名
      下面方法从服务哭丧着脸上的一个文件中取回数据
      $("button").click(function(){
      $.get("demo_test.",function(data,status){
      alert("Data:"+data+"\nStatus:"+status);
      })
      })
      $.post()方法通过HTTP POST请求从服务器上请求数据
      $.post(URL,data,callback);
      $("button").click(function(){
      $.post("demo_test_post.asp",
      {
      name:"Donald Duck",
      city:"Duckburg"
      },
      function(data,status){
      alert("Data:"+data+"\nStatus:"+status);
      });
      });
      noConflict()方法会释放$标识的控制,这样其他脚本就可以使用它了。
      $.noConflict();
      jQuery(document).ready(function(){
      jQuery("button").click(function(){
      jQuery("p").text("jQuery 仍在运行!");
      });
      });
      var jq = $.noConflict();
      jq(document).ready(function(){
      jq("button").click(function(){
      jq("p").text
      })
      })