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语法
前 言 第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...
第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. 基本选择...
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的一些基本信息和一些基本了解
前 言 第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...
animate(params, options) 返回值:jQuery 概述 用于创建自定义动画的函数。 这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或...
1.jQuery概述 什么是jQuery jQuery是一个写的更少,但做得更多的js函数库 jQuery优势 可以简化js代码 可以像css那样获取元素 可以兼容常用的浏览器 jQuery版本 1.x 支持IE6+ 2.X 支持IE9+ 3.X 支持IE9+ 不同版本会...
jQuery常用知识概述,希望对大家有所帮助
jquery最全资料,最详细的课程,包括jquery概述,选择器,操作dom,及监听事件都非常好的资料
JQuery Mobile概述.pdf 学习资料 复习资料 教学资源
click([[data],fn]) 返回值:jQuery 概述 触发每一个匹配元素的click事件。 这个函数会调用执行绑定到click事件的所有函数。 参数 fnFunctionV1.0 在每一个匹配元素的click事件中绑定的处理函数。 [data],fnString,...
RIA应用开发:8-jQuery插件概述.ppt
《jquery技术内幕:深入解析jquery架构设计与实现原理》在分析每个模块时均采用由浅入深的方式,先概述功能、用法、结构和实现原理,然后介绍关键步骤和分析源码实现。让读者不仅知其然,而且知其所以然。事实上,...
1. jQuery是一个优秀的JavaScript库,使用他可大大提高Web客户端的开发效率 2. 要使用jQuery的功能,需要首先引用jQuery库文件 3. $(document).ready()与window.onload使用场合类似,当有差异 4. jQuery代码中常见的...
教程名称:王兴魁jQuery实战系列视频课程目录:【】CSDN ITCAST王兴魁jQuery参考代码及PDF课件【】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 ...