前面我们了解到了如何获取使用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. 利用正则表达式，给Json字段加引号

    { scheme: [ { query: [ [{ id: 'stdNumber', title: "标准号", compareType: 2 }], [{ id: 'CnName ...

  2. sql查询一个班级中总共有多少人以及男女分别多少人

    --创建视图 create view StuClassView as SELECT s.ID ,s.StuName ,s.StuAge ,s.StuAddress ,s.StuTel ,s.Class ...

  3. 移动端版本兼容js

    移动端版本兼容js <!--移动端版本兼容 --> <script type="text/javascript"> var phoneWidth = par ...

  4. redis-消息订阅

    使用办法: 订阅端: Subscribe 频道名称 发布端: publish 频道名称发布内容 客户端例子: redis > subscribe news Reading messages... ...

  5. [HOWTO] Install Sphinx for A Script Pro

    Hi, Here's a small howto on installing Sphinx Search (http://sphinxsearch.com/) and configuring it t ...

  6. SVN 使用的简单整理

    1. 在SVN服务器上创建存储Dir,并和个人主机建立联系.      现在SVN服务器上创建一个存储文件夹svn_storeDir.然后在个人电脑上建立一个本地文件夹local_Dir.    进入 ...

  7. House Of Hello恶搞包为什么如此受热捧!

    凤凰时尚    在大多数人的心中,奢侈品都是昂贵的,摆在精美的橱窗中,动辄上万的价格,高贵而冷艳,也让很多人望而却步.然而,最近在很多时尚年轻一族中却流传着这样一句话“昂贵不等于奢侈,奢侈是一种生活态 ...

  8. BZOJ 1024 生日快乐

    Description windy的生日到了,为了庆祝生日,他的朋友们帮他买了一个边长分别为 X 和 Y 的矩形蛋糕.现在包括windy,一共有 N 个人来分这块大蛋糕,要求每个人必须获得相同面积的蛋 ...

  9. iso 开发学习--简易音乐播放器（基于iPhone4s屏幕尺寸）

    三个按钮  一个进度条 贴图(软件中部分图片,来自网络,如果侵犯了您的权益,请联系我,会立刻撤下) 核心代码 // // ViewController.m // 08-10-MusicPlayer / ...

  10. 把消息送到默认窗口函数里，并非一点用都没有，可能会产生新的消息（以WM_WINDOWPOSCHANGED为例）

    我在追踪执行: procedure TForm1.Button1Click(Sender: TObject); begin panel1.Left:=panel1.Left-; end; 并且屏蔽TW ...