jQuery_01_选择器_事件

最新推荐文章于 2022-06-24 05:34:46 发布

pre_eminent

最新推荐文章于 2022-06-24 05:34:46 发布

阅读量420

点赞数 1

分类专栏： # jQuery 文章标签： jQuery 选择器事件

本文链接：https://blog.csdn.net/pre_eminent/article/details/79783908

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

简介:

jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。

手册说明:

认识jQuery：

jQuery的字面意思其实就是JavaScript 和查询（Query），即用于辅助开发JavaScript的库。

jQuery是继prototype之后的又一个优质的Javascript库，属于开源编程语言。

Query使用户可以更加方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，而且方便地为网站提供AJAX交互。

jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详尽，同时还有很多成熟的插件可供选择。

有了jQuery,也就不需要再在html里面插入一堆js来调用命令了，只需要定义id即可。

jQuery是免费、开源的，使用MIT许可协议。

jQuery的语法设计可以使开发更加便捷，

例如操作文档对象document、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。

除此之外，jQuery提供API让开发者编写插件。

其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

jQuery教程结构概述：

本教程共由9个章节构成，详细讲述了jQuery的基础使用方法并最后一节还附带了大量实例辅助您的学习，让您轻松掌握jQuery。

本教程包含：

1、jQuery简介

2、jQuery效果

3、jQuery HTML

4、jQuery 遍历

5、jQuery Ajax

6、jQuery 实例

7、jQuery 参考手册

8、jQuery 插件

9、jQuery noConflict() 方法

jQuery的发展及学习前的准备：

2006年1月，jQuery第一个版本发布，它以简洁、灵活的编程风格让人一见倾心。

jQuery发展至今，更新了十几个新版本，最新的版本是https://code.jquery.com/jquery-3.3.1.js。

jQuery已然成为当前非常流行的一个JavaScript框架，并且拥有很好的可扩展性，jQuery可以使您的工作变得更加简单。

在您开始学习 jQuery 之前，您应该对以下知识有基本的了解：

《HTML 教程》

《CSS 教程》

《JavaScript 教程》

jQuery的缺点：

1、不能向后兼容。每一个新版本都不能兼容早期的版本。

2、插件兼容性不好，与上一点类似。

3、在同一页面上使用多个插件时，非常容易发生冲突，尤其是这些插件依赖 相同事件 或 相同selector时最为明显。

4、在大型框架中，jQuery核心代码库对 动画和特效 的支持相对较差。

但是实际上这不是一个问题。目前在这方面有一个单独的jQuery UI项目和众多插件来弥补此点。

jQuery的安装：

您可以从网页中添加 jQuery

①从官网 jquery.com 下载 jQuery 库

②从 CDN 中载入 jQuery, 如从 cdn.code.baidu.com 中加载 jQuery

下载 jQuery：

Production version - 用于实际的网站中，已被精简和压缩。

Development version - 用于测试和开发（未压缩，是可读的代码）

本章节的每一篇都包含了在线实例

通过本站的在线编辑器，你可以在线运行修改后的代码，并查看运行结果。

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>


    <!-- 引入 jquery 2.1.4 -->
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <p class="sgcenter">anohana</p>
        <p class="sgcenter">那朵花</p>
        <p class="sgcenter">mathilda</p>
        <script type="text/javascript">
            $(document).ready(
                // 匿名函数
                function () {
                    // 给每个p添加点击事件 (注意不要加on)
                    $("p").click(
                        // 又是一个匿名函数
                        function () {
                            // 参数是:元素
                            $(this).hide();
                        }
                        );
                }
                );
        </script>
        
        <p class="sgcenter">
            <b>注意:</b>点击p就会hide
        </p>
        
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>

效果如下:

核心代码:

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

jQuery 简介

jQuery 库可以通过一行简单的标记被添加到网页中。

    <!-- 引入 jquery 2.1.4 -->
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>

您需要具备的基础知识

在您开始学习 jQuery 之前，您应该对以下知识有基本的了解：

HTML
CSS
JavaScript

如果您需要首先学习这些科目，请在我们的前面的教程中查找这些教程。

什么是 jQuery ？

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少write less，做的多do more"的JavaScript库。

jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

提示：除此之外，Jquery还提供了大量的插件。

为什么使用 jQuery ？

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。

很多大公司都在使用 jQuery，例如:

Google
Microsoft
IBM
Netflix (一家在线影视租赁)

	jQuery是否适用于所有浏览器? 是! jQuery 团体知道JS在不同浏览器中存在着大量的兼容性问题，目前jQuery兼容于所有主流浏览器, 包括Internet Explorer 6!

jQuery版本支持

在使用jQuery的时候你应该要注意的是:

jQuery 2.0.0 版本以上是不支持 IE6，7，8 浏览器的。

那么如果使用的是 IE6，7，8 浏览器的话，你就得选择使用jQuery1.10.2版本的，

或者，你也可以通过条件注释在使用 IE6，7，8 浏览器的时候只允许包含 jQuery 1.10.2

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    


    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

注释代码如下：

<!--[if lt IE 9]> 
 <script src="jquery-1.10.2.js"></script> 
<![endif]--> 
<!--[if gte IE 9]><!--> 
 <script src="jquery-2.1.4.js"></script> 
<!--<![endif]-->

jQuery 安装

网页中添加 jQuery

可以通过多种方法在网页中添加 jQuery。您可以使用以下方法：

从 jquery.com 下载 jQuery 库
从 CDN 中载入 jQuery, 如从 cdn.code.baidu.com 中加载 jQuery

下载 jQuery

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

以上两个版本都可以从 jquery.com 中下载。

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：

     <head> 
    
 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script> 
    
 </head>

提示：将下载的文件放在网页的同一目录下，就可以使用jQuery。

	您是否很疑惑为什么我们没有在 <script> 标签中使用 type="text/javascript" ？在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！

如果要兼容IE9及以下,可以按下面代码进行判断

<!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>

        
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->


    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

	使用百度、新浪、谷歌或微软cdn的 jQuery，有一个很大的优势：许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度

