你的位置:首页 > Java教程

[Java教程]初始JQuery


JQuery语法结构

JQuery语句主要包含三大部分:$(),doucment和ready().

这三大部分在JQuery中分别被称为工厂函数,选择器和方法。

$()=JQuery()

当$()的参数是DOM对象时,该对象不需要使用双引号包裹起来,如果获取的是doucment对象,则写作$(doucment).

 

 $(function () {      $("li").mousemove(function () {        $(this).css("background","red");      }).mouseout(function () {        $(this).css("background","");      })    })自动迭代

DOM对象和JQuery对象转换

//onload = function () {    //  var $dom = $("#myid");    //  var dom = $dom[0];    //  dom.onclick = function () {    //    if(dom.checked==true){    //      alert("成功");    //    }    //  }    //}

可以将DOM对象转换成JQuery对象,以使用JQuery提供的丰富功能,也可以将JQuery对象转换成DOM对象,使用DOM对象特有的成员提供的功能。

JQuery选择器

基本选择器

主要包括:标签选择器,类选择器,ID选择器,并集选择器,交集选择器和全局选择器。

$("p").click(function(){

  $("span").css(”background“,"#FF6")

});

层次选择器:

后代选择器,子选择器,相邻选择器,和同辈选择器。

$("h2").click(function(){

  $("#menu span").css(”background“,"#FF6");

});

单击h2元素时,为#menu下的span元素添加色为#FF6的背景颜色的功能

$("h2").click(function(){

  $("body span").css(”background“,"#FF6");

$("body>span").css(”background“,"#FF7");

});

属性选择器

$("h2").click(function(){

  $("h2[title]").css(”background“,"#FF6");

});

单击h2元素时,为包含属性名为title的h2元素添加颜色为#FF6的背景颜色的功能。

基本过滤选择器

:first 选取第一个元素

:last 选取最后一个元素

:even选取索引是偶数的所有元素(index从0开始)

:odd选取索引是奇数的所有元素(index从0开始)

:gt(index)选取索引大于index的元素(index从0开始)

:eq(index)选取索引等于index的元素(index从0开始)

:lt(index)选取索引小于index的元素(index从0开始)

:header 选取所有标题元素,如h1-h6

:focus 选取当前获取焦点的元素

$("tr:even").css("background-color","#F63");

 可见性过滤选择器

:visible 选取所有可见的元素

:hidden 选取所有隐藏的元素

 $(function () {      $("p").click(function() {        $("p:hidden").show();        $("p:visible").hide();        $("li:even").css("background-color", "#CCC");        $(".s").css("background-color", "#FF99CC");      })     })可见性过滤选择器