一,js对象:
–1,网页代码
<!-- 引入一个js文件 -->
<script src="js/4.js"></script>
</head>
<body>
</body>
</html>
--2,js代码
// 写js代码，用来测试 js对象--自定义js对象(声明对象+new对象+属性/函数)
function Person(){ } //1，声明对象
var a = new Person();//2，new对象
a.name = "jack" ; //3，动态的添加属性
a.age = 20 ; //3.1，动态的添加属性
a.study = function(){//4，动态的添加函数
console.log(100);
};
a.study();//调用函数
a.coding = function(m,n){//4.1，动态的添加函数
console.log(m+n);
} ;
a.coding("rose",10);//调用函数
a.eat = function(m,n){//4.2，动态的添加函数
return m+n; //返回结果
} ;
//5，调用函数
var b = a.eat(1,2);
console.log("eat函数的返回值::"+b); //打印eat()的返回值
//6，调用属性(要么打印要么赋值)
console.log("name属性的值::"+a.name);
console.log("age属性的值::"+a.age);
//查看a对象的结构
console.log(a);
/* 练习:::创建Student对象 */
function Student(){}//声明对象
var x = new Student();//new对象
x.name="张三";//动态添加属性
x.age=18;//动态添加属性
x.eat=function(){//动态添加函数
console.log(x.name);
console.log(this.name); //this表示当前对象
};
x.eat();//调用函数
console.log( x.name ) ;//调用属性(要么赋值要么打印)
console.log(x);
//创建对象的方式2
var pp = {
name: "李四" , //添加属性
age: 20 , //添加属性
score: 100 , //添加属性
show: function(){ //添加函数
console.log("abc");
}
}
pp.show();//调用函数
console.log(pp.name);//调用属性
console.log(pp);
console.log(100);
/* 也可以直接在浏览器的console里输入代码 */
var p3 = { name:"jack" ,age:20 ,addr:"北京"};
console.log(p3);
console.table(p3);
二,DOM
–1,概述
本质上就是把一整个HTML文件,当做一个Document对象解析.
使用js提供的Document对象,的各种API解析HTML文件中的每个元素节点
–2,Document对象
–获取对象: window.document
–调用方法:
getElementById(“元素的id的属性的值”)–返回1个元素
getElementsByName(“元素的name属性的值”)–返回多个元素(用数组)
getElementsByClassName(“元素的class属性的值”)–返回多个元素(用数组)
getElementsByTagName(“元素的标签名的值”)–返回多个元素(用数组)
title–返回网页的标题
innerText–在网页内部插入text数据
innerHTML–在网页内部插入html数据
–DOM解析:
<script>
function fn1(){
//获取文档中,name=a1的元素 ,,,返回多个
//[0] 就是获取下标为0的元素
//innerText是document提供的属性,用来获取文本数据
var a = document.getElementsByName("a1")[0].innerText;
alert(a);
}
//获取网页中id=div1的元素,并修改文本数据
function fn2(){
//获取文档中,id=div1的元素 ,,,返回1个
//innerText是document提供的属性,用来获取文本数据
var b = document.getElementById("div1").innerText;
alert(b);
}
//获取网页中class="p1" 元素,获取文本数据
function fn3(){
var a = document.getElementsByClassName("p1");
alert( a[0].innerText ); //获取数据
//a[0].innerText = "我变了..."; //修改数据,只是展示文本字符串,不解析标签
a[0].innerHTML = "<h1>我变了...</h1>"; //可以解析HTML标签
}
//获取网页中的 p标签 里的文本数据
function fn4(){
var a = document.getElementsByTagName("p");
alert( a[0].innerText );
alert( a[1].innerText );
}
</script>
</head>
<body>
<span onclick="fn1();">我是span1</span>
<span>我是span2</span>
<div id="div1" onclick="fn2();">我是div1</div>
<div id="div2">我是div2</div>
<a href="#" name="a1">点我1</a>
<a href="#" name="a2">点我2</a>
<p class="p1" onclick="fn3();">我是p1</p>
<p onclick="fn4();">我是p2</p>
<!-- 添加按钮事件 -->
<button onclick="alert(1);">单击按钮</button>
<button ondblclick="alert(2);">双击按钮</button>
<button onmouseenter="alert(3);">鼠标进入按钮</button>
<button onmouseleave="alert(4);">鼠标离开按钮</button>
</body>
</html>
三,jQuery
–1,概述
封装了大量的js,优化了DOM解析HTML文档的代码
本质上就是一个.js文件,写好了很多函数/属性
jQuery可以快速的定位网页中的元素位置,基于Css选择器
–2,使用步骤:
–在网页上引入jQuery的文件
–使用jQuery语法写高效简洁的jQuery代码
–3,语法:
基础语法是：$(selector).action()
–4,文档就绪函数
<!-- 第一步:引入jQuery提供的js文件 -->
<script src="js/jquery-1.8.3.min.js"></script>
//问题的解决方式2: 整个文档都加载完再用 -- 用到jQuery的文档就绪事件
<script>
/* 第二步:JQuery的语法: $(选择器).事件 */
//jQuery的文档就绪事件
// $(document).ready( function(){
$( function(){ //文档就绪的简化写法
var a = document.getElementById("h");
alert(a.innerText);
} );
</script>
</head>
<body>
<h1 id="h">我是h1</h1>
<!-- <script>
//问题: 当你想用的资源还没被加载时,会得到null,然后调用null的属性或者函数都会有问题
//解决方式1: 要用的资源先加载完再用
// 获取 id="h"元素里的文字
var a = document.getElementById("h");
alert(a.innerText);
</script> -->
</body>
</html>
--5,jQuery的选择器
--id选择器: 按照id获取网页中的元素
--class选择器: 按照class获取网页中的元素
--标签名选择器/属性选择器: 按照标签名获取网页中的元素
--5,jQuery的事件
--单击事件:click
--双击事件:dbclick
--鼠标进去:mouseenter
--鼠标移出:mouseleave
--6,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery事件</title>
<!-- 引入jQuery的文件 -->
<script src="js/jquery-1.8.3.min.js"></script>
<script>
//jQuery语法: $(选择器).事件( function(){ .... })
// $(document).ready( function .... );//写全的了文档就绪
$(function(){ //简写了文档就绪
//#表示id选择器,选中网页中的元素,动态的给 id="p1"绑定一个 单击事件click
$("#p1").click( function(){
alert(1);
});
//#表示id选择器,选中网页中的元素,动态的给 id="div1"绑定一个 双击事件dblclick
$("#div1").dblclick(function(){
alert(2);
});
//.表示class选择器,选中网页中的元素,动态的给 class="a1"绑定一个 鼠标进入mouseenter
$(".a1").mouseenter(function(){
alert(3);
});
//.表示class选择器,选中网页中的元素,动态的给 class="a2"绑定一个 鼠标划走mouseleave
$(".a2").mouseleave(function(){
alert(4);
});
//元素选择器,选中网页中的a元素,动态的把a绑定一个 鼠标进入事件mouseleave
$("a").mouseenter(function(){
$("a").hide();//隐藏指定元素
})
});
</script>
</head>
<body>
<a href="#" class="a2">鼠标划走弹4</a>
<p id="p1">单击我弹1</p>
<div id="div1">双击我弹2</div>
<a href="#" class="a1">鼠标进入弹3</a>
</body>
</html>
扩展:
–maven:用来统一管理jar包
–步骤:
–创建maven工程
File-New-Project-选中Maven-next-起个名字(展开填GroupId–cn.tedu)-Finish
–在idea里配置maven
File-Settings-Build, Execution, Deployment-Build Tools-Maven-设置Maven Home Directory(浏览maven解压后的位置)-ok
1184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