使用百度、新浪、谷歌或微软cdn的 jQuery，有一个很大的优势：

许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。
当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。
同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度

jQuery 语法

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。

jQuery 语法

jQuery 语法是通过选取 HTML 元素，将选取的元素转成jQuery对象,并执行某些操作。

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

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

实例:

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

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

$("p .class_p_center").hide() - 隐藏所有 class="class_p_center" 的段落

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

	你对 CSS 选择器熟悉吗？ jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。

文档就绪事件

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 $(document).ready() 函数中：

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

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。???那个不是window.onload()吗???

如果在文档没有完全加载之前就运行函数，操作可能失败。

下面是随便举的两个例子：

试图隐藏一个不存在的元素
获得未完全加载的图像的大小

提示：$(document).ready()函数的简洁写法是:（与以上写法效果相同）

上面例子简写成:

            // 直接$ + ();
            // 括号里是 匿名函数
            $(
                // 匿名函数
                function () {
                    // 给每个p添加点击事件 (注意不要加on)
                    $("p").click(
                        // 又是一个匿名函数
                        function () {
                            // 参数是:元素
                            $(this).hide();
                        }
                        );
                }
            );

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

以上两种方式你可以选择你喜欢的方式实现文档就绪后执行jQuery方法。

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类class、标签名tagName、属性、属性值等"查找"（或选择）HTML 元素。

它基于已经存在的 CSS 选择器，

除此之外，jQuery它还有一些自己发明的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

元素选择器

jQuery 元素选择器基于元素名tagName 选取元素。

在页面中选取所有 <p> 元素:

    $("p") 
  

实例

用户点击按钮后，所有 <p> 元素都隐藏：

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">



    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->


</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <p class="class_p_anime sgcenter">龙与虎</p>
        <p class="class_p_anime sgcenter">那朵花</p>
        <p class="class_p_actress sgcenter">mathilda</p>
        <button class="class_btn class_btn_green" type="button" >点我试试</button>
        <script type="text/javascript">
            $(document).ready(
                // 匿名函数
                function () {
                    // 给按钮添加点击事件 (注意不要加on)
                    $(".class_btn_green").click(
                        // 匿名函数
                        function () {
                            // 选取所有的class为class_p_anime的p,执行hide
                            $(".class_p_anime").hide();
                        }
                    );
                }
            );
        </script>
        
        <p class="sgcenter">
            <b>注意:</b>hide所有的class是anime的p
        </p>
        
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>

效果如下:

核心代码:

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

#id 选择器

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

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

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

    $("#id_p_result") 
  

实例

当用户点击按钮后，有 id="id_p_result" 属性的元素将被隐藏：

实例

     $(document).ready(function(){  
    
 $("button").click(function(){  
    
   $("#id_p_result").hide();  
    
 });  
    
});

.class 选择器

jQuery 类选择器 可以通过指定的 .class 查找元素。

语法如下：

    $(".class_p_center") 
  

实例

用户点击按钮后所有带有 class="class_p_center" 属性的元素都隐藏：

实例

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

CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

实例

下面的例子把所有class为class_p_anime的 p 元素的背景颜色更改为红色：

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="中国成人教育网-免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY,XML,JSON,C,C++,C#,OC,PHP,JAVA,JSP,PYTHON,RUBY,PERL,LUA,SQL,LINUX,SHELL,汇编,日语,英语,泰语,韩语,俄语,粤语,阿语,魔方,乐理,动漫,PR,PS,AI,AE">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">



    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->


</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <p class="class_p_anime sgcenter">龙与虎</p>
        <p class="class_p_anime sgcenter">那朵花</p>
        <p class="class_p_actress sgcenter">mathilda</p>
        <button class="class_btn class_btn_green" type="button" >点我试试</button>
        <script type="text/javascript">
            $(document).ready(
                // 匿名函数
                function () {
                    // 给按钮添加点击事件 (注意不要加on)
                    $(".class_btn_green").click(
                        // 匿名函数
                        function () {
                            // 选取所有的class为class_p_anime的p,改变背景色
                            $(".class_p_anime").css("background-color","green").css("color","white");
                        }
                    );
                }
            );
        </script>
        
        <p class="sgcenter">
            <b>注意:</b>$(".class_p_anime").css("color","red");
        </p>
        
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>

效果如下:

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

更多实例

