您的位置：360文档中心› jQuery精品教程资料：1-jQuery基础

jQuery精品教程资料：1-jQuery基础

合集下载

jQuery入门教程(很不错)

jQuery入门教程(很不错)

jQuery入门[1]－构造函数/archive/2008/03/05/1091816.html jQuery优点◦体积小（v1.2.3 15kb）◦丰富的DOM选择器(CSS1-3 + XPath) ◦跨浏览器（IE6,FF,Safari,Opera）◦链式代码◦强大的事件、样式支持◦强大的AJAX功能◦易于扩展，插件丰富jQuery的构造函数接收四种类型的参数：jQuery(expression,context)jQuery(html)jQuery(elements)jQuery(fn)第一种根据表达式（ID，DOM元素名，CSS表达式，XPath表达式）找出文档中的元素，并组装成一个jQuery对象返回。

DEMO:DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>jQuery basic title><style type="text/css">.selected{background-color:Yellow;}style><script src="../scripts/jquery-1.2.3.intellisense.js"type="text/javascript">script>head><body><h3>jQuery构造函数h3><ul><li>jQuery(expression,context)li><li>jQuery(html)li><li>jQuery(elements)li><li>jQuery(fn)li>ul><script type="text/javascript">script>body>html>将以下jQuery代码加入文末的脚本块中：jQuery("ul>li:first").addClass("selected");页面运行效果如下：其中jQuery()可替换为快捷方式$()，如果$被其它对象占用，可使用jQuery.noConflict()函数取消快捷方式。

Jquery从入门到进阶(绝对实用)

Jquery从入门到进阶(绝对实用)
一 、jQuery Fundamentals
jQuery about ajaxlinking theory with practicejQuery.ajax( options )通过 HTTP 请求加载远程数据 jQuery 的底层 AJAX 实现。简单易用的高层实现如 $.get, $.post 等options实用的参数有：beforeSend ，success ，complete ，error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求
一 、jQuery Fundamentals
Why we need jQuery?In other words: 1、What can jQuery do? 2、What is its advantage?ery
出色的dom操作的封装
一 、jQuery Fundamentals
jQuery grammar ?CSS 选择器基础语法是： CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明，每条声明由一个属性和一个值组成。 selector {property: value}如：h1 {color:red; font-size:14px;} #red {color:red;}对比jQuery 的选择器：${#red},类似还有class什么的都是一个道理。
jQuery about ajax
jQuery Event
jQuery selector
jQuery grammar
jQuery grammar
一 、jQuery Fundamentals
jQuery grammar ?基础语法是：$(selector).action()美元符号定义 jQuery选择符（selector）“查询”和“查找” HTML 元素jQuery 的 action() 执行对元素的操作联系：CSS 选择器

JQuery基础_ppt

JQuery基础_ppt

成功之路JQuery基础学习目标掌握jQuery 框架和环境基本概念掌握jQuery 的核心函数和对象掌握jQuery 选择器基本用法掌握jQuery 属性用法掌握jQuery 类对象用法掌握jQuery 事件用法掌握jQuery 的效果简单用法了解jQueryAJAX 的功能jQuery 概述基本概念jQuery John Resig javascript 库.CSS3IE 6.0+, FF是建立的一个轻量级兼容，还兼容各种浏览器（1.5+, Safari 2.0+, Opera 9.0+）使用户能更方便地处理HTML 文档、事件、实现动画效果，并且方便地为网站提供Ajax 交互jQuery 能做什么以插件的形式持续地通过开发加入新的功能 1.获取页面的部分内容2.修改页面的外观3.修改页面的内容4.在页面中响应用户的交互5.给页面加上动画6.无刷新返回服务器端的信息7.还提供了改进基本的JavaScript 结构，如迭代和数组操作谁在用jQuery主流javascript 库①Prototype ②Ext ③YUI jQuery:④Dojo ⑤mooTools ⑥jQuery:①短小精悍，支持xpath 查询，dom1-3，css 支持；②简单的动画实现，支持自定义动画；③支持插件开发，现有插件多；④完整的api 文档以及范例，易学；⑤拥有官方UI 程序供使用，效果好。

