(一) Html
a) 背景
H5,现在主流标准,可以编写网页端手机端。
b) 标签
A超链接
P段落
独自占有一行
Ul li 无序列表
去掉Ul和li的圆点和它自带的内外边距:
list-style-type: none;
margin: 0px;
padding: 0px;
Ol li 有序列表
也有去掉序号的方法 list开头
Img 图片
图片也可以放在超链接里面
还可以在css文件里操作它的样式,声明为 .class img {}
<a href="/test01/index.html"><img src="img/lg_movie_a12_2.png"</a>
Hr
H1 h2
Span 小区域
span是不独自占有一行的,需要加上display block让它称为块级元素
Div 框框
浮动之后就不独自占有一行了,清除浮动 clear both 清除
Table tr/th thead tbody td 表格
<table border="5" cellspacing="5" cellpadding="5">
<tr>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
<th>周天</th>
</tr>
<tr>
<td>学习</td>
<td>考试</td>
<td>出们</td>
<td>打球</td>
<td>上网</td>
<td>休息一</td>
<td>休息二</td>
</tr>
</table>
Center
居中
Button
按钮标签
c) 布局
默认的:static 默认文档流布局
相对的:relative 从自己当前的位置 相对改变自己显示的位置
绝对的:absolute 定位在网页固定的位置
绝对的:fixed 定位在浏览器固定位置 跟着跑
要让模块浮在另一模块的上面,讲究子绝父相
块级元素:
默认占据一整行,设置宽高都可以实现
行内元素:
从左向右依次排列,设置宽高无效果。完全取决于内容大小
块级转行内:float..
浮动清除:clear:both 如果不想下面的代码被上面的浮动影响。
行内转块级:display:block
d) 表单
Form
Input
Type= text
Password
Radio 单选
Checkbox 多选 复选
File
Button
Submit
提交
Reset
重置
Date
日期
Select option
<select>
<option value=”1”>现实的</option>
</select>
<textarea>
e) 盒子模型
外边距 :margin
内边距:padding
边框:border
f) 样式表
<style>
A{} 标签选择器
.xx{} 类选择器
#id {} id选择器
</style>
Color
Background-Color背景色
Background-image
Border:soild red 1px;
Font 字体
Font-size
Line-height
Width
Height
Text-align:center
文字居中方法
Padding
Margin
Float
position
位置 四种
(二) Javascript
a) 基本语法
Var a = 1;
Var a ={“name”:”zhi”,”age”:“22”}
a.name
var c = [1,2,3,4,5,6,7,8]
var c = new array();
c.push(“dd”);
if
for
b) Dom对象
Var zujian = Document.getElementById(“ddd”);
Var zujians = Document.getElementsByName (“ddd”);
Zujian.innerhtml=“ddddd”
Var cc = Zujian.innerhtml;
Zujian.value=22 值
<form id=”ddd”>
Document.getElementById(“ddd”).submit();//手动提交表单
c) Bom对象
Alert()
弹框
setTimeout("suan()",2000)
方法延时执行
setInterval("daojishi()",1000)
方法循环延时执行
Console.log()
Open(“www.baidu.com”)
Location.href=””;//本页面跳转
Window. 能到浏览器窗口大小,
d) 字符串常用方法
re1 = new RegExp("垃圾","g");// 第一个参数: 要替换的文本,g 替换全部
var Newstr = a.replace(re1, "**");
a :要被替换的字符串
re1 :替换规则
“**” :替换内容
Newstr:替换结果
表单校验
function phonejy(){
var phonenumber=document.getElementById("phone").value
var z=/^1[3456789]\d{9}$/ //正则表达式校验和测试格式
if(z.test(phonenumber)){
document.getElementById("er3").innerHTML="<span style='color:red'>手机号格式正确</span>"
}else{
document.getElementById("er3").innerHTML="<span style='color:darkgreen'>手机号格式不正确</span>"
}
}
(三) Jquery
a) 选择器
$(“a”) 所有a标签
$(“#id”) 返回第一个id组件
$(“.ccc”) 所有class=ccc的组件
$(“.ccc p”) 所有class=ccc p的组件
b) 监听写法
$(“#dd”).click(function(){
})
Click
Keyup
键起
keypress
键落
Select 下拉列表 change方法
c) 常用方法
Hide
隐藏元素 绑定事件
Show
显示元素 绑定事件
Val()获取值 val(222)设置值
Attr(“src”)获取属性值
Attr(“src”,”1.jpg”)
Html(“dddd”)
Html()
Text()
Text(“dddddddddddddd”)
//获取所有input对象 挨个循环
$(":input").each(function(a,b){
// a是 顺序号 下表
$(b)//这个是每一个对象
});
d) 节点操作
Append
追加
Clone
克隆
例子 吉普赛人占卜 9或者9的倍数符号是一样的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
</head>
<body>
<div id="fuhao" style="font-size: 22px;">
欢迎来到神秘的徐半仙占卜术中心。在这里你得不到爱情。但是能得到迷惑。
请在心中默想一个2位数。减去他的十位数和个位数。得到的数字记在心中。不要告诉他
点击下一步
<input id="xyb" type="button" value="下一步" />
</div>
<script>
var tx = ['α','β','γ','δ','ζ','η','θ','φ','ξ','ρ','ψ','ω']
var sui1 = Math.floor(Math.random()*tx.length);
$("#xyb").click(function(){
$("#fuhao").html("<br>")
for (var i=1;i<100;i++) {
var sui = Math.floor(Math.random()*tx.length);
if(i%9==0){
sui = sui1;
}
var ss = i+" : "+tx[sui]+" ";
$("#fuhao").append(ss)
if(i%10==0){
$("#fuhao").append("<br>")
$("#fuhao").append("<br>")
}
}
$("#fuhao").append("<br> <input id='yc' οnclick='ok()' type='button' value='预测' /> ");
})
function ok(){
$("#fuhao").html("您心中的图形是:"+tx[sui1])
}
</script>
</body>
</html>
jquery html写标签 jquery常用标签
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
jquery标签插件 jquery常用标签
jquery下载及引用下载:http://jquery.com/引用:<script src="路径"></script> 2.jQuery核心:$$符号在jQuery中代表对jQuery对象的引用,$==jquery3.jQuery选择器基础选择器 b.层次选择器 c.表单选择器 4.jQuery对标签元素的操作:常
jquery标签插件 jquery Powered by 金山文档 jQuery ajax