本章简介:
自从JavaScript脚本语言受到越来越多的人时,一系列JavaScript程序库也开始蓬勃发展,它们各有所长。
而Jquery以简约、优雅的风格、得到了越来越多的人的赞美与选择。
今天认识Jquery的概念,Jquery与JavaScript的关系和Jquery程序的基本结构。
开发一个自己的Jquery程序,制作一些简单的交互效果。
本章单词:
Jquery 放大
Ready 准备好的
Action 行动,活动
Add 添加
Next 紧接着,下一个
5、1 Jquery简介
JavaScript是一种面向Web的脚步语言。
大部分的网站都使用了JavaScript,并且现有的浏览器都包含了JavaScript解释器。
但是JavaScript本身存在两个弊端,一个是复杂的文档对象模型,另一个是不一致浏览器的实现。
所以为了简化JavaScript的开发,并解决浏览器之间的兼容性问题,一些JavaScript程序库随之诞生。
JQuery 是JavaScript的程序库之一,它是JavaScript对象和实用函数的封装。
使用JQuery能使代码量大大减少,并且最大的优势是能使页面在各个页面在各浏览器中保持统一的显示效果,即不存在浏览器兼容性问题。
作为JavaScript的程序库,JQuery凭借简介的语法和跨浏览器的兼容性,极大的简化了很多的操作,从而广泛应用于Web应用开发。
JQuery可以方便获取和修改页面中的指定元素,更快捷,更简单、
可以更方便的控制页面的样式,可以很好的兼容各种浏览器、
可以使页面的表现层与功能开发分离、
更方便的使用JQuery插件,可以使用大量的JQuery插件来完善页面的功能和效果、
与Ajax技术完美结合,利用Ajax异步读取服务器数据的方法,极大了方便了程序开发,增强了页面的交互,提升了用户的体验。
5、2 Jquery语法
<script src="jQuery-1.12.4.js"></script>
<script>
$(document).ready(function () {
alert("第一个JQuery");
});
</script>
Ready() 方法类似于JavaScript中的 onload()方法,它是JQuery中页面载事件的方法。
它和 JavaScript中的 onload() 方法都意味着在页面加载完成时,执行事件。
$(document).ready(function () {});
window.onload=function () { }
但是它们之间有几点区别。
5、3 Jquery语法结构
1、工厂函数$();
美元符号 $ 等价于 JQuery, 它的作用是将 DOM对象转换为JQuery对象,只有JQuery对象才能使用JQuery的方法。
2、选择器selector
JQuery支持几乎支持Css中所有的选择器。
3、方法action()
JQuery提供了一系列方法,
4、链式操作
在对DOM元素进行操作时,为了避免过度使用临时变量或不必要的变量,在大多数时候,JQuery代码采用了一种链式编程模式,它可以对一个对象进行多重操作,并将操作结果返回该对象,以便于将返回结果应用于该对象的下一次操作。
5、隐式迭代
使用隐式迭代,它不需要遍历所有元素,可以直接设置元素的样式。
5、4 DOM对象与Jquery对象
1、DOM对象
在前面的学习中我们知道,DOM (document Object Model)文档对象模型。
每个HMTL页面都有一个DOM,每个DOM都可以表示为成一棵树,在棵树里存在许多不同类型的节点,有些DOM节点还包含其他类型的节点。
DOM里的节点通常分为三种类型,即元素节点,文本节点,属性节点。
document.getElementById("title").innerHTML; //获取id 为title元素内的 html 代码
2、Jquery对象
JQuery对象就是通过JQuery包装DOM对象后产生的对象,它能够使用JQuery中的方法。
$("#title").html(); //获取id 为title元素内的 html 代码
3、Jquery对象与DOM对象的相互转换
在实际的使用中,JQuery对象和DOM对象互相转换时非常常见的。
JQuery提供了两种方法将一个JQuery对象转换成一个DOM对象
1、 JQuery对象是一个类似数组的对象,可以通过[index] 的方法得到相应的DOM对象。
var $name = $("#name"); //JQuery对象
var name = $name[0]; // DOM 对象
2、 通过 get(index) 方法得到相应的DOM对象。
var $name = $("#name"); //JQuery对象
var name = $name.get(0); // DOM 对象
对于一个DOM对象,只需要将 $() 函数将DOM对象包装起来,就可以得到一个JQuery对象。
var name = document.getElementById("name"); // DOM 对象
var $name = $(name); //JQuery对象
本章简介:
1、JQuery是一个优秀的JavaScript库,使用它可以大大提高Web客户端的开发效率。
2、要使用JQuery的功能,需要首先引用JQuery库文件。
3、$(document).ready() 与 window。Onload的使用场景类似,但是有些差异。
4、JQuery中常见的元素包括工厂函数、选择器、方法
5、JQuery程序代码的特色,包含 $符号和连缀操作。
6、可以将DOM对象转换成JQuery对象来使用JQuery提供的丰富功能,也可以将JQuery对象转换成DOM对象。使用DOM对象特有的成员提供的功能。
7、可以使用 addClass() 方法和 css() 方法为 Dom元素添加样式。
8、使用 next() 方法可以获得所匹配元素集合中每个元素其后紧邻的元素。
9、使用 show() 和 hide() 可以设置元素的显示和隐藏。