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。
分享到:
相关推荐
jQuery概述
jQuery 3.1 标准课程第一章 jQuery概述jQuery安装
jQuery 3.1 标准课程第一章 jQuery概述jQuery简介
jQuery 3.1 标准课程第一章 jQuery概述jQuery语法
#### 一、jQuery概述 1. **什么是jQuery** jQuery是一款优秀的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互等操作,提高了Web开发者的生产力。通过jQuery,开发者可以用更少的代码实现...
**jQuery 概述** jQuery 是一个轻量级的 JavaScript 库,由 John Resig 在2006年创建。它的核心理念是简化 HTML 文档遍历、事件处理、动画和Ajax交互,使得开发者能更高效地编写 JavaScript 代码。jQuery 的易用性...
**jQuery 概述** jQuery 是一个广泛使用的 JavaScript 库,由 John Resig 于2006年创建。它的核心理念是“写得更少,做得更多”(Write Less, Do More),通过提供简洁的API,让开发者能够快速、高效地处理网页中的...
**jQuery 概述** jQuery 是一个广泛使用的开源 JavaScript 库,由 John Resig 在2006年创建。它的核心理念是“写得更少,做得更多”(Write Less, Do More),它通过提供简洁、易用的API,极大地简化了网页的交互和...
jQuery 概述** jQuery 由 John Resig 在2006年创建,其核心理念是"写得更少,做得更多"(Write Less, Do More)。它通过提供简洁的API,使得开发者能够以更少的代码实现更多的功能。jQuery3.5.1是该库的一个稳定...
**jQuery 概述** jQuery 是一个广泛使用的开源 JavaScript 库,由 John Resig 在2006年创建。它的核心理念是“写得更少,做得更多”(Write Less, Do More),通过提供简洁的API,让开发者能够更加高效地处理网页中...
**jQuery 概述** jQuery 是一个广泛应用于 Web 开发的 JavaScript 库,由 John Resig 于2006年创建。它旨在简化 HTML 文档遍历、事件处理、动画和Ajax交互,使得开发者能够更高效地编写JavaScript代码。jQuery 的...
### jQuery概述 jQuery是一个快速、简洁的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互等操作。由于其简单易学且功能强大,jQuery已成为Web开发者中最受欢迎的工具之一。 ### 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 是一个轻量级的 JavaScript 库,它极大地简化了 JavaScript 编程,使得网页开发变得更加高效。由 John Resig 在2006年创建,jQuery 自发布以来便受到了广大开发者们的热烈欢迎,因为它提供...
#### 一、jQuery 概述 - **定义**:jQuery 是一个快速、简洁的 JavaScript 库,它极大地简化了 HTML 文档遍历、事件处理、动画以及 AJAX 交互等任务。 - **特点**:jQuery 的核心特性包括 HTML 元素选取、操作、事件...
**一、jQuery概述** jQuery是由John Resig于2006年创建的,它的口号是"Write Less, Do More"。其核心理念是提供简洁的API,让开发者可以用更少的代码完成更多的任务。jQuery的核心特性包括选择器、遍历DOM、操作DOM...
**jQuery 概述** jQuery 的核心理念是“Write Less, Do More”,它通过提供一套丰富的选择器、DOM 操作、事件处理、动画效果和Ajax交互等方法,使得 JavaScript 编程变得更加简洁和高效。jQuery 几乎涵盖了网页开发...
1. jQuery概述 - 基本概念:jQuery是一个轻量级的JavaScript库,它不仅兼容CSS3,还广泛支持各主流浏览器。jQuery使得开发者处理HTML文档、管理事件、创建动画效果以及实现Ajax交互变得更加简单。 - 能做什么:...