jQuery 下载当前版本1.4.4官方网站下载：/jQuery 安装和使用在页面头部head js<script type="text/javascript"src="./script/jquery.js"></script>使用语法：中，添加VS2008中可以实现jQuery 的智能提示/KB958502/Releas e/ProjectReleases.aspx?ReleaseId=1736 Aptana StudioFireFox3+ FireBug1.2配置jQuery 环境1、安装vs2008 sp12、安装jq 插件3、添加jq 脚本到工程中应用jQuery 到代码Jquery 框架的结构参考网站jQuery jQuery Blog()官方网站中文社区一个有不少教程和插件 很好的API 查询站点/index.xml240多个jQuery 插件的列表/Terrylee/archive/2007/12/09/the-ultimate-jquery-plugin-list.htmljQuery 核心函数1核心函数$(expression,[context])接收一个包含CSS 选择器的字符串，然后用这个字符串去匹配一组元素$(html)根据提供的原始HTML 标记字符串，动态创建由jQuery 对象包装的DOM 元素将一个或多个元素转化为对象$(elements)DOM jQuery 两种访问Jquery 核心函数的方法①$（expression,[context]）②jQuery （expression,[context]）jQuery 核心函数2函数功能jQuery(callback)$(document).ready()的简写jQuery(expression, [context])根据表达式，查找匹配的一组核心函数语法元素jQuery(html, [ownerDocument])动态创建jQuery 包装的DOM 元素jQuery(elements)将DOM 元素转化为jQuery 对象页面载入jQuery(callback)$(document).ready(callback)绑定一个在DOM 文档载入完成后执行的函数 同一个页面上可以多次使用Document 对象Demo<html><head><script src="js1.4/jquery-1.4.1.js"type="text/javascript"></script><script type="text/javascript">$(document).ready(function () {$('#div1').append('<b>Hello World 1</b></br>');});$(document).ready(function () {$('#div1').append('<b>Hello World 2</b></br>');});</script></head><body><div id="div1"></div></body></html>重复注册demo1_document.htmElements 对象Demo<html><head><script src="js1.4/jquery-1.4.1.js"type="text/javascript"></script><script type="text/javascript">$(document).ready(function() {$("<b>Hello </b>").insertBefore("#p1");$("#p1").after("<b>World</b>");$(document.body).css("background", "red");});</script></head><body><p id="p1">这是一个段落</p></body></html>DOM 对象demo2_elements.html①基本选择器*,class,element, id, selector1, selector2等.通过jQuery返回对象②层级选择器ancestor descendant, parent > child,prev +next ,prev ` siblings③内容选择器contains[text], empty, parent, has[selector]等.④子元素选择器even, odd,eq[index], last, first 等返回jQuery 对象基本选择器*,class,element, id, selector1, selector2等.最常用根据给定的ID 匹配一个元素。

jQuery基础教程

jQuery基础教程

jQuery基础教程一(传说中的ready)首先我们来说明一下什么是JqueryjQuery 是一个新型的JavaScript库.jQuery是一个简洁快速的JavaScript库，它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。

jQuery的设计会改变你写JavaScript代码的方式。

jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery 适合任何JavaScript应用的地方，可用于不用的应用程序。

jQuery是一个轻量级的脚本，其代码非常小巧，JavaScript包只有15K左右。

jQuery支持CSS1-CSS3,以及基本的xPathjQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+第一步ready函数如果你需要一些函数需要在DOM加载就绪以后才能执行,当然window.onload()能实现同样的功能，但当window.onload函数执行的时候，要说明所有东西已经载入，包括图像和横幅等等。

要知道较大的图片下载速度会比较慢，因此用户必须等待大图片下载完毕才能看到window.onload()执行的代码效果，这样就花费了很长的等待时间，这不是我们想要的.$(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。

通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数.(document)意思是说，获取整个网页文档对象（类似的于window.document），$(document).ready意思就是说，获取文档对象就绪的时候。

$(document).ready(function() {// do stuff when DOM is ready//当文档载入后从此处开始执行代码});jquery基础教程二(鼠标点击事件)下面我们来看看jquery如何给DOM 各个元素批量绑定事件<SCRIPT LANGUAGE="JavaScript"><!--$(document).ready(function() {$("div").click(function(){//$("div")就是页面中所有的div标签alert("Hello World!");})})//--></SCRIPT>$("div").click $("div")就是页面中所有的div标签这句话就是给所有的标签为div的元素绑定了一个click事件即当所有div 被鼠标单击的时候执行alert("Hello World!");例子：<html><head><meta http-equiv="Content-Type" content="text/html; charset= gb2312" /><title>jquery基础教程二（demo鼠标点击事件）</title><script language="javascript" src="/demo/jquery.js"></script><SCRIPT LANGUAGE="JavaScript"><!--$(document).ready(function() {$("div").click(function(){alert("Hello World!");})})//--></SCRIPT></head><body><div>Hello World!</div></body></html>jquery基础教程三(css的操作之addClass和removeClass)下面我们看看jquery对css的操作方法addClass和removeClass1）addClass：为每个匹配的元素添加指定的类名。

jquery前端基础知识

jquery前端基础知识

Jquery前端培训材料1. Jquery介绍1.1简介Jquery是一款革命性的JavaScript库，秉承着“以用为本”的设计理念。

倡导“写更少的代码，做更多的事”（write less,do more），极大的提升了JavaScript开发体验。

jquery的核心特性可以总结为:口兼容主流浏览器.支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+等，jQuery2.0及后续版本将不再支持IE6/7/8浏览器。

口具有独特的链式语法和短小清晰的多功能接口。

口具有高效灵活的CSS选择器。

并且可对CSS选择器进行扩展口拥有便捷的插件扩展机制和丰富的插件1.2总体架构Jquery的模块可以分为3部分:入口模块、底层支持模块和功能模块，如图所示，在构造Jquery对象模块中，如果在调用构造函数jQuery()创建jQuery对象时传入了选择器表达式，则会调用选择器Sizzle遍历文档，查找与之匹配的DOM元素，并创建一个包含了这些DOM元素引用的jquery对象。

选择器Sizzle是一款纯JavaScript实现的CSS选择器引擎，用于查找与选择器表达式匹配的元素集合。

工具方法模块提供了一些编程辅助方法，用于简化对jquery对象. DOM元素数组对象字符串等的操作。

Jquery代码整体结构代码如下:(function (window, undefined) {//构建jQuery对象var document = window.document,navigator = window.navigator,location = window.location;var jQuery = (function () {var jQuery = function (selector, context) {return new jQuery.fn.init(selector, context, rootjQuery);},_jQuery = window.jQuery;//............................//............................return jQuery; //981行})();//工具方法:Utilities;//回调函数列表Callbacks//异步队列Deferred//浏览器功能测试Support//数据缓存Cache//属性操作Attributes//队列Queue//事件系统Event//选择器Sizzle//Dom遍历Traversing//Dom操作Manipulation//样式操作CSS//异步请求Ajax//动画Effects//坐标Offset. 尺寸Dimensionswindow.jQuery = window.$ = jQuery;})(window);2. 核心模块2.1 jquery对象从上面的代码中可以看出，jquery的所有代码都被包裹在一个立即执行的匿名表达式中，这种代码结构称为“自调用匿名函数”。

jQuery详细教程

jQuery详细教程

一.jQuery 语法实例$(this).hide() 演示 jQuery hide() 函数，隐藏当前的 HTML 元素。

$("#test").hide() 演示 jQuery hide() 函数，隐藏 id="test" 的元素。

$("p").hide() 演示 jQuery hide() 函数，隐藏所有 <p> 元素。

$(".test").hide() 演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。

jQuery 语法jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action() 美元符号定义 jQuery  选择符（selector）“查询”和“查找” HTML 元素  jQuery 的 action() 执行对元素的操作示例 $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $("p.test").hide() - 隐藏所有 class="test" 的段落 $("#test").hide() - 隐藏所有 id="test" 的元素 提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

在本教程接下来的章节，您将学习到 更多有关选择器的语法。

文档就绪函数您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：$(document).ready(function(){--- jQuery functions go here ----});这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

jQuery培训课程第一课时精品资料

jQuery培训课程第一课时精品资料

子元素过滤选择器示例
选取下列元素,改变其背景色为 # bbffaa 每个class为one的div父元素下的第2个子元素. 每个class为one的div父元素下的第一个子元素 每个class为one的div父元素下的最后一个子元素 如果class为one的div父元素下的仅仅只有一个子元素，那 么选中这个子元素
改变 <body> 内子 <div> 的背景色为 # bbffaa
$(“body>div")
改变 id 为 one 的下一个 <div> 的背景色为 # bbffaa
$("#one+div")
改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景 色为 # bbffaa
$("#two~div")
属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属 性来获取相应的元素
属性过滤选择器示例
选取下列元素,改变其背景色为 # bbffaa 含有属性title 的div元素 $(‘div[title]’) 属性title值等于"test"的div元素 $(“div[title=‘text’]”) 属性title值不等于"test"的div元素(没有属性title的也将被 选中). 属性title值 以"te"开始 的div元素. 属性title值 以"est"结束 的div元素. 怎么显示？ 属性title值 含有"es"的div元素. 选取有属性id的div元素，然后在结果中选取属性title值含 有“es”的 div 元素.
改变 id 为 two 的元素所有 <p> 兄弟元素的背景色为 # bbffaa $("#two"). siblings("p")

JQuery基础

JQuery基础

JQuery基础1、JQuery概念A、Jquery是一个优秀的Javascript框架。

它是轻量级的js库，它兼容CSS3，还兼容各种浏览器，jQuery2.0及后续版本将不再支持IE6/7/8浏览器。

jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

B、JavaScript的缺点:控件的操作方式不统一，不同浏览器容易出观兼容问题。

为了简化操作，出现了许多对JavaScript封装的函数库比如Prototype、JQuery等。

C、JQuery的优点:小巧、方便、功能强大。

插件丰富、开源、免费。

D、VS在VS2010中已经实现自动完成功能，VS2008需要安装VSSP1补丁和VS90SP1-KB958502-X86补丁才能更好的支持，然后引用jquery-1.4.1.js，jquery-1.4.1-vsdoc.js 放在同目录下，VS2008中才会有自动提示和自动完成功能。

E、JQuery文件说明:jquery-1.4.2.js是JQuery主文件。

jquery-1.4.2.min.js是压缩板JQuery主文件。

jquery-1.4.2-vsdoc.js是JQuery在VS中的自动提示功能。

2、JQuery之ReadyA、JQuery的read和Dom onload的区别:onload是所有Dom元素创建完毕触发，而ready 则是Dom元素创建完就触发，这样可以提高网页的响应速度。

3、JQuery内置函数A、$.map(array, function)函数:对数组array中每个元素调用function函数逐个处理，function 函数处理返回一个新的数组。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第一章 jQuery基础
本课目标 学完本门课程后，你能够
制作网页特效 实现表单验证 实现酷炫动画
2/62
课程结构图
3/62
课程项目展示
制作1号店网站网页特效
首页特效 搜索列表页特效 商品详情页特效 注册页特效 登录页特效
演示示例01： 1号店整站
4/32
辅助学习资料推荐 教员备课时根据课程情况在此添加内容，可以是课工 场JavaScript教材、也可以是教员积累的资料，如帮 助手册、经典书籍等
ID选择器 #id
根据给定的id匹配元素 $(" #title")选取id为title的元素
并集选择器
selector1,selector2 ,...,selectorN
将每一个选择器匹配 的元素合并后一起返 回
$("div,p,.title" )选取所有div、p和拥有 class为title的元素
7/62
本章目标 了解jQuery介绍 掌握调用jQuery的方式 掌握jQuery选择器的使用方式 了解jQuery和原生javascript在使用上的区别
8/62
jQuery简介
jQuery由美国人John Resig于2006年创建 jQuery是目前最流行的JavaScript程序库，它是对
</script> 为页面加载事件绑定方法
演示示例02：弹出窗口特效
15/62
$(document).ready()
$(document).ready()与window.onload类似，但 也有区别
window.onload
$(document).ready()
必须等待网页中所有的内容加 网页中所有DOM文档结构绘制完毕后即刻执行，可能
5/62
学习方法
课前
学员可以在前端百Ke查看jQuery相关文档，线上 做习题进行检测，以及线上视频提前预习等等
课上 注意老师讲解的固定语法结构需要记忆 写代码时，要保证代码的规范度
课后 多敲、多练总结归纳自己的错误 在做练习时，逻辑性内容多思考、尝试不同实现思路 6/62
本章任务 制作图书简介页面 使用jQuery美化英雄联盟简介页 制作非缘勿扰页面特效 制作隔行变色的商品列表 制作全网热播视频页面
11/62
jQuery的优势
体积小，压缩后只有100KB左右 强大的选择器 出色的DOM封装 可靠的事件处理机制 出色的浏览器兼容性 使用隐式迭代简化编程 丰富的插件支持
12/62
获取jQuery
进入jQuery官网：
点击此处下载
13/62
jQuery库文件
执行时机 载完毕后（包括图片、flash、 与DOM元素关联的内容（图片、flash、视频等）并没
视频等）才能执行
有加载完
编写个数 同一页面不能同时编写多个 简化写法 无
同一页面能同时编写多个
$(function(){ //执行代码 }) ;
16/62
jQuery选择器
jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执 行某些操作
基础语法是：$(selector).action()
17/62
jQuery基本选择器
基本选择器包括标签选择器、类选择器、ID选择器、 并集选择器和全局选择器
名称
语法构成
描述
示例
标签选择器 element 类选择器 .class
根据给定的标签名匹 配元素
根据给定的class匹配 元素
$("h2" )选取所有h2元素 $(" .title")选取所有class为title的元素
jQuery库分开发版和发布版
名称
大小
说明
在页面中引入jQuery jquery-3.版本号.js（开发 版）
约286KB
jquery-3.版本号.min.js（发 布版）
约94.8KB
完整无压缩版本，主要用于测试、学习和开发
经过工具压缩或经过服务器开启Gzip压缩，主要应用于 发布的产品和项目
演示示例03：基本选择器
22/62
全局选择器
全局选择器可以获取所有元素
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
14/62
jQuery基本语法
使用jQuery弹出提示框
<script> $(document).ready(function() { alert("我欲奔赴沙场征战jQuery，势必攻克之！"); });
20/62
ID选择器
ID选择器根据给定的id匹配元素
$("#author").css("color","#083499"); 设置id为author的元素的字体颜色
演示示例03：基本选择器
21/62
并集选择器
并集选择器用来合并元素集合
$(".intro,dt,dd").css("color","#ff0000");
全局选择器 *
匹配所有元素
$("*" )选取所有元素
演示示例03：基本选择器
18/62
标签选择器
标签选择器根据给定的标签名匹配元素
设置<dd>标签中的内容显示出来
$(document).ready(function(){ $("dt").click(function(){ $("dd").css("display","block"); }); $("h1").css("color","blue");
JavaScript对象和函数的封装 它的设计思想是write less,do more
9/代码
$("tr:even").css("background-color","#e8f0f2");
10/62
jQuery能做什么
访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合
})
设置<h1>标签中的字体颜色为蓝色
演示示例03：基本选择器
19/62
类选择器
类选择器根据给定的class匹配元素
$(".price").css({"background":"#efefef","padding":"5px"}); 设置class为price元素的背景颜色和内边距
演示示例03：基本选择器
相关文档
最新文档