语法	描述	实例
$("*")	选取所有元素	在线实例
$(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> 元素	在线实例

$("*")演示代码:

        <script type="text/javascript">
            $(document).ready(
                // 匿名函数
                function () {
                    // 给按钮添加点击事件 (注意不要加on)
                    $(".class_btn_green").click(
                        // 匿名函数
                        function () {
                            // 选取所有的元素,改变背景色
                            $("*").css("background-color","black").css("color","white");
                        }
                    );
                }
            );
        </script>

效果如下:

$(this).hide();隐藏自己,注意this不要加引号

代码如下:

        <button class="class_btn class_btn_green" type="button" >点我试试</button>
        <script type="text/javascript">
            $(document).ready(
                // 匿名函数
                function () {
                    // 给按钮添加点击事件 (注意不要加on)
                    $(".class_btn_green").click(
                        // 匿名函数
                        function () {
                            // 隐藏自己 this没有引号
                            $(this).hide();
                        }
                    );
                }
            );
        </script>
        
        <p class="sgcenter">
            <b>注意:</b>$(this).hide();this不要加引号
        </p>

效果如下:

$("p.class_p_anime").hide();

代码如下:

        <p class="class_p_anime sgcenter">龙与虎</p>
        <p class="class_p_anime sgcenter">那朵花</p>
        <p class="class_p_actress sgcenter">mathilda</p>
        <button class="class_btn class_btn_green" type="button" >点我试试</button>
        <script type="text/javascript">
            $(document).ready(
                // 匿名函数
                function () {
                    // 给按钮添加点击事件 (注意不要加on)
                    $(".class_btn_green").click(
                        // 匿名函数
                        function () {
                            // 选取所有的class为class_p_anime的p,改变背景色
                            // p可省
                            $("p.class_p_anime").css("background-color","green").css("color","white");
                        }
                    );
                }
            );
        </script>
        
        <p class="sgcenter">
            <b>注意:</b>$("p.class_p_anime").css("color","red");注意:p可省
        </p>

效果如下:

第1个p元素 $("p:first").hide();

代码如下:

        <p class="class_p_anime sgcenter">龙与虎</p>
        <p class="class_p_anime sgcenter">那朵花</p>
        <p class="class_p_actress sgcenter">mathilda</p>
        <button class="class_btn class_btn_green" type="button" >点我试试</button>
        <script type="text/javascript">
            $(document).ready(
                // 匿名函数
                function () {
                    // 给按钮添加点击事件 (注意不要加on)
                    $(".class_btn_green").click(
                        // 匿名函数
                        function () {
                            // 选取第1个p元素,改变背景色
                            $("p:first").css("background-color","green").css("color","white");
                        }
                    );
                }
            );
        </script>
        
        <p class="sgcenter">
            <b>注意:</b>第1个p元素 $("p:first").css("color","red");
        </p>

效果如下:

$("ul li:first") 强调的是first,表示第1个ul的第1个li元素

代码如下:

        <ul>
            <li>那朵花</li>
            <li>龙与虎</li>
            <li>石头门</li>
        </ul>
        <ul>
            <li>来自深渊</li>
            <li>轻音少女</li>
            <li>mathilda</li>
        </ul>
        <button class="class_btn class_btn_green" type="button" >点我试试</button>
        <script type="text/javascript">
            $(document).ready(
                // 匿名函数
                function () {
                    // 给按钮添加点击事件 (注意不要加on)
                    $(".class_btn_green").click(
                        // 匿名函数
                        function () {
                            // 强调first,选取第1个ul的第1个li元素,改变背景色
                            $("ul li:first").css("background-color","green").css("color","white");
                        }
                    );
                }
            );
        </script>
        
        <p class="sgcenter">
            <b>注意:</b>强调first,第1个ul的第1个li元素<br/>$("ul li:first").css("color","red");
        </p>

效果如下:

$("ul li:first-child").hide();强调的是child,所以只要是ul的first-child的li都要隐藏

代码如下:

        <ul>
            <li>那朵花</li>
            <li>龙与虎</li>
            <li>石头门</li>
        </ul>
        <ul>
            <li>来自深渊</li>
            <li>轻音少女</li>
            <li>mathilda</li>
        </ul>
        <button class="class_btn class_btn_green" type="button" >点我试试</button>
        <script type="text/javascript">
            $(document).ready(
                // 匿名函数
                function () {
                    // 给按钮添加点击事件 (注意不要加on)
                    $(".class_btn_green").click(
                        // 匿名函数
                        function () {
                            // 强调child,所以,只要是ul的first-child的li元素,都要改变背景色
                            $("ul li:first-child").css("background-color","green").css("color","white");
                        }
                    );
                }
            );
        </script>
        
        <p class="sgcenter">
            <b>注意:</b>强调child,所以只要是ul的first-child的li元素都要改<br/>$("ul li:first-child").css("color","red");
        </p>

效果如下:

$("['href']").hide();选择所有带有href属性的标签

也可以写成 $("a['href']").hide();

代码如下:

        <a href="" target="_blank" style="margin-left:8px;">那朵花</a> <br/>
        <a href="#" target="_blank" style="margin-left:8px;">龙与虎</a><br/>
        <a target="_blank" style="margin-left:8px;">beyond</a><br/>
        <button class="class_btn class_btn_green" type="button" >点我试试</button>
        <script type="text/javascript">
            $(document).ready(
                // 匿名函数
                function () {
                    // 给按钮添加点击事件 (注意不要加on)
                    $(".class_btn_green").click(
                        // 匿名函数
                        function () {
                            // 所有的带有href属性的元素,都要改变背景色
                            $("[href]").css("background-color","green").css("color","white");
                        }
                    );
                }
            );
        </script>
        
        <p class="sgcenter">
            <b>注意:</b>$("[href]").css("color","red");<br/>所有的 带有href属性的标签
        </p>

效果如下:

$("a[target='_blank']").hide();所有的属性target的值为_blank的a标签

代码如下:

        <a href="" target="_blank" style="margin-left:8px;">那朵花</a> <br/>
        <a href="#" target="_blank" style="margin-left:8px;">龙与虎</a><br/>
        <a href="#" style="margin-left:8px;">轻音少女</a><br/>
        <a target="_blank" style="margin-left:8px;">beyond</a><br/>
        <button class="class_btn class_btn_green" type="button" >点我试试</button>
        <script type="text/javascript">
            $(document).ready(
                // 匿名函数
                function () {
                    // 给按钮添加点击事件 (注意不要加on)
                    $(".class_btn_green").click(
                        // 匿名函数
                        function () {
                            // 所有的属性target的值为_blank的a标签
                            $("a[target='_blank']").css("background-color","green").css("color","white");
                        }
                    );
                }
            );
        </script>
        
        <p class="sgcenter">
            <b>注意:</b>$("a[target='_blank']").hide();<br/>所有的属性target的值为_blank的a标签
        </p>

效果如下:

$("a[target!='_blank']").hide(); 所有的属性target的值不为_blank的a标签

代码如下:

        <a href="" target="_blank" style="margin-left:8px;">那朵花</a> <br/>
        <a href="#" target="_blank" style="margin-left:8px;">龙与虎</a><br/>
        <a href="#" style="margin-left:8px;">轻音少女</a><br/>
        <a target="_blank" style="margin-left:8px;">beyond</a><br/>
        <button class="class_btn class_btn_green" type="button" >点我试试</button>
        <script type="text/javascript">
            $(document).ready(
                // 匿名函数
                function () {
                    // 给按钮添加点击事件 (注意不要加on)
                    $(".class_btn_green").click(
                        // 匿名函数
                        function () {
                            // 所有的属性target的值不为_blank的a标签
                            $("a[target!='_blank']").css("background-color","green").css("color","white");
                        }
                    );
                }
            );
        </script>
        
        <p class="sgcenter">
            <b>注意:</b>$("a[target!='_blank']").hide();<br/>所有的属性target的值不为_blank的a标签
        </p>

效果如下:

下面是jQuery自定义的选择器

$(":button").hide();选取所有的button元素或者type="button"的input元素

代码如下:

        girlName:<input type="text" placeholder="请输入芳名" />
        email:<input type="email" placeholder="请输入邮箱" />
        <input type="button" value="提交"/>
        <button class="class_btn class_btn_green" type="button" >点我试试</button>
        <script type="text/javascript">
            $(document).ready(
                // 匿名函数
                function () {
                    // 给按钮添加点击事件 (注意不要加on)
                    $(".class_btn_green").click(
                        // 匿名函数
                        function () {
                            // 选取所有的button元素或者type="button"的input元素
                            $(":button").css("background-color","black").css("color","white");
                        }
                    );
                }
            );
        </script>
        
        <p class="sgcenter">
            <b>注意:</b>
            $(":button").hide();<br/>选取所有的button元素或者type="button"的input元素
        </p>
        
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>

效果如下:

$("tr:even").hide();或$("tr:odd").hide();

表示选取所有的偶数行(0,2...)或奇数行(1,3...)

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">



    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->


    <style type="text/css">
        #id_table {  
            font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;  
            width: 100%;  
            border-collapse:collapse;  
        }  
        /*表头和单元格*/  
        #id_table th,#id_table td {  
            font-size: 1em;  
            border: 1px solid #98bf21;  
            padding: 3px 7px 2px 7px;  
        }  
        /*表头*/  
        #id_table th {  
            font-size: 1.1em;  
            text-align: center;  
            /*比td都多了2个px*/  
            padding-top: 5px;  
            padding-bottom: 4px;  
            background-color: #A7C942;  
            color: #fff;  
        }  
        /*这个牛X*/  
        /*表格里的行里的class_even类里的td*/  
        #id_table tr.class_even td {  
            color: #000;  
            background-color: #EAF2D3;  
        }  
        #id_table tr td {  
            text-align: center;  
        }  
    </style>
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <table id="id_table" style="margin:0 auto;" class="sgcontentcolor">  
        <tr>  
            <th>动漫名称</th>  
            <th>女主角</th>  
            <th>上映年代</th>  
        </tr>  
        <tr>  
            <td>未闻花名</td>  
            <td>面码</td>  
            <td>2011年4月</td>  
        </tr>  
        <tr >  
            <td>龙与虎</td>  
            <td>逢坂大河</td>  
            <td>2008年10月</td>  
        </tr>  
        <tr>  
            <td>可塑性记忆</td>  
            <td>艾拉</td>  
            <td>2015年4月</td>  
        </tr>  
        <tr >  
            <td>轻音少女</td>  
            <td>平泽唯</td>  
            <td>2009年4月</td>  
        </tr>  
        <tr>  
            <td>刀语</td>  
            <td>咎儿(とがめ)</td>  
            <td>2010年1月</td>  
        </tr>  
    </table>    
        <div style="margin:20px auto;text-align:center;"><button class="class_btn class_btn_green" type="button" >点我试试</button></div>
        <script type="text/javascript">
            $(document).ready(
                // 匿名函数
                function () {
                    // 给按钮添加点击事件 (注意不要加on)
                    $(".class_btn_green").click(
                        // 匿名函数
                        function () {
                            // 选取所有的奇数行
                            $("tr:even").css("background-color","#EAF2D3").css("color","black");
                        }
                    );
                }
            );
        </script>
        
        <p class="sgcenter">
            <b>注意:</b>
            $("tr:even").hide();<br/>选取所有的偶数行
        </p>
        
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>

