2019.9.6 NIIT第五十二天
/真的顶不住，好想休息啊/
html()，val(),text()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
console.log($("#d1").html());
console.log($("#d1").text());
//给标签元素内容赋值
$("#d2").html("<b>海棠依旧<b>")
$("#d3").text("<b>海棠依旧<b>")
var input=$("#username");
console.log(input.val());
input.val("jerry");
});
</script>
</head>
<body>
<div id="d1">
生当作人杰
<span id="sp1">
死亦为鬼雄
</span>
</div>
<hr />
<div id="d2">
aaa
</div>
<hr />
<div id="d3">
aaa
</div>
<input type="text" name="username" id="username" value="tom" />
</body>
</html>
each函数
对数组进行遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var cities=new Array();
cities[0] = new Array("武汉市","黄石市","黄冈市","十堰市");
cities[1] = new Array("长沙市","株洲市","湘潭市","衡阳市");
cities[2] = new Array("苏州市","南京市","无锡市","常州市");
cities[3] = new Array("杭州市","温州市","宁波市","嘉兴市");
var city = new Array("武汉市","黄石市","黄冈市","十堰市");
$.each(city,function(index,value){
console.log(index+"--"+value);
});
$.each(cities,function(index,value){
console.log(index+"--"+value);
$.each(value,function(i,v){
console.log(i+"--"+v);
});
});
});
</script>
</head>
<body>
</body>
</html>
对对象进行遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var tr=$("table tbody tr");
$(tr).each(function(i,v) {
console.log(i+"--"+$(v).text());
});
});
</script>
</head>
<body>
<table border="" cellspacing="" cellpadding="">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
remove和empty
remove不保留框架 empty保留框架
使用jquery实现省市联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript">
var cities = new Array();
//2.定义第二维的数组，存储城市
cities[0] = new Array("武汉市","黄石市","黄冈市","十堰市");
cities[1] = new Array("长沙市","株洲市","湘潭市","衡阳市");
cities[2] = new Array("苏州市","南京市","无锡市","常州市");
cities[3] = new Array("杭州市","温州市","宁波市","嘉兴市");
$(function(){
//1.处理省份的改变事件
$("#pro").change(function(){
//2.获取省份当前选中的索引
console.log($("#pro option:selected").val()+"---"+$("#pro option:selected").text());
var index = $("#pro option:selected").val();
//清空city
$("#city").empty();
//3.根据索引遍历数组
$.each(cities[index],function(i,v){
//jquery中创建节点 就是字符串的拼接
var op = "<option value='"+v+"'>"+v+"</option>";
console.log(op);
//4.挂载到city节点
$("#city").append(op);
});
});
});
</script>
</head>
<body>
<center>
<h3>onChange事件：选项改变事件</h3>
所在地：
<select id="pro">
<option>请选择省份</option>
<option value="0">湖北省</option>
<option value="1">湖南省</option>
<option value="2">江苏省</option>
<option value="3">浙江省</option>
</select>
<select id="city">
<option>请选择城市</option>
</select>
</center>
</body>
</html>
加载jq包注意顺序，先加载js
表单校验
$(function() {
$("#registForm").validate({
rules: {
//規則默認使用input框的name屬性
"user": {
required: true
},
"password":{
required: true,
rangelength:[6,12]
},
"repassword":{
equalTo:"#password"
},
"email":{
email:true
},
"username":{
required: true
},
"birthday":{
date:true
},
"yanzhengma":{
required: true
}
},
messages: {
"user": {
required: "用戶名必須填寫"
},
"password":{
required: "密碼必須填寫",
rangelength:"密碼6-12位"
},
"repassword":{
equalTo:"兩次輸入密碼不一致"
},
"email":{
email:"請輸入正確的郵箱格式"
},
"username":{
required: "姓名需要填寫"
},
"birthday":{
date:"日期格式錯誤"
},
"yanzhengma":{
required: "驗證碼必須填寫"
}
}
});
自适应布局
bootstrap使用申明
<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<!--先引入jquery-->
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
