day05HTML DOM内置对象
day05HTML DOM内置对象
Html dom内置对象
html dom指的是在w3c dom出现之前,各大浏览器都支持的一些dom对象及操作.
表格相关:
Table 表格
rows:返回当前表格表格航所组成的数组对象
insertRow(index)插入表格行返回值是刚刚插入的表格行对象
deleteRow(index)删除表格行
tabRow表格行
cells:返回该表格行中所有的单元格对象组成的数组
insertCell(index)返回刚刚插入的单元格对象
deleteCell(index)
tableCell单元格
下拉列表相关:
select 下拉列表对象
selectedIndex:当前正选择项的下标
length:返回下拉列表所包含的下拉项的个数
options:返回下拉列表所包含的下拉项所组成的数组option 对象
Option 下拉列表对象&option value=&&&北京&/option&
text:下拉项的内容文本
value:下拉项的value属性值
selected:当前下拉项是否被选中 true false
===========================================
BOM Browser Object Model
浏览器对象模型
包含了浏览器内置的一些对象,用来操作窗口
这些对象有:window ,location, navigator ,XMLHttpRequest 等.
window:窗口对象
location:封装了当前的url信息
window.location.href获取url字符串
navigator:封装了当前浏览器的信息(netScope navigator)
XMLHttpRequest: ajax相关的js对象
alert() & & &弹警告窗
confirm() 弹出确定窗
prompt() 弹出输入窗
open()打开子页面
opener//父窗口的句柄,子窗口的属性
close()关闭子页面
js定时器相关API
setTimeout(f1,5000): f1函数名隔多久以后执行一次函数
setTimeout(function(){匿名函数},5000); & clearTimeout(定时器对象)
setInterval:每隔多久以后执行一次周期函数clearInterval(定时器对象)
javaScript事件处理机制
js事件绑定的两种方式
1&把事件绑定在html的标签上
&a onclick()=&xx&&
2&把事件绑定在js dom节点对象上
&a id=&a&&&/a&
$('a').onclick=function (e){//火狐需要把event传过去
};//必须在onload函数中,(页面未加载完成a无法拿到)
如何获取事件对象的事件源
IE:event.srcElement
FireFox:event.target
IE/firefox: event.srcElement||event.target
========================================
javascript面向对象基础:
支持封装,不支持继承和多态的语法.
如何创建对象:
1&使用function模拟创建类型,然后使用new关键字创建对象.
function Persion(name,
= function(){
alert(&我是&+this.name);
2&使用Object创建临时对象.
var obj=new Object();
obj.name=&zs&;
obj.age=20;
obj.say=function(){
alert(&.......&);
3&使用json的语法创建对象
var obj={&key&:&value,&key&:value
&hobby&:[&h1&,&h2&,&h3&],&married&:false,
&idcard&:{&id&:&2222&,&address&:&shanghai&}
&name&xx&/name&
&age&xx&/age&
{&name&:&xx&,&age&:30} //轻量级的数据传入语言
我的热门文章
即使是一小步也想与你分享> python学习笔记-Day14 -js/dom/jquery
python学习笔记-Day14 -js/dom/jquery
相关推荐：第七章 动态创建标记4.AjaxAJAX = 异步 JavaScript 和 XML。异步加载页面内容技术，是一种用于创建快速动态网页的技术。。使用Ajax可以做到只更新页面中的一小部分。其他内容——标志、导航、头部、脚部，都不用重新加载。用户点击链接时可以在不重新加
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能.。JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。是一种解释性脚本语言（代码不进行预编译）。 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。 嵌入html的方式（最常用的）login.html&body&&!--........--&&!--方式1--&&script type=&text/javascript& src=&comm.js&&&/script&&!--方式2--&&script type=&text/javascript&&func()&/script&&/body&comm.jsfunction func(){alert(&123&);}注意在写js函数的时候的时候 函数体以{}确定， 每一条语句后面需要加分号js在嵌入html文件的时间一般都放在body标签的底部，这样可以提高用户体验。函数的另外一种定义方式，执行效果与先定义一个函数 在执行该函数类似：(function(arg) {alert(arg);})(&args&);注释方式单行//多行/**/变量name = “asd”定义 全局变量var name =“123” 定义局部变量注意 在使用变量的时候 需要注意作用域的问题。字符串操作string.trim()string.charAt(index)string.substring(start,end)string.indexOf(char)string.length打开chrome，按F12 ，找到console，可以像python一样实时调试js代码：vara= & sd&undefineda.trim()&sd&a=&qwert&&qwert&a.charAt(2)&e&a.substring(0.2)&qwert&a.indexOf(&q&)0a.length5数组操作声明：var arr=Array()var arr=Array[]添加元素arr.push(ele)追加arr.unshift(ele)最前插入arr.splice(index,0,'content')指定索引插入 移除元素arr.pop()数组尾部获取arr.shift()数组头部获取arr.splice(index,count)数组指定位置后count个字符 切片arr.slice(start,end)合并newArray ＝ arr1.concat(arr2)翻转arr.reverse() 字符串化arr.join('_') 获取长度arr.lengtha=[11,22,33][11, 22, 33]a.push(44)4a[11, 22, 33, 44]a.unshift(00)5a[0, 11, 22, 33, 44]a.splice(1,0,&a&)[]a[0, &a&, 11, 22, 33, 44]a=[11,22,33][11, 22, 33]a.pop()33a.shift()11a[22]a=[11,22,33][11, 22, 33]a.splice(1,1)[22]a[11, 33]a=[11,22,33,44,55][11, 22, 33, 44, 55]a.slice(1,3)[22, 33]a=[11,22,33,44,55][11, 22, 33, 44, 55]a.slice(1,3)[22, 33]a=[11,22,33,44,55][11, 22, 33, 44, 55]b=[&qq&,&ww&][&qq&, &ww&]a.concat(b)[11, 22, 33, 44, 55, &qq&, &ww&]a.reverse()[55, 44, 33, 22, 11]a[55, 44, 33, 22, 11]a.join(&_&)&55_44_33_22_11&a.length5流程控制if语句if (条件){只有当条件为 true 时执行的代码}注意：请使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！if..else..if (条件){当条件为 true 时执行的代码}else{当条件不为 true 时执行的代码}If...else if...elseif (条件 1){当条件 1 为 true 时执行的代码}else if (条件 2){当条件 2 为 true 时执行的代码}else{当条件 1 和 条件 2 都不为 true 时执行的代码}for循环for (语句 1; 语句 2; 语句 3){被执行的代码块}语句 1 在循环（代码块）开始前执行语句 2 定义运行循环（代码块）的条件语句 3 在循环（代码块）已被执行之后执行while 循环while (条件){需要执行的代码}do/while 循环do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。do{需要执行的代码}while (条件);js中也有 break和continue语句break 语句用于跳出循环。continue 用于跳过循环中的一个迭代。异常处理try{//在这里运行代码}catch(err){//在这里处理错误}try 语句允许我们定义在执行时进行错误测试的代码块。catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。JavaScript 语句 try 和 catch 是成对出现的。Throw 语句throw 语句允许我们创建自定义错误。正确的技术术语是：创建或抛出异常（exception）。如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。语法throw exception########################################################################dom 文件对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。选择器：document.getElementById('id')document.getElementsByName('name')document.getElementsByTagName('tagname')常用函数：创建标签，document.createElement('a')获取或者修改样式obj.className获取或设置属性setattribute(key,val)getattribute(key)获取或修改样式中的属性obj.style.属性提交表单document.geElementById(‘form’).submit()常用事件：onclickonbluronfocuson...onload和readybody标签添加 或者 window.onload = function(){}覆盖上一个onload只能注册一次，而ready就可以多次注册$(document).ready(function(){}) 或者 $(function(){})onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的，不等图片加载完毕。图片还么有渲染，就可以进行事件的执行。其他函数：console.log()location.href = &url& 和 open('url')alert()confirm()setInterval(&alert()&,2000);clearInterval(obj)setTimeout();clearTimeout(obj)跑马灯效果&!DOCTYPE html&&html&&head&&meta charset='utf-8' &&title&欢迎blue shit莅临指导&/title&&script type='text/javascript'&function Go(){var content = document.var firstChar = content.charAt(0)var sub = content.substring(1,content.length)document.title = sub + firstC}setInterval('Go()',1000);&/script&&/head&&body&&/body&&/html&搜索框效果&!DOCTYPE html&&html&&head&&meta charset='utf-8' /&&title&&/title&&style&.gray{color:}.black{color:}&/style&&script type=&text/javascript&&function Enter(){var id= document.getElementById(&tip&)id.className = 'black';if(id.value=='请输入关键字'||id.value.trim()==''){id.value = ''}}function Leave(){var id= document.getElementById(&tip&)var val = id.if(val.length==0||id.value.trim()==''){id.value = '请输入关键字'id.className = 'gray';}else{id.className = 'black';}}&/script&&/head&&body&&input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();'onblur='Leave();'/&&/body&&/html&#####################################################################jqueryjQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。特点1.动态特效2.AJAX3.通过插件来扩展4.方便的工具 - 例如浏览器版本判断5.渐进增强6.链式调用7.多浏览器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了对Internet Explorer6,7,8的支持）jQuery 库包含以下特性：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities实例 ： 返回顶部&!DOCTYPE html&&html lang=&en&&&head&&meta charset=&UTF-8&&&title&&/title&&style&.back{position:bottom: 0right: 0}.hide{display:}&/style&&/head&&body&&div style=&height: 2000&&&/div&&div onclick=&GoTop()& class=&back hide&&返回顶部&/div&&script src=&jquery-1.8.2.js&&&/script&&script type=&text/javascript&&function GoTop(){//返回顶部$(window).scrollTop(0);}$(function(){$(window).scroll(function(){//当滚动滑轮时，执行函数体//获取当前滑轮滚动的高度var top = $(window).scrollTop();if(top&100){//展示“返回顶部”$('.back').removeClass('hide');}else{//隐藏“返回顶部”$('.back').addClass('hide');}});});&/script&&/body&&/html&实例：多选框&!DOCTYPE html&&html&&head&&meta charset='utf-8' /&&title&&/title&&script type=&text/javascript& src='jquery-1.8.2.js'&&/script&&script type=&text/javascript&&$(function(){$('#selectAll').click(function(){$('#checklist :checkbox').attr('checked',true);})$('#unselectAll').click(function(){$('#checklist :checkbox').attr('checked',false);})$('#reverseAll').click(function(){$('#checklist :checkbox').each(function(){$(this).attr('checked',!$(this).attr('checked'))})})})&/script&&/head&&body&&div id='checklist'&&input type='checkbox' value='1'/&篮球&input type='checkbox' value='2'/&足球&input type='checkbox' value='3'/&羽毛球&/div&&input type='button' value='全选' id='selectAll' /&&input type='button' value='不选' id='unselectAll' /&&input type='button' value='反选' id='reverseAll' /&&/body&&/html&实例：菜单 css文件：.hide{display:}.container{width:300height: 600background-color: #border: 1px solid #999;}.container .title{height: 38font-size: 28line-height: 38background-color:cursor:}.container .body{background-color:}.container .body a{display:padding: 10}html文件&!DOCTYPE html&&html&&head&&meta charset='utf-8' /&&link rel=&stylesheet& type=&text/css& href=&common.css& /&&script type=&text/javascript& src='jquery-1.8.2.js'&&/script&&/head&&body&&div class='container'&&div&&div class='title'&Menu1&/div&&div class='body'&&a href=&&&content1&/a&&a href=&&&content2&/a&&a href=&&&content3&/a&&/div&&/div&&div&&div class='title'&Menu1&/div&&div class='body hide'&&a href=&&&content1&/a&&a href=&&&content2&/a&&a href=&&&content3&/a&&/div&&/div&&div&&div class='title'&Menu1&/div&&div class='body hide'&&a href=&&&content1&/a&&a href=&&&content2&/a&&a href=&&&content3&/a&&/div&&/div&&div&&div class='title'&Menu1&/div&&div class='body hide'&&a href=&&&content1&/a&&a href=&&&content2&/a&&a href=&&&content3&/a&&/div&&/div&&div&&div class='title'&Menu1&/div&&div class='body hide'&&a href=&&&content1&/a&&a href=&&&content2&/a&&a href=&&&content3&/a&&/div&&/div&&/div&&script type=&text/javascript&&$(function(){$('.title').click(function(){$(this).parent().siblings().children('.body').addClass('hide');$(this).next().removeClass('hide');});});&/script&&/body&&/html&实例，表页签 （Tab）body {margin: 0font-family: A_font-family: 宋体,Afont-size: 12相关推荐：&!-- DOM List --&&div class=&dot&&&span class=&&&&/span&&span class=&&&&/span&&span class=&&&&/span&&span class=&&&&/span&&span class=&cur&&&/span&&/div&效果图：// 纯js获取点}body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, figure, div {margin: 0;padding: 0;}ol, ul, li {list-style:}a{cursor:text-decoration:}/*a:hover{color: #F60 !text-decoration:}*/img{border:border-width:0}table{border-collapse:border-spacing: 0;}.red{color: #c00!}.m8{margin:8}.mt10{margin-top:10}.mt20{margin-top:20}.mr5{margin-right:5}.ml5{margin-left:5}.ml10{margin-left:10}.mb10{margin-bottom:10}.pt18{padding-top:18}.pt20{padding-top:20}.pb20{padding-bottom:20}.nbr{border-right:0}.font12{font-size:12}.font14{font-size:14}.font16{font-size:16}.bold{font-weight:}.left{float:}.right{float:}.hide{display:}.show{display:}.clearfix{clear:}.clearfix:after {content: &.&;display:height: 0;clear:visibility:}* html .clearfix {zoom: 1;}.container{width:1190margin-left:margin-right:}.group-box-1 .title{height: 33line-height: 33border: 1px solid #DDD;background: #f5f5f5;padding-top: 0;padding-left: 0;}.group-box-1 .title .title-font{display: inline-font-size: 14font-family: 'Microsoft Yahei','SimHei';font-weight:color: #333;padding-left: 10}.group-box-1 .body {border: 1px solid #e4e4e4;border-top:}.tab-menu-box1 {border: 1px solid #margin-bottom: 20}.tab-menu-box1 .menu {line-height: 33height: 33background-color: #f5f5f5;}.tab-menu-box1 .content {min-height: 100border-top: 1px solid #background-color:}.tab-menu-box1 .menu ul {padding: 0;margin: 0;list-style:/*position:*/}.tab-menu-box1 .menu ul li {position:float:font-size: 14font-family: 'Microsoft Yahei','SimHei';text-align:font-size: 14font-weight:border-right: 1px solid #padding: 0 18cursor:}.tab-menu-box1 .menu ul li:hover {color: #c9033b;}.tab-menu-box1 .menu .more {float:font-size: 12padding-right: 10font-family: &宋体&;color: #666;text-decoration:}.tab-menu-box1 .menu a:hover {color: #f60 !text-decoration:}.tab-menu-box1 .menu .current {margin-top: -1color: #c9033b;background: #height: 33border-top: 2px solid #c9033b;z-index: 10;}.tab-menu-box-2 .float-title {display:top: 0position:z-index: 50;}.tab-menu-box-2 .title {width: 890border-bottom: 2px solid #b20101;border-left: 1px solid #e1e1e1;clear:height: 32}.tab-menu-box-2 .title a {float:width: 107height: 31line-height: 31font-size: 14font-weight:text-align:border-top: 1px solid #e1e1e1;border-right: 1px solid #e1e1e1;background: url(/Content/images/bg4.png?3) 0 -308px repeat-x;text-decoration:color: #333;cursor:}.tab-menu-box-2 .title a:hover {background-position: -26px -271text-decoration:color: #}.tab-menu-box-2 .content {min-height: 100background-color:}.tab-menu-box3 {border: 1px solid #}.tab-menu-box3 .menu {line-height: 33height: 33background-color: #f5f5f5;}.tab-menu-box3 .content {height: 214border-top: 1px solid #background-color:}.tab-menu-box3 .menu ul {padding: 0;margin: 0;list-style:/*position:*/}.tab-menu-box3 .menu ul li {position:float:font-size: 14font-family: 'Microsoft Yahei','SimHei';text-align:font-size: 14width:50%;cursor:} .tab-menu-box3 .menu ul li:hover {color: #c9033b;}.tab-menu-box3 .menu .more {float:font-size: 12padding-right: 10font-family: &宋体&;color: #666;text-decoration:}.tab-menu-box3 .menu a:hover {color: #f60 !text-decoration:font-weight:}.tab-menu-box3 .menu .current {margin-top: -1color: #c9033b;background: #height: 33border-top: 2px solid #c9033b;z-index: 10;font-weight:}html&!DOCTYPE html&&html&&head&&/head&&link href=&common.css& rel=&stylesheet& /&&body&&div class='container'&&div class='tab-menu-box1'&&div class='menu'&&ul id='tab-menu-title'&&li class='current' content-to='1'&价格趋势&/li&&li content-to='2'&市场分布&/li&&li content-to='3'&其他&/li&&/ul&&/div&&div id='tab-menu-body' class='content'&&div content='1'&content1&/div&&div content='2' class='hide'&content2&/div&&div content='3' class='hide'&content3&/div&&/div&&/div&&/div&&script src=&./jquery-1.8.2.js&&&/script&&script type='text/javascript'&$(function(){ChangeTab('#tab-menu-title', '#tab-menu-body');})function ChangeTab(title, body) {$(title).children().bind(&click&, function () {$menu = $(this);$content = $(body).find('div[content=&' + $(this).attr(&content-to&) + '&]');$menu.addClass('current').siblings().removeClass('current');$content.removeClass('hide').siblings().addClass('hide');});}&/script&&/body&&/html&实例：滚动菜单&!DOCTYPE html&&html&&head lang=&en&&&meta charset=&UTF-8&&&title&&/title&&style&body{margin: 0}img {border: 0;}ul{padding: 0;margin: 0;list-style:}.clearfix:after {content: &.&;display:height: 0;clear:visibility:}.wrap{width: 980margin: 0}.pg-header{background-color: #303a40;-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);-moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);box-shadow: 0 2px 5px rgba(0,0,0,.2);}.pg-header .logo{float:padding:5px 10px 5px 0}.pg-header .logo img{vertical-align:width: 110height: 40}.pg-header .nav{line-height: 50}.pg-header .nav ul li{float:}.pg-header .nav ul li a{display:color: #padding: 0 20text-decoration:font-size: 14}.pg-header .nav ul li a:hover{color: #background-color: #425a66;}.pg-body{}.pg-body .catalog{position:top:60width: 200background-color: #bottom: 0}.pg-body .catalog.fixed{position:top:10}.pg-body .catalog .catalog-item.active{color: #background-color: #425a66;}.pg-body .content{position:top:60width: 700margin-left: 210background-color: #overflow:}.pg-body .content .section{height: 500}&/style&&/head&&body&&div class=&pg-header&&&div class=&wrap clearfix&&&div class=&logo&&&a href=&#&&&img src=&http://core.pc./revs/images/common/logo_.pn&&&/a&&/div&&div class=&nav&&&ul&&li&&ahref=&#&&首页&/a&&/li&&li&&ahref=&#&&功能一&/a&&/li&&li&&ahref=&#&&功能二&/a&&/li&&/ul&&/div&&/div&&/div&&div class=&pg-body&&&div class=&wrap&&&div class=&catalog&&&div class=&catalog-item& auto-to=&function1&&&a&第1张&/a&&/div&&div class=&catalog-item& auto-to=&function2&&&a&第2张&/a&&/div&&div class=&catalog-item& auto-to=&function3&&&a&第3张&/a&&/div&&/div&&div class=&content&&&div menu=&function1& class=§ion&&&h1&第一章&/h1&&/div&&div menu=&function2& class=§ion&&&h1&第二章&/h1&&/div&&div menu=&function3& class=§ion&&&h1&第三章&/h1&&/div&&/div&&/div&&/div&&script type=&text/javascript& src=&../js/jquery-1.8.2.min.js&&&/script&&script type=&text/javascript&&$(function(){Init();});function Init(){$(window).scroll(function() {var scrollTop = $(window).scrollTop();if(scrollTop & 50){$('.catalog').addClass('fixed');}else{$('.catalog').removeClass('fixed');}$('.content').children().each(function(){var offSet = $(this).offset();var offTop = offSet.top - scrollTvar height = $(this).height();if(offTop&=0 && offTop& -height){//去除其他//添加自己var docHeight = $(document).height();var winHeight = $(window).height();if(docHeight == winHeight+scrollTop){$('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active');}else{var target = $(this).attr('menu');$('.catalog').find('div[auto-to=&'+target+'&]').addClass('active').siblings().removeClass('active');}}});});}&/script&&/body&&/html&参考： /wupeiqi
相关推荐：操作描述：点击按钮，向table里添加一条tr并渲染select class=a下面的option出现的问题：点击添加的dom第一条可以渲染，第二条没被vue解析，而是把标签显示出来了代码:var table = $('table').find('tbody')var dom = '&tr&&td&&select class=&a&&&option
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通...
------分隔线----------------------------
相关阅读排行一键安装桌面版，查词翻译快三倍
选择要添加的生词本
词霸Android版
牛津词典免费使用! 立刻扫码下载
牛津词典免费使用! 立刻扫码下载
创建新的生词本
i该生词本已经创建啦!
i不可以出现中文，英文，数字之外的符号哒!
i生词本名称长度不能大于24字符!
i请填写生词本名称!下载作业帮安装包
扫二维码下载作业帮
1.75亿学生的选择
请问一些外国的钟表上1到12怎么表示 （ 好像有什么Iv 什么东西的）
黎越践踏丶352
罗马字,I.II.III.IV.V.VI.VII.VII.IX.X.XI.XII.
为您推荐：
其他类似问题
扫描下载二维码
