当前位置：文档之家 › 第十讲 jQuery

第十讲 jQuery

  • 格式：ppt
  • 大小：1.59 MB
  • 文档页数：20

下载文档原格式

  / 20

合集下载

jquery使用方法

jquery使用方法

jquery使⽤⽅法jQuery是⽬前使⽤最⼴泛的javascript函数库。

据统计，全世界排名前100万的⽹站，有46%使⽤jQuery，远远超过其他库。

微软公司甚⾄把jQuery作为他们的官⽅库。

对于⽹页开发者来说，学会jQuery是必要的。

因为它让你了解业界最通⽤的技术，为将来学习更⾼级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。

⼀、选择⽹页元素jQuery的基本设计和主要⽤法，就是"选择某个⽹页元素，然后对其进⾏某种操作"。

这是它区别于其他函数库的根本特点。

使⽤jQuery的第⼀步，往往就是将⼀个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。

选择表达式可以是CSS选择器：1 $(document)//选择整个⽂档对象2 $('#myId')//选择ID为myId的⽹页元素3 $('div.myClass')//选择class为myClass的div元素4 $('input[name=first]')//选择name属性等于first的input元素也可以是jQuery特有的表达式：1 $('a:first')//选择⽹页中第⼀个a元素2 $('tr:odd')//选择表格的奇数⾏3 $('#myForm :input')//选择表单中的input元素4 $('div:visible') //选择可见的div元素5 $('div:gt(2)')//选择所有的div元素，除了前三个6 $('div:animated')//选择当前处于动画状态的div元素⼆、改变结果集如果选中多个元素，jQuery提供过滤器，可以缩⼩结果集：1 $('div').has('p'); //选择包含p元素的div元素2 $('div').not('.myClass'); //选择class不等于myClass的div元素3 $('div').filter('.myClass'); //选择class等于myClass的div元素4 $('div').first(); //选择第1个div元素5 $('div').eq(5); //选择第6个div元素有⼀些时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动⽅法：1 $('div').next('p'); //选择div元素后⾯的第⼀个p元素2 $('div').parent(); //选择div元素的⽗元素3 $('div').closest('form'); //选择离div最近的那个form⽗元素4 $('div').children(); //选择div的所有⼦元素5 $('div').siblings(); //选择div的同级元素三、链式操作选中⽹页元素以后，就可以对它进⾏某种操作。

jQuery教程PPT课件

jQuery教程PPT课件

.ห้องสมุดไป่ตู้
14
元素操作：
• remove() 删除节点 例 jQuery(‘ul li’).remove() 也可在remove() 中添加过滤条件 jQuery(‘ul li’).remove(‘li[title!=菠萝]’)
• empty() 清空节点 jQuery(‘ul li:eq(1)’).empty() 清空第二个li 元素中的内容
注意与基本过滤选择器的区别
.
11
表单过滤选择器
• :enabled 选取所有的可见的元素 • :disabled 选取所有的不可见的元素 • :checked 选取所有的选中的元素(单选框、复选框) • :selected 选取所有的被选中的元素(下拉菜单)
.
12
表单选择器
• :input 选取所有的<input>、<textarea>、<select>、 <button>元素
• 事件冒泡 如果想阻止冒泡的话可以用event.stopPropagation()
• 阻止事件的默认行为 可以采用event.preventDefault() • 如果上面两个都想阻止 可以直接在fn中return false • 事件对象的属性
event.type:获取事件的类型 如click dbclick event.preventDefault():阻止事件的默认行为 event.stopPropagation():阻止事件的冒泡 event.target() 获取触发事件的元素 event.relatedTarget() 获取相关元素
.
8
可见性过滤选择器 • :hidden 选取所有的不可见的元素

酷站代码新手教程：10个jQuery特效讲解

酷站代码新手教程：10个jQuery特效讲解

酷站代码新手教程：10个jQuery特效讲解jQuery已经不是什么新鲜的事儿，记得第一次听说是在catch the digital flow上。

总把它认为是非常难的东西，也就没有认真去了解他了。

直到学完CSS的大部分内容，才开始接触这种"write less, do more" 的Javascrīpt框架。

今天，这篇文章的最重要内容是来自Web Designer Wall的一篇教程，一篇包含了10个jQuery特效的教程。

这里不打算全文翻译，想以自己的语言来表达，或许这样更方便大家理解/自己以后学习，也可能更准确地描述。

提示：教程中所用的jQuery 版本为1.2.3。

这篇文章是为jQuery 新手而写的。

先试试看？View jQuery Demos｜Download Demo ZIPjQuery是如何工作的?首先，你需要下载一个jQuery版本，并将它插入到<head>标签内。

