第一部分 H5
1.认识HTML
<!--使用html规范-->
<!DOCTYPE html>
<html lang="en">
<!--网页头部-->
<head>
<!--meta用于描述标签，用来描述网站的一些信息-->
<meta charset="UTF-8">
<meta name="keywords" content="HTHL5">
<meta name="description" content="学习html">
<!--网页标题-->
<title>第一个网页</title>
</head>
<!--网页主体-->
<body>
<h1>hhhhh王</h1>
</body>
</html>
2.标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签</title>
</head>
<body>
<a name="top">顶部</a>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<!--段落标签-->
<p>床前明月光，</p>
<p>疑是地上霜。</p>
<!--水平线标签-->
<hr/>
<!--br换行标签-->
举头望明月，<br/>
低头思故乡。<br/>
<strong>粗体</strong><br/>
<em>斜体</em>
<br/>
空 格
<br/>
大于号><br/>
小于号<<br/>
版权符号©<br/>
<!--图片-->
<img src="../res/image/1.png" alt="Andr" title="悬停文字" width="400" height="300">
<!--_blank新页面打开；_self本页面打开-->
<h3><a href="https://www.baidu.com" target="_blank">跳到百度</a></h3>
<h3><a href="https://www.baidu.com" target="_self">跳到百度</a></h3>
<h3>
<a href="https://www.baidu.com">
跳到百度<br/>
<img src="../res/image/1.png" alt="Andr" title="跳到百度" width="400" height="300">
</a>
</h3>
<h3><a href="1.Firstpage.html">跳到第一个网页</a></h3>
<!--锚链接：调到当前top位置-->
<a href="#top" target="_self">回到顶部</a><br/>
<a href="mailto:924245995@qq.com">点击联系我</a><br/>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="加我好友" title="加我好友"/></a>
</body>
</html>
3.列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--有序列表order list-->
<ol>
<li>Java</li>
<li>Python</li>
<li>C++</li>
</ol>
<!--无序列表-->
<ul>
<li>C++</li>
<li>C</li>
<li>OC</li>
</ul>
<!--自定义列表-->
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>Python</dd>
</dl>
</body>
</html>
4.表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格-->
<table border="1px">
<tr>
<!--跨3列-->
<td colspan="3">学生成绩</td>
</tr>
<tr>
<!--跨2行-->
<td rowspan="2">张三</td>
<td >语文</td>
<td >98</td>
</tr>
<tr>
<td>数学</td>
<td >100</td>
</tr>
<tr>
<!--跨2行-->
<td rowspan="2">李四</td>
<td >语文</td>
<td >90</td>
</tr>
<tr>
<td>数学</td>
<td >90</td>
</tr>
</table>
</body>
</html>
效果：
5.媒体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体</title>
</head>
<body>
<!--音频/视频 自动播放-->
<audio src="../res/audio/01.mp3" autoplay controls></audio><br/>
<video src="../res/video/1.mp4" controls autoplay></video>
</body>
</html>
6.页面结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构</title>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页尾部</h2>
</footer>
7.内联框架iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架iframe</title>
</head>
<body>
<!--iframe是窗口，名字是hello-->
<iframe src="" name="hello" frameborder="0" width="800" height="600"></iframe>
<!--超链接：在name为iframe窗口打开 href对应的页面,-->
<a href="6.页面结构.html" target="hello">点击跳转</a>
</body>
</html>
8.表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<h1>注册</h1>
<!--action:可以是一个页面也可以是请求地址，method：提交方式get/post-->
<form action="2.标签.html" method="get">
<!--readonly只读； placeholder提示信息-->
<p>名字:<input type="text" name="username" value="" maxlength="8" placeholder="请输入用户名" ></p>
<!--required：表示不能为空-->
<p>密码:<input type="password" name="password" required></p>
<!--radio：单选-->
<p>性别：
男<input type="radio" value="boy" name="sex" checked>
女<input type="radio" value="gril" name="sex" disabled><!--不能选-->
</p>
<!--checkbox：多选-->
<p>爱好：
<input type="checkbox" value="play" name="hobby" checked>玩
<input type="checkbox" value="eat" name="hobby">吃
<input type="checkbox" value="drink" name="hobby">喝
<input type="checkbox" value="pp" name="hobby">乐
</p>
<p>点击：
<input type="button" value="点击边长" name="button">
</p>
<p>
<input type="image" src="../res/image/1.png" width="100" height="100">
</p>
<!--下拉框-->
<p>国家：
<select name="nation">
<option value="cn">中国</option>
<option value="us" selected>USA</option>
<option value="fr">法国</option>
<option value="ja">日本</option>
</select>
</p>
<p>反馈：<br/>
<textarea name="textarea" cols="30" rows="4">input here...</textarea>
</p>
<!--文件域-->
<p>
<input type="file" name="myfile">
<input type="button" value="上传" name="upload">
</p>
<p>邮箱：
<input type="email" name="email" value="">
</p>
<p>url:
<input type="url" name="url" value="">
</p>
<P>数字：
<input type="number" name="num" max="100" min="0" step="5">
</P>
<p>滑块：
<input type="range" name="voice" value="range" max="100" min="0" step="10">
</p>
<!--name相当于key；value是默认值-->
<p>搜索：
<input type="search" name="search" value="" id="mark">
</p>
<p>
<label for="mark">点我试试</label><!--鼠标定位到id="mark"输入框-->
<input type="text" id="mark1" name="mark" value="66666" hidden><!--hidden隐藏-->
</p>
<p>自定义邮箱：
<input type="text" name="myemail" value="" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" >
</p>
<p>
<input type="submit"><!--请求action对应的页面-->
<input type="reset" value="清空表单">
</p>
</form>
</body>
</html>
页面效果：
第二部分 CSS
1.导入方式
样式就近原则显示顺序1，2，3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导入方式</title>
<!--2.内部样式-->
<style>
h1{
color: red;
}
/*@import url("css/style.css");*/
</style>
<!--3.外部样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--1.行内样式-->
<h1 style="color: blue">我是标题</h1>
</body>
</html>
2.选择器
2.1 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="c1">ppppp</h1>
<h1 class="c1">fffff</h1>
<p class="c3">jjjj</p>
<h1 id="id1">Java</h1>
<h1 id="id2">Python</h1>
<p id="id3">JavaScript</p>
</body>
</html>
优先级id > class > 标签选择器（h1,p）
h1{
color: red;
background: yellow;
border-radius: 10px;
}
p{
font-size: 60px;
}
/* .class名称{}:可多个标签归类 */
.c1{
font-size: 60px;
}
.c3{
font-size: 40px;
}
/* #id{}:标签唯一 */
#id1,#id2,#id3{
font-size: 50px;
}
2.2.层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style>
/*后代选择器：body下的所有p标签
body p{
background: red;
}*/
/*子选择器：body第一级，3个p标签
body>p{
background: red;
}*/
/*相邻兄弟选择器:只有一个*/
.active + p{
background: red;
}
</style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
<li><p>p4</p></li>
<li><p>p5</p></li>
<li><p class="active">p6</p></li>
</ul>
</body>
</html>
2.3.结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
</head>
<style>
/*ul第一个*/
ul li:first-child{
background: yellow;
}
/*ul最后一个*/
ul li:last-child{
background: red;
}
/**/
p:nth-of-type(1){
background: green;
}
/*悬浮显示*/
a:hover{
background: red;
}
</style>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li1</li>
</ul>
<a href="https://www.baidu.com">百度一下</a>
</body>
</html>
2.4.属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: aqua;
text-align: center;
text-decoration: none;
margin-right: 20px;
font:bold 20px/50px Arial;
}
/* 等于符号：= ；*/
a[id=first]{
background: yellow;
}
/* 包含符号：*= ；*/
a[class*="links"]{
background: red;
}
/* ^=表示http开头*/
a[href^=http]{
background: chartreuse;
}
/* $=表示html结尾*/
a[href$=html]{
background: indigo;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="item active" target="_blank" title="test">2</a>
<a href="image/1.html" class="links item">3</a>
<a href="image/1.png" class="item">4</a>
<a href="image/1.jpg" class="item">5</a>
<a href="image/2.html" class="item">6</a>
</p>
</body>
</html>
3. 列表样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表样式</title>
<style>
#t1{
font-size: 20px;
color: chartreuse;
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--span标签-->
你好，<span id="t1">亲爱的会员</span>
<!--一块区域-->
<div id="nav">
<h2 class="title">全部商品列表</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li>
<li><a href="#">家用电器</a> <a href="#">Ipad</a> <a href="#">数码</a></li>
<li><a href="#">电脑</a> <a href="#"></a> <a href="#">数码</a></li>
<li><a href="#">家居</a> <a href="#">手机</a> <a href="#">iphone</a></li>
<li><a href="#">服饰</a> <a href="#">办公</a> <a href="#">Mac</a></li>
<li><a href="#">礼品</a> <a href="#">手机</a> <a href="#">数码</a></li>
<li><a href="#">食品</a> <a href="#">保健</a> <a href="#">珠宝</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">数码</a></li>
</ul>
</div>
</body>
</html>
CSS
body{
/*渐变色*/
background: linear-gradient(19deg, #2f8ea5 0%, #87ceeb 100%);
}
#nav {
width: 300px;
}
.title {
font-size: 30px;
font-weight: bold;
text-indent: 1em;
line-height: 40px;
/*颜色 图片 位置（xy） 平铺方式*/
background: antiquewhite url("../image/tutu.png") no-repeat 100px 10px;
background-size: auto;
}
ul {
background: green;
}
ul li {
height: 30px;
list-style: none;
text-indent: 1em;
}
a {
text-decoration: none;
font-size: 20px;
color: black;
}
a:hover {
background: antiquewhite;
}
4.字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<style>
body p{
font-family: Charter;
font-size: 20px;
font-weight: bold;
color: chartreuse;
}
</style>
</head>
<body>
<h1>陋室铭</h1>
<h5>作者：刘禹锡</h5>
<p>
山不在高，有仙则名。水不在深，有龙则灵。
</p>
<p>
斯是陋室，惟吾德馨。 苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。
</p>
<p>
可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。
</p>
<p>
南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
</p>
</body>
</html>
5.文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style>
body{
text-align: left;
text-indent: 2em;
}
/*行高：line-height*/
h1{
color: rgba(25,0,100,0.5);
line-height: 80px;
}
/*设置划线*/
h5{
/*text-decoration: line-through;*/
/*text-decoration: overline;*/
text-decoration: underline;
}
p{
font-weight: bold;
}
/*水平居中*/
#img{
vertical-align: middle;
}
</style>
</head>
<body>
<h1>陋室铭</h1>
<h5>作者：刘禹锡</h5>
<p>
<img id="img" src="image/lyx.jpg" alt="" width="300" height="300">
</p>
<p>山不在高，有仙则名。</p>
<p>水不在深，有龙则灵。</p>
<p>斯是陋室，惟吾德馨。</p>
<p>苔痕上阶绿，草色入帘青。</p>
<p>谈笑有鸿儒，往来无白丁。</p>
<p>可以调素琴，阅金经。</p>
<p>无丝竹之乱耳，无案牍之劳形。</p>
<p>南阳诸葛庐，西蜀子云亭。</p>
<p>孔子云：何陋之有？</p>
</body>
</html>
6.背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景</title>
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>
CSS
div{
width: 1000px;
height: 800px;
border: 1px solid red;
background-image: url("../image/tutu.png");
}
/*x方向平铺*/
.d1{
background-repeat: repeat-x;
}
/*y方向平铺*/
.d2{
background-repeat: repeat-y;
}
/*无平铺(只有一个)*/
.d3{
background-repeat: no-repeat;
}
7.超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接伪类</title>
<style>
a{
text-decoration: none;
color: black;
}
a:hover{
color: blue;
font-size: 30px;
}
a:active{
color: red;
}
/*阴影颜色；x,y,阴影半径*/
#price{
text-shadow: red 10px 0px 1px;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">
<img src="image/tutu.png" alt="">
</a>
<p>
<a href="https://www.vip.com">码出高效：Java开发手册</a>
</p>
<p>
<a href="https://www.hao123.com" id="price">￥49</a>
</p>
</body>
</html>
第三部分 JavaScript
1.JS基础
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<script>
'use strict';
// let var const
// 数组-indexOf push pop unshift shift sort reverse contact拼接但修改数组 join（'-'）用-拼接成一个串
var arr = [43, 13, 45, 6, 8, 7]
console.log(arr.indexOf(13))
arr.forEach(function (value) { // 每个值
console.log(value);
})
// 对象 :删除属性delete 属性名；添加属性：person.hh = 'ff'
// hasOwnProperty("age") 属性或者方法
var person = {
name: "gt",
age: 12,
email: "xxxx@qq.com",
score: 99
}
// 是否有某个属性
const b = person.hasOwnProperty("age");
console.log(b)
// Map
var map = new Map([['name', 'nameeee'], ['2', 222], ['3', 'eeee']]);
var name = map.get("name");
console.log(name);
map.set("admin", "admin");
console.log(map.get("admin"))
map.delete('3')
for (const x of map.keys()) {
console.log(x + ":" + map.get(x))
}
// Set 无重复元素
var set = new Set([1, 34, 5, "344", 'eeee', 1]);
set.add(4444)
set.delete(1)
set.has(5) // 是否有5
// iterator
for (let x of set) {
console.log(x)
}
</script>
<body>
</body>
</html>
2.面向对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>面向对象</title>
</head>
<body>
<script>
// 1.函数：返回一个函数变量
const abs = function (x, ...rest) {// 多个参数
if (typeof x != 'number') {
throw 'Not a number!';
}
if (x < 0) {
return -x;
}
return x;
};
// 2.作用域 内部函数可以访问外部函数成员反之不行
// var x = 1111;
// window.alert(window.x);// 所有的全局变量默认会绑到window对象下
// var alert2 = window.alert; // 弹窗变量
// alert2(x*2);
//自己的代码全部定义到自己的定的唯一命名空间中,降低全局命令冲突
var PFJ = {} // 全局对象
PFJ.name = "peifangjun";
PFJ.add = function (a,b){
return a+b;
}
console.log(PFJ.name)
console.log(PFJ.add(1,5))
// 局部作用域 let;
var info = {
name: "pfj",
birth: 2000,
address:"北京海淀",
// 定义方法
age: function () {
var now = new Date().getFullYear();
return now - this.birth;
}
};
console.log(info.address)
console.log(`我今年${info.age()}岁了。`)
// class
class Student{
constructor(name,age) {
this.name = name;
this.age = age;
}
hello(name){
window.alert(`hello,${name}`);
}
}
var xm = new Student("xiaoming",3);
console.log(xm.name)
console.log(xm.age)
// 继承
class Person extends Student{
constructor(name,age) {
super(name,age);
}
hello(name,age) {
window.alert(`hello,我叫${name},今年${age}碎了`);
}
}
var dm = new Person("Dagang",31);
dm.hello(dm.name)
dm.hello(dm.name,dm.age)
</script>
</body>
</html>
3.Bom和Dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom</title>
</head>
<scirpt>
<!-- BOM是browser object model的缩写，简称浏览器对象模型 ，提供了独立于内容而与浏览器窗口进行交互的对象；
1、window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性；
2、document对象，文档对象；可以拿到cookie
3、location对象，浏览器当前URL信息；
4、navigator对象，浏览器本身信息；不建议使用，容易被篡改
5、screen对象，客户端屏幕信息；
6、history对象，浏览器访问历史信息；
-->
</scirpt>
<body>
<div id="father">
<h1>h1标签</h1>
<p id="p1">p标签01</p>
<p class="p2">p标签02</p>
</div>
<script>
// dom获取标签
let p1 = document.getElementById(`p1`);
let elementByTag = document.getElementsByTagName('h1');
let elementByClass = document.getElementsByClassName('p2');
var father = document.getElementById("father");
var cc = father.children;
var c1 = father.firstElementChild;
var c2 = father.lastElementChild;
var c3 = father.children.item(2);
</script>
</body>
</html>
4.Dom节点操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom节点操作</title>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
<h1 id="p0" style="padding: 20px">p0...</h1>
<h1 id="p1" style="padding: 20px">p1...</h1>
<h1 id="p2" style="padding: 20px">p2...</h1>
</div>
<p id="js">javaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
// 修改节点dom
var d1 = document.getElementById("d1");
// d1.innerText = "";
d1.innerHTML = '<strong>插入Text</strong>';
d1.style.color = 'red';
d1.style.fontSize = '30px';
d1.style.padding = '1em'
// 删除节点：通过父节点删除子节点
let p0 = document.getElementById('p0');
let fp1 = p1.parentElement;
fp1.removeChild(p0); //删除节点0
// 当删除一个节点的时候，后面的节点index-1
fp1.removeChild(fp1.children.item(0)); //删除节点1
fp1.removeChild(fp1.children[0]); //删除节点2
// 插入节点
let jsnode = document.getElementById('js');
let listnode = document.getElementById('list');
listnode.appendChild(jsnode);// id唯一，只能一个位置显示
// JS创建新的节点
let newP = document.createElement('p');
newP.id = 'p';
newP.innerText="我是新建de节点";
listnode.append(newP);
// 新增script
var mysc = document.createElement('script');
mysc.setAttribute('type','text/javascript');
listnode.appendChild(mysc)
// 追加style
var mystyle = document.createElement('style');
mystyle.setAttribute('type','text/css');
mystyle.innerHTML='body{background-color:chartreuse}';
listnode.append(mystyle)
// 调整顺序
let se = document.getElementById('se');
let ee = document.getElementById('ee');
let me = document.getElementById('me');
listnode.insertBefore(ee,se);
listnode.insertBefore(me,ee);
</script>
</body>
</html>
5.表单操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单操作</title>
</head>
<body>
<form action="post">
<p>
<span>用户名：</span><input type="text" id="username">
</p>
<p>
<span>性别：</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="woman" id="girl">女
</p>
</form>
<script>
let name = document.getElementById('username');
name.value = '请输入...';
let girl = document.getElementById('girl');
girl.checked = true;// 选中girl
</script>
</body>
</html>
6.表单提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提交表单</title>
</head>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<body>
<!--onsubmit：绑定一个提交检测的函数，ture/false
将这个结果返给表单，onsubmit进行接收
-->
<form action="#" method="post" onsubmit="return doSth()">
<p>
<span>用户名：</span>
<input type="text" id="username" value="" name="username">
</p>
<p>
<span> 密码：</span>
<input type="password" id="password" value="" name="password">
</p>
<!-- 隐藏提交-->
<input type="hidden" id="md5-pwd" name="password">
<!-- 绑定事件-->
<button type="submit" onclick="doSth()">提交</button>
</form>
<script>
function doSth(){
var name =document.getElementById("username");
var pwd = document.getElementById("password");
var md5pwd = document.getElementById("md5-pwd");
console.log(name)
console.log(pwd);
//pwd.value = md5(pwd.value);
md5pwd.value = md5(pwd.value);//md5加密
// 校验表单内容，true通过提交，否则阻止提交
return true;
}
</script>
</body>
</html>
7.JQuery初识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<!-- jQuery库：里面有大量js函数（write less,do more）
-->
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<body>
<!-- 公式：$(selector).action() -->
<a href="" id="test-jq">点我</a>
<script>
// 选择器就是css选择器；https://jquery.cuishifeng.cn
$('#test-jq').click(function () {
alert("6666666")
})
</script>
</body>
</html>
8.jQuery事件操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 响应事件</title>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
#divmove {
width: 300px;
height: 300px;
border: 1px solid red;
}
</style>
<body>
mouse : <span id="mousemove"></span>
<div id="divmove">
在这里移动鼠标
</div>
<script>
// 在一块区域移动鼠标，显示位置
$(function () {
// 移动鼠标
$('#divmove').mousemove(function (e) {
$('#mousemove').text('x:' + e.pageX + ',y:' + e.pageY)
})
})
</script>
</body>
</html>
9.JQuery Dom操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作dom</title>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<body>
<ul id="ul">
<li class="li0">JavaScript</li>
<li name="li1">Python</li>
</ul>
<script>
$('#ul li[name=li1]').text("new li1");//修改值
// 设置css
$('#ul li[class=li0]').css({
"color": "#ff0011",
"background": "blue"
})
$('#ul li[name=li1]').hide();//隐藏
$('#ul li[name=li1]').show();//显示
</script>
</body>
</html>
JQuery在线文档：https://jquery.cuishifeng.cn/index.html
10.ajax
jsp前端页面，失去焦点onblur (点击onclick)调用a1函数，post请求:
url:请求接口，
data:传递input里面的数据，
success:data为返回String结果
1130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
