`
tianhei
  • 浏览: 208192 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jQuery概述

阅读更多

jQuery 官方网站:www.jquery.com

国内jQuery网站:www.jquery.org.cn   www.cnjquery.com

 

jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。

jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 库。
jQuery 很容易学习。

 

使用jQuery首先要导入jQuery库文件:

<script type="text/javascript" src="jquery-1.5.1.js"></script>

 

$代表jQuery对象本身,所以所有jQuery的对象和方法都在$里。

主要是看$的参数是什么,就是操作什么。(重点)

 

DOM对象转换为jQuery对象:

$(document);

例如:

<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		alert("ok");
	})
</script> 

第三行$(document).ready()相当于

var s = $(document);

 s.ready();

 ready()方法的作用是当页面中的dom加载完毕后执行参数中的函数。

 

把页面上标签为a的元素转化为jQuery对象:

$("a");

例如:

<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("a").click(function(){
			alert("-----");
		});
	})
</script>
<body>
	<a href="#">click me</a>
</body>  

click()方法是jQuery里定义的方法。

 

获得界面中id=myId的标签:

$("#myId");//一定要有井号

<p id="myId">你好</p>

 

Dom对象和jQuery对象的相互转化(重点):

Dom对象转化为jQuery对象的好处是jQuery提供了大量的方法。

 

 使用jquery改变标签id=hello的css属性:

 $(#hello).css("color","red");

 

 

二、jQuery API

1、ready(function(){});:当xxx加载完毕的时候调用ready参数里的函数。

<head>
	<script src="js/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			alert('jquery');
		});
	</script>
</head>

上面语句的作用是:当页面加载完毕后,执行alert操作。

 

2、click(function(){});:jquery里响应鼠标点击事件。 

<head>
	<script src="js/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#submitButton").click(function(){
				alert('点击了按钮');
			});
		});
		
	</script>
</head>
<body>
	<input type="button" id="submitButton" value="提交"/>
</body>

 上面语句的功能是当页面加载完毕后,点击按钮的时候 jquery使用了id选择器调用click方法,执行alert操作。

 

3、keyup(function(){});:jquery里响应键盘按键弹起的事件。  

<head>
	<script src="js/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#userNameText").keyup(function(){
				alert('文本框里输入了内容');
			});
		});
	</script>
</head>
<body>
	<input type="text" id="userNameText"/>
</body>

上面语句的功能是当页面加载完毕后,输入框里没一次输入内容的时候 jquery都会使用id选择器调用keyup方法,执行alert操作。

 

4、val():jquery获得元素值的方法。  

<head>
	<script src="js/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#submitButton").click(function(){
				var userName = $("#userNameText").val();
				alert('点击了按钮'+userName);
			});
		});
	</script>
</head>
<body>
	<input type="text" id="userNameText"/>
	<input type="button" id="submitButton" value="提交"/>
</body>

上面语句的功能是当页面加载完毕后,当点击提交按钮的时候 jquery会根据id选择器调用val()方法得到值,执行alert操作。

 

5、get():请求服务器,使用get方式,包括三个参数。

     第一个参数:请求服务器的url,是一个字符串类型。

     第二个参数:传递给服务器的参数,是一个Map类型。

     第三个参数:回调函数,即:当服务器处理完毕之后返回给浏览器的时候,所要调用的方法。

     例子见6.

 

6、html():jquery里填充相应元素内容的方法。 

  

<head>
	<script src="js/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#submitButton").click(function(){
				alert('点击了按钮');
				//1.获取文本框里的内容
				var userName = $("#userNameText").val();
				//2.将这个内容发送到服务器
				var url="success.jsp";
				$.get(url,null,function(response){
					//3.接收服务器返回的数据,填充到div中
					$("#result").html(response);
				});
			});
			$("#userNameText").keyup(function(){
				alert('文本框里输入了内容');
			});
		});
	</script>
</head>
<body>
	<input type="text" id="userNameText"/>
	<input type="button" id="submitButton" value="提交"/><br>
	<div id="result"></div>
</body>

get()方法必须是直接由"$"点出来的。

回调函数的参数response是由服务器端返回的。

html()方法是jquery根据id选择器选择到的元素内容

 

7、addClass()、removeClass():可以给某个节点添加或删除一个class。

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    第8讲 jQuery概述

    jQuery概述

    jQuery 3.1 标准课程第一章 jQuery概述jQuery安

    jQuery 3.1 标准课程第一章 jQuery概述jQuery安装

    jQuery 3.1 标准课程第一章 jQuery概述jQuery简

    jQuery 3.1 标准课程第一章 jQuery概述jQuery简介

    jQuery 3.1 标准课程第一章 jQuery概述jQuery语

    jQuery 3.1 标准课程第一章 jQuery概述jQuery语法

    JQuery权威指南 源代码

    前 言 第1章 jquery开发入门/1 1.1 jquery概述/2 1.1.1 认识jquery /2 1.1.2 jquery基本功能/2 1.1.3 搭建jquery开发环境/3 1.1.4 编写第一个简单的jquery应用/3 1.1.5 jquery程序的代码风格/5 1.2 jquery...

    Jquery学习笔记分享

    第1章. JQuery概述 2 1. Jquery基本作用 2 2. 优点 2 3. 引入JQuery 2 4. 代码风格 2 5. 其他 JavaScript 库 3 6. 多个库之间的冲突 3 7. jQuery对象和DOM对象 3 第2章. jQuery选择器 4 1. jQuery优点 4 2. 基本选择...

    jQuery权威指南-源代码

    1.1 jQuery概述/2 1.1.1 认识jQuery /2 1.1.2 jQuery基本功能/2 1.1.3 搭建jQuery开发环境/3 1.1.4 编写第一个简单的jQuery应用/3 1.1.5 jQuery程序的代码风格/5 1.2 jQuery的简单应用/7 1.2.1 jQuery访问...

    说明jQuery的一些基本信息和一些基本了解

    jQuery概述,说明了jQuery的一些基本信息和一些基本了解

    jQuery权威指南366页完整版pdf和源码打包

    前 言 第1章 jquery开发入门/1 1.1 jquery概述/2 1.1.1 认识jquery /2 1.1.2 jquery基本功能/2 1.1.3 搭建jquery开发环境/3 1.1.4 编写第一个简单的jquery应用/3 1.1.5 jquery程序的代码风格/5 1.2...

    Jquery 自定义动画概述及示例

    animate(params, options) 返回值:jQuery 概述 用于创建自定义动画的函数。 这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或...

    jQuery.docx

    1.jQuery概述 什么是jQuery jQuery是一个写的更少,但做得更多的js函数库 jQuery优势 可以简化js代码 可以像css那样获取元素 可以兼容常用的浏览器 jQuery版本 1.x 支持IE6+ 2.X 支持IE9+ 3.X 支持IE9+ 不同版本会...

    jQuery常用知识概述

    jQuery常用知识概述,希望对大家有所帮助

    jquery最全资料

    jquery最全资料,最详细的课程,包括jquery概述,选择器,操作dom,及监听事件都非常好的资料

    JQuery Mobile概述.pdf

    JQuery Mobile概述.pdf 学习资料 复习资料 教学资源

    jquery click([data],fn)使用方法实例介绍

    click([[data],fn]) 返回值:jQuery 概述 触发每一个匹配元素的click事件。 这个函数会调用执行绑定到click事件的所有函数。 参数 fnFunctionV1.0 在每一个匹配元素的click事件中绑定的处理函数。 [data],fnString,...

    RIA应用开发:8-jQuery插件概述.ppt

    RIA应用开发:8-jQuery插件概述.ppt

    jQuery技术内幕 深入解析jQuery架构设计与实现原理

     《jquery技术内幕:深入解析jquery架构设计与实现原理》在分析每个模块时均采用由浅入深的方式,先概述功能、用法、结构和实现原理,然后介绍关键步骤和分析源码实现。让读者不仅知其然,而且知其所以然。事实上,...

    初始jQuery

    1. jQuery是一个优秀的JavaScript库,使用他可大大提高Web客户端的开发效率 2. 要使用jQuery的功能,需要首先引用jQuery库文件 3. $(document).ready()与window.onload使用场合类似,当有差异 4. jQuery代码中常见的...

    王兴魁jQuery实战系列视频

    教程名称:王兴魁jQuery实战系列视频课程目录:【】CSDN ITCAST王兴魁jQuery参考代码及PDF课件【】JQuery实战第一讲:概述、环境准备及入门实例【】JQuery实战第三讲:横向纵向菜单【】JQuery实战第二讲:可以编辑的...

    JQuery教程自学笔记

    JQuery教程自学笔记 1 一、概述 4 二、JQuery技术综述 5 2.1 JQuery基本语法 5 2.1.1 JQuery选择器 6 2.2 JQuery事件响应 8 2.2.1 常见的JQuery事件 9 2.2.2 淡入淡出效果 12 2.2.3 滑动效果 15 2.2.4 动画效果 18 ...

Global site tag (gtag.js) - Google Analytics