从零开始学习jquery （二）

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

前面我们了解到了如何获取使用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" );
            } );
        } );

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

从零开始学习jquery （二）