前面我们了解到了如何获取使用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. Dedecms自定义sql 出现错误Safe Alert: Request Error step 2!

    Dedecms自定义执行sql: SELECT body FROM dede_addonarticle WHERE aid = (select max(aid) fromdede_addonartic ...

  2. sphinx （coreseek）——2、区段查询实例

    首先需要知道区段查询的定义: 索引系统需要通过主查询来获取全部的文档信息,一种简单的实现是将整个表的数据读入内存,但是这可能导致整个表被锁定并使得其他操作被阻止(例如:在MyISAM格式上的INSER ...

  3. C++函数重载遇到了函数默认参数情况

    一.C++中的函数重载 什么是函数重载? 我的理解是: (1)用一个函数名定义不同的函数: (2)函数名和不同参数搭配时函数会有不同的含义: 举例说明: #include <stdio.h> ...

  4. ps批量修改图片

    批量更改图片尺寸的ps脚本 高端干货!PHOTOSHOP实用脚本大合集

  5. Python中的Warnings模块忽略告警信息

    写了个小工具,其中涉及到从远程数据库中查询并返回,数据库是utf8编码,但是我的工具用的是GB2312编码,因此在返回数据的时候,有部分数据出现了:Truncated incorrect DECIMA ...

  6. 【译】UI设计基础(UI Design Basics)--为iOS设计(Design for iOS)(二)

    2.1 为iOS设计(Design for iOS) iOS体现以下主题: 遵从:UI帮助用户理解界面内容并与内容交互,但绝不会与内容相互冲突. 清晰:文本在任何尺寸下都是清晰易读,图标精确易懂,装饰 ...

  7. 工作总结：MFC自写排序算法（升序）

    最近一个需求里面需要实IP升序排序,用了qsort,结果是内部排序,甚至感觉排序结果不可预测性,于是自己写了一个外部排序. 需求如下:一个指针里面有N条记录,每条记录包含:IP,偏移地址,保留位,均占 ...

  8. tomcat源码阅读

    1      工具准备 需要SVN.Maven.JDK.Eclipse.Eclipse M2插件 2      下载源码及发布包 源码在这里:http://svn.apache.org/repos/a ...

  9. BZOJ 1070 修车

    Description 同一时刻有\(N\)位车主带着他们的爱车来到了汽车维修中心.维修中心共有\(M\)位技术人员,不同的技术人员对不同的车进行维修所用的时间是不同的.现在需要安排这\(M\)位技术 ...

  10. jQuery折叠风琴

    这个效果用jQuery做是很方便的,根本不需要搞得很复杂. 网上有些效果DEMO不仅用了jQuery还引用一两个封装文件,真是匪夷所思. 最初想到了toggle: jQuery(document).r ...