前面我们了解到了如何获取使用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. js浏览器键盘事件控制(转自新浪微博)

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  2. 原生JS写Ajax的请求函数

    一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...

  3. 一份React-Native学习指南-感谢分享

    自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull requests! React-Native学习指南 本指南汇集React ...

  4. 简述安装android开发环境

    1, 安装java sdk2, 安装andoroid sdk3, 在环境变量里配置java和andoroid sdk的路径4, 部署eclipse,并在eclipse上安装ADT 补充: 步骤3之后需 ...

  5. Keil c51现No Browse information available

    keil c51 不能使用:Go to Definition of....的解决方法 最近使用keil c51 开发usb固件,当向vc一样使用Go to Definition of....时,出现警 ...

  6. X-Plosives

    uvaLive 3644:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&pa ...

  7. ORACLE和MONGODB，必须也得进入。

    先在WIN下面操作一下. 参考的是<MONGODB权威指南>

  8. KVM如何以HADOOP作共享存储？

    看到西部数码的作法. 回想IBM的SMARTCLOUD作法,这主要就是应用了HDFS? 外加上HBASE和ZOOKEEPER保驾的? 然后,再想到,这HDFS和OPENSTATCK的SWIFT...纠 ...

  9. 【HDOJ】2717 Catch That Cow

    bfs. /* 2717 */ #include <iostream> #include <cstdio> #include <cstring> #include ...

  10. The difference between text mode and binary mode with file streams

    FIO14-C. Understand the difference between text mode and binary mode with file streams     Skip to e ...