效果如下:

jQuery 事件

什么是事件？

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

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

在事件中经常使用术语"触发"（或"激发"）

例如： "当您按下按键时触发 keypress 事件"。

常见 jQuery 事件：

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

jQuery 事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个与之对应的 jQuery 方法。

页面中指定一个点击事件：

     $("p").click(); 
   

下一步是定义触发事件时如何处理事件。

您可以通过一个事件函数实现：

     $("p").click(function(){ 
    
  // action goes here!! 
    
});

常用的 jQuery 事件方法

$(document).ready() 方法允许我们在文档完全加载完后执行函数。

click() 方法是当按钮点击事件被触发时会调用一个函数。

该函数在用户点击 HTML 元素时都执行。

在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：

实例

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

当双击元素时，会发生 dbl click 事件。注意: 有一个L

dbl click() 方法触发 dbl click 事件，

或规定当发生 dbl click 事件时运行的函数：

代码如下:

        <script type="text/javascript">
            $(document).ready(
                // 匿名函数
                function () {
                    // 给p添加双击dbl事件 (注意不要加on)
                    $("p").dblclick(
                        // 匿名函数
                        function() {
                            // 双击p元素,变色
                            $(this).css("background-color","black").css("color","white");
                        }
                    );
                }
            );
        </script>
        
        <p class="sgcenter">
            <b>注意:</b>
            $("p").dblclick();<br/>dbl双击事件,有个L
        </p>

效果如下:

实例

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

mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：

实例

 
    $("#id_p").mouse 
    enter 
    (function(){  
    
      alert("You entered p1!");  
    
    });

mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。

mouseleave() 方法触发 mouseleave 事件，

或规定当发生 mouseleave 事件时运行的函数：

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }

        p {
            /*safari*/
            -webkit-transition: all 0.4s;
            transition: all 0.4s;
        }
    </style>
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="beyondbuttongreen.css">



    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
           
        <button class="class_btn class_btn_green" type="button" >点我试试</button>
        <script type="text/javascript">
            $(document).ready(
                // 匿名函数
                function () {
                    // 鼠标进入时,添加事件 (注意不要加on)
                    $("p").mouseenter(
                        // 匿名函数
                        function() {
                            // 变色
                            $(this).css("background-color","black").css("color","white");
                        }
                    );
                    // 鼠标离开时,添加事件 (注意不要加on)
                    $("p").mouseleave(
                        // 匿名函数
                        function() {
                            // 变色
                            $(this).css("background-color","transparent").css("color","black");
                        }
                    );
                }
            );
        </script>
        
        <p class="sgcenter">
            <b>注意:</b>
            $("p").mouseenter();<br/>
            $("p").mouseleave();<br/>
            鼠标进入或离开时,变色
        </p>
        
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>

