jQuery_day01

1.jQuery引入:

<script src="jquery-1.10.2.min.js"></script>

2.jQuery入口函数及JavaScript入口函数:

        jQuery:        $(function(){ ... });

        JavaScript:        window.onload(){ ... };

3.jQuery选择器:

        基本选择器:

ID选择器	$("#id")	获取指定ID的元素
类选择器	$(".class")	获取同一类class元素
标签选择器	$("div")	获取同一类标签的元素
并集选择器	$("div,ul,li")	使用逗号分隔,
交集选择器	$("div.class")	注:选择器1和选择器2之间没有空格

        层次选择器:

子代选择器	$("ul>li")	使用>,获取直接子元素
后代选择器	$("ul li")	使用空格,包括子孙等元素

        过滤选择器:

:eq(index)	$("li:eq(2)").css("color","red");	获取索引为2的元素,index从0开始
:odd	$("li:odd").css("color","green");	获取li中索引号为奇数的元素
:even	$("li:even").css("color","red");	获取li中索引号为偶数的元素

        其他选择器:

children(selector)	$("ul").children("li")	相当于子代选择器
find(selector)	$("ul").find("li")	相当于后代选择器
parent()	$("li").parent()	找父元素
eq(index)	$("li").eq(2)	相当过滤选择器eq
next()	$("li").next()	找下一个兄弟
prev()	$("li").prev()	找上一个兄弟

4.事件:

        语法:

// 如点击事件
$("#btn").click(function(){
    // 触发后执行的代码
});

        其他常见事件:

                双击:        dblclick        鼠标进入/离开:        mouseenter/mouseleave

                获取焦点:        focus        失去焦点:        blur

5.jQuery的css()方法:        设置或返回被选元素的一个或多个样式属性

        设置css属性:

// 设置单个css属性
$("p").css("background-color","red");

// 设置多个css属性
$("p").css("background-color":"red","color":"yellow");

        返回css属性值:

$("p").css("background-color");

6.jQuery的css类:

// addClass():添加一个或多个类属性
$("#btn").click(function(){
    $("h1,p").addClass("自定义类名");
});

// removeClass():删除一个或多个类属性
$("#btn").click(function(){ 
    $("h1,h2,p").removeClass("blue"); 
});

// toggleClass():对被选元素进行添加/删除类属性的切换操作
$("#btn").click(function(){ 
    $("h1,h2,p").toggleClass("blue"); 
});

7.jQuery动画:

        常见动画效果:

                隐藏显示:        hide(speed,callback) 和 show(speed,callback)

// speed参数规定隐藏/显示的速度,可以取以下值："slow"、"fast" 或毫秒; callback 参数是隐藏或显示完成后所执行的函数名称

// p标签隐藏
$("p").hide();

// p标签显示
$("p").show();

// toggle(speed,callback):切换隐藏和显示
$("p").toggle();

                淡入淡出:        fadeOut(speed,callback) 和 fadeIn(speed,callback)

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

  // fadeIn(speed,callback) 用于淡入已隐藏的元素
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");

  // fadeOut(speed,callback) 方法用于淡出可见元素
  $("#div3").fadeOut(3000);
  
  // fadeToggle(speed,callback):在 fadeIn() 与 fadeOut() 方法之间进行切换
  $("#div1").fadeToggle();

  // fadeTo(speed,opacity,callback):渐变为给定的不透明度(值介于0与1之间)
  $("#div1").fadeTo("slow",0.15);
});

                滑动:        slideDown(speed,callback) 和 slideUp(speed,callback)

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

  // slideDown(speed,callback):向下滑动元素
  $("#panel").slideDown();

  // slideUp(speed,callback):向上滑动元素
  $("#panel").slideUp();

  // slideToggle(speed,callback):在 slideDown() 与 slideUp() 方法之间进行切换
  $("#panel").slideToggle();

});

                自定义动画:        animate({params},speed,callback)

/*
    animate({params},speed,callback):
        必需的 params 参数定义形成动画的 CSS 属性
        可选的 speed 参数规定效果的时长
        可选的 callback 参数是动画完成后所执行的函数名称
*/
$("button").click(function(){
  $("div").animate({
   'width':'300px',
   'height':'300px'
  },1000);
});


/*
    stop(stopAll,goToEnd):适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画
        可选的 stopAll 参数规定是否应该清除动画队列。默认是 false
        可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false
        
        默认地，stop() 会清除在被选元素上指定的当前动画
*/
$("#stop").click(function(){
  $("#div").stop();
});

8.jQuery事件机制:

        注册事件:        bind()、on():        向被选元素添加事件处理程序

/*
    bind(event,data,function,map):
        event:必需。规定添加到元素的一个或多个事件,由空格分隔多个事件值
        data:可选。规定传递到函数的额外数据
        function:必需。规定当事件发生时运行的函数
        map:规定事件映射
*/
$("p").bind("click",function(){
    alert("这个段落被点击了");
});

// 被选元素及子元素上添加一个或多个事件
$("p").on("click",function(){
    alert("段落被点击了");
}); 

        委托事件:        delegate():        向匹配元素的当前或未来的子元素添加处理程序

/*
    delegate(childSelector,event,data,function):
        childSelector: 必需。规定要添加事件处理程序的一个或多个子元素
        event:必需。规定添加到元素的一个或多个事件,用空格分隔
        data:可选
        function:必需,事件发生时运行的函数

    适用于当前或未来的元素:如脚本创建新的元素也会有该事件
*/
$("div").delegate("p","click",function(){
    $("p").css("background-color","pink");
});

        事件对象:       

                event对象常见属性:

event.type	返回哪种事件类型被触发,如click事件等
event.which	返回指定事件上哪个键盘键或鼠标按钮被按下
event.target	返回哪个 DOM 元素触发事件
event.data	包含当前执行的处理程序被绑定时传递到事件方法的可选数据
event.pageX	返回相对于文档左边缘的鼠标位置
event.pageY	返回相对于文档上边缘的鼠标位置

9.jQuery HTML

        捕获:       

                获取/设置内容:

text()	设置或返回所选元素的文本内容
html()	设置或返回所选元素的内容(包括 HTML 标记)
val()	设置或返回表单字段的值

                注:如果想通过jQuery获取下拉框中的选中的值,可以使用$(this).val();

/*
  html():
    无参,获取内容(包括HTML标记)
    有参,为设置内容

  text() 和 val():同html,但是 text 和 val 无法设置标签
*/
$("#btn2").click(function(){
    alert("HTML: " + $("#test").html()); 
});

$("#btn2").click(function(){ 
    $("#test2").html("<b>Hello world!</b>"); 
});


/*
    注:三者还都具有回调函数,函数内有两个参数:被选元素列表中当前元素的下标,以及原始值
*/
$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});

                获取/设置属性:        attr() 和 prop()

// 获得链接中 href 属性的值
$("button").click(function(){
  alert($("#runoob").attr("href"));
});

// 设置链接中 href 属性的值
$("button").click(function(){
  $("#runoob").attr("href","http://www.baidu.com");
});

// 设置多个属性值,属性间用逗号隔开
$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.baidu.com",
        "title" : "jQuery"
    });
});

                注: 如具有true和false两个值的属性(checked,selected,disabled等)使用prop()设置,其余使用attr()