网站系统开发团队简介,wordpress swf插件,网站图片自动轮换怎么做的,官方网站营销1.本门课的作用#xff08;JavaScript的作用#xff09;所有基于Web的程序开发基础
2.一种计算机客户端脚本语言#xff0c;主要在Web浏览器解释执行。
3.浏览器中Javascript#xff0c;用于与用户交互#xff0c;以及实现页面中各种动态特效
4.在HTML文件中#xff0…1.本门课的作用JavaScript的作用所有基于Web的程序开发基础
2.一种计算机客户端脚本语言主要在Web浏览器解释执行。
3.浏览器中Javascript用于与用户交互以及实现页面中各种动态特效
4.在HTML文件中任何JavaScript代码必须放到script标签中
5.把JavaScript代码放到外部文件中在HTML代码中直接引入该文件(外部文件定义为*.js) 6.就算语法特点
– 类C语言
– 弱类型变量的数据类型可以任意转换
7. • 单行注释// • 多行注释/* */
8.JavaScript中5种内置数据类型Number、String、Boolean、Undefined、Null
9. 获得变量在某一时刻的数据类型使用typeof运算符
10. 转换为Number类型parseInt()、parseFloat()
– 转换为String类型原变量 ‘’
– 转换为Boolean类型变量之前加 !! 11. 值相等则为true
– 类型和值都须相同则为true
12.CSS选择器的作用选择具有一定特征的元素应用某一种样式
13.选择器就是一些公用的代码段
14.函数完成特定功能的一段代码
– 可重用性
– 任务分解
函数的要素函数名、函数参数、函数返回值
16.•JS中函数分类
– JS内置函数如parseInt( )、eval( )、alert( )、
– 自定义函数
使用function关键字定义函数调用方式
– 直接调用 --通过事件触发
19.在函数体内形参其实就是一个变量函数调用时一方面可以通过参数向函数传递
数据另一方面也可以从函数获取数据。
return语句不带表达式时仍会返回值该值为Undefined在一个函数定义的函数体语句中出现对另一个函数的调用这就是函数的嵌套调用事件能被JavaScript检测到的活动
– 用户动作鼠标或键盘操作等
– 状态变化加载、改变文本框内容等
常用事件类型
—页面加载事件 —图片事件 —表单事件 —键盘和鼠标事件
24.获得字符串的长度
– 通过字符串变量的length属性获得
25.根据位置截取一段子串
– 通过字符串变量的substr()方法
参数1截取的开始位置
参数2截取的长度
26.查找子串
– indexOf()方法参数要查找的子串
字符串定义 单引号或双引号定义
字符串常用操作
– 字符串长度length属性
– 截取子串substr( )方法
– 查找子串indexOf( )方法
– 字符串连接运算符
数组用来在单独的变量中存储一系列的值
定义数组
– 方式一通过[ ]方式
例var arr1 [‘a’,‘b’,‘c’];
– 方式二通过new Array方式
var arr2 new Array(‘a’,‘b’,‘c’);
JavaScript是一门基于对象的语言 对象具有一些属性和行为
属性
– 通过变量来表示
行为
– 通过函数来实现
30. 访问对象属性/方法
– 方式一通过 对象名 . 属性名 、对象名 . 方法名( )
– 方式二通过 对象名[“属性名” ] 修改对象属性
– 直接赋值给对象属性
31.删除对象属性
– 使用delete关键字
构造函数的形参用于赋给对象的属性在构造函数中使用this指代对象对象的属性和方法必须通过this访问通过new 关键字来通过构造函数创建对象JavaScript包含的对象
– 自定义对象
– 内置对象
– 浏览器对象BOM
– 文档对象DOM
String对象处理字符串相关操作
– 获取字符长度
– 判断子串位置
– 截取子串 Array对象的使用
常用操作
– 获取数组长度
– 向数组末尾增加元素
– 从数组末尾获取元素 Math对象的使用
常用操作
– 四舍五入Math. round( )
– 向下取整Math.floor( )
– 生成随机数Math.random( )
– 取到最大值Math.max( )
– 取到最小值Math.min( )
Date对象的使用
Date对象包含了一系列的日期时间处理的功能
– 创建Date对象例 var now new Date( );
•常用操作
– 获取当前日期时间 toLocaleString( )
– 获取年份、月份、日期getFullYear()、 getMonth()、getDate()
– 获取小时、分钟、秒钟 getHours()、 getMinutes()、getSeconds()
JavaScript的对象就是一些属性和方法的集合属性的实质是一些数据在程序中用变量保存方法的实质是一些行为在程序中用函数实现创建对象使用{ } 括号内部为属性名属性值或方法名方
法体属性和属性间用逗号分隔
通过.符号访问对象中的属性或方法通过[ ]访问对象中的属性或方法BOM作用•弹出窗口•计数器•自动跳转页面•获得浏览器信息•图片切换
44.BOM综述
BrowserObject浏览器提供的用户与浏览器窗口之间交互的对象及操作的接口。
Model 这些对象并不是独立存在的对象与对象之间存在着层次结构对象模型的作用就是描述这些层次结构。
弹出提示窗口alert();例window.alert(‘你确定要关闭此窗口吗’);弹出确认窗口 confirm() 例window.confirm(‘你确定要关闭此窗口吗’); 弹出输入框 prompt() 例window.prompt(‘请输入你的评价, 1(满意) 2(一般)’); 延迟执行 setTimeout() – setTimeout( code , millisec ) clearTimeout() – clearTimeout( id_of_settimeout ) 定时执行 setInterval() – setInterval( code , millisec ; clearInterval() – clearInterval( id_of_setinterval 打开/关闭窗口 open () ; close();
使用document对象 常用方法document.write()子对象
– forms
– images
– links
– anchors
– location 使用history对象 history对象可以访问浏览器窗口的浏览历史
子对象
-Back(); -forward(); -go(); 使用location对象 location对象包含当前窗口的URL信息。 使用navigator对象 navigator对象包含浏览器的信息浏览器的类型、版本信息都可以从中获取。 使用srceen对象 screen对象包含客户端屏幕的相关信息。
子对象
-height(); -width();
47.DOMDocument Object Model文档对象模型
– 浏览器提供的操作HTML文档内容的应用程序接口
– 用于对文档进行动态操作如增加文档内容、删除文档内容、修改文档内容等等
48.DOM的核心就是对DOM树的操作即增加、删除、修改DOM树中的内容
DOM节点是一个对象属性和方法访问DOM节点
通过id属性获得节点
document.getElementById( )
•通过标签名获得所有同名标签document(或某一节点对象).getElementsByTagName( )
•通过父节点获得子节点node.childNodes[ ]、node.firstChild、node.lastChild
•通过子节点获得父节点node.parentNode
•获得前后兄弟节点node.previous(next)Sibling
51.获得某一元素节点的属性节点
– 标准方式获得属性node.getAttribute( name )
– 简单方式获得属性node. attrName
•修改某一元素节点的属性节点
– 直接赋值给属性
52.获得某一元素节点的相关信息
– 节点类型node.nodeType
– 节点标签名node.nodeName
•获得文本节点的文本值node.nodeValue
53.生成一个 DOM节点
– 生成一个元素节点 document.createElement( )
– 生成一个文本节点document.createTextNode( )
•把生成的节点作为某一个节点 node的子节点
– 作为node节点的最后一个子节点
node.appendChild( newNode )
– 插入到node节点中某一子节点之前
node.insertBefore( newNode, oldNode )
54. 删除一个元素节点、文本节点
– 通过父节点删除本节点myParent.removeChild(mySelfNode )
– 通过自己删除本节点
mySelfNode.parentNode.removeChild(mySelfNode )
• 删除一个属性节点 node.attrName ‘’;
55修改一个元素节点新节点替换旧节点
oldNode.parentNode.replaceChild (newNode, oldNode )
•修改一个文本节点替换文本值
textNode.nodeValue “”;
•修改一个属性节点覆盖原有属性
node.attrName ‘newAttrValue’;
56.程序原则
– 应尽量使用节点对象属性的方式来绑定事件处理函数
– 尽量避免HTML标记属性中绑定事件处理函数
57.DOM中每个元素结点都有一个style对象管理元素的样式
58访问样式表
使用document.styleSheets属性
– 包含了页面上所有样式表的引用
– 数组
•每个styleSheets属性指定一个cssRules集合包含所有定义在样式表中的规则
– 注意在IE中为“rules”
59.第三方库Prototype 、MooTools、Dojo Toolkit、
60jQuery的一大贡献就是将行为与结构分离
61jQuery选择器
基本功能
快速、精确地选择某一个某一组元素
返回该元素组的jQuery包装集
优势 简洁 强大
62选择器类别划分 标签选择器 var div $(‘div’); 类选择器 var toHidden $(‘.toHidden’); ID选择器 var toExten $(‘#toExten’); 群选择器 var nodes $(‘div, p, ul, ol’); 通用选择器var anyNodes $(‘*’);
基本选择器 层次选择器 过滤选择器 表单选择器 表单过滤选择器
基本过滤器下标从0开始 :first、:last、:not(selector)、:even、:odd、:eq(index) :gt(index)、:lt(index)
内容过滤选择器 :contains(text)、:empty、:has(selector)
可见性过滤选择器:hidden、:visible
属性过滤选择器 [attribute]、[attributevalue]、[attribute!value]
第index个子元素下标从1开始 :nth-child(index/even/odd/equation)
第1个子元素 :first-child
最后1个子元素 :last-child
选取input、textarea、select和button元素 :input
选取所有文本框input type“text”/ :text
选取所有密码框 :password
选取所有单选按钮 :radio
选取所有多选按钮 :checkbox
选取所有提交按钮 :submit
选取所有重置按钮 :reset
选取所有文件上传域 :file
选取所有图像按钮 :image
选取所有按钮 :button
选取所有隐藏域input type“hidden”/ :hidden
选取所有可用元素 :enabled
选取所有不可用的元素 :disabled
选取所有被选中的元素 :checked
选取所有被选中的下拉列表项:selected
使用选择器获取的对象为jQuery包装集jQuery对象jQuery包装集和DOM对象转化
DOM→jQuery使用 $( ) 包装
jQuery→DOM数组下标方式、get( )方法获得
文档就绪事件是jQuery中扩展的一个新事件
作用替代window.onload事件
写法 $(document).ready(function(){ //..文档就绪后的处理函数})
66.this在事件处理函数中同原生JS一样指代触发事件的DOM对象
通常通过$(this)的方法将DOM对象转换为jQuery对象
jq绑定事件的方法 -通过事件方法 -通过bind方法jQuery文档操作
查找节点
插入节点
删除节点
设置和获取HTML、文本和值
69获取用户名控件节点
var $userName $(input[nameusername]);
获取密码控件节点
var $pswd $(input[namepswd]);
获取标题节点
var $h1 $(h1);
70text()返回或设置匹配元素的文本内容
返回匹配元素的文本内容
$p_con $(‘p’).text()
设置匹配元素的文本内容
$p_content $(‘p’).text(‘你不喜欢的水果是’);
71设置和获取属性 attr()
设置属性$(‘p’).attr(‘title’,‘最不爱的水果是’);
获取属性$(‘p’).attr(‘title’);
删除属性removeAttr()
$(‘p’).removeAttr(‘title);
72添加类addClass()
向匹配的元素中追加一个类
$(‘li’).addClass(‘bgcolor’);
删除类removeClass()
删除匹配的元素中指定的类
$(‘li’).removeClass(‘bgcolor’);
删除匹配元素的所有类
$(‘li’).removeClass();
73设置和获取匹配元素的CSS样式 css()
获取样式$(‘li’).css(‘title’);
设置样式$(‘li’).css(‘padding’,’15px’);
设置多个样式$(‘li’).css({ color:white, font-size:20px, padding:5px
} )
74父节点
子节点
兄弟节点silblings()
$sibNode s $(‘ul’).siblings();
上一个节点prev()
$preNode $(‘ul’).prev()
下一个节点next() $nxtNode $(‘ul’).next()
