jQuery基础知识介绍

这篇文章主要为大家详细介绍了jQuery的基础知识，内容包括jQuery的语法、选择器、事件的使用、方法和效果的使用以及元素等等，非常适合初学者入门，感兴趣的小伙伴们可以参考一下。

JQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 库可以通过一行简单的标记被添加到网页中。
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
1、html，的元素选取
2、html的，元素操作
3、html dom，遍历和修改
4、js，特效和动画效果
5、css，操作
6、html，事件操作
7、ajax，异步请求方式
提示： 除此之外，Jquery还提供了大量的插件。

jQuery 语法
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector(选择器)).(行为)action()
美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

文档就绪事件
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中，这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
两种写法：

1. $(document).ready(function(){
   // 开始写 jQuery 代码...
   });
2. 简写 $(function(){
   // 开始写 jQuery 代码...
   });
   如果在文档没有完全加载之前就运行函数，操作可能失败。
   
   jQuery 选择器
   jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
   jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
   jQuery 中所有选择器都以美元符号开头：$()。
   jQuery 元素选择器基于元素名选取元素。
   
   #id 选择器
   jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
   页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
   通过 id 选取元素语法如右侧所示：$("#test")
   
   .class 选择器
   jQuery 类选择器可以通过指定的 class 查找元素。
   语法如右侧所示：$(".test")
   
   $("*")，选取所有元素  
   $(this)，选取当前 HTML 元素    
   $("p.intro")，选取 class 为 intro 的 <p> 元素  
   $("p:first")，选取第一个 <p> 元素  
   $("ul li:first")，选取第一个 <ul> 元素的第一个 <li> 元素  
   $("ul li:first-child")，选取每个 <ul> 元素的第一个 <li> 元素
   $("[href]")，选取带有 href 属性的元素
   $("a[target='_blank']")，选取所有 target 属性值等于 "_blank" 的 <a> 元素
   $("a[target!='_blank']")，选取所有 target 属性值不等于 "_blank" 的 <a> 元素  
   $(":button")，选取所有 type="button" 的 <input> 元素 和 <button> 元素  
   $("tr:even")，选取偶数位置的 <tr> 元素    
   $("tr:odd")，选取奇数位置的 <tr> 元素
   
   独立文件中使用 jQuery 函数，如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。
   
   jQuery 事件
   jQuery 是为事件处理特别设计的。
   页面对不同访问者的响应叫做事件。
   事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
   实例：
   在元素上移动鼠标。
   选取单选按钮
   点击元素
   在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress(按键响应) 事件"。
   常见 DOM 事件：
   鼠标事件：
   click(单击)
   dblclick(双击鼠标)
   mouseenter(鼠标移入)，mouseleave(鼠标移出)
   mousedown(按下鼠标按键)，mouseup(松开鼠标按钮)
   hover()方法用于模拟光标悬停事件，当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter)，当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
   键盘事件：keypress(按键响应)，keydown(按键按下)，keyup(按键恢复)
   表单事件：submit(提交)，change(更换)，focus(焦点)， blur(失去焦点)
   文档/窗口事件： load(负荷)，resize(调整尺寸)， scroll(文本框中的起始滚动行)， unload(卸载)
   fadeOut(淡出时间)              
   在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
   $(document).ready() 方法允许我们在文档完全加载完后执行函数。
   
   jQuery 效果- 隐藏和显示
   隐藏、显示、切换，滑动，淡入淡出，以及动画。
   slow(缓慢的)，可用作动作时间。
   
   jQuery hide(spaad) 和 show(spaad)：
   通过 jQuery，您可以使用 "hide(隐藏)" 和 "show(显示)" 方法来隐藏和显示 HTML 元素。
   speed 参数规定隐藏/显示的速度，可以取以下值："slow(缓慢的)"、"fast(快速的)" 或毫秒，可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
   
   jQuery toggle(切换)：
   通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
   
   jQuery 效果 - 淡入淡出
   通过 jQuery，您可以实现元素的淡入淡出效果。
   jQuery 拥有下面四种 fade 方法：
   fadeIn()，用于淡入已隐藏的元素。
   fadeOut()，用于淡出显示的元素。
   fadeToggle()，可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
   fadeTo()，允许渐变为给定的不透明度（值介于 0 与 1 之间）。      
   
   jQuery 效果 - 滑动
   通过 jQuery，您可以在元素上创建滑动效果。
   jQuery 拥有以下滑动方法：
   slideDown()，用于向下滑动元素。
   slideUp()，用于向上滑动元素。
   slideToggle()，可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素向下滑动，则 slideToggle() 可向上滑动它们。如果元素向上滑动，则 slideToggle() 可向下滑动它们。
   
   jQuery 效果- 动画
   jQuery animate() 方法允许您创建自定义的动画。
   语法：$(selector).animate({params},speed,callback)，必需的 params 参数定义形成动画的 CSS 属性。
   默认情况下，所有 HTML 元素都有一个静态位置，且无法移动，如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！  
   jQuery animate() - 使用相对值，也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 "+=" 或 "-=" 。
   jQuery animate() - 使用预定义的值，您也可以把属性的动画值设置为 "show"、"hide" 或 "toggle" 。
   jQuery animate() - 使用队列功能，默认地，jQuery 提供针对动画的队列功能。
   这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。
   
   jQuery 停止动画
   jQuery stop() 方法用于在动画或效果完成前对它们进行停止。
   jQuery stop() 方法，jQuery stop() 方法用于停止动画或效果，在它们完成之前，stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
   语法：$(selector).stop(stopAll,goToEnd);
   可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
   可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
   因此，默认地，stop() 会清除在被选元素上指定的当前动画。
   
   jQuery Callback(回调函数) 方法
   Callback 函数在当前动画 100% 完成之后执行。
   许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。
   例子：$("p").hide("slow")
   speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。
   
   jQuery - 链(Chaining)
   通过 jQuery，可以把动作/方法链接在一起。
   Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
   jQuery 方法链接：直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。
   不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
   提示： 这样的话，浏览器就不必多次查找相同的元素。
   如需链接一个动作，您只需简单地把该动作追加到之前的动作上。
   如果需要，我们也可以添加多个方法调用。
   提示：当进行链接时，代码行会变得很长。不过，jQuery 语法不是很严格；您可以按照希望的格式来写，包含换行和缩进。
   jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行。
   
   jQuery - 获取内容和属性
   jQuery 拥有可操作 HTML 元素和属性的强大方法。
   jQuery DOM 操作：
   jQuery 中非常重要的部分，就是操作 DOM 的能力，jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
   DOM = Document Object Model（文档对象模型）
   DOM 定义访问 HTML 和 XML 文档的标准："W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式"。
   获得内容 - text()、html() 和 val()：
   三个简单实用的用于 DOM 操作的 jQuery 方法：
   text() - 设置或返回所选元素的文本内容
   html() - 设置或返回所选元素的内容（包括 HTML 标记）
   val() - 设置或返回表单字段的值
   attr("要获取的属性") - 方法用于获取属性值
   
   jQuery - 设置内容和属性
   设置内容 - text()、html() 和 val()
   text() - 设置或返回所选元素的文本内容
   html() - 设置或返回所选元素的内容（包括 HTML 标记）
   val() - 设置或返回表单字段的值
   
   text()、html() 以及 val() 的回调函数：
   text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
   attr() 方法也用于设置/改变属性值。attr() 方法也允许您同时设置多个属性。
   attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
   
   jQuery - 添加元素
   通过 jQuery，可以很容易地添加新元素/内容。
   添加新内容的四个 jQuery 方法：
   append() - 在被选元素的结尾插入内容，（仍然该元素的内部），可无限追加。
   prepend() - 在被选元素的开头插入内容，可无限追加。
   after() - 在被选元素之后插入内容
   before() - 在被选元素之前插入内容
   
   jQuery - 删除元素
   通过 jQuery，可以很容易地删除已有的 HTML 元素。
   可使用以下两个 jQuery 方法：
   remove() - 删除被选元素（及其子元素），remove() 方法也可接受一个参数，允许您对被删元素进行过滤，该参数可以是任何 jQuery 选择器的语法。
   empty() - 从被选元素中删除子元素
   
   jQuery - 获取并设置 CSS 类
   通过 jQuery，可以很容易地对 CSS 元素进行操作。
   jQuery 拥有若干进行 CSS 操作的方法：
   addClass() - 向被选元素添加一个或多个类
   removeClass() - 从被选元素删除一个或多个类
   toggleClass() - 对addClass()和removeClass() 的切换
   
   jQuery css() 方法
   css() - 设置或返回被选元素的一个或多个样式属性
   如需返回指定的 CSS 属性的值，请使用如右所示语法：css("(属性名)propertyname")。
   如需设置指定的 CSS 属性，请使用如右所示语法：css("(属性名)propertyname","(值)value")。
   如需设置多个 CSS 属性，请使用如下语法：css({"propertyname":"value","propertyname":"value",...})。
   jQuery 尺寸
   通过 jQuery，很容易处理元素和浏览器窗口的尺寸。
   jQuery 提供多个处理尺寸的重要方法：
   width()
   height()
   innerWidth()
   innerHeight()
   outerWidth()
   outerHeight()
   jQuery width() 和 height() 方法：
   width() 方法设置或返回元素的宽度（不包括内边距，边框或外边距）。
   height() 方法设置或返回元素的高度（不包括内边距，边框或外边距）。
   jQuery innerWidth() 和 innerHeight() 方法：
   innerWidth() 方法返回元素的宽度（包括内边距，不包括外边距）。
   innerHeight() 方法返回元素的高度（包括内边距，不包括外边距）。
   jQuery outerWidth() 和 outerHeight() 方法：
   outerWidth() 方法返回元素的宽度（包括内边距和边框）。
   outerHeight() 方法返回元素的高度（包括内边距和边框）。
   jQuery 遍历
   jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
   遍历 DOM：jQuery 提供了多种遍历 DOM 的方法，遍历方法中最大的种类是树遍历（tree-traversal）。
   jQuery 遍历 - 祖先：
   祖先是父、祖父或曾祖父等等，通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。
   这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
   parent()方法，返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历。
   parents()方法，返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
   parentsUntil()方法，返回介于两个给定元素之间的所有祖先元素。
   jQuery 遍历 - 后代：
   后代是子、孙、曾孙等等，通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。
   下面是用于向下遍历 DOM 树的 jQuery 方法：
   children()方法，返回被选元素的所有直接子元素，该方法只会向下一级对 DOM 树进行遍历。
   find()方法，返回被选元素的后代元素，一路向下直到最后一个后代。
   jQuery 遍历 - 同胞(siblings)：
   同胞拥有相同的父元素，通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。
   在 DOM 树中水平遍历，有许多有用的方法让我们在 DOM 树进行水平遍历：
   siblings() 方法，返回被选元素的所有同胞元素。
   next()方法，返回被选元素的下一个同胞元素，该方法只返回一个元素。
   nextAll()方法，返回被选元素的所有跟随的同胞元素。
   nextUntil()方法，返回介于两个给定参数之间的所有跟随的同胞元素。
   prev()，prevAll()，prevUntil()方法，工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。
   jQuery 遍历- 过滤：
   缩小搜索元素的范围：
   三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
   其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
   first()方法，返回被选元素的首个元素。
   last()方法，返回被选元素的最后一个元素。
   eq()方法，返回被选元素中带有指定索引号的元素，索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。
   filter()方法，允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
   not()方法，返回不匹配标准的所有元素，提示：not() 方法与 filter() 相反。
   jQuery - AJAX(创建交互式 Web 应用程序而无需牺牲浏览器兼容性的流行方法)
   AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
   AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）,简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
   jQuery 提供多个与 AJAX 有关的方法。
   通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
   jQuery - AJAX load() 方法：
   jQuery load() 方法是简单但强大的 AJAX 方法，load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
   语法：$(selector).load(负荷)(URL(地址),data(数据),callback)。
   必需的 URL 参数规定您希望加载的 URL。
   可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
   可选的 callback 参数是 load() 方法完成后所执行的函数名称。
   responseTxt - 包含调用成功时的结果内容
   statusTXT - 包含调用的状态
   xhr - 包含 XMLHttpRequest 对象
   jQuery - AJAX get() 和 post() 方法：
   jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
   HTTP 请求：GET vs. POST：
   两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
   GET - 从指定的资源请求数据
   POST - 向指定的资源提交要处理的数据
   GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
   POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
   $.get() 方法通过 HTTP GET 请求从服务器上请求数据，语法：$.get(URL,callback)，必需的 URL 参数规定您希望请求的 URL，可选的 callback 参数是请求成功后所执行的函数名。
   $.post() 方法通过 HTTP POST 请求向服务器提交数据，语法：$.post(URL,data,callback)，必需的 URL 参数规定您希望请求的 URL。可选的 data 参数规定连同请求发送的数据。
   可选的 callback 参数是请求成功后所执行的函数名。
   jQuery - noConflict(无抵触) 方法
   如何在页面上同时使用 jQuery 和其他框架？
   
   jQuery 和其他 JavaScript 框架：
   正如您已经了解到的，jQuery 使用 $ 符号作为 jQuery 的简写。
   noConflict() 方法，会释放对 $ 标识符的控制，这样其他脚本就可以使用它了，您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。
   如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"。
   JSONP(跨域) 
   Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
   为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。
   同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。

看完上述内容，你们对jQuery有进一步的了解吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读。