从零开始学习jquery (二)

前面我们了解到了如何获取使用jquery,下面我们主要看看jquery的一些语法。基本的语法

 $(selector).action()。

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

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

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

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

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

我们在使用jquery的时候,通常的会加上这么一句,为什么要加上这么一句呢,这句的意思时,当当前的dom加载完毕后,才会执行函数里面的句子。这样做是为了防止我们一些html dom没有完成加载后,执行JavaScript而产生的一些错误。比如我们要将一个p元素隐藏,但是如果不加上这句的话,在p元素没有加载完成,我们去隐藏它,这样就会产生错误,达不到我们预期的代码效果

$(document).ready(function(){

   // jQuery methods go here...

});

例如,下面的这个例子,运行后p元素是不会隐藏的。但是如果加上前面一句话后,出现的就是一个空白的页面,即p元素被隐藏了。

<head>
    <title></title>
    <script  type="text/javascript" src="Scripts/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $( "p" ).hide();
     
    </script>
</head>
<body>
<p>我将要被隐藏了</p>
</body>

  

$(document).ready(function(){})可以简写为$(function(){})
jquery选择器
元素选择器
在页面中选取所有 <p> 元素:

$("p")

  

#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下:

$("#test")

  

.class 选择器
jQuery 类选择器可以通过指定的 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> 元素

  jquery 事件:

什么是事件?

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

实例:

  • 在元素上移动鼠标。
  • 选取单选按钮
  • 点击元素

在事件中经常使用术语"触发"(或"激发")例如: "当您按下按键时触发 keypress 事件"。

常见 DOM 事件:

鼠标事件键盘事件表单事件文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload

例子:当我们点击p元素时,其会消失

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

例子:当我们把鼠标移到p元素上时,其背景变为红色,当鼠标离开时背景变为蓝色。

 $( document ).ready( function ()
        {
            $( "p" ).mouseover( function ()
            {
                $( "p" ).css( "background-color","Red");
            } );

            $( "p" ).mouseleave( function ()
            {
                $( "p" ).css( "background-color","Blue" );
            } );
        } );

  

 
posted @ 2015-02-27 15:38  EcitGis  阅读(394)  评论(1编辑  收藏  举报