JQuery自学代码---（一）

浏览数：108 / 时间：2015年06月09日

/**
 * Created by wyl on 15-3-4.
 */
//Jquery是一个JavaScrioe库，它极大的简化了JavaScript编程
$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});
/*
Baidu CDN:
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
</head>

又拍云 CDN:

<head>
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
</script>
</head>

新浪 CDN:
<head>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>

Google CDN:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
 */
/*
jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
实例:

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$("p .test").hide() - 隐藏所有 class="test" 的段落

$("#test").hide() - 隐藏所有 id="test" 的元素
 */

//文档就绪事件写法一：
$(document).ready(function(){
    //Jquery method go here ......
});
//文档就绪事件写法一：
$(function(){
    //Jquery method go here ......
});

//jQuery 中所有选择器都以美元符号开头：$()
//Query 元素选择器基于元素名选取元素。
$("p");
$("h1");
$("div");

//jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
//页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
//通过 id 选取元素语法如下：
$("#test");
$("#hello");
//Query 类选择器可以通过指定的 class 查找元素。
$(".test");

/*
$("*")选取所有元素
$(this)选取当前 HTML 元素
$("p.intro")选取 class 为 intro 的 <p> 元素
$("p:first")选取第一个 <p> 元素
$("ul li:first")选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")    选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")    选取带有 href 属性的元素在线实例
$("a[target=‘_blank‘]")    选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!=‘_blank‘]"选取所有 target 属性值不等于 "_blank" 的 <a>
$(":button")选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even")选取偶数位置的 <tr> 元素在线实例
$("tr:odd")    选取奇数位置的 <tr> 元素
 */
//当单击时出现掩藏效果
$(document).ready(function(){
    $("div").click(function(){
        $(this).hide();
    });
});

$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});

//当双击时出现掩藏效果
$(document).ready(function(){
    $("div").dblclick(function(){
        $(this).hide();
    });
});

//当鼠标指针穿过元素时，会发生 mouseenter 事件。
//mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：
$(document).ready(function(){
    $("p").mouseenter(function(){
        alert("Funk you !");
    });
});
//当鼠标指针离开元素时，会发生 mouseleave 事件。
//mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：
$(document).ready(function(){
    $("#p1").mouseleave(function(){
        alert("mouse leave");
    }) ;
});

//当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
//mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：
$(document).ready(function(){
    $(".test").mousedown(function(){
        alert("Fuck me !");
    });
});

//当在元素上松开鼠标按钮时，会发生 mouseup 事件。
//mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：
$(document).ready(function(){
    $("p").mouseup(function(){
        alert("HEllo beybey!");
    });
});

//hover()方法用于模拟光标悬停事件。
//当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
$(document).ready(function(){
    $("ul").hover(function(){
        alert("You enter p1");
    }),
        function(){
            alert("Bey! you now leave p1");
        }
});

//当元素获得焦点时，发生 focus 事件。
//当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
//focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：
$(document).ready(function(){
    $("input").focus(function(){
        $(this).css("backgrand_color","red");
    });
    $("input").blur(function(){
        $(this).css("backgrand_color","green");
    })
});