使用JQuery快速高效制作网页特效1章

JavaScript是一种描述性语言,也是一种基于对象和事件驱动的,并具有安全性能的脚本语言。JavaScript应用程序都要下载到浏览器的客户端执行,从而减轻了服务器端的负担。

特点:

主要用来向HTML页面中添加交互行为。

是一种脚本语言,语法和java类似。

一般用来编写客户端的脚本。

是一种解释性语言,边执行边解释。

1.ECMAScript标准

ECMAScript是一种开放的,国际上广为接受的,标准的脚本语言规范。它不与任何具体的浏览器绑定。

2.浏览器对象模型(BOM),提供了独立于内容与浏览器窗口进行交换的对象,使用浏览器对象模型可以实现与HTML的交互。

3.文档对象模型(网页元素)

文档对象模型(DOM),是HTML文档对象模型定义的一套标准方法,用来访问和操纵HTML文档。

JavaScript的基本结构

        <script type="text/Javascript">

        <!--

          JavaScript语句

        //向浏览器输出内容

         document.write("输出内容");

        -->

      </script>

JavaScript的执行原理

1.浏览器客户端向服务器发送请求:一个用户在浏览器的地址栏中输入要访问的页面(页面中包含JavaScript程序)

2.数据处理:服务器端将某个包含JavaScript的页面进行处理

3.发送响应:服务器端含有JavaScript的HTML文件处理页面发送到浏览器客户端,然后由浏览器客户端从上至下逐条解析HTML标签和JavaScript,并将页面效果呈现给用户。

使用客户端脚本的好处:

包含JavaScript的页面只要下载一次即可,这样能减少不必要的网络通信。

JavaScript程序由浏览器客户端执行,而不是由服务器执行的,因此能减轻服务端的压力。

引用JavaScript的方式

 1.使用<script>标签

 2.使用外部JavaScript文件

    <script src="hello.js" type="text/javascript">

 3.直接在HTML标签中

(例)

<onclick="javascript:alert(‘欢迎你‘)">

JavaScript核心语法

   var 合法变量名;

例: var width=20;  //在声明变量width的同时,将数值20赋给了变量width

   var x,y,z=10;  //在一行代码中声明多个变量时,各变量之间用逗号分隔

(JavaScript区分大小写,特别是变量的命名。)

数据类型

 1.undefined类型:

  当声明变量未初始化时,该变量的默认值是undefined。例: var width;

 2.null类型:

  可以用来检测某个元素是否被赋值.例:alert(null==undefined); //返回值为true

3.numberz类型

  这种类型既可以表示32位整数,又可以表示64位的浮点数。

    var iNum=23;

    var iNum=23.0;

4.String类型

  1,字符串的定义:

    字符串是一组被引号(单引号或双引号)括起来的文本。例:var string1="this is a";//定义一个字符串string1

        (JavaScript不对“字符‘或”字符串“加以区别)

  2.字符的属性和方法

    length属性,表示字符串的长度(包括空格等)

    var str=strlength.length;

    String对象常用的方法

  toString()  返回字符串

  toLowerCase() 把字符串转化为小写

  toUpperCase()把字符串转化为大写

  charAt(index) 返回在指定位置的字符

  indexOf(str,index) 查找某个指定的字符串在字符串中首次出现的位置(没有就返回-1)

  substring(index1,index2) 返回位于指定索引index1和index2之间的字符串,并且包括索引index1对应的字符,不包括索引index2对应的字符

  split(str)  将字符创分割为字符串数组

5.boolean类型

  true和false

 JavaScript提供了typeof运算符来判断一个值或变量究竟属于哪种数据类型。

  object:如果变量是null类型,或者变量时一种引用类型,如对象,函数,数组,则返回object类型的结果。

数组:

    var 数组名称=new Array(size);

  语法: var fruit=new Array("apple","orange","peach","bananer");

数组的常用属性和方法

  length 返回数组中元素的数目

  join() 把数组的所有元素放入一个字符串,通过一个分隔符进行分隔

  sort() 对数组排序

  push() 向数组末尾添加一个或更多元素,并返回新的长度

for循环的第二种写法:

  //fruit数组名

  for(var i in fruit){

}

常用的输入/输出

//警告

  alert("提示信息")

//提示

  prompt(”提示信息“,"输入框的默认信息");

var str=prompt(”提示信息“,"输入框的默认信息");;

名称可以包括大写字母,小写字母,数字,下划线和美元符号($),但必须以字母,下划线或美元符号($)开头。

常用系统函数:

JavaScript 提供两种把非数字的原始值转换成数字的函数,即parsetInt()和parseFloat(),它提供了一个检查是否非数字的函数isNaN().

