jQuery入门教程
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ 。网站上有对应每一小节的在线练习大家可以去试试。
介绍
------
欢迎学习jQuery。jQuery是一个JavaScript库,如今已发展成为集JavaScript、CSS、DOM、Ajax于一体的框架体系。要想用jQuery,首先要安装上jQuery的开发环境。
首先下载jQuery
----------
在jQuery官网:`<a href="http://jquery.com">http://jquery.com</a>`中下载最新版本的jQuery。
引入jQuery
--------
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
您是否很疑惑为什么我们没有在 script 标签中使用 type="text/javascript" ? 在 HTML5 中,不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言!
jQuery语法
--------
jQuery 语法是为HTML元素的选取编制的,可以对元素执行某些操作。
基础语法是:`$(selector).action()`
美元符号定义jQuery
选择符(selector)"查询"和"查找"HTML元素
jQuery的action()执行对元素的操作
示例:
---
$(this).hide()- 隐藏当前元素
$("p").hide()- 隐藏所有段落
$(".test").hide()- 隐藏所有class = "test" 的所有元素
$("#test").hide()- 隐藏所有 id = "test" 的元素
jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合,接下来的第二章我们将讲解更多的选择器的知识。
传说中的hello world
---------------
在学习新的编程知识的时候,往往都从一个“hello world”例子开始,那么学习jQuery,我们也从先从一个“hello world”开始。
<title>传说中的hello world</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function (){
alert("hello world!");
});
</script>
$(document).ready(function (){
//代码段
});
可以简化成:
$(function (){
//代码段
});
jQuery的优势:
----------
1.轻量级。jQuery非常轻巧,最新的jQuery版本压缩后,大小保持在80k左右。
2.强大的选择器。jQuery允许使用从CSS1到CSS3几乎所有的选择器,以及jQuery自己的高级而复杂的选择器。甚至你可以编写属于自己的选择器。我们将在第二章中详细讲解。
3.出色的DOM操作的封装;jQuery封装了大量常用的DOM操作,让你能轻松地完成各种原本非常复杂的操作。第三章将重点介绍jQuery的DOM操作。
4.可靠的事件处理机制;第四章中我们将详细讲解。
5.完善的Ajax;jQuery将所有的Ajax操作封装到一个函数$.ajax()里,使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关系复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。在第六章将会重点介绍。
6.出色的浏览器兼容性等等。但是jQuery2.0及后续版本将不再支持IE6/7/8浏览器。
jQuery入门教程的更多相关文章
- jQuery入门教程-CSS样式操作大全
1.获取样式 2.设置样式 3.追加样式 4.移除样式 5.重复切换anotherClass样式 6.判断是否含有某项样式 7.设置 CSS 属性 参数 描述 name 必需.规定 CSS 属性的名称 ...
- jQuery入门教程-文档操作方法
一.append()和appendTo() 1.1 append()方法 <body> <p>好好学习</p> <button>append() 方法& ...
- jquery 基础教程[温故而知新二]
子曰:“温故而知新,可以为师矣.”孔子说:“温习旧知识从而得知新的理解与体会,凭借这一点就可以成为老师了.“ 尤其是咱们搞程序的人,不管是不是全栈工程师,都是集十八般武艺于一身.不过有时候有些知识如果 ...
- WCF入门教程(四)通过Host代码方式来承载服务 一个WCF使用TCP协议进行通协的例子 jquery ajax调用WCF,采用System.ServiceModel.WebHttpBinding System.ServiceModel.WSHttpBinding协议 学习WCF笔记之二 无废话WCF入门教程一[什么是WCF]
WCF入门教程(四)通过Host代码方式来承载服务 Posted on 2014-05-15 13:03 停留的风 阅读(7681) 评论(0) 编辑 收藏 WCF入门教程(四)通过Host代码方式来 ...
- Kendo UI for jQuery使用教程:入门指南
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- jQuery 快速入门教程
内容目录 jQuery 入门 什么是jQuery 如何使用jQuery jQuery的运行原理 如何选择jQuery版本 ready() 准备就绪时执行代码 jQuery 核心:选取元素 使用jQue ...
- ABP(现代ASP.NET样板开发框架)系列之2、ABP入门教程
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之2.ABP入门教程 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...
- 转载:TypeScript 简介与《TypeScript 中文入门教程》
简介 TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构 ...
- 推荐10个适合初学者的 HTML5 入门教程
HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
随机推荐
- Android-studio开发 快捷键
这会儿正在学android开发,使用的是Android-studio 记录一下开发工具默认的 快捷键
- Lua面向对象
lua中的table就是一种对象,但是如果直接使用仍然会存在大量的问题,如下: 1 Account = {balance = 0}2 function Account.withdraw(v)3 Acc ...
- 百钱买百鸡问题 php版本
/* * 百钱买百鸡问题 * * 我国古代数学家张丘建在<算经>一书中曾提出过著名的“百钱买百鸡”问题,该问题叙述如下:鸡翁一,值钱五:鸡母一,值钱三:鸡雏三,值钱一:百钱买百鸡,则翁.母 ...
- 理解css margin
前提是对display:block元素 1 margin对没有width属性的元素,能影响其宽度,对于有width的则不起作用: 高度方面不受影响 此特性可用来排版 2 margin 与百分比 普通的 ...
- Oracle数据库基础知识2
字符操作相关_1 1.CONCAT关键字作用:连接字符串语法:CONCAT(字串1, 字串2)例如: CONCAT('hello','world') FROM DUAL; 注意:Oracle的CONC ...
- 页面上使用 Thymeleaf 的内联js不当造成了 java.lang.StackOverflowError: null 问题
由于在页面上内联js使用不当,从而在从 Controller 跳转到页面时发生了以下错误: java.lang.StackOverflowError: null at org.thymeleaf.ut ...
- mysql临时禁用触发器
mysql支持设定session变量,并且有带入到触发器中使用的能力,故可以间接的设置触发器失效 思路是: 在执行前设定一个session变量,执行过程中判断该变量的值(没有设定该变量的值时该变量默认 ...
- java类初始化的过程
在复习Thinking in java的过程中看到了相关内容,顺便整理一下,像下面一样的代码具体的执行顺序(ABCD都是类) public class A { public A(String text ...
- Android下Cocos2d创建HelloWorld工程
最近在搭建Cocos2d的环境,结果各种问题,两人弄了一天才能搞好一个环境-! -_-!! 避免大家也可能会遇到我这种情况,所以写一个随笔,让大家也了解下如何搭建吧- 1.环境安装准备 下载 tadp ...
- 动态调频DVFS_转
转自: Linux Core Power Management User's Guide (v3.14) http://processors.wiki.ti.com/index.php/Linux_C ...