然后，你将需要写函数来告诉jQuery做些什么，下面的这个图表将告诉你jQuery是怎样工作的（点击图片，查看大图）：！如何获取元素（Get the element）?书写 jQuery 函数是一个非常简单的事（多亏了精彩的说明书）。

关键是你要学习如何获取你想要实现的效果的确切元素。

•$("#header") = 获取 id="header" 的元素•$("h3") = 获取所有<h3>•$("div#content .photo") = 获取<div id="content">里所有用class="photo"定义的元素•$("ul li") = 获取所以 <ul> 中 <li> 的元素•$("ul li:first") = 只获取<ul>中第一个<li>1.简单的下拉面板让我们来开始这个简单的下拉面板特效吧(view demo)，或许你已经见过很多次，现在，自己试试吧：当包含class="btn-slide"的元素被点击，它会下拉/上提<divid="panel">里的元素。

jquery的基本用法

jquery的基本用法
以下几种写法都是正确的：
1. $("#msg").html(); 2. $("#msg")[0].innerHTML; 3. $("#msg").eq(0)[0].innerHTML; 4. $("#msg").get(0).innerHTML;
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用e q或get(n)方法或者索引号获 取，要注意，e q返回的是jquery对象，而 get(n)和索引返回的是dom元素对象。 如要获取第三个 <div>元素的内容。有如下两种方法：
1. $("div").eq(2).html();
//调用jquery对象的方法
2. $("div").get(2).innerHTML; //调用dom的方法属性
3、 同 一 函数实 现set和get Jquery中的很多方法都是如此，主要包括如下几个：
1. $("#msg").html();
//返回id为msg的元素节点的html内容。
DWR的注释(annotations)使用及反...
如:
extjs 面向对象实例解析 Ajax：拥抱JSON，让XML走开 DWR的web.xml配置 AJAX如何与后台交互
1. $("#msg").html();­­>通过ID
2. $("div").html(); $("input").val(); ­­>通过元素名(jQuery获取的是一个集合)
2、jQuery对象与dom对象 的 相 互转 换 2.1只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，普通的dom对 象一般可以通过$()转换成jquery对象。 如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。

jQuery中（function（$）{}）（jQuery）详解

jQuery中（function（$）{}）（jQuery）详解

