`
tianhei
  • 浏览: 211631 次
  • 性别: 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

    #### 一、jQuery概述 1. **什么是jQuery** jQuery是一款优秀的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互等操作,提高了Web开发者的生产力。通过jQuery,开发者可以用更少的代码实现...

    jquery总结学习资料JQuery总结

    **jQuery 概述** jQuery 是一个轻量级的 JavaScript 库,由 John Resig 在2006年创建。它的核心理念是简化 HTML 文档遍历、事件处理、动画和Ajax交互,使得开发者能更高效地编写 JavaScript 代码。jQuery 的易用性...

    jquery-1.9.1.min.js_javascript_jquery_

    **jQuery 概述** jQuery 是一个广泛使用的 JavaScript 库,由 John Resig 于2006年创建。它的核心理念是“写得更少,做得更多”(Write Less, Do More),通过提供简洁的API,让开发者能够快速、高效地处理网页中的...

    jquery-3.3.1.zip

    **jQuery 概述** jQuery 是一个广泛使用的开源 JavaScript 库,由 John Resig 在2006年创建。它的核心理念是“写得更少,做得更多”(Write Less, Do More),它通过提供简洁、易用的API,极大地简化了网页的交互和...

    jquery3.5.1.7z

    jQuery 概述** jQuery 由 John Resig 在2006年创建,其核心理念是"写得更少,做得更多"(Write Less, Do More)。它通过提供简洁的API,使得开发者能够以更少的代码实现更多的功能。jQuery3.5.1是该库的一个稳定...

    jquery-3.1.1.min_javascript_jquery_

    **jQuery 概述** jQuery 是一个广泛使用的开源 JavaScript 库,由 John Resig 在2006年创建。它的核心理念是“写得更少,做得更多”(Write Less, Do More),通过提供简洁的API,让开发者能够更加高效地处理网页中...

    jQueryDownload.zip

    **jQuery 概述** jQuery 是一个广泛应用于 Web 开发的 JavaScript 库,由 John Resig 于2006年创建。它旨在简化 HTML 文档遍历、事件处理、动画和Ajax交互,使得开发者能够更高效地编写JavaScript代码。jQuery 的...

    苏宁,JQuery

    ### jQuery概述 jQuery是一个快速、简洁的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互等操作。由于其简单易学且功能强大,jQuery已成为Web开发者中最受欢迎的工具之一。 ### jQuery...

    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 是一个轻量级的 JavaScript 库,它极大地简化了 JavaScript 编程,使得网页开发变得更加高效。由 John Resig 在2006年创建,jQuery 自发布以来便受到了广大开发者们的热烈欢迎,因为它提供...

    jQuery 教程.doc

    #### 一、jQuery 概述 - **定义**:jQuery 是一个快速、简洁的 JavaScript 库,它极大地简化了 HTML 文档遍历、事件处理、动画以及 AJAX 交互等任务。 - **特点**:jQuery 的核心特性包括 HTML 元素选取、操作、事件...

    JQuery实战第一讲:概述、环境准备及入门实例

    **一、jQuery概述** jQuery是由John Resig于2006年创建的,它的口号是"Write Less, Do More"。其核心理念是提供简洁的API,让开发者可以用更少的代码完成更多的任务。jQuery的核心特性包括选择器、遍历DOM、操作DOM...

    jquery 学习资料chm中文版

    **jQuery 概述** jQuery 的核心理念是“Write Less, Do More”,它通过提供一套丰富的选择器、DOM 操作、事件处理、动画效果和Ajax交互等方法,使得 JavaScript 编程变得更加简洁和高效。jQuery 几乎涵盖了网页开发...

    jQuery培训讲义

    1. jQuery概述 - 基本概念:jQuery是一个轻量级的JavaScript库,它不仅兼容CSS3,还广泛支持各主流浏览器。jQuery使得开发者处理HTML文档、管理事件、创建动画效果以及实现Ajax交互变得更加简单。 - 能做什么:...

Global site tag (gtag.js) - Google Analytics