jquery
1、JQuery操作html的值
①、html()===>JS中的innerHTML:
②、text()====>JS中的innerText:
③、val()=====>获取输入元素的值:
2、jquery绑定html元素的事件
①、jqObj.事件名称(function(){});
$('#id1').click(function(){}
3、通过jquery对象操作html属性
获取:jqObj.attr(“属性名”);
设置:
①、jqObj.attr(“属性名”,‘属性值’);
②、jqObj.attr(“属性名”,function(){});
③、jqObj.attr(json);
4、jquery对象与dom对象转化
①、dom转成jquery对象:在dom对象外加上 $(domObj)即可
②、jqObj转化成dom对象: jqObj.get(0) \ jqObj[0]即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../comm/jquery-2.1.4.js"></script>
<script type="text/javascript">
// dom对象能干啥?
// var domObj=document.getElementById("userid");
// ①:修改元素的css样式,
// ②:动态操作html元素的属性,
// ③:完成对html的动态操作(添加和删除)
// 文档准备就绪
$(document).ready(function(){
$('#id1').click(function(){
// ①:获取被操作的div元素的jquery对象
var jqObj=$('#div1');
// ②:获取div的值,并打印到浏览器的控制台
var txt=jqObj.html();
console.log(txt);
console.log(jqObj.text());
console.log($('#userid').val());
});
$('#id1').dblclick(function(){
alert('test');
});
$('#id1').mouseenter(function(){
alert('enter event');
});
// ①:修改元素的css样式:
// ②:动态操作html元素的属性,
// ③:完成对html的动态操作(添加和删除)
$('#id2').click(function(){
// $('#userid').val("ok吗");
// $('#div1').html('哈哈 你是坏蛋');
$('#userid').val(function(){
return 'abcde';
});
});
$('#id3').click(function(){
$('img').attr('src','../images/a0.jpg');
});
$('img').mouseleave(function(){
//this:一定是dom对象
// console.log(this.attr('src'));×
$(this).attr('src','../images/a2.jpg');
console.log($('#div1').get(0).innerHTML);
console.log($('#div1')[0].innerHTML);
});
$('#id4').click(function(){
// console.log($('#div2').attr('id','ssssss'));
// $('#div2').attr('id','ssssss');
// $('#div2').attr('id',function(){
// return 'abcde';
// });
var json={'id':'abc','width':'300px','height':'400px'};
$('#div2').attr(json);
});
$('#id5').click(function(){
for(var i=0;i<$('li').length;i++){
// var dom=$('li')[i];
// console.log($(dom).html());
// }
$('li').each(function(index,ele){
console.log(ele.innerHTML +' = '+ index+' = '+$(ele).html());
});
});
});
</script>
<title></title>
</head>
<body>
<button id="id1">获取对应的html元素的jq对象</button>
<button id="id2">设置值</button>
<button id="id3">设置属性</button>
<button id="id4">获取属性</button>
<button id="id5">........</button>
<div id="div2">div2的值</div>
<ul>
<li>li1的值</li>
<li>li2的值</li>
<li>li3的值</li>
<li>li4的值</li>
<li>li5的值</li>
</ul>
<hr>
<div id="div1">div1<span>的</span>值</div>
<input type="text" id="userid" placeholder="用户编号"/>
<!-- <img src="../images/a1.jpg"/> -->
</body>
</html>
通过jquery对象完成html元素的操作
①、设置|获取html元素的值 html() text() val();
②、操作html元素的属性 attr()方法
Ⅰ 、设置单一属性的值 attr(属性名,属性值)
Ⅱ、通过回调方法设置属性的值 attr(属性名,function(){});
Ⅲ、通过json设置多个属性的值 attr(json);
③、通过jquery(jq) 操作html元素的css样式
④、动态完成html元素的添加和删除
⑤、完成对html元素事件的操作
实验:在页面中添加一个table,然后通过jquery动态的向table添加tr元素,内容自拟。动态删除tr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="comm/jquery-2.1.4.js"></script>
<script type="text/javascript">
$(function(){
var a=1;
$('button#btn1').click(function(){
$('<tr></tr>').append('<td>张飞'+a+++'</td>').append('<td>40</td>').append('<td>五国</td>').appendTo($('table'));
// $('table').append(tr);
});
$('button#btn2').click(function(){
// remove empty
$('#tbl1 tr:last').remove();
});
});
</script>
</head>
<body>
<button id="btn1">添加一行</button>
<button id="btn2">删除一行</button>
<table border="1px" id='tbl1'>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td>刘备</td>
<td>30</td>
<td>三国</td>
</tr>
<tr>
<td>关羽</td>
<td>30</td>
<td>四国</td>
</tr>
</table>
<hr>
<table border="1px" id='tbl2'>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td>刘备</td>
<td>30</td>
<td>三国</td>
</tr>
<tr>
<td>关羽</td>
<td>30</td>
<td>四国</td>
</tr>
</table>
</body>
</html>
5、json
Javascript的对象表示法,是数据交换的一个产物。在B/S结构中,经常将数据封装成JSON格式然后在A一端传递到B的一端
语法:
“key”:“value”; 在js中,json对象必须用{}括起来。
var json={“userid”:“rock”,“password”:“123456”,…,“keyn”:“valuen”};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="comm/jquery-2.1.4.js"></script>
<script type="text/javascript">
// json的第一种表达方式
var obj={"userid":"rock","password":"123456","address":"辽宁大连"};
console.log(obj.password);
console.log(obj.address);
// json的第二种表达方式
var obj1={"userid":"rock","password":"123456","address":"辽宁大连","fullname":{
"firstname":"刘",
"lastname":"备"
}};
console.log(obj1.fullname.firstname);
console.log(obj1.fullname.lastname);
</script>
</head>
<body>
<table border="1px">
<tr>
<td>新闻编号</td>
<td>新闻标题</td>
<td>新闻内容</td>
</tr>
</table>
<script type="text/javascript">
// json的第三种表达方式
var newsJson=[{
"newsid":"N0001",
"title":"中国辽宁大连下冰雹了",
"body":"是多少度发的说法撒都法师法"
},{
"newsid":"N0002",
"title":"中国辽宁沈阳下冰雹了",
"body":"是多少度发的说法撒都法师法"
},{
"newsid":"N0003",
"title":"中国辽宁鞍山下冰雹了",
"body":"是多少度发的说法撒都法师法"
}];
// {"userid":"rock","password":"123456","address":"辽宁大连","fullname":{
// "firstname":"刘",
// "lastname":"备"
// }};
// for(var i=0;i<obj2.length;i++){
// var json1=obj2[i];
// console.log(json1.newsid+"="+json1.body);
// }
// 将被遍历的对象放在each方法的第一个参数
$.each(newsJson,function(index,element){ //element === json
// console.log(typeof element);
// 将newsJson中的所有数据封装成tr元素后添加到table中
var trObj=$('<tr></tr>');
$.each(element,function(key,value){ //
$('<td></td>').append(value).appendTo(trObj);
});
$('table').append(trObj);
});
</script>
</body>
</html>
6、前课回顾
①、操作html元素的值 :html() text() val()
②、操作html元素的属性:attr()方法
获取:attr(属性名);
设置:attr(属性,属性值)
attr(属性名,function(){});
attr(json);
③、操作html元素的css样式
④、动态完成html元素的操作(添加:append prepend before after() appendTo()。删除:empty(),remove())
⑤、响应html元素的事件
json:javascript对象表示法,用于数据交换。
①、{key:value,…}
②、{key:{},key:{}}
③、[{},{},{}]
jquery对象和dom对象转换
①、dom转成jquery对象:在dom对象前加 $ var jqueryObj=$(dom);
②、jquery转成dom对象:jqueryObj.get(0) jqueryObj[0];
7、jquery 表单
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ke88It32-1629969168452)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210601100945896.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.useridtxt{
color:red;
}
</style>
<script type="text/javascript" src="comm/jquery-2.1.4.js"></script>
<script type="text/javascript">
$(function(){
$('#btn-register').click(function () {
// 步骤1:获取文本框中的内容
var userid=$('#userid').val();//就是文本中的内容
// 步骤2:判断这个内容是否符合要求
var reg=/^[a-zA-Z0-9]{6,10}$/;
if(!reg.test(userid)){
// $('#useridtxt').html('非法,推荐[aaa123]').css('color','red');
$('#useridtxt').html('非法,推荐[aaa123]').addClass('useridtxt');
return false;
}
});
$('#btn-test').click(function () {
console.log($('input[name="sex"]:checked').val());
$.each($('input[type="checkbox"]:checked'),function(index,ele){
console.log($(ele).val());
});
console.log($('select>option:selected').val());
return false;
});
});
</script>
</head>
<body>
<div>
<form method="get">
<div>
userid:<input type="text" id="userid" placeholder="登录账号......">
<span id="useridtxt">[账号必须是6-10位数字和大小写字母的组合]</span>
</div>
<div>
password:<input type="text" id="password" placeholder="登录密码......">
</div>
<div>
password:<input type="text" id="repassword" placeholder="确认密码......">
</div>
<div>
性别: <input type="radio" name="sex" value="男" checked="checked">男
<input type="radio" name="sex" value="女">女
</div>
<div>
个人爱好:
<input type="checkbox" name="hobby" value="打游戏" checked="checked">打游戏
<input type="checkbox" name="hobby" value="篮球">篮球
<input type="checkbox" name="hobby" value="踢毽子">踢毽子
</div>
<div>
学位
<select name="degree">
<option value="博士">博士</option>
<option value="硕士">硕士</option>
<option value="学士">学士</option>
<option value="专科">专科</option>
</select>
</div>
<div>
<button id="btn-register">【注册】</button>
<button id="btn-test">【测试】</button>
</div>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#tbl-news
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#tbl-news td, #tbl-news th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#tbl-news th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#tbl-news tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
<script type="text/javascript" src="comm/jquery-2.1.4.js"></script>
<script type="text/javascript" src="comm/news.js"></script>
<script type="text/javascript">
$(function(){
$.each(news,function(index,element){
var tr=$('<tr></tr>').append($('<td></td>').append($('<input class="allnews" type="checkbox" value="'+element.newsid+'">')));
$.each(element,function(key,value){
if(key=='title'){
$('<td class="alt"></td>').append(value).appendTo(tr);
}
else{
$('<td></td>').append(value).appendTo(tr);
}
});
$('#tbl-news').append(tr);
});
$('#controlchk').click(function () {
// ①、判断当前复选框是否是选中状态
// prop是jquery中提供的操作单一属性值的方法 和 attr一致 value="134454352435"
var a=$(this).prop("checked");
console.log(a);
// ②、将行中的复选框的值设置和#controlchk框的值相同
$('.allnews').prop('checked',a);
});
$('#id1').click(function(){
$('.allnews').prop('checked',function(i,val){
return !val;
});
});
$('#id2').click(function(){
// ①、获取选中的复选框的value属性值
var ids='';
$.each($('.allnews:checked'),function(index,e){
ids+=$(e).val()+',';
});
console.log(ids.substr(0,ids.length-1));
// ②、封装成json格式
var json={'newsids':ids.substr(0,ids.length-1)};
});
$('a').mouseenter(function(){//mouseenter = mouseover 一样
$(this).css({'cursor':'pointer','color':'#0011FF'});
});
$('.alt').dblclick(function () {
var v=$(this).text();
$(this).empty();
var inputText=$('<input type="text" value="'+v+'">').css({"border":"0","border-bottom":"1 solid black"});
$(this).append(inputText);
inputText.select();
inputText.blur(function () {
var midv=inputText.val();
$(this).empty();
inputText.parent().html(midv);
});
inputText.keypress(function (event) {
var curKey = event.which;
if (curKey == 13) {
inputText.blur();
return false;
}
});
});
$('button').click(function(){
console.log(111);
});
$('button').on('click',function () {
console.log(2222);
})
$('button').bind('mouseenter',function(){
console.log(3333);
})
var abc='<button οnclick="myClick();">sssssss</button>';
});
function myClick(){
console.log("4444");
}
function check() {
return false;
}
$('form#regForm').on('submit',function () {
})
</script>
</head>
<body>
<form method="get" action="MyServer" onsubmit="return check();" id="regForm">
<input type="submit" value="注册">
</form>
<button>test</button>
<table id="tbl-news">
<tr>
<th>
<input type="checkbox" id="controlchk">
<a id="id1">反选</a>
<a id="id2">删除</a>
</th>
<th>新闻编号</th>
<th>新闻标题</th>
<th>新闻内容</th>
<th>新闻发布者</th>
</tr>
</table>
</body>
</html>
Web前端知识:(网页三剑客)
1、HTML :
2、CSS :
3、JavaScript :是一个面向对象的弱类型脚本语言
①、数据类型:弱类型的脚本语言,所谓的弱类型就是在定义变量时,无需指明当前变量的具体类型(字符串、数字型、布尔型、undefined、数组型、null、对象)
var age=10;// age是缓存
序列化:new User(‘rock’,‘老张’);
②、控制语句:for if switch while do…while
③、运算符:算数,条件,逻辑运算符,条件运算符,位运算
④、DOM对象:文档对象模型,所白了要操作html元素,必须先创建dom对象
getElementById():根据html元素的id属性值创建dom对象(一个对象)
getElementsByName();(一个dom的集合(array))
getEl…
⑤、DOM对象常见的应用场景
Ⅰ 、对html元素的属性操作
Ⅱ、对htm元素的值进行操作
Ⅲ、完成html元素的css样式操作
Ⅳ、动态操作html元素
Ⅴ、对html元素的事件进行响应
⑥、BOM对象:浏览器对象模型
⑦、js中的内置对象
String:字符串对象,和java差不多,java中的String提供的功能在js中几乎都有对应的方法
Date:系统的日期和时间。new Date();
Math:提供了数学计算的相关功能
RegExp:
var reg=/^ 表达式 $/;
[]:一个字符 [0-6]
{}:字符的个数 [a-z]{5} [a-z]{5,} [a-z]{5,8}
-:
~~~ javascript
var reg=/^1[3-9][0-9]{9}$/;
– \d{19}
~~~Array:可以理解为java中的数组
Java:Stack
for(var i=0;i<array.length;i++){} //jquery.each()方法
数据库:数据库管理系统,是一个应用软件,专门用于完成大量数据管理的软件。DBMS。采用了关系模型完成数据管理的DBMS,叫R-DBMS
E-R图:
①、要件:
5个
长方形 : 实体
椭圆 : 属性
菱形:关系
无限线:关联实体与属性 以及实体与实体
比例:1:1 1:N M:N
SQL:是一个工业标准,所有。。。。。
DDL:用于管理数据库对象,create alter drop
DML:insert update delete
DQL:select
seLect * from emp;
select * from dept;
drop table test1;
create table test1(
tid varchar2(20) ,
tname varchar2(20),
tage number,
ttxt varchar2(100) not null,
xid number,
constraint pk_test1_001 primary key(tid),-- 主键约束
constraint uk_test1_002 unique (tname),-- 唯一值约束
constraint ck_test1_003 check (tage>0 and tage<150),--检查约束
constraint fk_test1_004 foreign key (xid) references xtest1(xid)
);
create table xtest1(
xid number primary key ,
xname varchar2(30) not null
);
-- DML
insert into 表名 values()-- 不能用
insert into 表名(列名列表) values()
delete from 表名 where 条件
update 表名 set 列名=value, ,,, where 条件
-- DQL
select 列名列表 from 表名
select 列名列表 from 表名 where 条件
非空检索not null | is Not null
单条件检索 where 列名=值
多条件检索 where 列名=值 and|or 列名=值
排序检索 order by ASC(默认)|DESC
分组检索 group by 列名 (基于列中的值是否相等作为一个分组的依据)
聚合操作 max min sum avg count
select count(订单编号) from 订单 group by 用户编号 (一个用户产生了多少个订单)
select avg(salary) from emp group by deptno;
区间检索 列名 between 1000 and 10000 列名>1000 and 列名<10000
in检索 列名 in (1,2,3) 列名=1 or 列名=2 or 列名=3
-- 多表
等值连接 :列中的值相等作为链接条件
select a.empno,a.ename ,b.dname from emp a ,dept b where a.deptno=b.deptno;
内连接 :列中的值相等作为链接条件
select empno,ename ,dname from emp a [inner] join dept b on a.deptno=b.deptno;
自连接 :建立在以上两种基础之上
select a.ename,b.ename from emp a join emp b on a.mgr=b.empno;
子查询 select * from emp where sal>(select avg(sal) from emp)
左外连接 select a.*,b.* from emp a left join dept b on a.deptno=b.deptno;
select a.*,b.* from emp a,dept b where a.deptno=b.deptno(+);
右外连接 select a.*,b.* from emp a right join dept b on a.deptno=b.deptno;
select a.*,b.* from emp a,dept b where a.deptno(+)=b.deptno;
交叉连接 select a.*,b.* from emp a cross join dept b;
-- 函数
数学函数 abs() 绝对值....
聚合函数 sum()....
字符串函数 upper()....
转化函数 to_date() convert()
其他函数 nvl() nvl2() case when than decode sum over
-- 伪列 rowid rownum
om emp a join emp b on a.mgr=b.empno;
子查询 select * from emp where sal>(select avg(sal) from emp)
左外连接 select a.,b. from emp a left join dept b on a.deptno=b.deptno;
select a.,b. from emp a,dept b where a.deptno=b.deptno(+);
右外连接 select a.,b. from emp a right join dept b on a.deptno=b.deptno;
select a.,b. from emp a,dept b where a.deptno(+)=b.deptno;
交叉连接 select a.,b. from emp a cross join dept b;
– 函数
数学函数 abs() 绝对值…
聚合函数 sum()…
字符串函数 upper()…
转化函数 to_date() convert()
其他函数 nvl() nvl2() case when than decode sum over
– 伪列 rowid rownum