前面我们了解到了如何获取使用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 （二）的更多相关文章

  1. 从零开始学习jQuery (二) 万能的选择器

    本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...

  2. 从零开始学习jQuery(转)

    本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...

  3. 从零开始学习jQuery

    转自:http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html 本系列文章导航 从零开始学习jQuery (一) ...

  4. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

  5. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  6. 从零开始学习jQuery (三) 管理jQuery包装集

    本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...

  7. 从零开始学习jQuery (一) 入门篇

    本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些 ...

  8. 从零开始学习jQuery(剧场版) 你必须知道的javascript

    原文:从零开始学习jQuery(剧场版) 你必须知道的javascript 一.摘要 本文是jQuery系列教程的剧场版, 即和jQuery这条主线无关, 主要介绍大家平时会忽略的一些javascri ...

  9. 《从零开始学习jQuery》：用jQuery操作元素的属性与样式

    元素属性和Dom属性简介 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"> ...

  10. 从零开始学习jQuery (一) 开天辟地入门篇

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章是入门第一篇, 主要是简单介绍jQuer ...

随机推荐

  1. jQuery 元素移除empty() remove()与detach()的区别？

    @1.empty() 删除匹配元素集合中所有的后代字节点元素: <p>hello<span>world</span></p> $("p&quo ...

  2. github 分支 合并

    Git如何进行分支管理?      1.创建分支      创建分支很简单:git branch <分支名>      2.切换分支      git checkout <分支名&g ...

  3. JavaScript 资源装备

    书籍 随着JS的普及,大家能获取到的JS书籍实在太多了,但是在我看来只有很少一部分JS书籍可以提供够新够有意思的内容.以下是我看过之后,觉得很值得推荐给大家的: JavaScript高级程序设计 作者 ...

  4. MYSQL的binary解决mysql数据大小写敏感问题 《转载》

    BINARY不是函数,是类型转换运算符,它用来强制它后面的字符串为一个二进制字符串,可以理解为在字符串比较的时候区分大小写如下:mysql> select binary 'ABCD'='abcd ...

  5. 深入浅出 Java Concurrency (3): 原子操作 part 2

    转:http://www.blogjava.net/xylz/archive/2010/07/02/325079.html 在这一部分开始讨论数组原子操作和一些其他的原子操作. AtomicInteg ...

  6. Android Wear开发 - 数据通讯 - 第三节 : 事件处理

    http://developer.android.com/training/wearables/data-layer/events.html 以下是本人在学习官方开发文档时的笔记,主要是翻译为主,并在 ...

  7. Android Wear开发 - 数据通讯 - 第一节 : 连接数据层

    http://developer.android.com/training/wearables/data-layer/accessing.html Accessing the Wearable Dat ...

  8. 5. repeater图片放大

    当把鼠标放在一张小图片上时,图片会自动放大,离开时它变小. 我们在静态页面中可以用jQuery来操作.如下为html中的源码. <!DOCTYPE html PUBLIC "-//W3 ...

  9. ArrayList LinkedList Vector

    ArrayList是基于数组实现的,没有容量的限制. 在删除元素的时候,并不会减少数组的容量大小,可以调用ArrayList的trimeToSize()来缩小数组的容量. ArrayList, Lin ...

  10. bzoj3668

    noi水题,直接推出来每一位上取什么值才能取1直接搞就可以了 ..] of longint; x,n,i,j,k,t,m,ans:longint; fl:boolean; s:string; ch:c ...