jQuery教程PPT课件
jQuery基础入门ppt
jQuery的选择器
jQuery 选择器
选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery 选择器的优点: 简洁的写法
完善的事件处理机制
基本选择器
基本选择器是 jQuery 中最常用的选择 器, 也是最简单的选择器, 它通过元素 id, class 和标记名来查找 DOM 元素
删除节点
remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选 元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删 除. 这个方法的返回值是一个指向已被删除 的节点的引用. empty(): 清空节点 – 清空元素中的所有后 代节点(不包含属性节点).
创建节点和插入节点示例 var newP =$("<p>武广高速铁路即将通车！ </p>"); newP.insertAfter(―#chapter‖); //将创建的newP元 素插入到ID为#chapter的元素之后 或者 newP.appendTo(―body‖); //插入到body元素里
内容过滤选择器示例
改变含有文本 ‘di’ 的 p元素的背景色为 # bbffaa $("p:cotains(di)") 改变不包含子元素(或者文本元素) 的 div 空 元素的背景色为 # bbffaa 改变含有 class 为 mini 元素的 p元素的背景 色为 # bbffaa $("p:has(.mini)") 改变含有子元素(或者文本元素)的div元素 的背景色为 # bbffaa
2024年jq课件(完整版(.
2024年jq课件(完整版(.一、教学内容本节课我们将学习《计算机编程基础》教材第7章“JavaScript基础”的7.3节至7.5节。
详细内容将包括：理解JavaScript的基本语法和结构，掌握变量、数据类型、运算符、控制语句和函数的使用。
二、教学目标1. 理解并掌握JavaScript的基本语法和结构。
2. 学会使用变量进行数据存储，了解常见的数据类型及其转换。
3. 掌握各类运算符的使用，并能编写简单的算术表达式。
4. 学会使用控制语句进行程序流程控制，如条件语句和循环语句。
5. 能够编写简单的函数，理解函数的作用和调用方式。
三、教学难点与重点教学难点：1. 数据类型及其转换规则。
2. 控制语句的语法和使用场景。
3. 函数的定义和调用。
教学重点：1. JavaScript的基本语法和结构。
2. 变量和数据类型的应用。
3. 运算符和表达式的编写。
4. 控制语句和函数的实现。
四、教具与学具准备1. 教师演示用的计算机和投影仪。
2. 学生每人一台计算机，安装有文本编辑器和浏览器。
3. 教材《计算机编程基础》。
五、教学过程1. 导入：通过一个简单的网页实例，展示JavaScript的用途和功能，引发学生兴趣。
2. 理论讲解：a. 介绍JavaScript的基本概念和作用。
b. 详细讲解变量、数据类型、运算符、控制语句和函数的语法和使用方法。
3. 例题讲解：a. 编写一个计算圆的面积的函数。
b. 利用循环语句和条件语句编写一个简易的猜数字游戏。
4. 随堂练习：a. 让学生编写一个计算长方形面积的函数。
b. 让学生利用循环语句和条件语句编写一个简易的计算器程序。
六、板书设计1. JavaScript基础2. 内容：a. 变量、数据类型、运算符b. 控制语句（条件语句、循环语句）c. 函数的定义和调用七、作业设计1. 作业题目：a. 编写一个JavaScript程序，实现用户输入两个数，计算并输出这两个数的和、差、乘积和商。
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 匹配一个元素。
《jq》(完美精品课件
《jq》(完美精品课件一、教学内容本节课我们将深入学习《jq》教材的第3章“事件处理”和第4章“动画效果”。
具体内容包括：事件处理的基本概念、常用事件类型及其使用方法；动画效果的分类、实现原理以及常用动画函数的运用。
二、教学目标1. 理解并掌握事件处理的基本概念和常用事件类型。
2. 学会使用动画效果，能够实现页面元素的动态展示。
3. 培养学生的动手实践能力和问题解决能力。
三、教学难点与重点教学难点：事件处理机制的理解，动画效果的实现原理。
教学重点：常用事件类型的运用，动画函数的使用。
四、教具与学具准备1. 教具：计算机、投影仪、黑板。
2. 学具：教材、笔记本电脑、网络。
五、教学过程1. 导入：通过展示一个实践情景（如：一个动态变化的菜单），引发学生对事件处理和动画效果的兴趣。
2. 知识讲解：1) 事件处理：介绍事件处理的基本概念，讲解常用事件类型（如：click、mouseover、mouseout等）及其使用方法。
2) 动画效果：介绍动画效果的分类（如：淡入淡出、滑动、缩放等），讲解动画效果的实现原理以及常用动画函数（如：slideDown、slideUp、fadeIn、fadeOut等）的运用。
3. 例题讲解：结合实践情景，演示如何使用事件处理和动画效果制作一个动态菜单。
4. 随堂练习：让学生分组练习，每组制作一个具有不同动画效果的页面元素。
六、板书设计1. 事件处理：基本概念常用事件类型2. 动画效果：分类实现原理常用动画函数七、作业设计1. 作业题目：制作一个具有动画效果的轮播图。
2. 答案：1) HTML结构：<div class="carousel"><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div>2) CSS样式：.carousel {width: 300px;height: 200px;overflow: hidden;}.carousel ul {position: relative;}.carousel li {position: absolute;left: 300px;width: 300px;height: 200px;backgroundcolor: f0f0f0; textalign: center;lineheight: 200px;}3) JavaScript代码：$(document).ready(function() { var index = 0;var timer;function playCarousel() {clearTimeout(timer);$('.carousel ulli').eq(index).stop().animate({'left': 0},500).siblings().stop().animate({'left': 300}, 500);index++;if (index >= 4) {index = 0;}timer = setTimeout(playCarousel, 2000);}playCarousel();$('.carousel').mouseover(function() {clearTimeout(timer);});$('.carousel').mouseout(function() {playCarousel();});});八、课后反思及拓展延伸1. 反思：本节课学生对事件处理和动画效果的理解程度，以及实践操作中遇到的问题。
Jquery(很好的教程技术较为全面分享给大家)PPT课件
• $("ul li:last-child")
– 在每个 ul 中查找最后一个 li
• $("ul li:only-child")
– 在 ul 中查找是唯一子元素的 li
– 将一个或多个Dom对象封装jQuery函数功能(即 封装为jQuery包装集)
• $( callback )
– $(document).ready()的简写方式
jQuery( selector, context )
• Selector选择器 "选择"和"过滤". • 选择 不会有默认的范围 • 过滤
Jquery概述
• Jquery是一套Javascript脚本库
– JQuery == JavascriptLibrary – Jquery != JavascriptFrameWork
• 提供了强大的功能函数 • 解决浏览器兼容性问题 • 实现丰富的UI • …………
Jquery的选择器
• 一个简单的Jquery的功能实现 • var $=function(id){
• $("td:empty")
– 查找所有不包含子元素或者文本的空元素
• $("div:has(p)").addClass("test");
– 给所有包含 p 元素的 div 元素添加一个 text 类
• $("td:parent")
– 查找所有含有子元素或者文本的 td 元素
• $("tr:hidden")
– 查找所有 name 包含 'man' 的 input 元素
jQueryAjax精品PPT课件
$.ajax()方法
回调函数
1. beforeSend 在发送请求之前调用，并且传入一个 XMLHttpRequest作为参数。
2. error 在请求出错时调用。传入XMLHttpRequest对象，描 述错误类型的字符串以及一个异常对象（如果有的话）
3. dataFilter 在请求成功之后调用。传入返回的数据以及 "dataType"参数的值。并且必须返回新的数据（可能是处 理过的）传递给success回调函数。
data - 包含来自请求的结果数据 textstatus - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）
只有ajax请求成功后，才触发回调函数 type: 返回内容格式，xml, html, script, json, text, _default
$.getScript()方法
$.getScript(url, [callback]) 动态加载外部js文件并自动执行 打开
url: 待载入 JS 文件地址。 callback: 成功载入后回调函数。
$.getJSON ()方法
$.getJSON(url, [data], [callback]) 加载外部JSON数据文件 打开
jQuery Ajax
Ajax
1. 最底层的方法：$.ajax() 2. 第2层的方法：load()、$.get() 、$.post() 3. 第3层的方法：$.getScript()、$.getJSON()
load()方法
load(url, [data], [callback]) url: 待装入 HTML 网页网址。 data: 发送至服务器的 key/value 数据。也可以接受一个字 符串。 callback: 载入成功时回调函数。打开
《jQuery教程》课件
2
拍卖网站实例
展示了如何使用jQuery构建一个拍卖网站，包括拍卖品展示和出价功能。
3
立即查询功能实现
介绍了如何使用jQuery实现一个实时查询功能，无需刷新页面即可获取数据。
第四部分：jQuery实践经验
1 常见问题解决方案
分享了一些常见的jQuery问题和解决方法， 帮助您更好地应对开发过程中的挑战。
jQuery事件处理程序
展示了如何使用jQuery来处 理各种事件，如点击事件和 鼠标移动事件。
jQuery常用方法介绍
列举了一些常用的jQuery方法，如添加和移除类、隐藏和显示元素等。
第二部分：进阶应用
jQuery动画效果
介绍了如何使用jQuery实现动画效果，如淡入淡出、 滑动和缩放。
jQuery插件的使用
探索了如何使用和定制jQuery插件，以增强您的 Web应用的功能。
jQuery AJAX的相关知识
学习了如何使用jQuery进行异步通信，发送和接收 数据。
jQuery表单验证
教您如何使用jQuery来验证用户输入的表单数据， 确保数据的有效性。
第三部分：项目实战
1
商品列表展示页
演示了如何使用jQuery创建动态商品列表，实现搜索、排序和过滤功能。
《jQuery教程》PPT课件
jQuery是一种快速、简洁的JavaScript库，为Web开发提供了强大的交互功能。 本课程将带您深入了解jQuery的核心概念和实践经验。
第一部分：入门基础
什么是jQuery
介绍了jQuery的定义，以及 它在Web开发中的ቤተ መጻሕፍቲ ባይዱ要性和 应用领域。
jQuery的优势和特点
2 最佳实践经验总结
Jquery讲义,最全面的PPT
当前流行JavaScript库比较
1．Prototype（） 2．Dojo（/） 3．YUI（/yui/） 4．Google Web Toolkit （/webtoolkit/） 5．ExtJS（/） 6．MooTools (/) 7．jQuery（）
随着Web 2.0概念的兴起，人们越来越重视与用户的 交互以及用户使用网站的体验。在浏览器上实现好 的用户体验就不能不提到JavaScript。因此，最近一 段时间，一系列优秀的JavaScript库也应运而生，如 Prototype、Dojo、Mootools、jQuery以及ExtJS等。 可以说是百花齐放，百家争鸣。但是在这众多的 JavaScript库中，jQuery以其独特优雅的姿态，受到 越来越多的人的推崇。
创建DOM节点
DOM Document（文档）中有一些方法用于创建不 同类型的节点。即便在所有的浏览器中的浏览器 document对象并不需要全部支持所有的方法。下面 的表格列出了包含在DOM Level 1中的方法，并列出 不同的浏览器是否支持项。 createElement
插入DOM节点
在已有的HTML文档中插入一个DOM节点， 首先需要考虑插入位置的问题，是在某元素节 点之前还是之后。本节将介绍两个比较常用的 用于插入DOM节点的函数insertBefore和 appendChild函数。 insertBefore函数 insertBefore可以在另一个子元素前插入一个 元素。使用该函数的方法类似如下例子： parentOfBeforeNode.insertBefore( nodeToInsert, beforeNode );
jQuery的优势
jQuery库有一条设计理念，那就是“写的少，做的多”（write less, do more）。其独特的选择器、链式的DOM操作方式、事件绑定机制、封装 完善的Ajax使其在众多优秀的JavaScript库中脱颖而出，独树一帜，赢得 了众多使用者的拥护和信赖。 轻量级： 强大的选择器： 出色的DOM操作的封装 可靠的事件处理机制 完善的Ajax 不污染顶级变量 出色的浏览器兼容性 链式操作方式 行为层与结构层的分离 丰富的插件支持 完善的文档 开源
JQuery基础PPT优秀课件
alert(typeof $)
• 函数（$是函数的前缀）
• 字符串
• 选择DOM元素
• 创建DOM元素
• 对象
• “$”调用jQuery中的自定义函数
CAC - 17
1. $(document).ready()
• 页面HTML框架需要在页面完全加载后才能使用， 因此JavaScript编程时要使用window.onload函数。 如果需要在页面中多处使用该函数，或者其他.js文 件中也包含window.onload，冲突将十分棘手。
);
$('ul').children().css('background','red');
CAC - 11
10.1.3 jQuery设计思想
2、jQuery写法 • 方法函数化 • 取值赋值合体 • 链式操作
CAC - 12
（1） Jquery的方法函数化
window.onload = function(){}; innerHTML = 123; onclick = function(){};
注意：当操作一组元素的时候 • 取值是一组中的第一个 • 赋值是一组中的所有元素
CAC - 15
（3）Jquery的链式操作
var oDiv = $('#div1'); oDiv.html('hello'); oDiv.css('background','red'); oDiv.click(function(){
• 组合形式：
• $("E.C") 选择样式名称为C的E标记 • $("E#I") 选择id为I的E标记
jQuery教程PPT课件
• :text 选取所有的单行文本框
• :password 选取所有的密码框
• :radio 选取所有的单选按钮
• :checkbox 选取所有的复选按钮
• :submit 选取所有的提交按钮
• :image 选取所有的图像按钮
• :reset 选取所有的重置按钮
• :button 选取所有的button
• clone() 复制节点 jQuery(‘#li’).clone().appendTo(‘ul’) 如果想 在复制节点的同时也具有行为 可用clone(true)
• replaceWith() 替换节点 如jQuery(‘p’).replaceWith(‘<strong> 你最不喜欢的水果是?</strong>’)
.
4
层次选择器
• jQuery(‘ancestor descendant’):选取ancestor中的所有的 descendant(后代)元素
• jQuery(‘parent>child’):选取parent中的所有的child(子元素)
• jQuery(‘prev+next’):选取紧跟在prev后的同级别的next元素 可用next()方法代替
ห้องสมุดไป่ตู้
• :lt(index) 选取索引值小于index的所有的元素 从0开始
• :header 选取所有的标题元素 例如h1 h2 h3等
• :animated 选取所有的正在执. 行动画的元素
7
内容过滤选择器 • :contains(text) 选取含有文本内容为text的元素 • :empty 选取不包含子元素的空元素 • :has(selector) 选取含有选择器所匹配的元素的元素 • :parent 选取含有子元素的元素
2024年jq课件(完整版(.
2024年jq课件(完整版(.一、教学内容1. JavaScript简介与运行环境2. 变量声明与数据类型3. 运算符与表达式4. 控制语句：条件语句与循环语句5. 函数定义与调用6. 事件处理与DOM操作基础二、教学目标1. 理解JavaScript的基本概念，掌握其语法特点。
2. 学会使用JavaScript编写基本的程序，实现动态交互效果。
3. 掌握DOM的基本操作，能实现简单的页面动态效果。
三、教学难点与重点1. 教学难点：事件处理机制与DOM操作。
2. 教学重点：JavaScript的基本语法与编程思想。
四、教具与学具准备1. 计算机2. 投影仪3. 教学PPT4. 编程环境（如Visual Studio Code、Sublime Text等）五、教学过程1. 导入：通过展示一个简单的JavaScript动态效果，引发学生兴趣，引出本节课主题。
2. 理论讲解：a. 介绍JavaScript的基本概念与运行环境b. 讲解变量声明、数据类型、运算符与表达式c. 分析控制语句（条件语句、循环语句）的使用方法d. 讲解函数定义、调用及事件处理e. 介绍DOM的基本概念与操作方法3. 例题讲解：a. 举例说明如何使用JavaScript实现一个简单的计算器b. 演示如何使用DOM操作实现一个动态下拉菜单4. 随堂练习：a. 编写一个JavaScript程序，实现用户输入年龄，判断并输出所属年龄段b. 编写一个JavaScript程序，实现一个简单的轮播图效果六、板书设计1. JavaScript基本语法2. 控制语句与函数定义3. 事件处理与DOM操作七、作业设计1. 作业题目：a. 编写一个JavaScript程序，实现一个简易的在线购物车功能b. 编写一个JavaScript程序，实现一个九宫格抽奖活动2. 答案与解析：八、课后反思及拓展延伸1. 反思：本节课通过实践操作，让学生掌握了JavaScript的基本语法与编程思想。
jQuery基础入门ppt
获取节点
三个简单实用的用于 操作的 方法： () 设置或返回所选元素的文本内容 () 设置或返回所选元素的内容（包括 标记） () 设置或返回表单字段的值 下面的例子演示如何通过 () 和 () 方法来获得内容：
亲自试一试 下面的例子演示如何通过 () 方法获得输入字段的值
基础教程
内容简介
一 jQuery的由来及简介
二 jQuery对象和DOM对象
三
jQuery选择器
四 jQuery中的DOM操作
三五 使用jQuery创建动画效果
框架简介
随着、、等技术的不断进步，越来越多的 开发者将一个又一个丰富多彩的程序功能 进行封装，供其他人可以调用这些封装好 的程序组件（框架）
亲自试一试 () 从被选元素中删除子元素
亲自试一试 下面的例子删除 "" 的所有 <> 元素：
亲自试一试
添加元素
() 在被选元素的结尾插入内容 亲自试一试 () 在被选元素的开头插入内容 亲自试一试 在下面的例子中，我们创建若干个新元素。这些元素可以通过 、 或
当前流行的 库有:
简介
由美国人 创建， 是一个 函数库。是继之后又一个优秀的框架。其宗
旨是—— ,写更少的代码,做更多的事情 它是轻量级的库(压缩后只有) ，这是其它的库所不及
的，它兼容，还兼容各种浏览器（ , , , 。
简介
是一个快速的，简洁的库，使用户能更方便地处理 、 、 实现动画效果，并且方便地为网站
理念: 写得少, 做得多
特性
库包含以下特性：
jquery课件
jQuery 语法
❖ 当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时， 会发生 ready (类似onload)事件。由于该事件在文档就绪后发生，因此把所有其 它的 jQuery 事件和函数置于该事件中是非常好的做法。ready() 函数规定当 ready 事件发生时执行的代码。
❖ ready() 函数仅能用于当前文档，因此无需选择器。 ❖ 允许使用以下三种语法： ❖ 语法 1 $(document).ready(function) ❖ 语法 2 $().ready(function) ❖ 语法 3 $(function) ❖ 参数 function必需。规定当文档加载后要运行的函数。 ❖ 注意：ready() 函数不应与 <body onload=“”> 一起使用。 ❖ 案例如下：
❖ (type) (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。
❖ $.ajax(options)请求案例
❖ $.post(options)请求案例
jQuery 工具方法
谢谢
jQuery 选择器
❖ Jquery的选择器主要是用来选择DOM中的各种标签，元素，表单对象等，并对 选择后的这些进行系列的操作，包括改变样式，获得参数值等。
❖ Jquery的选择器分类如下: ❖ (1)基本选择器 ❖ (2)层级选择器 ❖ (3)属性选择器 ❖ (4)表单选择器 ❖ 通过选择器可以将基本的标签，元素，表单对象转化成jquery对象，进而可以使
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• :text 选取所有的单行文本框
• :password 选取所有的密码框
• :radio 选取所有的单选按钮
• :checkbox 选取所有的复选按钮
• :submit 选取所有的提交按钮
• :image 选取所有的图像按钮
• :reset 选取所有的重置按钮
• :button 选取所有的button
• :last 选取最后一个元素
• :not(selector) 去除与跟定选择器匹配的元素
• :even 选取索引值为偶数的所有的元素 从0开始
• :odd 选取索引值为奇数的所有的元素 从0开始
• :eq(index) 选取索引值等于index的所有的元素 从0开始
• :gt(index) 选取索引值大于index的所有的元素 从0开始
.
8
可见性过滤选择器 • :hidden 选取所有的不可见的元素
• :visible 选取所有的可见的元素
.
9
属性过滤选择器
• [attribute] 选取拥有此属性的元素 • [attribute=value] 选取属性值为value的元素 • [attribute!=value] 选取属性值不等于value的元素 也包括不 含属性名为attribute的元素 • [attribute^=value] 选取属性值以value开头的元素 • [attribute$=value] 选取属性值以value结尾的元素 • [attribute*=value] 选取属性值含有value的元素 • [selector1][selector2][selector3] 用属性选择器合并成一个复 合选择器
• clone() 复制节点 jQuery(‘#li’).clone().appendTo(‘ul’) 如果想 在复制节点的同时也具有行为 可用clone(true)
• replaceWith() 替换节点 如jQuery(‘p’).replaceWith(‘<strong> 你最不喜欢的水果是?</strong>’)
.
10
子元素过滤选择器
• nth-child(index/even/odd/equation) 选取每个父元素下的第 index子元素/奇元素/偶元素/比较元素 索引从1开始 • first-child 选取每个父元素的第一个子元素 • last-child 选取每个父元素的最后一个元素 • only-child 如果该元素是其父元素的唯一的子元素 那么该 元素就会匹配到
.
14
元素操作：
• remove() 删除节点 例 jQuery(‘ul li’).remove() 也可在remove() 中添加过滤条件 jQuery(‘ul li’).remove(‘li[title!=菠萝]’)
• empty() 清空节点 jQuery(‘ul li:eq(1)’).empty() 清空第二个li 元素中的内容
.
3
ห้องสมุดไป่ตู้
基本选择器是最常用的选择器 可以根据标签的名字、ID名字或者 class名字来选择元素
#id 根据指定的id来匹配元素
.class 根据制定的类名字来匹配元素
element 根据指定的元素的名字匹配元素
* 匹配所有的元素
selector1,selector2,…selectorN 将每一个匹配到的元素合并到一起返 回
.
4
层次选择器
• jQuery(‘ancestor descendant’):选取ancestor中的所有的 descendant(后代)元素
• jQuery(‘parent>child’):选取parent中的所有的child(子元素)
• jQuery(‘prev+next’):选取紧跟在prev后的同级别的next元素 可用next()方法代替
• jQuery(‘prev~siblings’):选取紧跟在prev后的同级别的所有的 元素 可用nextAll()方法代替
.
5
过滤选择器分为：
• 基本过滤选择器
• 内容过滤选择器
• 可见性过滤选择器
• 子元素过滤选择器
• 属性过滤选择器
• 表单过滤选择器
.
6
基本过滤选择器
• :first 选取第一个元素
Jquery基础教程
.
1
jQuery优势
• 轻量级 • 强大的选择器 • 出色的DOM操作的封装 • 可靠的事件处理机制 • 完善的Ajax • 不污染顶级变量 • 出色的浏览器兼容性 • 链式操作方式 • 隐式迭代 • 行为和结构层分离 • 丰富的插件支持 • 完善的文档 • 开源
.
2
jQuery选择器是其最核心的部分 分为四大类 • 基本选择器 • 层次选择器 • 过滤选择器 • 表单选择器
• :file 选取所有的上传域
• :hidden 选取所有的不可见元素 (包括display为none的)
.
13
jQuery中DOM操作
• append() 向匹配的元素追加内容 • appendTo() 颠倒append()操作 • prepend() 向匹配的元素前置内容 • preprendTo() 颠倒prepend()操作 • after() 在匹配的元素后插入内容 • insertAfter() 颠倒after()操作 • before() 在匹配的元素前插入内容 • insertBefore() 颠倒before()操作
• :lt(index) 选取索引值小于index的所有的元素 从0开始
• :header 选取所有的标题元素 例如h1 h2 h3等
• :animated 选取所有的正在执. 行动画的元素
7
内容过滤选择器 • :contains(text) 选取含有文本内容为text的元素 • :empty 选取不包含子元素的空元素 • :has(selector) 选取含有选择器所匹配的元素的元素 • :parent 选取含有子元素的元素
注意与基本过滤选择器的区别
.
11
表单过滤选择器
• :enabled 选取所有的可见的元素 • :disabled 选取所有的不可见的元素 • :checked 选取所有的选中的元素(单选框、复选框) • :selected 选取所有的被选中的元素(下拉菜单)
.
12
表单选择器
• :input 选取所有的<input>、<textarea>、<select>、 <button>元素