前端内容梳理(3)JavaScript和JQuery

1、JavaScript (简要介绍)

(1)使用JavaScript 需注意

在 JavaScript 中,用分号来结束语句是可选的。

浏览器会按照编写顺序来执行每条JavaScript 语句。

JavaScript 对大小写是敏感的。

可以在文本字符串中使用反斜杠对代码行进行换行。

(2)JavaScript的作用

写入 HTML 输出

对事件作出反应

改变 HTML 内容,属性,样式

验证输入

(3)不做重点介绍的原因

jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery 库包含以下特性:

HTML 元素选取,操作,样式操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

Utilities

3、JQuery(重点介绍)

(1)在HTML中引用JQuery库

<script type="text/javascript" src="jquery.js"></script> 这句代码放在head标签内

(不想下载库到本地,也可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

或 <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>

(2)JQuery库的下载:http://jquery.com/download/

Production version - 用于实际的网站中,已被精简和压缩。

Development version - 用于测试和开发(未压缩,是可读的代码)

(3)JQuery语句的语法

$(selector).action()     如:$("#test").hide();   演示 jQuery hide() 函数,隐藏 id="test" 的元素。

(4)文档就绪函数

为了防止文档在完全加载(就绪)之前运行 jQuery 代码。$(document).ready(function(){...});

(5)JQuery的元素选择器

(6)JQuery的事件方法

(7)JQuery实现动态效果的方法:http://www.w3school.com.cn/jquery/jquery_hide_show.asp

(7.1) hide() 和 show() 隐藏、显示

(7.2)fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo() 淡入淡出

(7.3)slideDown()、slideUp()、slideToggle()  滑动

(7.4)animate() 方法用于创建自定义动画

(7.5) stop() 方法用于在动画或效果完成前对它们进行停止

(7.6)Callback 函数在当前动画 100% 完成之后执行

(7.7)链接(chaining)技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。

(8)JQuery操作 HTML 元素和属性的方法:http://www.w3school.com.cn/jquery/jquery_dom_get.asp

(8.1)获得内容 - text()、html() 以及 val()

(8.2)设置内容 - text()、html() 以及 val()

(8.3)text()、html() 以及 val() 的回调函数

(8.4)添加新的 HTML 内容append()、prepend()、after() 以及 before()

(8.5)删除元素/内容 remove()、empty()

(8.6)jQuery 操作 CSS addClass()、removeClass()、toggleClass() 以及 css()

(8.7)处理元素和浏览器窗口的尺寸 width()、height()、innerWidth()、innerHeight()、outerWidth() 以及 outerHeight()

(9)对DOM树的遍历:http://www.w3school.com.cn/jquery/jquery_traversing.asp

(9.1)parent()、parents()、parentsUntil() 向上遍历 DOM 树

(9.2)children()、find() 向下遍历 DOM 树

(9.3)siblings()、next()、nextAll()、nextUntil()、prev()、prevAll()、prevUntil() 水平遍历

(9.4)first(), last() 和 eq() 允许您基于其在一组元素中的位置来选择一个特定的元素

(9.5) filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素

(10)AJAX方法:http://www.w3school.com.cn/jquery/jquery_ajax_intro.asp

(10.1)AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新。简单的说就是在不重

              载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。

(10.2)load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

(10.3)get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

(11)noConflict() 方法:​​​​​​在页面上同时使用 jQuery 和其他框架:http://www.w3school.com.cn/jquery/jquery_noconflict.asp

 

猜你喜欢

转载自blog.csdn.net/Carl_changxin/article/details/83140648