BOM思想，Document属性，DOM属性，JS内置对象之正则表达式，Location地址栏对象，String对象关于正则表达式的方法，window对象中的方法及属性，动态的创建DOM元素，文档对象中的常用方法
BOM思想
BOM：Brower
BOM:Browser Object Model 浏览器对象模型,
概念:将浏览器的各个组成部分封装成对象,
特点:BOM对象不能自己创建,当HTML文档自己加载进内存,浏览器自动创建,
组成:Window(*****):窗口对象,
Location(***):地址栏对象,
History(*):历史记录(当前窗口)对象,
Navigator:浏览器对象 基本不用仅作了解,
screen:显示器屏幕 基本不用仅作了解,
availHeight 获取系统屏幕的工作区域高度,排除Microsoft Windows 任务栏
availWidth 获取系统屏幕的工作区域宽度,排除 Windows任务栏
height 获取屏幕的垂直分辨率
width 获取屏幕的水平分辨率
window中有关弹框的方法
window对象可以省略不写
Document属性
//通过window对象中的document属性，来获取文档对象
var doc=window.document;
window.document.write(doc);
//通过document对象是可以获取或创建其他的DOM对象(标签，属性，文本，注释，节点)
/* title 返回当前文本的标题
URL 返回当前文档的URL
Document 对象属性
属性 描述 IE F O W3C
body
lastModified 返回文档被最后修改的日期和时间
document.title="我的网页";
alert(document.lastModified);
alert(location.href);
alert(document.URL); */
var bd=document.body;
//alert(bd);
var one=Math.floor(Math.random()*255);
var two=Math.floor(Math.random()*255);
var three=Math.floor(Math.random()*255);
bd.style.background="rgb("+one+","+two+","+three+")";
DOM思想
DOM:Document Object Model 文档对象模型,
Element 标签对象
Attibute 属性对象
Comment 注释对象
Text 文本对象
Document 整个的HTML文档对象
Node 节点对象
JS内置对象之正则表达式
RegExp对象：表示正则表达式，它是对字符串执行模式匹配的强大工具。
直接量语法：/pattern/attributes
创建RegExp对象的语法：new RegExp(pattern,attributes);
//i表示执行对大小写不敏感的匹配
var regx=new RegExp("[abc]","i"); //i不区分大小写的匹配
//判断是否符合正则表达式
var f=regx.test("A");
alert(f);
//定义正则表达式对象的方式2
//JS语法中这种情况下返回true,是因为test中只要有一个数字能够和正则表达式相匹配，都会返回true
var regx2=/[a-zA-Z0-9]/i;
var ff=regx2.test("22");
alert(ff);//true
//JS语法中这种情况下返回true,^和$是开始和结尾符,+表示可以存在多个
var regx3=/^[a-zA-Z0-9]+$/i;
var gg=regx3.test("22");
alert(gg);//true
Location地址栏对象
//浏览器为什么要对地址中的URL中的中文进行编码？
//浏览器会对地址栏中的URL中的中文,进行URL编码
var text=window.location.href;
document.write(text);
document.write("<hr>");
var url=decodeURIComponent(text);
document.write(url);
document.write("<hr>");
//全局方法对象里面有方法可以进行URL的编解码
//decodeURIComponent() 解码一个编码的URL组件
//encodeURlComponent() 编码
var str="张三";
var v=encodeURIComponent(str);
document.write(v);
document.write("<hr>");
var w=decodeURIComponent(v);
document.write(w);
String对象关于正则表达式的方法
<script type="text/javascript">
var str = "hello123";
//注意加上^和$，不然不会去整体匹配
var reg = /^[A-Z0-9]+$/i;
//alert("匹配吗？"+reg.test(str));
//获取出，下面字符串中是3个字符组成的单词
var str2 = "daaa ABC jia hao hao xue xi aaaa,df?";
//g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)
var reg=/\b[a-z]{3}\b/gi; // \b 匹配单词边界
//exec 检索字符串中指定的值，返回找到的值，并确定其位置。
/* var s=reg.exec(str2);
alert(s);
s=reg.exec(str2);
alert(s); */
var s;
while((s=reg.exec(str2))!=null){
alert(s);
}
</script>
var str2 = "daaa ABC jia hao hao xue xi aaaa,df?";
//g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)
var reg = /\b[a-z]{3}\b/gi;
var s = reg.exec(str2);
console.log(s);
s = reg.exec(str2);
console.log(s);
s = reg.exec(str2);
console.log(s);
//alert(s);
//match()方法可在字符串内检索指定的值，或找到一个或多个符合正则表达式的匹配
var v = str2.match(reg);
//alert(v);
console.log(v);
//search("aaa")类似于indexOf()方法,比它强大一些。可以根据正则表达式去查找，检索不到返回-1
var index = str2.search("aaa");
var index2 = str2.search("ABC");
alert(index);
alert(index2);
var str3 = "daaa ABC jia hao hao xue xi aaaa,df?";
/* 说明：字符串stringObject的replace()方法执行的是查找并替换的操作。它将在stringObject中查找
与regexp相匹配的子字符串,然后用replacement来替换这些子串，如果regexp具有全局标志g,那么replace()
方法将替换所有匹配的子串。否则，它就只替换第一个匹配子串。 */
var ss = str3.replace(/\s+/g, ""); // \s 查找空白字符。并去掉
alert(ss);
var str4 = "aaa=bbb=ccc=ddd=eee=fff";
var gg = str4.split(/=+/, 3); //以等号切割，并返回前三个数组元素
alert(gg);
/* Boolean 对象
Boolean 对象表示两个值: "true"和"false",
创建Boolean对象的语法:
new Boolean(value); //构造函数
Boolean(value); */
var t = new Boolean("true");
var t2 = Boolean("false");
window对象中的方法
alert()：显示带有一段消息和一个确认按钮的警告框。
close()：关闭浏览器窗口。
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
open()：打开一个新的浏览器窗口霍查找一个已命名的窗口。
prompt()：显示可提示用户输入的对话框
//var num=100;//全局变量
//window 对象中有一个打开窗口的方法
var newWindows;
function toPage(){
//var a=20;//局部变量
if(window.confirm("你即将要进入一个外部网站，确定吗？")){
//返回值，是新打开的那个窗口对象
//open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
newWindows=window.open("http://www.baidu.com");
}
//window.open("index.html");
}
function closePage(){
// confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
if(window.confirm("你要关闭这个窗口，确定吗？")){
newWindows.close();
}
}
function closeSelf(){
if(window.confirm("你要关闭这个窗口，确定吗？")){
window.close();
}
}
window对象的属性
document： 对Document对象的只读引用。请参阅Document对象
history： 对History对象的只读引用。请参考History对象
location： 用于窗口或框架的 Location 对象。请参阅 Location 对象。
Navigator： 对 Navigator 对象的只读引用。请参数 Navigator 对象。
Screen： 对 Screen 对象的只读引用。请参数 Screen 对象。
var loc=window.location;
var his=window.history;
var nav=window.Navigator;
var sc=window.screen;
//获取HTML文档对象
var doc=window.document;
动态的创建DOM元素
<script type="text/javascript">
//动态的创建DOM元素
var div=document.createElement("div");
//div.innerText="abc";
//创建文本对象
var text=document.createTextNode("abcdef");
div.appendChild(text);
//创建属性对象
var attr=document.createAttribute("style");
attr.value="color:red;font-size:100px";
//给标签设置属性对象
div.setAttributeNode(attr); //参数要的是 一个属性对象
//给标签直接设置属性
div.setAttribute("align","center");//属性名 属性值
//创建注释对象
var comm=document.createComment("这是一行注释");
bd.appendChild(comm);
//bd.remove();
//bd.removeChild(div);
</script>
文档对象中的常用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="d1">
喜欢你喜欢你
</div>
<h1 class="myh">喜欢你</h1>
<h1 class="myh">好喜欢你</h1>
<h1 class="myh">一直喜欢你</h1>
<h1 class="myh">依旧还是喜欢你</h1>
<h1 class="myh">最后还是一直喜欢你</h1>
<h2>你</h2>
<h2>是你</h2>
<h2>还是你</h2>
<h2>始终是你</h2>
<h2>最后还是你</h2>
</body>
</html>
<!-- 把script放到最后面 -->
<script type="text/javascript">
/* document.write("<h1>");
document.write("aaaaa");
document.write("</h1>"); */
//根据标签的id来获取标签对象
var mydiv=document.getElementById("d1");
alert(mydiv);
//通过class属性值，一次获取多个标签对象放到一个数组中。
var arr=document.getElementsByClassName("myh");
for(var i=0;i<arr.length;i++){
if(i%2==0){
arr[i].style.color="red";
}else{
arr[i].style.color="yellowgreen";
}
}
//通过标签名获取多个标签对象，放到数组中
var arr2=document.getElementsByTagName("h2");
for(var i=0;i<arr2.length;i++){
if(i%2==0){
arr2[i].style.color="deeppink";
}else{
arr2[i].style.color="blue";
}
}
</script>
1977
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
