专题：jquery与ajax (一)

1、jquery
一个快速、简介的javaScript框架，封装javaScript常用功能的代码，优化HTML DOM操作，事件处理、动画设计与ajax交互；
（1）特点
a.有强大的选择器，方便用户快速定位到元素；
b.支持链式编程，让代码更加简洁；
c.让ajax的操作更加简洁；
d.支持动画；
e.对兼容性支持非常好；

2、Jquery语法
（1）操作事件
$(选择器).事件名（匿名函数）
（2）操作属性
<1>var 属性值＝$(选择器).attr(属性值)
<2>设置属性的值

$(选择器).attr(属性值，要设置属性的值)

（3）调用方法

$（选择器）.方法名（参数）

 

3、选择器

（1）基本选择器

<1>标签选择器

需求：往span中加载，你好，课工厂；[设置文本值]

body中：<span></span>

script中：$(document).ready(function(){

        $("span").html("你好，课工厂");

})；

（2）id选择器

用户名：<input type＝"text" name＝user  id＝"user"/>

$(document).ready(function(){

//设置id为Username的文本框的值为张三

$("#user").attr("value","张三");

});

或者

$(document).ready(function(){

$("#user").val("张三");

})；

//输出

$(document).ready(function(){

Var  var ＝ $("user").val();

alter(user);

})

备注：当页面加载的时候，用张三设置文本框User value值；

a.设置文本框、密码框、隐藏域、多行文本框（选择器.attr("value",值)）；

 

4.class选择器

需求：点击按钮，class＝"user"的文本框设置value的值。单击事件：click的使用；

语法：$(function(){});＝$(document).ready(function(){})

script中：

$(function(){

//获得按钮的jquery对象，注册onclick事件

$("#btn").click(function(){

$("user").val("张三")；

})；

})；

body中：

用户名：<input type＝"text" class＝"user" name＝"user" id＝"user">

<input type＝"button" name＝"btn" id＝"btn" value＝"class选择器">

 

5.并集选择器

$(选择器1，选择器2)实际上是多个选择器用逗号隔开为元素设置内嵌样式的用法，选择器.css(样式属性名，样式属性值)；

需求：点击h3，为div和span设置字体颜色为红色；

<script type＝"text/javaScript">

//页面加载事件

$(function(){

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

$("c divl,#span").css("color","red");

})

})

</script>

 

6.层次选择器（操作DOM的时候方便）

（1）父元素    子元素

$(父元素选择器，子元素选择器)：获得父元素的所有后代元素；（等价于find(选择器）方法）

（2）$(父元素选择器>子元素选择器)：获得父元素的所有子代元素，但是

不包含孙子元素以及重孙元素；（等价于children(选择器)方法）

（3）$(元素选择器＋元素选择器)：获得元素的同辈元素，紧接着的元素（后面的）（等价于next（选择器）方法）

（4）$(元素选择器~元素选择器)：获得元素的所有同辈元素（后面的）（等价于nextAll（选择器）方法）

备注：层次选择器没有提供前面的同辈元素，但是可以通过方法；

prev():前面紧接着的元素；

preAll():前面紧接着的所有元素；

sibing():该元素的所有同辈元素；

 

7.过滤选择器

（1）first:获得第一个元素；

（2）last:获得最后一个元素；

（3）not():去除选择器给定的元素

（4）even():获得索引为偶数的元素

（5）odd():获得索引为奇数的元素

（6）eq(index):获得索引为index的元素

 

8.用jquery和ajax以及js写"全选＋全不选以及反选"

要求：（1）全选的复选框的id＝"ckbAll";

（2）其他复选框的name＝"ckb";

（3）导入Jquery资源文件；

//全选＋全不选

$("#ckbAll").click(function(){

         $("input[name＝'ckb']").each(function(){

                 $(this).attr("checked",$("#ckbAll").prop("checked"));

})

})

//反选

$("input[name='ckb']").each(function(){
        $(this).click(function(){
            if(!$(this).prop("checked")){
                $("#ckbAll").prop("checked",false);
            }else{
                var count=0;
                $("input[name='ckb']").each(function(index,items){
                    if(!$(items).prop("checked")){
                    $("#ckbAll").prop("checked",false);
                    return;
                }else{
                    count++;
                }
            });
                if(count==$("input[name='ckb']").length){
                    $("#ckbAll").prop("checked",true);
                }
        }
    });
});

9.jquery中的鼠标事件

书边事件是当用户在文档上移动或单击鼠标时而产生的事件

（1）click():触发或将函数绑定到指定的元素的click事件

（2）mouseover():触发或将函数绑定到指定元素mouseover事件

（3）mouseout():触发或将函数绑定到指定元素的mouseout事件

（4）mouseenter():触发或将函数绑定到指定元素的mouseenter事件

（5）mouseleave():触发或将函数绑定到指定元素的mouseleave事件

实例：<1>$(document).ready(fanction(){

                             //会用mouseover事件给导航项目改变背景颜色

                           $('.nav-ul a').mouseover(function(){

                                 //this表示鼠标经过会触发事件

                                 $(this).css("background-color","#颜色")

})

//使用mouseout事件给导航项目还原背景颜色

$(".nav-ul a").mouseout(function(){

$(this).css("background-color","#颜色");

})

})

 

10.绑定事件

语法：bind(type,[data],fn);

分析：type:事件类型，主要包括click、mouseover、mouseout、等基础事件，此外。还可以是自定义事件

           data：可选函数；

           fn:处理函数；

（1）绑定单个事件

$(document).ready(function(){

        $(".on").bind("mouseover",function(){

       //使他下方的那个隐藏菜单显示出来

        $(".topDown").show();

})

})

注解：on：是用来设置动态，通过DOM添加元素的事件的，如果不采用该方式，为元素注册事件不起作用；

（2）绑定多个事件

$(document).ready(function(){

$(".on").bind({

          mouseover:function(){

            $(".topDown").show();

},

          mouseout:function(){

             $(".topDown").ihide();

}

})

})