jQuery中（function（$）{}）（jQuery）详解简单的说(function($){//code})(jQuery)声明了⼀个匿名函数，也就是将jQuery对象作为参数传给函数给⼤家举个例⼦// 全局var str = "全局字符串...";(function () { // 第1层(function () { // 第2层(function () { // 第3层(function () { // 第4层层数越多，访问全局越慢console.time('全局');for (var i=0; i<1e6; i++) {str += Math.random().toString().substr(2, 2);}console.timeEnd('全局');})();})();})();})();// 局部(function () { // 第1层(function () { // 第2层(function () { // 第3层(function () { // 第4层var str = "内部字符串...";var random = Math.random;console.time('内部');for (var i=0; i<1e6; i++) {str += random().toString().substr(2, 2);}console.timeEnd('内部');})();})()})();})();运⾏代码就可以看到效果了，⽐较慢，骚等⽚刻。

我刚刚测试发现⼀些内存⼩的电脑容易直接导致浏览器崩溃、chrome武装到⽛齿了，连字符串都缓存，看不出多⼤效果、和速度应该没关系，我是这么认为的。

(function($){// code})(jQuery)jQuery插件众多，你⽆法确定⾃⼰使⽤的变量或者⽅法名不于其他插件重名，所以需要将所有插件代码封装到⼀个匿名函数当中；由于插件使⽤了jQuery所以需要导⼊jQuery到匿名函数中，同时使⽤$变量引⽤（因为⼤家已经习惯了使⽤$)。

JQUERY知识点

JQUERY知识点

J Q U E R Y知识点(总18页) -CAL-FENGHAI.-(YICAI)-Company One1-CAL-本页仅作为文档封面，使用请直接删除基于属性的选择器在HTML中，几乎所有元素都具有属性，比如：1.<img src=""alt=""width=""height=""border="0"/>2.<input type="text"name="email"value=""size="80"/>上面两个HMTL元素中包含了九个属性。

利用jQuery，我们可以根据元素的属性和属性值来对元素进行选择。

一起看看以下例子中的选择器：3.$(document).ready(function(){4.5. lick(function(){6.7. alert("You'vejustselectedanimagewhosewidthis600px");8.9. });10.11. lick(function(){12.13. alert("You'vejustselectedanimagewhosewidthisnot600px");14.15. });16.17. ocus(function(){18.19. alert("Thisinputhasanamewhichendswith'email'.");20.21. });22.23.});基于属性的选择器在HTML中，几乎所有元素都具有属性，比如：1.<img src=""alt=""width=""height=""border="0"/>2.<input type="text"name="email"value=""size="80"/>上面两个HMTL元素中包含了九个属性。

jquery简单教学


JQuery编程
JQuery简介 简介
普通JavaScript的缺点：每种控件的操作方式不统一，不同浏 览器下有区别，要编写跨浏览器的程序非常麻烦。因此出现了 很多对JavaScript的封装库，比如Prototype、Dojo、ExtJS、 JQuery等，这些库对JavaScript进行了封装，简化了开发。这 些库是对JavaScript的封装，也就是咱们调用JQuery的一句函 数，JQuery内部这句函数帮我们调用JavaScript中的代码几十 JQuery JavaScript 句，因为JQuery就是JavaScript语法写的一些函数类，内部仍 然是调用JavaScript实现的，所以并不是代替JavaScript的。 使用JQuery的代码、编写JQuery的扩展插件等仍然需要 JavaScript的技术，Jquery本身就是一堆JavaScript函数。 Jquery是最火的JavaScript库，已经被集成到VS2010了，得到 了MS的支持，MS的Ajax toolkit和JQuery结合也是最方便， JQuery的扩展插件也是非常多。
幻灯片 10
2012/5/16
JQuery编程
JQuery的迭代 的迭代
如何判断对象是否存在，jQuery选择器返回的是一 个对象数组(数组中的每个对象还是Dom对象)，调 用text()、html()、click()之类方法的时候其实是对数 组中每个元素迭代调用每个方法，因此即使通过id 选择的元素不存在也不会报错，如果需要判断指定 的id是否存在，应该写： if ($("#btn1").length <= 0) { alert("id为btn1的元素不存在！"); }
JQuery编程

jQuery教程学习

jQuery教程jQuery其实很简单，相信您看了CSS学习网精心编写的jQuery速成教程后，一定会被它的优雅、轻巧吸引住，而且如果您掌握了它，定能成为提升薪水的一个资本。

本节并没有涉及到jQuery如何编写，只为大家解决几个常见问题，因为这也是面试中常常遇到的几个问题。

如果你掌握了jQuery可以成为提升工资的一个资本。

另外我写教程的时候需要一边发布一边写，因此如果当你看到某节教程的标题不是【蓝色加粗字体、标题后面无精品推荐】这些条件，那么劝大家不要看此教程，因为它还没发育好呢！课程列表：第一章：基础篇- 对象的获取第一节：jQuery速成- 向jQuery进军！第二节：jQuery速成- 核心！第三节：jQuery速成- 核心方法的使用第四节：jQuery速成- 基本对象获取第五节：jQuery速成- 层级对象获取第六节：jQuery速成- 简单对象获取第七节：jQuery速成- 内容对象的获取和对象可见性！第八节：jQuery速成- 对象获取进阶第九节：jQuery速成- 子元素的获取第十节：jQuery速成- 表单对象的获取第十一节：jQuery速成- 元素属性的设置与移除第二章：进阶篇- 对象的筛选第十二节：jQuery速成- 过滤第十三节：jQuery速成- 查找第十四节：jQuery速成- 串联第三章：文本篇- 对象文本处理第十五节：jQuery速成- 内部插入第十六节：jQuery速成- 外部插入第十七节：jQuery速成- 包裹第十八节：jQuery速成- 替换，删除和复制第十九节：jQuery速成- 元素的赋值第四章：样式篇- 层叠样式表的处理第二十节：jQuery速成- 样式的设置与定义第五章：提高篇- jQuery中的事件机制第二十一节：jQuery速成- 页面的载入事件与事件处理第二十二节：jQuery速成- 鼠标事件与交互第二十三节：jQuery速成- 焦点事件第二十四节：jQuery速成- 键盘事件第二十五节：jQuery速成- 其他事件第六章：效果篇- jQuery中的动画效果第二十六节：jQuery速成- 动画实现的基本方法第二十七节：jQuery速成- 元素的渐隐渐显第二十八节：jQuery速成- 元素的滑动第二十九节：jQuery速成- 自定义动画第七章：工具篇- jQuery中的工具使用第三十节：jQuery速成- 浏览器种类及其特性的检测第三十一节：jQuery速成- 数组和对象的操作第三十二节：jQuery速成- 工具杂项第八章：高级篇- Ajax异步请求及调用实战第三十三节：jQuery速成- Ajax请求(讲解篇)第三十四节：jQuery速成- Ajax请求(实战篇)第一章：基础篇- 对象的获取第一节：jQuery速成 - 向jQuery进军！jQuery速成- 向jQuery进军！jQuery其实很简单，相信您看了CSS学习网精心编写的jQuery速成教程后，一定会被它的优雅、轻巧吸引住，而且如果您掌握了它，定能成为提升薪水的一个资本。

jQuery 教程 w3cshool

jQuery 教程Next PagejQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

每一章中用到的实例<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("p").click(function(){$(this).hide();});});</script></head><body><p>If you click on me, I will disappear.</p></body></html>TIY通过点击 "TIY" 按钮来看看它是如何运行的。

您将学到什么在本教程中，您将通过文字以及许多在线实例，学到如何通过使用 jQuery 网页应用 JavaScript 效果。

jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。

基本上，您将学习到如何选取 HTML 元素，以及如何对它们执行类似隐藏、移动以及操作其内容等任务。

您需要具备的基础知识在您开始学习 jQuery 之前，您应该对以下知识有基本的了解：∙HTML∙CSS∙JavaScript如果您需要首先学习这些科目，请在我们的首页查找这些教程。

jQuery 实例通过实例来学习！在 W3School，您将找到很多能够编辑并测试的 jQuery 实例。

jQuery 实例jQuery 参考手册在 W3School，您将找到包含所有 jQuery 对象和函数的完整参考手册。

Jquery学习文档—重点学习汇总

JQuery文档一、认识jQuery随着Web 2.0的兴起，JavaScript越来越受到重视，一系列的JavaScript库也蓬勃发展起来。

从早期的Prototype、Dojo到2006年的jQuery，再到2007年的Ext JS，互联网正在掀起一场JavaScript风暴。

jQuery以其独特优雅的姿态，始终处于这场风暴的中心，受到越来越多的人的追捧。

1.1JavaScript和JavaScript库1.1.1JavaScript简介在正式介绍jQuery之前，有必要先了解一下JavaScript。

JavaScript是Netscape公司开发的一种脚本语言（scripting language）。

JavaScript的出现使得网页和用户之间实现了一种实时的、动态的和交互的关系，使网页包含更多活跃的元素和更加精彩的内容。

JavaScript自身存在3个弊端，即复杂的文档对象模型（DOM），不一致的浏览器实现和缺乏便捷的开发、调试工具。

正当JavaScript从开发者的视线中渐渐隐去时，一种新型的基于JavaScript 的Web技术-Ajax（Asynchronous JavaScript And XML，异步的JavaScript和XML）诞生了。

而使人们真正认识到Ajax技术的强大的导火索是Google公司推出的一系列新型Web应用，例如Gmail、Google Suggest和Google Map等。

互联网基于JavaScript的应用也越来越多，使JavaScript不再是一种仅仅用于制作Web页面的简单脚本。

1.1.2 JavaScript库作用及对比为了简化JavaScript的开发，一些JavaScript库诞生了。

JavaScript库封装了很多预定义的对象和实用函数，能帮助使用者轻松建立有高难度交互的Web 2.0特性的富客户端页面，并且兼容各大浏览器。

下面是目前几种流行的JavaScript库的介绍和对比。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

before()
在匹配的元素前插入内容
insertBefore()
将匹配的元素插入到指定的元素前
remove() empty() clone() replaceWith() wrap()
从DOM中删除所有匹配的元素 清空元素的所有后代节点 复制节点 替换节点 包装匹配的节点，每个匹配的节点都被一个 新元素包装起来
元素集合 元素集合
$(„*‟)：选择所有的元素 $(„input,#div2‟)：选择所有的<input>元 素和id=”div2”的元素
$("#btn1").click(function() {{{ { $("#btn2").click(function() $("#btn3").click(function() $("#btn5").click(function() $("#btn6").click(function() { $('#div1').css('width', '20px').css('height', $(„.inner‟).css(„background-color‟, „red‟); $('div').hide(); $(„*‟).css(„background-color‟, „white‟); $('input,#div2').css('background-color','gray'); '20px'); }); }); });}); });
本章目标
了解什么是jQuery
使用jQuery选择器获得操作对象 使用jQuery处理页面事件
使用jQuery动画方法创建简单动画
jQuery简介

jQuery是一个轻量的JavaScript库，是由John Resig在2006年1月创建的一个 开源项目 jQuery常规作用可以概括为以下7个方面：
attr()
追加前：<p class=‟first‟></p> addClass() $(function() { 追加样式 追加：$(„p‟).addClass(„second‟); 追加后：<p class=‟first second‟></p> var x = 10, y = 10; 移除样式 $(„p‟).removeClass(„first‟).removeClass(„second‟)：两次将<p>的样式移除， //使用XPath选择器依据title属性选择<a>元素 removeClass() 也可以写成：$(„p‟).removeClass(„first second‟); $('a[title]').mouseover(function(e) { $(„btn‟).toggle(function(){ 切换样式，交替执行一组函数代码 toggle() //this在jQuery中指当前获取的对象，此例中是<a>元素 //代码1，例如：显示元素 },function(){ var imgtitle = this.title ? "<p>" + this.title + "</p>" : "<p>无标题图片</p>"; //代码2，例如：隐藏元素 }); var tip = "<div id='tip' style='position:absolute;text-align:center'>"+ imgtitle+"<img src='" + this.href + "' alt='大图预览'/></div>"; 样式上的重复切换 $(„p‟).toggleClass(„first‟)：如果存在first样式，就移除它；如果不存在，就 toggleClass() 添加first样式 $('body').append(tip);//追加创建的<div>到<body>中 判断是否存在某个样式，返回布尔值 hasClass() //为新追加的<div>设置位置样式并显示出来 $(„p‟).hasClass(„first‟)：判断<p>是否存在first样式，存在则返回true，不存 在返回false $('#tip').css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show(); 可以获取和设置样式属性值 $(„p‟).css(„width‟)：获取<p>元素的width属性 css() $(„p‟).css(„color‟:‟#f0aa03‟,‟height‟:‟200px‟)：设置<p>元素的样式属性 }).mousemove(function(e) { //设置鼠标移动到<a>元素上的样式 获取或设置元素的宽高，默认单位是px $(„p‟).width(200)：设置<p>元素宽200px，也可以写成$(„p‟).width(„200px‟); height() $('#tip').css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }); $(„p‟).height()；获取<p>元素的高度 }).mouseout(function(e) { width() 获取元素相对于当前浏览器窗体的相对偏移， $(„p‟).offset().left：获取<p>左偏移 offset() $('#tip').remove(); //移除追加到<body>中的<div> 包含left和top两个属性 $(„p‟).offset().top：获取<p>上偏移 }); $(„textarea‟).scrollTop(200)：设置<textarea>元素垂直滚动条滚动到距顶端 获取和设置元素的滚动条距顶端和左侧的距 scrollTop() }); 离。 200像素的距离 scrollLeft()
编写第一个jQuery应用

工厂函数$() $(document).ready(function(){})
比较
执行时机
$(document).ready(function(){})
网页中的DOM结构绘制完毕，但可能有 些DOM元素关联的内容还没有下载完毕 同时编写多个，可以依次执行 简写一：$().ready(function(){}); 简写二：$(function(){});
返回值
元素 元素集合 元素集合
示例
$(„#div1‟)：选取id=”div1”的元素 $(„.first‟)：选取所有class=”first”的元素 $(„input‟)：选择所有的<input>元素
* selector1,selector2,…sel ectorN
选择所有元素 将每一个选择器匹配的元 素合并后一起返回

获取页面中的元素 修改页面外观 改变页面内容 响应用户在页面上的操作 为页面添加动态效果 页面无刷新获取服务器端信息 简化常规的JavaScript代码
编写第一个jQuery应用

配置jQuery环境

在页面中添加对于jQuery库文件的引用
编写jQuery代码
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { alert("Hello World!"); }); </script>
prepend()
向每个匹配的元素前置内容
prependTo()
将匹配的元素前置倒指定的元素，与 prepend()正好相反
after()
在匹配的元素后插入内容
原始标记：<p>first:</p> 插入内容：$(„p‟).after(„<strong>选择器</strong>‟); 插入后：<p>first</p><strong>选择器</strong>
原始标记：<p>first:</p> 插入内容：$(„p‟).before(„<strong>选择器</strong>‟); 插入后： <strong>选择器</strong><p>first</p> 原始标记：<p>first:</p> 插入内容：$(„<strong>选择器</strong>‟).insertBefore(„p‟); 插入后：<strong>选择器</strong><p>first</p> $(„ul li:eq(1)‟).remove()：删除<ul>中的第2个<li>子元素 $(„div‟).empty()：清空<div>元素内的所有内容，但<div>元素本身还保留 $(„ul li‟).clone().appendTo(„ul‟)：复制<li>元素并且将其追加到<ul>元素中 $(„p‟).replaceWith(„<b>first</b>‟)：用<b>first</b>替换<p>元素 包装前：<strong>选择器</strong><strong>动画</strong> 包装：$(„strong‟).wrap(„<b></b>‟) 包装后：<b><strong>选择器</strong></b><b><strong>动画</strong></b>