jQuery 实例

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

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

*HTML元素选取

*HTML元素操作

*HTML事件函数

*CSS操作

*javaScript特效和动画

*AJAX

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

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

     $("p").hide() - 隐藏所有 <p> 元素

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

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

应用：

1.如下: 表示当点击<p>标签内容的时候，触发click函数，函数方法为隐藏当前标签内容

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

<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>

注：

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

简洁写法：

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

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

点击事件：

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

双击事件：

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

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

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

<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});
</script>

Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">

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

    jQuery DOM操作：
    如下：（

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

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

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>

<p id="test">这是段落中的 <b>粗体</b> 文本。</p>

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

<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("值为: " + $("#test").val());
  });
});
</script>

<p>名称: <input type="text" id="test" value="菜鸟教程"></p>

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

<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#runoob").attr("href"));
  });
});
</script>

<p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>

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

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#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%"});