jQuery基础语法实例入门

本文实例讲述了jQuery基础语法。分享给大家供大家参考。具体分析如下：

此语法规则有两个部分组成:获取jQuery对象和对jQuery对象执行的操作。

代码如下:

$(selector).action()

下面就对以上语法规则进行详细的阐述：
1.$定义jQuery,将被选的DOM对象转换成jQuery对象。
2.selector是选择器，类似于CSS选择器。
3.action()是要对jQuery对象行的操作。
注: $是jQuery的简写。例如：

代码如下:

$("div")

也可以写成以下方式，不过我们习惯上都是上面的写法。

代码如下:

jQuery("div")

实例代码:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>我们</title>
<style type="text/css">
div{
  height:150px;
  width:150px;
  background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").hide();
  });
})
</script>
</head>
<body>
<div></div>
<button>点击隐藏上面方块</button>
</body>
</html>

以上代码中，点击按钮可以将div隐藏。

希望本文所述对大家的jquery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery入门介绍之基础知识

    jQuery入门介绍之基础知识

    JavaScript 库作用及对比 为了简化JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的Web2.0 特性的富客户端页面, 并且兼容各大浏览器 当前流行的JavaScript 库有: jQuery 简介 jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库 jQuery 理念: 写得少, 做得多. 优势如下: 轻量级 强大的选择器 出色的 DOM 操作

  • jQuery选择器基础入门教程

    本文实例讲述了jQuery选择器用法.分享给大家供大家参考,具体如下: 什么是jQuery选择器 使用JavaScript操作页面上得DOM元素时,首先要获取DOM元素.但是原始的javascript只元件根据ID或者TagName获取DOM对象. 在jQuery中则完全不同,jQuery提供了异常强大的选择器用以帮助我们获取页面上的对象,并且将对象以jquery对象的形式返回. 首先来看看什么是选择器. //根据id获取jQuery对象 var jQueryObject=$("#testDiv

  • jquery 常用操作整理 基础入门篇

    jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer,罗马尼亚的Stefan Petre等等. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其宗旨是--WRITE LESS,DO MORE,写更少的代码,做更多的事情. 它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, S

  • jquery 指南/入门基础

    指南/基础 这是一个基础指南,旨在帮助你开始使用jquery.jquery给予你常见问题的解决方法.如果你尚未建立你的测试页面,我建议你创建一个含有下列内容的HTML页:  程序代码   复制代码 代码如下: <html>  <head>  <script type="text/javascript"  src="link/to/jquery.js"></script>  <script type="t

  • JQuery入门基础小实例(1)

    JQuery入门基础小实例(1)

    先展示一下这个例子实现的效果: 页面刚刚加载的时候,显示如图所示: 当在文本框中输入数据后,文本框的红色标识消失,如图所示: 点击确定按钮后,会通过后台来向页面输出数据,如图所示: 前台的代码如下(asp.net): <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <

  • jQuery入门基础知识学习指南

    打开一个网页,如果 HTML 没有完全加载完毕,就去操作页面中元素是不安全的,但是监测 HTML 是否加载完毕呢?jQuery 提供了一个 $(document).ready() 方法,任何 ready 中的代码在 HTML 完全加载完成后才会被执行. $(document).ready(function() { console.log('ready!'); }); 此外,它还有一个简写方式 $(function() { console.log('ready!'); }); $(document

  • jQuery基础_入门必看知识点

    jQuery事件的因果关系是怎么样的一个格式: $("button").click(function(){ }) [正式接触jQuery] (1)jQuery的书写步骤: 1.引入jQuery文件: 2.新建一对script标签来书写jQuery: 3.用jQuery的方式进行代码分离: 4.按照jQuery用谁就选谁的原则去书写代码: [jQuery的css修改] alert()弹出一个警示框:弹出的信息可以写在小括号里面作为参数: css() 1.单属性获取,格式css("

  • jQuery基础语法实例入门

    本文实例讲述了jQuery基础语法.分享给大家供大家参考.具体分析如下: 此语法规则有两个部分组成:获取jQuery对象和对jQuery对象执行的操作. 复制代码 代码如下: $(selector).action() 下面就对以上语法规则进行详细的阐述: 1.$定义jQuery,将被选的DOM对象转换成jQuery对象. 2.selector是选择器,类似于CSS选择器. 3.action()是要对jQuery对象行的操作. 注: $是jQuery的简写.例如: 复制代码 代码如下: $("di

  • Kotlin 基础语法实例详解

    Kotlin 基础语法实例详解 包 定义和引入Java一样,在文件开头, 行结束不需要" ; " package com.test.hello import android.os.Bundle 变量 只读变量,val 开头,初始化后不能再赋值,相当于Java的 final 变量 val a: Int = 1 val b = 1 //类型自动推断为Int val c: Int //没有初始化时必须指定类型 c = 1 //初始化 可变变量, var 关键字开头 var x = 10 x

  • VBS脚本基础语法实例讲解

    VBS脚本基础语法实例讲解

    目录 引言 一.编辑VBS的相关软件 二.变量的定义 三.输入与输出 1.输入 2.输出 四.判断语句 五.循环语句 1.do – loop 循环 2.for – next 循环 总结 引言 最近在学习VBS语言的时候,搜索了不少资料,但是往往只是介绍一下什么整人代码.表白代码之类的,很少有基础的语法讲解,因此,我在这里写一篇博文来进行一下VBS基础语法的讲解. 一.编辑VBS的相关软件 对于基于VBS的编程,我们可以直接使用记事本来进行编写. 打开的方式为: 1.在桌面右键然后点击新建,接下来

  • Go语言入门教程之基础语法快速入门

    Go语言是一个开源的,为创建简单的,快速的,可靠的软件而设计的语言. Go语言实(示)例教程,通过过实例加注释的方式来介绍Go语言的用法. Hello World 第一个程序会输出"hello world"消息.源代码如下: 复制代码 代码如下: package main import "fmt" func main() {     fmt.Println("hello world") } //通过go run来运行Go程序 $ go run h

  • JQuery基础语法小结

    1.$(document)将document对象转换为jquery 复制代码 代码如下: $(document).ready(function(){     alert("hello world"); }); 2.获取所有的超链接对象,并且增加onclick事件:其实在底层jquery对象获得的每个标签的数组,因此我们不需要进行循环了 复制代码 代码如下: $(document).ready(function(){     $("a").click(function

  • jQuery基础的工厂函数以及定时器的经典实例分析

    1. jQuery的基本信息: 1.1 定义: jQuery是JavaScript的程序库之一,它是JavaScript对象和实用函数的封装, 1.2 作用: 许多使用JavaScript能实现的交互特效,使用jQuery都能完美地实现,下面通过五个用途来更多的了解. 1.2.1 访问和操作DOM元素 1.2.2 制作页面样式 1.2.3 对页面时间的处理 1.2.4 方便地使用jQuery插件 1.2.5 与Ajax的完美结合 1.3 优势: 想必有人就会问了:为什么人们会更多的选择jQuer

  • Python入门之基础语法详解

    一.我的经历及目标 在学习python之前:我学习过C/C++,在学校期间做过很多的项目,已经有两年多了,算是对C/C++非常的熟悉了,精通不敢说,但是对于面向过程和面向对象有很深刻的认识,做过很多的开发,学习数据库,MFC, QT, linux下利用C/C++进行服务器的开发,QT环境下进行模拟QQ的开发- 听说python挺火的,我也来尝试一门新的语言,python和c有80%的相似性,毕竟是用C来开发的语言,但是是面向过程的一门语言,有C++的继承等相似的特性,感觉更有信心学会它了,毕竟可

  • 10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例

    10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例

    本文主要涉及python爬虫知识点: web是如何交互的 requests库的get.post函数的应用 response对象的相关函数,属性 python文件的打开,保存 代码中给出了注释,并且可以直接运行哦 如何安装requests库(安装好python的朋友可以直接参考,没有的,建议先装一哈python环境) windows用户,Linux用户几乎一样: 打开cmd输入以下命令即可,如果python的环境在C盘的目录,会提示权限不够,只需以管理员方式运行cmd窗口 pip install

  • vue.js入门教程之基础语法小结

    前言 Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容易的和其他库整合.代码压缩后只有24kb. 以下代码是Vue.js最简单的例子, 当 input 中的内容变化时,p 节点的内容会跟着变化. <!-- html --> <div id="demo"> <p>{{message}}</p> <input v-model="message"> </div> new

随机推荐