parseInt("字符串")可以解析一个字符串,并返回一个整数。

  parseInt("字符串");

parseInt()函数首先查看位置0处的字符,判断是否为一个有效数字,如果不是则返回NaN。

  parseFloat()函数与parseInt相似

 isNaN() 函数用于检查其参数是否是非数字

  var flag1=isNaN("12.5");  //返回false

var flag1=isNaN("12.5s");  //返回true

      自定义函数

    function 函数名(参数1,参数2......){

      //JavaScript语句

      [return 返回值]      

}  

  调用函数: 事件名="函数名()"

  匿名函数:

 var show= function(参数1,.....){  //是没有名字

}

  调用匿名函数:事件名=”show()“

时间: 2024-10-23 13:19:32

使用JQuery快速高效制作网页特效1章的相关文章

使用jQuery快速高效制作网页特效-----------------------------之jQuery事件与动画

1.基础事件 分为三个事件 1.1 window事件 所谓window事件,就是当用户执行某些会影响浏览器的操作时,而触发的事件. 1.2 鼠标事件 鼠标事件顾名思义就是当用户在文档上移动或单击鼠标时而产生的事件. 1.click事件:    单击鼠标时触发 $('p').click(function(){}); 2.mouseover事件: list.mouseover(function(){ $(this).css("background","pink"); }

使用JQuery快速高效制作网页交互特效

第二章 JavaScript对象 浏览器对象模型(BOM)是JavaScript的组成之一,window对象是整个BOM的核心 window对象的常用方法 prompt():显示可提示用户输入的对话框 alert():显示一个带有提示信息和一个"确定"的按钮的警示对话框 confirm():显示一个滴啊有提示信息,"确定"和"取消"按钮的对话框 close():关闭浏览器窗口 open():打开一个新的浏览器窗口,加载给定URL制定的文档 set

使用JQuery快速高效制作网页交互特效第二章到第七章

第二章 JavaScript对象 浏览器对象模型(BOM)是JavaScript的组成之一,window对象是整个BOM的核心 window对象的常用方法 prompt():显示可提示用户输入的对话框 alert():显示一个带有提示信息和一个"确定"的按钮的警示对话框 confirm():显示一个滴啊有提示信息,"确定"和"取消"按钮的对话框 close():关闭浏览器窗口 open():打开一个新的浏览器窗口,加载给定URL制定的文档 set

使用jQuery快速高效制作网页交互特效——06 第六章 jQuery选择器

1.jQuery选择器:jQuery选择器类似于CSS选择器,用来选取网页中的元素.       Eg:$("h3").css("background","#09F");            分析:  获取并设置网页中所有<h3>元素的背景   "h3"为选择器语法,必须放在$()中    $("h3")返回jQuery对象           .css()是为jQuery对象设置样式的方法

使用jQuery快速高效制作网页交互特效(3)

引入jquery时 不允许在 引入的这行script标签中完成代码的编写 必须另起一行,再写一个script标签完成程序 window.onload事件触发在jquery加载完毕触发之后 window.onload 在当前页面有且仅能存在1个 $(document).ready(function()//在页面加载完毕时 触发 {  alert("hello jquery!"); }); DOM对象是靠 javascript形式获取的元素(节点)信息 所能用的只有javascript中的

使用jQuery快速高效制作网页交互特效(6)

removeClass() 如果括号中没有参数  移除所有的class属性 var content = $("ul").html(); //获取文本 $("ul").html(text); //对于标签内部的文本替换 var content = $("ul").text(); //获取文本 但是无法获得内部的HTML标签 $("ul").text(text); //替换操作 无法解析HTML标签 就算替换的文本中包含HTML标

使用jQuery快速高效制作网页交互特效(4)

$(function() { $("h1").css("color","#acf"); $("#h1").css("background-color","pink"); //h1标签 并且有一个class属性 值为h1 (交集选择器) $("h1.h1").css("background-color","red"); //div

使用jQuery快速高效制作网页交互特效(5)

//获取点击当前的元素 var text = $(this).html(); keydown 和 keypress 同时触发的 只不过 keypres还针对能打印出字符的按键keyup按键松开时触发 blur 失去焦点 绑定单个事件 bind("事件名",事件内容)$("li").bind("click",function() { alert($(this).html()); }) bindbind({}) 包含大括号事件名 : 事件内容 事件名

使用jQuery快速高效制作网页交互特效(1)

引入外部的js文件   该js文件中 不允许存在<script>标签 //单行注释 /* 多行注释 */ prompt是弹出一个窗口 接受用户的输入  不常用 isNaN  非数字 onclick:鼠标左键 单击事件