效果如下:

核心代码:

     $("#id_p").mouseleave(function(){  
    
  alert("Bye! You now leave p1!");  
    
});

hover()

hover()方法用于模拟光标悬停事件。

当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);

当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

核心代码:

     $("#id_p").hover(function(){  
    
  alert("You entered p1!");  
    
  },  
    
  function(){  
    
  alert("Bye! You now leave p1!");  
    
});

focus()

当元素获得焦点时，发生 focus 事件。

当通过鼠标点击 选中元素 或通过 tab 键 定位到元素时，该元素就会获得焦点。

focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：

实例

     $("id_input_text_name").focus(function(){  
    
  $(this).css("background-color","#cccccc");  
    
});

blur()

当元素失去焦点时，发生 blur 事件。

blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

实例

     $("id_input_text_name").blur(function(){  
    
  $(this).css("background-color","#ffffff");  
    
});

代码如下:

        妳的昵称:<input id="id_input_text" type="text" placeholder="请输入妳的芳名" style="background-color:transparent" />
        <script type="text/javascript">
            $(document).ready(
                // 匿名函数
                function () {
                    // 输入框获得焦点时,变色 (注意不要加on)
                    $("#id_input_text").focus(
                        // 匿名函数
                        function() {
                            // 变色
                            $(this).css("background-color","black").css("color","white");
                        }
                    );
                    // 输入框失去焦点时,变色 (注意不要加on)
                    $("#id_input_text").blur(
                        // 匿名函数
                        function() {
                            // 变色
                            $(this).css("background-color","transparent").css("color","black");
                        }
                    );
                }
            );
        </script>
        
        <p class="sgcenter">
            <b>注意:</b>
            $("id_input_text").focus();<br/>
            $("id_input_text").blur();<br/>
            输入框 获得 或 失去 焦点时,变色
        </p>
        
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>

效果如下:

mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时一瞬间，会发生 mousedown 事件。

mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：

实例

     $("#id_p").mousedown(function(){  
    
  alert("Mouse down over p1!");  
    
});

mouseup()

当在元素上松开鼠标按钮时，会发生 mouseup 事件。

mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：

实例

     $("#id_p").mouseup(function(){  
    
  alert("Mouse up over p1!");  
    
});

代码如下:

      <script type="text/javascript">
        $(document).ready(
            // 匿名函数
            function() {
                // 绑定mouse down事件
                $("p").mousedown(
                    // 匿名函数
                    function() {
                        // 变色 
                        $(this).css("background-color","black").css("color","white");
                        NSLog("jquery: mouse down");
                    }
                );
                // 绑定mouse up事件
                $("p").mouseup(
                    // 匿名函数
                    function() {
                        // 变色 
                        $(this).css("background-color","transparent").css("color","black");
                        NSLog("jquery: mouse up");
                    }
                );
                
                
            }
        );
    </script>
        
        <p class="sgcenter">
            <b>注意:</b>$("p").mousedown();<br/>
            $("p").mouseup();<br/>
            鼠标click一次时,会执行一次down和up事件
        </p>
        
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>

效果如下:

比较keypress、keydown与keyup

keydown：在键盘上按下某键时发生，一直按着,则会一直不断地触发（就像这样,想像一下,当你的脸被人按在键盘上aaaaaaaaaaaaaaaaaaaaaaaa...,opera浏览器除外），它返回的是键盘代码;
keyup：用户松开某一个按键时的一瞬间才会触发，与keydown相对，返回键盘代码.
keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符,所以不会触发，所以监听无效，换句话说，只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键,则keypress同样会一直不断地触发。(就像你的脸被人按在键盘上一样)

注意: key press 对于按下shift alt command 是不会执行事件处理函数的!!!

计算打字的次数:(类似于在线打字速度测试那种)

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>


        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }

        p {
            /*safari*/
            -webkit-transition: all 0.4s;
            transition: all 0.2s;
        }
    </style>

    <!-- 引入 jquery 2.1.4 -->
    <!--[if gte IE 9]><!--> 
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <!--<![endif]-->

</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
          <input id="id_input_text" type="text" placeholder="请输入26个字母" size="30" style="background-color:transparent;" />
        <p> 按键次数:<span id="id_span_count">0</span></p>
        <p> 总共用时:<span id="id_span_timer">0</span></p>
        <script type="text/javascript">
        var totalNumber = 0;
        // 开始时间,结束时间
        var startTime = 0;
        var endTime = 0;

        $(document).ready(
            // 匿名函数
            function() {
                // 绑定key press事件
                $("#id_input_text").keypress(
                        function() {
                            if (totalNumber == 0) {
                                startTime = new Date().getTime();   
                            }                            
                            endTime = new Date().getTime();
                            $("#id_span_count").text(totalNumber+=1);
                            $("#id_span_timer").text((endTime - startTime)/1000 + 's');
                        }
                );
            }
        );
        </script>
        
        <p class="sgcenter">
            <b>注意:</b>$("id_input_text").keypress();<br/>
            每按一个键就执行一次
        </p>
        
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    
</body>  
</html>

效果如下:

附录:

jQuery 选择器

请使用我们的 jQuery 选择器检测器(牛X html_527.html) 来演示不同的选择器。

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	class="intro" 的所有元素
.class1,.class2	$(".intro,.demo")	class 为 "intro" 或 "demo" 的所有元素
element	$("p")	所有 <p> 元素
el1,el2,el3	$("h1,div,p")	所有 <h1>、<div> 和 <p> 元素

:first	$("p:first")	第一个 <p> 元素意思是:页面里所有的p元素中,第一个出现的p
:last	$("p:last")	最后一个 <p> 元素意思是:页面里所有的p元素中,最后一个出现的p
:even	$("tr:even")	所有偶数 <tr> 元素
:odd	$("tr:odd")	所有奇数 <tr> 元素

