JQuery是一个优秀的javascript类库,jQuery以其简洁、快速等优点征服了众多javascript开发者。jQuery使用户能更方便地处理DOM、events、实现动画效果,并且方便地为网站提供Ajax交互。jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆javascript来调用命令了,只需定义id即可。(跟css有点类似)
它是轻量级的js库(压缩后只有21k),这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器(IE6.0+,FF1.5+,Safari2.0+,Opera9.0+)。jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。
开始学习--要求
务必要理解Javascript
认识JQuery需要做的五件事
1.Find:找到HTML页面中的元素2.Change:改变HTML的内容3.Listen:根据用户的操作做出反馈,比如按下按钮4.animate:在页面中使用动画效果5.talk:与网络互交,如果不想刷新页面而改变页面内容
什么是DocumentObjectModel
由浏览器生成的树状结构,从而能快速找到HTML中的元素,DocumentObjectModel简称:DOM
我们键入了一个地址,浏览器就会从地址中接受HTML,就像这样吧内容一段一段的加载到DOM中,一收到元素,就在DOM中创建节点,也就是HTML中的的下面...,可以说HTML是docunment的子节点,document就是HTML的父节点。
Function
为了用JQuery来操作DOM,我们把代码写到function中已达到目的,如:JQuery();改成JQuery(document);其中document也就是DOM
Find我们可以用选择器来找到DOM中的元素
Wheredoyouwanytodo
我们要找到h1的元素,可以这样写:Jquery("h1");简写可以这样写$("h1");
Change如何改变h1中的元素的值?我们首先获取到值,如:$("h1").text();这样就能获取到“Wheredoyouwanytodo”
改变:我们只需要将变化的值放到text的方法中就行了,如:$("h1").text("whereto");这样就能把DOM里面h1的text元素替换成"Whereto"
注意:HTML在浏览器中加载,可能JavaScript会在DOM加载完之前就运行了,这时候DOM是没有加载完的,这样h1元素可能不会Change的。你要确定DOM在加载完之后在和HTML互交
Ready在页面加载完之后,就会产生一个事件,也就是准备好了,我们要注意这个事件,来保证在DOM加载完之后JQuery才开始运行,我们可以这样写:JQuery(doucment).ready(function(){});这样一旦整个页面加载完function里面的代码就会运行
最后Change代码应该这样写:JQuery(doucment).ready(function(){$("h1").text("Whereto?")});