【慎思堂】之JQuery实战总结

末蓝、 2022-09-19 05:23 63阅读 0赞

>   
> 
> 
> # 一、定义 #
> 
>     JQuery是一套跨浏览器的轻量级的JavaScript库，核心理念是：写得更少,做得更多。简化HTML与JavaScript之间的操作。
> 
>     JQuery的语法设计可以使开发者更加便捷，例如操作文档对象、**选择DOM元素、制作动画效果、事件处理、使用Ajax**以及其他功能。除此以外，JQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。JQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆javascript来调用命令了，只需定义id即可。
> 
>   
> 
> 
> # 二、特点 #

> > JQuery包含以下特点：
> 
> > 1.动态特效
> 
> > 2.AJAX
> 
> > 3.通过插件来扩展
> 
> > 4.方便的工具 - 例如浏览器版本判断
> 
> > 5.渐进增强
> 
> > 6.链式调用
> 
> > 7.多浏览器支持
> > 
> >   
> >

> # 三、使用 #
> 
>     是一个单独的javascript文件，可以保存到本地或者服务器直接引用，也可以从多个公共服务器中选择引用。
> 
>     <scripttype="text/javascript" src="http://…….js"></script>
> 
>         src：JQuery库文件的位置
> 
> **解析**：**一般$是JQuery的标志。为什么要说一般呢？因为除了JQuery，javascript还有一个库，用的也是$符（property库）。**
> 
>  
> 
> JQuery基础方法是.ready()方法
> 
>     $(document).ready(function()\{  //代码  \});
> 
> 或者其简写
> 
>     $(function()\{  //代码  \});
> 
> **解析**：**$就是JQuery的简写，可以用JQuery代替。这个ready函数是在Dom加载完就可以执行（比window.onload更早）。**在同一个页面里可以多次出现.ready()。
> 
>   
> 
> 
> # 四、实例　 #
> 
> # 　 #
> 
> ## （一）选择器 ##
> 
> **     JQuery 选择器用于准确地选取您希望应用效果的元素**。JQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。　　
> 
> **基本选择器(3种):**
> 
> 　　$("标签名"),如$("p")是选取了所有的p标签节点
> 
> 　　$("\#id名"),如$("\#test")是选取了id为test的标签节点
> 
> 　　$(".class名"),如$(".test")是选取了所有class为test的标签节点
> 
> **解析：****$代替频繁的document.getElementById()操作。**选择器允许您对 HTML 元素组或单个元素进行操作。在 HTML DOM 术语中：选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。　
> 
> 　当然，JQuery还有很多选择器。
> 
>  
> 
> ## （二）事件处理 ##
> 
> **    JQuery 是为事件处理特别设计的**。JQuery 事件处理函数是 JQuery 中的核心函数。**事件处理函数**是当HTML 中发生事件时自动被调用的函数。由“事件”（event）“触发”（triggered）是经常被用到的术语。通常是把JQuery 代码置于网页 <head> 部分的“事件处理”函数中：
> 
>     我们大量使用的事件可能就是button的onclick了。以前习惯在input 元素上写 "fn()",使用JQuery可以使javascript代码与html代码分离，保持HTML的清洁，还可以很轻松地绑定事件，甚至你可以不知道“事件”这个名词。 
> 
>   
> 
> 
> 事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。

> > **触发实例：**

> > $("button\#demo").click()

> > > 上面的例子将触发id="demo" 的 button 元素的 click 事件。

> > **绑定实例：**
> 
> > $("button\#demo").click(function()\{$("img").hide()\})

> > > 上面的例子会在点击 id="demo"的按钮时隐藏所有图像。

>  
> 
> ## （三）制作动画效果 ##

> > **隐藏、显示、切换、滑动 以及动画**

> > > $(selector).hide()   隐藏被选元素
> 
> > > $(selector).show()   显示被选元素
> 
> > > $(selector).toggle() 切换（在隐藏与显示之间）被选元素
> 
> > > $(selector).slideDown() 向下滑动（显示）被选元素
> 
> > > $(selector).slideUp()   向上滑动（隐藏）被选元素
> 
> > > $(selector).slideToggle()   对被选元素切换向上滑动和向下滑动
> 
> > > $(selector).fadeIn() 淡入被选元素
> 
> > > $(selector).fadeOut()   淡出被选元素
> 
> > > $(selector).fadeTo() 把被选元素淡出为给定的不透明度
> 
> > > $(selector).animate()   对被选元素执行自定义动画

> ## （四）使用AJAX ##
> 
>     **AJAX （ Asynchronous JavaScript and XML）**是一种创建快速动态网页的技术。AJAX 通过在后台与服务器交换少量数据的方式，允许网页进行**异步更新**。这意味着有可能在不重载整个页面的情况下，对网页的一部分进行更新。
> 
>     JQuery 提供了供 AJAX 开发的丰富函数（方法）库。通过 JQuery AJAX，使用 HTTP Get 和 HTTP Post，您都可以从远程服务器请求 TXT、HTML、XML 或 JSON。而且您可以直接把远程数据载入网页的被选 HTML 元素中！

> > $("selector").load(url,data,callback)

> **解析：**JQuery 的 load 函数是一种简单的（但很强大的）AJAX 函数。选择器定义要改变的 HTML 元素， url：指定数据的web 地址。只有当您希望向服务器发送数据，才需要使用 data 参数。只有当您需要在完毕之后触发一个函数时，您才需要使用 callback 参数。
> 
>   
> 
> 
> ## （五）插件机制 ##
> 
>     JQuery的官方插件是JQuery UI。开发者可以任意扩展JQuery的函数库或者按照自己的需求开发UI组件。例如Ajax辅助、数据表格、动态列表、XML工具、拖曳、cookie处理、弹出层等等。JQuery 的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
> 
>   
> 
> 
> # 五、总结 #
> 
>     **JQuery的特点：写得更少,做得更多。**
> 
>     jQuery包含很多供改变和操作 HTML 的强大函数。
> 
>     jQuery CSS 可以控制页面的显示效果。
> 
>     jQuery AJAX，使用 HTTP Get 和 HTTP Post，可以从远程服务器请求 TXT、HTML、XML 或 JSON。
> 
>     JQuery效果：隐藏、显示、切换、滑动以及动画。
> 
>   
>