jQuery 实例

应用jQuery，首先页面需要引入标签库：  jquery.min.js

jQuery是一个javaScript类库，主要包含一下功能：

*HTML元素选取

*HTML元素操作

*HTML事件函数

*CSS操作

*javaScript特效和动画

*AJAX

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

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

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

元素

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

元素

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

应用：

1.如下: 表示当点击

标签内容的时候，触发click函数，函数方法为隐藏当前标签内容

       (注：经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中，这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。)

注：

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

简洁写法：

$(function(){
 
   // 开始写 jQuery 代码...
 
});

2.jQuery 是为事件处理特别设计的。

点击事件：

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

双击事件：

$("p").dblclick(function(){
  $(this).hide();
});

focus 事件：（当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点）

blur 事件：（当元素失去焦点时，发生 blur 事件）

Name: 

Email: 

3. jQuery 拥有可操作 HTML 元素和属性的强大方法。

    jQuery DOM操作：
    如下：（

• text() - 设置或返回所选元素的文本内容

• html() - 设置或返回所选元素的内容（包括 HTML 标记））

这是段落中的 粗体 文本。

       val() 方法获得输入字段的值：

名称: 

        attr() 方法用于获取属性值：

菜鸟教程

      通过 text()、html() 以及 val() 方法来设置内容：

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("Hello world!");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

     attr() 方法也用于设置/改变属性值：

       设置单个属性：

$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery");
});

        设置多个属性：

$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});

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

取值：

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

赋值：

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

$("p").css({"background-color":"yellow","font-size":"200%"});