通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行“操作”(actions)。
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 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取 id="demo" 的第一个 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色:
实例
$("p").css("background-color","red");
更多的选择器实例
语法 描述
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的第一个元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。
jQuery 事件
下面是 jQuery 中事件方法的一些例子:
Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
实例
jQuery hide()
演示简单的 jQuery hide() 函数。
jQuery hide()
另一个 hide() 演示。如何隐藏部分文本。
jQuery slideToggle()
演示简单的 slide panel 效果。
jQuery fadeTo()
演示简单的 jQuery fadeTo() 函数。
jQuery animate()
演示简单的 jQuery animate() 函数。
jQuery 滑动函数 - slideDown, slideUp, slideToggle
jQuery 拥有以下滑动函数:
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
speed 参数可以设置这些值:"slow", "fast", "normal" 或毫秒。
jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo()
jQuery 拥有以下 fade 函数:
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
speed 参数可以设置这些值:"slow", "fast", "normal" 或 毫秒。
jQuery 效果 - 来自本页
函数 描述
$(selector).hide() 隐藏被选元素
$(selector).show() 显示被选元素
$(selector).toggle() 切换(在隐藏与显示之间)被选元素
$(selector).slideDown() 向下滑动(显示)被选元素
$(selector).slideUp() 向上滑动(隐藏)被选元素
$(selector).slideToggle() 对被选元素切换向上滑动和向下滑动
$(selector).fadeIn() 淡入被选元素
$(selector).fadeOut() 淡出被选元素
$(selector).fadeTo() 把被选元素淡出为给定的不透明度
$(selector).animate() 对被选元素执行自定义动画
jQuery HTML 操作 - 来自本页
函数 描述
$(selector).html(content) 改变被选元素的(内部)HTML
$(selector).append(content) 向被选元素的(内部)HTML 追加内容
$(selector).prepend(content) 向被选元素的(内部)HTML “预置”(Prepend)内容
$(selector).after(content) 在被选元素之后添加 HTML
$(selector).before(content) 在被选元素之前添加 HTML
jQuery CSS 函数 - 来自本页
CSS 属性 描述
$(selector).css(name,value) 为匹配元素设置样式属性的值
$(selector).css({properties}) 为匹配元素设置多个样式属性
$(selector).css(name) 获得第一个匹配元素的样式属性值
$(selector).height(value) 设置匹配元素的高度
$(selector).width(value) 设置匹配元素的宽度
jQuery AJAX 请求
请求 描述
$(selector).load(url,data,callback) 把远程数据加载到被选的元素中
$.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中
$.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据
$.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据
$.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback) 加载并执行远程的 JavaScript 文件
(url) 被加载的数据的 URL(地址)
(data) 发送到服务器的数据的键/值对象
(callback) 当数据被加载时,所执行的函数
(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX 请求的所有键/值对选项
jQuery 遍历函数
jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。
函数 描述
.add() 将元素添加到匹配元素的集合中。
.andSelf() 把堆栈中之前的元素集添加到当前集合中。
.children() 获得匹配元素集合中每个元素的所有子元素。
.closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。
.contents() 获得匹配元素集合中每个元素的子元素,包括文本和注释节点。
.each() 对 jQuery 对象进行迭代,为每个匹配元素执行函数。
.end() 结束当前链中最近的一次筛选操作,并将匹配元素集合返回到前一次的状态。
.eq() 将匹配元素集合缩减为位于指定索引的新元素。
.filter() 将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
.find() 获得当前匹配元素集合中每个元素的后代,由选择器进行筛选。
.first() 将匹配元素集合缩减为集合中的第一个元素。
.has() 将匹配元素集合缩减为包含特定元素的后代的集合。
.is() 根据选择器检查当前的匹配元素集合,如果存在至少一个匹配元素,则返回 true。
.last() 将匹配元素集合缩减为集合中的最后一个元素。
.map() 把当前匹配集合中的每个元素传递给一个函数,产生包含返回值的新的 jQuery 对象。
.next() 获得匹配元素集合中每个元素紧邻的同辈元素。
.nextAll() 获得匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)。
.nextUntil() 获得每个元素之后所有的同辈元素,直到遇到匹配选择器的元素为止。
.not() 从匹配元素集合中删除元素。
.offsetParent() 获得用于定位的第一个父元素。
.parent() 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选)。
.parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素,直到遇到匹配选择器的元素为止。
.prev() 获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选)。
.prevAll() 获得匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)。
.prevUntil() 获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止。
.siblings() 获得匹配元素集合中所有元素的同辈元素,由选择器筛选(可选)。
.slice() 将匹配元素集合缩减为指定范围的子集。
实例
设置输入域的值:
$("button").click(function(){
$(":text").val("Hello World");
});
定义和用法
val() 方法返回或设置被选元素的值。
元素的值是通过 value 属性设置的。该方法大多用于 input 元素。
如果该方法未设置参数,则返回被选元素的当前值。
语法
$(selector).val(value)
参数 描述
value 可选。规定被选元素的新内容。
返回 Value 属性
返回第一个匹配元素的 value 属性的值。
语法
$(selector).val()
设置 Value 属性的值
$(selector).val(value)
参数 描述
value 设置 Value 属性的值。
使用函数设置 Value 属性的值
$(selector).val(function(index,oldvalue))
参数 描述
function(index,oldvalue)
规定返回要设置的值的函数。
* index - 可选。接受选择器的 index 位置。
* oldvalue - 可选。接受选择器的当前 Value 属性。
分享到:
相关推荐
**jQuery 总结** 在实际开发中,jQuery 可以极大地提高工作效率,减少代码量,使得动态交互和界面美化变得更加简单。然而,随着 ES6 和现代前端框架的崛起,如 React 和 Vue,jQuery 在某些场景下可能不再是首选。...
6. **总结** jQuery降低了JavaScript开发的复杂度,提高了开发效率,尤其在DOM操作、事件处理和Ajax交互方面表现突出。无论是初学者还是经验丰富的开发者,jQuery都能作为一个强大的工具,提升开发体验和项目质量。...
**jQuery 全集:深入理解与实践** jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了 JavaScript 的 DOM 操作、事件处理、动画制作以及 AJAX 交互。本资料旨在全面覆盖 jQuery 的核心概念和实用技巧,通过...
JQuery总结.docx - 快捷方式.lnk
**jQuery入门与总结** jQuery是一个深受开发者喜爱的JavaScript库,它的出现极大地方便了JavaScript的编程,使得HTML元素的选择、操作和隐藏等任务变得更加简单。jQuery的核心理念是"write less, do more",即用更...
目录: 1.选择网页元素 2.改变结果集 3.链式操作 4.元素的操作:取值和赋值 5.元素的操作:移动 6.元素的操作:复制、删除和创建 7.工具方法 8.事件操作 9.特殊效果
**jQuery 知识总结** jQuery 是一个高效、简洁且功能丰富的 JavaScript 库,它极大地简化了 JavaScript 的DOM操作、事件处理、动画制作以及Ajax交互。jQuery 的核心特性可以概括为:选择器、DOM操作、事件处理、...
**jQuery 全集与总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画以及Ajax交互等任务。自2006年发布以来,jQuery 已经成为了前端开发中不可或缺的一部分,因其简洁的API和...
jQuery是对JavaScript的封装,使用jQuery可以简化很多之前的JavaScript代码,简化开发 本人学习jQuery是通过xmind这款软件来记载的 现在把资源贡献给大家,希望给更多的人更深入的了解jQuery 也可以查询我的博客看...
总结来说,jQuery通过其高效、易用的特性,改变了JavaScript开发的格局,成为Web开发领域不可或缺的一部分。通过深入学习和实践,开发者可以更好地利用jQuery提升工作效率,构建出更富交互性的Web应用程序。
**jQuery 技巧总结** jQuery 是一款非常流行的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画制作和Ajax交互等任务。自2006年发布以来,jQuery 已经成为 web 开发不可或缺的一部分。这篇总结将探讨一些...
**jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了网页文档对象模型(DOM)操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念,包括选择器、常用方法以及在...
本文将深入探讨2022年jQuery的总结,包括其概念、优点、基本使用方法以及与DOM对象的区别。 首先,jQuery是由John Resig于2006年创立的,它是最受欢迎的JavaScript库之一。jQuery的设计理念是"write less, Do more...
jQuery 入门总结 本章节主要介绍了 jQuery 的概述、基本使用、优点、入口函数、DOM 对象和 jQuery 对象的区别等知识点。 1. jQuery 概述 jQuery 是一个 JavaScript 库,由 John Resig 于 2006 年创建,是目前最...
本总结将深入探讨jQuery的核心知识点,包括选择器、DOM操作、事件处理和Ajax应用。** ### 一、jQuery选择器 jQuery 的选择器基于CSS,允许开发者通过简单的语法选取DOM中的特定元素。常见的选择器有: 1. **基本...