01_jQuery入门

来源：互联网发布：北京致远协创软件官网编辑：程序博客网时间：2024/06/12 21:23

【前言】

最近接触了很多js的东西，比如dwz，easyui，bootstrap，seajs，arale，nej等，

总得来说还是基于jquery 的框架比较容易上手（对于js不是很牛的），

jquery 的学习成本低，学习使用较为容易，

基于jquery 的前台框架（就是做很炫页面的）推荐bootstrap，

基于jquery的后台框架（就是后台管理）推荐easyui，

说了这么多，学好jquery 是必不可少的，以后也应该系统的学习下js，

以下是阅读《jQuery基础教程》的笔记。

1.1 jQuery能做什么

取得文档中的元素

修改页面外观

改变文档的内容

响应用户的交互操作

为页面添加动态效果

无需刷新页面从服务器获取信息

简化常见的js任务

1.2 jQuery为什么如此出色

利用css的优势

支持扩展

抽象浏览器不一致性

总是面向集合

将多重操作集于一行

1.3 第一个jQuery驱动的页面

1.3.1 下载jQuery

从官网jQuery.com下载到本地使用

或者通过微软和谷歌的CDN在线使用

1.3.2 在HTML文档中引入jQuery

01.html

<!DOCTYPE html><html><head><meta charset="utf-8"><title>01.html</title><link rel="stylesheet" href="01.css"><script type="text/javascript" src="jquery-1.9.1.min.js"></script><script type="text/javascript" src="01.js"></script></head><body></body><h1>hhhhhhhhhhhhhhhh</h1><div class="author">by sssssssss</div><div class="chapter" id="chapter-1"><h2 class="chapter-title">1.dddddddd</h2><p>dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;<span class="spoken">djflasjdfladjflasjdfladjflasjdfladjflasjdfla</span>dfhaskljdfhaskljdfhaskljdfhasklj</p><p>dfjladsjldfjladsjldfjladsjldfjladsjl</p><div class="poem"><h3 class="poem-title">DSHFJALDSJA</h3><div class="poem-stanza"><div>flasjd;fajkd;</div><div>flasjd;fajkd;</div><div>flasjd;fajkd;</div><div>flasjd;fajkd;</div></div></div><p>dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;dfaldskjfal;skdj;<span class="spoken">djflasjdfladjflasjdfladjflasjdfladjflasjdfla</span>dfhaskljdfhaskljdfhaskljdfhasklj</p><p>dfjladsjldfjladsjldfjladsjldfjladsjl</p><div class="poem"><h3 class="poem-title">DSHFJALDSJA</h3><div class="poem-stanza"><div>flasjd;fajkd;</div><div>flasjd;fajkd;</div><div>flasjd;fajkd;</div><div>flasjd;fajkd;</div></div></div></div></html>

01.css

@CHARSET "UTF-8";body {background-color : #fff;color : #000;font-family : Helvetica, Arial, sans-serif;}h1,h2,h3 {margin-bottom : .2em;}.poem {margin : 0 2em;}.highlight {background-color : #ccc;border : 1px solid #888;font-style : italic;margin : 0.5em 0;padding : 0.5em;}

1.3.3 编写jQuery代码

$(document).ready(function() {$('div.poem-stanza').addClass('highlight');});

1.3.4 最终结果

1.4 纯js与jQuery

1.5 开发工具

firebug

//for firebug$(document).ready(function() {console.log('hello');console.log(52);console.log($('div.poem-stanza'));});

1.6 小结