:first-child	$("p:first-child")	属于其父元素的第一个子元素的所有 <p> 元素, 意思是:选择所有的p元素,which,p 是它父元素的第一个子元素
:first-of-type	$("p:first-of-type")	属于其父元素的第一个 <p> 元素的所有 <p> 元素??? 意思是:选择所有的p元素,which,当一个父元素有很多p子元素时,选择这些p子元素中的第1个
:last-child	$("p:last-child")	属于其父元素的最后一个子元素的所有 <p> 元素, 意思是:选择所有的p元素,which, p 是它父元素的最后一个子元素
:last-of-type	$("p:last-of-type")	属于其父元素的最后一个 <p> 元素的所有 <p> 元素??? 意思是:选择所有的p元素,which,当一个父元素有很多p子元素时,选择这些p子元素中的最后一个
:nth-child(n)	$("p:nth-child(2)")	属于其父元素的第二个子元素的所有 <p> 元素, 意思是:选择所有的p元素,which,p是它父元素的第n个子元素
:nth-last-child(n)	$("p:nth-last-child(2)")	属于其父元素的第二个子元素的所有 <p> 元素，从最后一个子元素开始计数, 意思是:选择所有的p元素,which,p是它父元素的倒数第n个子元素
:nth-of-type(n)	$("p:nth-of-type(2)")	属于其父元素的第二个 <p> 元素的所有 <p> 元素??? 意思是:选择所有的p元素,which,当一个父元素有很多个p子元素时,选择这些p子元素中的第n个
:nth-last-of-type(n)	$("p:nth-last-of-type(2)")	属于其父元素的第二个 <p> 元素的所有 <p> 元素，从最后一个子元素开始计数 ??? 意思是:选择所有的p元素,which,当一个父元素有很多个p子元素时,选择这些p子元素中的倒数第n个
:only-child	$("p:only-child")	属于其父元素的唯一子元素的所有 <p> 元素意思是:选择所有的p元素,which,该p元素是它父元素唯一的一个子元素
:only-of-type	$("p:only-of-type")	属于其父元素的特定类型的唯一子元素的所有 <p> 元素 ??? 意思是:选择所有的p元素,which,当一个父元素有n个p子元素,且n == 1时

parent > child	$("div > p")	<div> 元素的直接子元素的所有 <p> 元素意思是:选择所有的p元素,which,该p元素是它父元素的子元素,而不是孙元素
parent descendant	$("div p")	<div> 元素的后代的所有 <p> 元素意思是:选择所有的p元素,which,该p元素可以是子元素,也可以是孙元素,曾孙元素...
element + next	$("div + p")	每个 <div> 元素紧挨着的相邻的下一个兄弟元素,且该兄弟元素必须是<p> 元素 ??? 意思是:选择唯一一个p元素,该p元素是紧挨着 + 号前的那个兄弟元素的后面???
element ~ siblings	$("div ~ p")	<div> 元素同级的所有 <p> 元素 ??? 意思是:选择所有的p元素,该p元素只要是~号前面的那个元素的兄弟元素即可! 意思是:选择所有的div的兄弟元素,只要该兄弟元素是p即可

:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 值从 0 开始）
:gt(no)	$("ul li:gt(3)")	列举 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列举 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的输入元素 ???

:header	$(":header")	所有标题元素 <h1>, <h2> ...
:animated	$(":animated")	所有动画元素
:focus	$(":focus")	当前具有焦点的元素
:contains(text)	$(":contains('Hello')")	所有包含文本 "Hello" 的元素
:has(selector)	$("div:has(p)")	所有包含有 <p> 元素在其内的 <div> 元素意思是:选择所有的div元素,只要div的子或孙或曾孙有p元素即可
:empty	$(":empty")	所有空元素
:parent	$(":parent")	选择所有含有子元素或者文本的父级元素。意思是:选择所有的父元素,该父元素一定含有子元素或者文本
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
:visible	$("table:visible")	所有可见的表格
:root	$(":root")	文档的根元素
:lang(language)	$("p:lang(de)")	所有带有以 "de" 开头的 lang 属性值的 <p> 元素意思是:选择所有的p元素,which,lang属性的值,是以de开头即可

[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='default.htm']")	所有带有 href 属性且值等于 "default.htm" 的元素
[attribute!=value]	$("[href!='default.htm']")	所有带有 href 属性且值不等于 "default.htm" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有带有 href 属性且值以 ".jpg" 结尾的元素 ??? 意思是:选择所有的元素,which,href属性是以.jpg结尾即可
[attribute\|=value]	$("[title\|='beyond']")	所有带有 title 属性且值等于 'beyond' 或者以 'beyond' 后跟连接符作为开头的字符串意思是:选择所有的元素,which,title属性等于 beyond 或者 beyond-dream,这样以连接符相连即可
[attribute^=value]	$("[title^='girl']")	所有带有 title 属性且值以 "girl" 开头的元素意思是:选择所有的元素,which,title属性以是girl开头即可
[attribute~=value]	$("[title~='lolita']")	所有带有 title 属性且值包含单词 "lolita" 的元素 ??? 意思是:选择所有的元素,which,title属性值含有 lolita 单词即可,注意是一个完整的单独的单词
[attribute*=value]	$("[title*='some']")	所有带有 title 属性且值包含字符串 "some" 的元素 ??? 意思是:选择所有的元素,which,title属性值含有字符串some即可,如somebody,someone都可以

:input	$(":input")	所有 input 元素
:text	$(":text")	所有带有 type="text" 的 input 元素
:password	$(":password")	所有带有 type="password" 的 input 元素
:checkbox	$(":checkbox")	所有带有 type="checkbox" 的 input 元素
:submit	$(":submit")	所有带有 type="submit" 的 input 元素
:reset	$(":reset")	所有带有 type="reset" 的 input 元素
:button	$(":button")	所有带有 type="button" 的 input 元素
:image	$(":image")	所有带有 type="image" 的 input 元素
:file	$(":file")	所有带有 type="file" 的 input 元素
:enabled	$(":enabled")	所有启用的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有选定的 input 元素
:checked	$(":checked")	所有选中的 input 元素

