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();
});

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">

    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>

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

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

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

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

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

       设置单个属性：

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

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

取值：

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

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

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