一.jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性：1.HTML 元素选取2.HTML 元素操作3.CSS 操作4.HTML 事件函数5.JavaScript 特效和动画6.HTML DOM 遍历和修改7.AJAX(**Asynchronous JavaScript and XML** 译为（异步的[JavaScript](https://zh.wikipedia.org/wiki/JavaScript)与[XML](https://zh.wikipedia.org/wiki/XML)技术）)8.Utilities(实用工具,设备)
11.jpg
- jQ语法是XPath(XML路径语言,在XML文档中查找信息的语言)与css选择器语法的组合
- jQuery基础语法$(selector).action()实例$(this).hide()- 隐藏当前元素
- 文档就绪函数
$(document).ready(function(){--- jQuery functions go here ----});也可写成$(function(){})- jQuery选择器
- 元素选择器(css)1.$("p") 选取 元素。2.$("p.intro") 选取所有 class="intro" 的 元素。3.$("p#demo") 选取所有 id="demo" 的 元素。
- 属性选择器(XPath)1.$("[href]") 选取所有带有 href 属性的元素。2.$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。3.$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。4.$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
- jQuery选择器
- 解除jQuery名称冲突(自定义名称)
jQuery 使用 $ 符号作为 jQuery 的简介方式。某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。jQuery 使用名为 noConflict() 的方法来解决该问题。var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。
二.jQ效果三.jQuery HTML
- 隐藏/显示语法hide(),show().toggle()语法
$(selector).hide(speed,callback);$(selector).show(speed,callback);$(selector).toggle(speed,callback);实例$("button").click(function(){ $("p").toggle();});可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。toggle是显示/隐藏转换- 淡入淡出 fadeIn(),fadeOut(),fadeToggle() , fadeTo() fadeTo() 语法
$(selector).fadeTo(speed,opacity,callback);其余三个同显示/隐藏- 滑动slideDown(),slideUp(),slideToggle()语法同显示/隐藏
- 效果 - 动画(允许创建自定义动画)animate()语法$(selector).animate({params},speed,callback);params 参数定义形成动画的 CSS 属性定义多个属性动画实例
$("button").click(function(){$("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px'});});注意:用驼峰写法,颜色动画要下 Color Animations 插件- 停止动画 (方法用于在动画或效果完成前对它们进行停止)stop()语法$(selector).stop(stopAll,goToEnd);可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。因此，默认地，stop() 会清除在被选元素上指定的当前动画。
- chaining链锁语法$("#p1").css("color","red").slideUp(2000).slideDown(2000);实例
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
四.遍历
- 获得内容和属性text()、html() 以及 val()
text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容（包括 HTML 标记）val() - 设置或返回表单字段的值实例$("#btn1").click(function(){alert("Text: " + $("#test").text());});$("#btn2").click(function(){alert("HTML: " + $("#test").html());});$("#btn1").click(function(){alert("Value: " + $("#test").val());});- 设置内容和属性
text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容（包括 HTML 标记）val() - 设置或返回表单字段的值实例$("#btn1").click(function(){$("#test1").text("哈哈!");});$("#btn2").click(function(){$("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){$("#test3").val("你好");});- 添加元素
append() - 在被选元素的结尾插入内容prepend() - 在被选元素的开头插入内容after() - 在被选元素之后插入内容before() - 在被选元素之前插入内容实例$("p").append("Some appended text.");- 删除元素remove() - 删除被选元素（及其子元素）empty() - 从被选元素中删除子元素语法同上
- 获取并设置 CSS 类addClass() - 向被选元素添加一个或多个类removeClass() - 从被选元素删除一个或多个类toggleClass() - 对被选元素进行添加/删除类的切换操作css() - 设置或返回样式属性
- css() 方法实例$("p").css("background-color","yellow");
- 尺寸
通过 jQuery，很容易处理元素和浏览器窗口的尺寸。jQuery 尺寸 方法width()设置或返回元素的宽度（不包括内边距、边框或外边距）。height()方法设置或返回元素的高度（不包括内边距、边框或外边距）。innerWidth()方法返回元素的宽度（包括内边距）。innerHeight()方法返回元素的高度（包括内边距）。outerWidth()方法返回元素的宽度（包括内边距和边框）。outerHeight()方法返回元素的高度（包括内边距和边框）。实例$("button").click(function(){ var txt=""; txt+="Outer width: " + $("#div1").outerWidth() + "</br>"; txt+="Outer height: " + $("#div1").outerHeight(); $("#div1").html(txt);});
- 遍历
遍历图解
- 祖先parent(),parents(),parentsUntil()
parent() 方法返回被选元素的直接父元素。parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。实例之一$(document).ready(function(){ $("span").parents("ul");});- 后代children(),find()
children() 方法返回被选元素的所有直接子元素。find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。实例$(document).ready(function(){$("div").children("p.1");});- 同胞siblings(),next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil()
siblings() 方法返回被选元素的所有同胞元素。next() 方法返回被选元素的下一个同胞元素。nextAll() 方法返回被选元素的所有跟随的同胞元素。nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。实例$(document).ready(function(){ $("h2").siblings("p");});- 过滤first(), last() , eq(),filter() 和 not()first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。实例
$(document).ready(function(){$("div p").first();});filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。实例$(document).ready(function(){ $("p").not(".intro");});
Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Mar 04, 2025 pm 12:32 PMThe official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,
How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PMThe article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
How to efficiently add stroke effects to PNG images on web pages?Mar 04, 2025 pm 02:39 PMThis article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect
What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PMArticle discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PMThe article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PMThe article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PMThis article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PMThe article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
Atom editor mac version download
The most popular open source editor