jQuery 事件方法

事件方法触发器或添加一个函数到被选元素的事件处理程序。

下面的表格列出了所有用于处理事件的 jQuery 方法。

方法	描述
bind()	向元素添加事件处理程序
blur()	添加/触发 blur 事件
change()	添加/触发 change 事件
click()	添加/触发 click 事件
dblclick()	添加/触发 double click 事件
delegate()	向匹配元素的当前或未来的子元素添加处理程序
die()	在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序
error()	在版本 1.8 中被废弃。添加/触发 error 事件
event.currentTarget	在事件冒泡阶段内的当前 DOM 元素
event.data	包含当前执行的处理程序被绑定时传递到事件方法的可选数据
event.delegateTarget	返回当前调用的 jQuery 事件处理程序所添加的元素
event.isDefaultPrevented()	返回指定的 event 对象上是否调用了 event.preventDefault()
event.isImmediatePropagationStopped()	返回指定的 event 对象上是否调用了 event.stopImmediatePropagation()
event.isPropagationStopped()	返回指定的 event 对象上是否调用了 event.stopPropagation()
event.namespace	返回当事件被触发时指定的命名空间
event.pageX	返回相对于文档左边缘的鼠标位置
event.pageY	返回相对于文档上边缘的鼠标位置
event.preventDefault()	阻止事件的默认行为
event.relatedTarget	返回当鼠标移动时哪个元素进入或退出
event.result	包含由被指定事件触发的事件处理程序返回的最后一个值
event.stopImmediatePropagation()	阻止其他事件处理程序被调用
event.stopPropagation()	阻止事件向上冒泡到 DOM 树，阻止任何父处理程序被事件通知
event.target	返回哪个 DOM 元素触发事件
event.timeStamp	返回从 1970 年 1 月 1 日到事件被触发时的毫秒数
event.type	返回哪种事件类型被触发
event.which	返回指定事件上哪个键盘键或鼠标按钮被按下
focus()	添加/触发 focus 事件
focusin()	添加事件处理程序到 focusin 事件
focusout()	添加事件处理程序到 focusout 事件
hover()	添加两个事件处理程序到 hover 事件
keydown()	添加/触发 keydown 事件
keypress()	添加/触发 keypress 事件
keyup()	添加/触发 keyup 事件
live()	在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素
load()	在版本 1.8 中被废弃。添加一个事件处理程序到 load 事件
mousedown()	添加/触发 mousedown 事件
mouseenter()	添加/触发 mouseenter 事件
mouseleave()	添加/触发 mouseleave 事件
mousemove()	添加/触发 mousemove 事件
mouseout()	添加/触发 mouseout 事件
mouseover()	添加/触发 mouseover 事件
mouseup()	添加/触发 mouseup 事件
off()	移除通过 on() 方法添加的事件处理程序
on()	向元素添加事件处理程序
one()	向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次
$.proxy()	接受一个已有的函数，并返回一个带特定上下文的新的函数
ready()	规定当 DOM 完全加载时要执行的函数
resize()	添加/触发 resize 事件
scroll()	添加/触发 scroll 事件
select()	添加/触发 select 事件
submit()	添加/触发 submit 事件
toggle()	在版本 1.9 中被移除。添加 click 事件之间要切换的两个或多个函数
trigger()	触发绑定到被选元素的所有事件
triggerHandler()	触发绑定到被选元素的指定事件上的所有函数
unbind()	从被选元素上移除添加的事件处理程序
undelegate()	从现在或未来的被选元素上移除事件处理程序
unload()	在版本 1.8 中被废弃。添加事件处理程序到 unload 事件

附:

CSS选择器语法

CSS是用于网页设计可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面，而不用改变页面的标签。在深入研究CSS选择器之前，我们应该先搞懂CSS优先级是如何工作的。比如给一个p标签增加一个类（class），可是执行后该class中的有些属性并没有起作用。通过Firebug查看，发现没有起作用的属性被覆盖了。这个时候CSS选择器优先级的问题了。

当我们写CSS的时候需要注意有些选择器在级联(cascade)上会高于其它选择器，我们写在最后面的选择器将不一定会覆盖前面我们写在同一个元素的样式。那么你如何计算指定选择器的优先级？如果你考虑到将优先级表示为用逗号隔开的四个数字就会相当简单，比如：1, 1, 1, 1 或0, 2, 0, 1

第一个数字(a)通常就是0，除非在标签上使用style属性；
第二个数字(b)是该选择器上的id的数量的总和；
第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red])；
第四个数字(d)计算元素(就像table、p、div等等)和伪元素(就像:first-line等)；
通用选择器(*)是0优先级；
如果两个选择器有同样的优先级，在样式表中后面的那个起作用。
让我们看几个例子，这样或许比较容易理解些：

#sidebar h2 — 0, 1, 0, 1
h2.title — 0, 0, 1, 1
h2 + p — 0, 0, 0, 2
#sidebar p:first-line — 0, 1, 0, 2
在下面的例子中，第一个将会起作用，因为它比第二个优先级高：

#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2
至少基本理解优先级是如何工作的是很重要的，但是一些工具比如Firebug，在我们审查指定元素的时候，按照选择器的优先级列出所有的css选择器对让我们知道在指定元素上哪个选择器是有效的是很有用的，让你非常容易的看到那个选择器作用于一个元素上了。

CSS3 选择器分类

CSS3选择器分类如下图所示：

选择器的语法

1，基本选择器语法

选择器	类型	功能描述
*	通配选择器	选择文档中所有HTML元素
E	元素选择器	选择指定类型的HTML元素
#id	ID选择器	选择指定ID属性值为“id”的任意类型元素
.class	类选择器	选择指定class属性值为“class”的任意类型的任意多个元素
selector1,selectorN	群组选择器	将每一个选择器匹配的元素集合并

2，层次选择器语法

选择器	类型	功能描述
E F	后代选择器（包含选择器）	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
E~F	通用选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

3，动态伪类选择器语法

