Web前端新人笔记之jquery入门

本章将为大家介绍以下几点内容;  1、jquery的主要特点;  2、建立jquery的编码环境;  3、简单jquery脚本示例;  4、选择jquery而不是纯javaScript的理由;  5、常用的jquery开发工具;jquery能做什么?  ① 取得文档中的元素
$(‘div.content‘).find(‘p‘);
   ② 修改页面的外观
$(‘ul > li:first‘).addClass(‘active‘);

    ③ 改变文档内容

$(‘#container‘).append(‘<a href="www.baidu,com">more</a>‘)

    ④ 为页面添加动态效果

$(‘div.content‘).slideDown();

     ⑤ 响应用户的交互操作

$(‘button.show-details‘).click(function(){
    $(‘div.details‘).show();
});

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

$(‘div.details‘).load(‘more.html #content‘);

     ⑦ 简化常见的javaScript任务

$.each(obj, function(key,value)(  total += value;));

 jquery为何如此出色?

  1、利用了CSS的优势;
  2、支持扩展;
  3、抽象浏览器不一致;
  4、总是面向集合;
  5、将多重操作基于一行;
 如何下载jquery?
  1、由于JavaScript是一种解释语言,所以不必担心编译和构建。什么时候需要使用jquery,只要在HTML文档中使用<script>元素把它导入进来即可。
  2、jquery官网:http://jquery.com/
 都有哪些开发测试工具?
  现代浏览器中一般内置了高质量的开发工具,我们可以选择自己觉得方便的工具,一下列出了一些推荐工具:
   1、IE;
   2、Safari;
   3、Chrome;
   4、Firefox;
   5、Opera;
  上面列出来的这些工具都提供了类似的功能:
   1、探测及修改DOM;
   2、研究CSS及页面变现之间的关系;
   3、通过特殊的方法方便的跟踪脚本执行;
   4、暂停脚本执行及检查变量值;

 
时间: 2024-12-14 11:03:23

Web前端新人笔记之jquery入门的相关文章

Web前端新人笔记之jquery选择符

jquery利用了CSS选择符的能力,让我们能够在DOM中快捷而轻松的获取元素或元素集合.本章将介绍以下内容: 1.网页中的元素结构: 2.如何通过CSS选择符在页面中查找元素: 3.扩展jquery标准的CSS选择符: 4.让选择页面元素更灵活的DOM遍历方法:一.如何理解DOM? DOM中的对象网络与家谱十分相似.比如祖先元素.父元素.子元素等等. 元素之间的关系图从下面的图就可以看清楚: 为了把DOM结构更形象的表现出来,可以使用很多工具,列如Firefox的Firebug插件,Safar

Web前端新人笔记之height、min-height的区别

 浏览器参照基准:Firefox, Chrome, Safari, Opera, IE: * IE6不支持CSS min-height属性.最小高度的定义:1. 元素拥有默认高度:2. 当内容超出元素的默认高度时,元素的高度随内容增加而增加Figure 1:如下图的需求 * 如上图,两个区域的高度不一样.这就是 min-height 的效果演示.元素拥有一个默认的高度,当内容超出该默认高度时,元素的高度同时随内容而增加. eg1:<style> .test{ float:left; width

Web前端新人笔记之CSS值和单位

数字 颜色——命名颜色 在Css2.1中规范定义了17个颜色名.包括html4.0中定义的16个颜色及外加一个橙色: <h1 style="color=aqua">aqua</h1> <h1 style="color=fuchsia">fuchsia</h1> <h1 style="color=lime">lime</h1> <h1 style="color=

Web前端新人笔记之HeightCharts基础

通常情况下,Highcharts包含标题(Title).坐标轴(Axis).数据列(Series).数据提示框(Tooltip).图例(Legend).版权信息(Credits)等,高级的还包括导出功能按钮(Exporting).标示线(PlotLines).标示区域(PlotBands)等.Highcharts基本组成部分如下图所示HeightCharts的主要组成部分 Title 图表标题,包含标题和副标题(subTitle),其中副标题是非必须的. Axis 坐标轴,包含x轴(xAxis)

WEB前端学习笔记 一

最近时间比较充裕,整理了一下学习过的笔记,此篇笔记包含了:Html.Css.JavaScript.Jquery.以及使用帝国CMS或是织梦CMS建立自己的网站,也许也会整理一下PHP的笔记,如果时间允许会整理完全. 虽然笔记是从最基础的开始,但是,并不包含电脑的基础知识,所以你必须已经掌握了一些电脑的基本操作,比如开关机,你的电脑用的是什么操作系统,至少也要会用word和wps吧.浏览器是做什么的,什么拷贝.复制.粘贴.知道最基本的文件类型,如,文本文件,视频文件,图片文件,什么是可执行文件,分

web前端开发笔记(2)

web前端开发笔记(1) 一.HTML标签书写有哪些规范? 页面编码. 文档声明. 关键字与描述. 行内元素不能包含块级元素. a标签不能嵌套a标签. 标签名和属性必须用小写字母书写,属性必须加引号,标签必须闭合,单标签页必须闭合. 页面中不要用 进行缩进,如需缩进,用css控制. html标签使用必须语义化. 要为img标签填写alt和title属性. 二.HTML静态页面出现中文乱码如何解决? 引入<meta charset="UTF-8"> 三.通常情况下块属性标签和

WEB前端学习笔记 五

接web前端学习笔记第四篇,此篇为web学习笔记 五,在此感谢您的采集和转发,但请注明文章出自网知博学. 2.0.3  html标签的属性格式 现在我们知道了两个双标签分别是,标题标签:<h1> - <h6>.和段落标签:<p></p>还知道了一个换行的单标签:<br />,现在我们给<p></p>标签添加一个属性,来改变段落是右对齐,还是左对齐,还是居中. 如上图,<p>标签中的 align(中文就是排列的意

Web前端开发笔记整理

web前端开发笔记: 1.web前端之html_day1 2.web前端之html_day2 3.web前端之css_day1

WEB前端学习笔记 四

接上一篇,web学习笔记 四,在此感谢您对此篇笔记的认可,但转发时请注明文章出自网知博学. 2.0  html的语法格式 html的标签要写在尖括号中 :<> 在在英文输入法状态下,按住shift键然后再按它左侧的尖括号就可了, 先学习一个简单的h1标签,是个标题标签,在html中这样写: <h1>我在h1标签中,我就是标题</h1> 那么h1标签中所包裹的文字,就标记成标题了.通过浏览器的解析后在页面上显示出来的效果就是字体加粗,加黑,和word中的标题性质一样! 大