选择器	类型	功能描述
E:link	链接伪类选择器	选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited	链接伪类选择器	选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:active	用户行为选择器	选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover	用户行为选择器	选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus	用户行为选择器	选择匹配的E元素，而且匹配元素获取焦点

4，目标伪类选择器

选择器	功能描述
E:target	选择匹配E的所有元素，且匹配元素被相关URL指向

5，UI元素状态伪类选择器语法

选择器	类型	功能描述
E:checked	选中状态伪类选择器	匹配选中的复选按钮或者单选按钮表单元素
E:enabled	启用状态伪类选择器	匹配所有启用的表单元素
E:disabled	不可用状态伪类选择器	匹配所有禁用的表单元素

6，结构伪类选择器使用语法

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
E:last-child	作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
E:root	选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同
E F:nth-child(n)	选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.
E F:nth-last-child(n)	选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同
E:nth-of-type(n)	选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type(n)	选择父元素内具有指定类型的倒数第n个E元素
E:first-of-type	选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同
E:last-of-type	选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同
E:only-child	选择父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type	选择父元素只包含一个同类型子元素，且该子元素匹配E元素
E:empty	选择没有子元素的元素，而且该元素也不包含任何文本节点

注：（1），“ul>li:nth-child(3)”表达的并不是一定选择列表ul元素中的第3个子元素li，仅有列表ul中第3个li元素前不存在其他的元素，命题才有意义，否则不会改变列表第3个li元素的样式。

（2），:nth-child(n) 中参数只能是n，不可以用其他字母代替。

（3），:nth-child(odd) 选择的是奇数项，而使用:nth-last-child(odd) 选择的却是偶数项

7，否定伪类选择器

选择器	功能描述
E:not(F)	匹配所有除元素F外的E元素

8，属性选择器语法

选择器	功能描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

注：例<div class="links item"></div>其中a[class="links"]{……} 是找不到匹配元素，只有a[class="links item"]{……}才匹配

CSS 选择器

CSS选择器用于选择你想要的元素的样式的模式。

"CSS"列表示在CSS版本的属性定义（CSS1，CSS2，或对CSS3）。

选择器	示例	示例说明	CSS
.class	.intro	选择所有class="intro"的元素	1
#id	#firstname	选择所有id="firstname"的元素	1
*	*	选择所有元素	2
element	p	选择所有<p>元素	1
element,element	div,p	选择所有<div>元素和<p>元素	1
element element	div p	选择<div>元素内的所有<p>元素	1
element>element	div>p	选择所有父级是 <div> 元素的 <p> 元素	2
element+element	div+p	选择所有紧接着<div>元素之后的<p>元素	2
[attribute]	[target]	选择所有带有target属性元素	2
[attribute=value]	[target=_blank]	选择所有使用target="_blank"的元素	2
[attribute~=value]	[title~=flower]	选择标题属性包含单词"flower"的所有元素	2
[attribute\|=language]	[lang\|=en]	选择一个lang属性的起始值="EN"的所有元素	2
:link	a:link	选择所有未访问链接	1
:visited	a:visited	选择所有访问过的链接	1
:active	a:active	选择活动链接	1
:hover	a:hover	选择鼠标在链接上面时	1
:focus	input:focus	选择具有焦点的输入元素	2
::first-letter	p::first-letter	选择每一个<P>元素的第一个字母	1
::first-line	p::first-line	选择每一个<P>元素的第一行	1
::first-child	p::first-child	指定只有当<p>元素是其父级的第一个子级的样式。	2
::before	p::before	在每个<p>元素之前插入内容	2
::after	p::after	在每个<p>元素之后插入内容	2
::lang(language)	p:lang(it)	选择一个lang属性的起始值="it"的所有<p>元素	2
element1~element2	p~ul	选择<P>元素之后的每一个ul元素	3
[attribute^=value]	a[src^="https"]	选择每一个src属性的值以"https"开头的元素	3
[attribute$=value]	a[src$=".pdf"]	选择每一个src属性的值以".pdf"结尾的元素	3
[attribute*=value]	a[src*="44lan"]	选择每一个src属性的值包含子字符串"44lan"的元素	3
:first-of-type	p:first-of-type	选择每个<P>元素是其父级的第一个<P>元素	3
:last-of-type	p:last-of-type	选择每个<P>元素是其父级的最后一个<P>元素	3
:only-of-type	p:only-of-type	选择每个<P>元素是其父级的唯一<P>元素	3
:only-child	p:only-child	选择每个<P>元素是其父级的唯一子元素	3
:nth-child(n)	p:nth-child(2)	选择每个<P>元素是其父级的第二个子元素	3
:nth-last-child(n)	p:nth-last-child(2)	选择每个<P>元素的是其父级的第二个子元素，从最后一个子项计数	3
:nth-of-type(n)	p:nth-of-type(2)	选择每个<P>元素是其父级的第二个<P>元素	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个<P>元素的是其父级的第二个<P>元素，从最后一个子项计数	3
:last-child	p:last-child	选择每个<P>元素是其父级的最后一个子级。	3
:root	:root	选择文档的根元素	3
:empty	p:empty	选择每个没有任何子级的<P>元素（包括文本节点）	3
:target	#news:target	选择当前活动的#news元素（包含该锚名称的点击的URL）	3
:enabled	input:enabled	选择每一个已启用的输入元素	3
:disabled	input:disabled	选择每一个禁用的输入元素	3
:checked	input:checked	选择每个选中的输入元素	3
:not(selector)	:not(p)	选择每个并非<P>元素的元素	3
::selection	::selection	匹配元素中被用户选中或处于高亮状态的部分	3
:out-of-range	:out-of-range	匹配值在指定区间之外的<input>元素	3
:in-range	:in-range	匹配值在指定区间之内的<input>元素	3
:read-write	:read-write	用于匹配可读及可写的元素	3
:read-only	:read-only	用于匹配设置 "readonly"（只读）属性的元素	3
:optional	:optional	用于匹配可选的输入元素	3
:required	:required	用于匹配设置了 "required" 属性的元素	3
:valid	:valid	用于匹配输入值为合法的元素	3
:invalid	:invalid	用于匹配输入值为非法的元素	3