1.省市联动
Paste_Image.png
- 遍历each
$(ele).each(fn);
$.each($ele，fn); - 文档处理:内部插入
Paste_Image.png
<script>
$(function() {
$("#province").change(function() {
$("#city").empty();
var val=this.value;
var citys = new Array(["武汉市", "黄冈市", "襄阳市", "荆州市"], ["长沙市", "林州市", "株洲市", "岳阳市"], ["石家庄市", "邯郸市", "廊坊市", "保定市"], ["郑州市", "洛阳市", "开封市", "保定市"]);
$.each(citys, function(i, n) {
if(i == val) {
$.each(citys[i], function(j, m) {
var note=document.createTextNode(m);
var ele=document.createElement("option");
$(ele).append(note);
$(ele).appendTo($("#city"));
});
}
});
});
});
</script>
2.左右选择
$(function () {
$("#selectOneToRight").click(function () {
$("#left option:selected").appendTo($("#right"));
})
$("#selectAllToRight").click(function () {
$("#left option").appendTo($("#right"));
})
$("#left").dblclick(function () {
$("#left option:selected").appendTo($("#right"));
})
})
--------------------------------------------------
<select multiple="multiple" style="width: 100px;height: 200px;" id="left">
<option>IPhone6s</option>
<option>小米4</option>
<option>锤子T2</option>
</select>
<p><a href="#" style="padding-left: 20px;" id="selectOneToRight">>></a></p>
<p><a href="#" style="padding-left: 20px;" id="selectAllToRight">>>></a></p>
</span>
<span style="float: right;">
<font color="red" face="宋体">未有商品</font><br/>
<select multiple="multiple" style="width: 100px;height: 200px;" id="right" >
<option>三星Note3</option>
<option>华为6s</option>
</select>
-
常见事件
Paste_Image.png 事件切换
hover( over , out)简化方法
A.hover( fn1 , fn2)等效A.mouseover( fn1 ).mouseout( fn2)
toggle( fn1, fn2 , .... ) click事件增强版，轮回
3.表单校验
- validation校验
Paste_Image.png
Paste_Image.png
Paste_Image.png
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<!--validate.js是建立在jquery之上的，所以得先导入jquery的类库-->
<script type="text/javascript" src="../../js/jquery.validate.min.js" ></script>
<!--引入国际化js文件-->
<script type="text/javascript" src="../../js/messages_zh.js" ></script>
--------------------------------------------------
<script>
$(function(){
$("#registForm").validate({
rules:{
user:{
required:true,
minlength:3
},
password:{
required:true,
digits:true,
minlength:6
},
repassword:{
required:true,
equalTo:"[name='password']"
},
email:{
required:true,
email:true
},
username:{
required:true,
maxlength:5
},
sex:{
required:true
}
},
messages:{
user:{
required:"用户名不能为空!",
minlength:"用户名不得少于3位!"
},
password:{
required:"密码不能为空!",
digits:"密码必须是整数!",
minlength:"密码不得少于6位!"
},
repassword:{
required:"确认密码不能为空!",
equalTo:"两次输入密码不一致!"
},
email:{
required:"邮箱不能为空!",
email:"邮箱格式不正确!"
},
username:{
required:"姓名不能为空!",
maxlength:"姓名不得多于5位!"
},
sex:{
required:"性别必须勾选!"
}
},
errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label
success: function(label) { //验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签label
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}
});
});
</script>
4.jq总结
- 属性操作_attr
<script>
/**
* 需求：
* 1.获取图片的路径
* 2.设置图片的高度属性
* 3.给图片设置多个属性(宽度和高度)
* 4.移出图片的高度属性
*/
/**
* 方法分析：
* 1.attr(name):读(获)取属性的值
* 2.attr(key,value)：设置属性值
* 3.attr(properties)：同时设置多个属性
* 4.removeAttr(name)：删除某个属性
*
* 所有方法注意查看运行显示结果，查看其中的某个方法时，请注释其它方法，后面的案例不再说明！
*/
/*
* 代码实现
*/
$(function(){
//1.attr(name):该方法用于获取属性的值(根据属性的名称)
var srcEle = $("img").attr("src");
alert(srcEle);//输出结果为该图片的路径：../../img/1.jpg
//2.attr(key,value):该方法用于设置属性和值
$("img").attr("height","800px");//设置该图片的高度属性，注意观察图片的高度变化
//3.attr(properties)：同时设置多个属性值
//$("img").attr({"width":"1300px","height":"300px"});//注意观察图片发生的变化(宽高都改变)
//4.removeAttr(name)：删除某个属性和值
$("img").removeAttr("width");//清除width属性后，图片变回其自身原有的大小
});
</script>
- 属性操作_CSS类
<style type="text/css">
.divclass {
color: red;
}
.div1 {
background-color: yellow;
}
#div1 {
border: 1px solid black;
width: 400px;
height: 250px;
margin: auto;
}
#father {
border: 1px solid white;
width: 450px;
height: 300px;
margin: auto;
text-align: center;
}
</style>
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
<script>
/**
* 需求：
* 1.点击button，使一个div的背景颜色变为 黄色
* 2.点击button，清空之前设置的背景颜色
* 3.通过toggleClass(class) 实现点击字体变为紅色，再点击样式还原
*/
/**
* 方法分析：
* 1.addClass(class) 添加一个class属性
* 2.removeClass([class]) 移除一个class属性
* 3.toggleClass(class) 如果存在(不存在)就删除(添加)一个类
*/
/**
*代码实现
*/
$(function() {
// 1.点击button，使一个div的背景颜色变为黄色
$("#button1").click(function() {
$("#div1").addClass("div1");
});
// 2.点击button，清空之前设置的背景颜色
$("#button2").click(function() {
$("#div1").removeClass("div1");
});
// 3.通过toggleClass(class) 实现点击字体变为紅色，再点击样式还原
$("#button3").click(function() {
$("#div1").toggleClass("divclass");
});
});
</script>
</head>
<body>
<div id="father">
<div id="div1">AAAAAA</div><br />
<input type="button" value="背景颜色变为黄色" id="button1" />
<input type="button" value="背景颜色清空" id="button2" />
<input type="button" value="字体颜色开关" id="button3" />
</div>
</body>
- 属性操作_html代码
<script>
$(function(){
//1.点击按钮获取div中 html
$("#btn1").click(function(){
var divEle = $("div").html();
alert(divEle);//<p>传播</p>
});
//2.点击按钮设置div中html
$("#btn2").click(function(){
$("div").html("Java学院");//覆盖之前此位置的内容
});
})
</script>
- 属性操作_文本text
$(function(){
//1.点击按钮获取div中 text
$("#btn1").click(function(){
var divEle = $("div").text();
alert(divEle);/
});
//2.点击按钮设置div中text
$("#btn2").click(function(){
$("div").text("Java");//覆盖之前此位置的内容
});
})
- 属性操作_值val
$(function(){
//1.点击按钮获得文本框、下拉框、单选框选中的value
$("#btn1").click(function(){
alert($("#username").val());
alert($("#city").val());
alert($("input[type='radio']:checked").val());
});
//2.点击按钮设置用户名的默认值为“老王”
$("#btn2").click(function(){
$("#username").val("老王");
});
})
------------------
<body>
用户名 <input type="text" id="username" /> <br/>
性别 <input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" checked="checked"/> 女<br/>
城市
<select id="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select> <br/>
<input type="button" value="获取val" id="btn1" />
<input type="button" value="设置val" id="btn2" />
</body>
- 文档处理_插入操作
/**
* 方法分析：
* 内部插入
* 1.append(content):内部结尾处，将B追加到A里面去
* 2.appendTo(content):内部结尾处，将A追加到B里面去
* 3.prepend(content):内部开始处，将B追加到A里面去
* 4.prependTo(content):内部开始处，将B追加到A里面去
* 外部插入
* 1.after(content):外部，将B追加到A后面
* 2.before(content):外部，将A追加到B前面
* 3.insertAfter(content):外部，将A追加到B后面
* 4.insertBefore(content)::外部，将A追加到B前面
*/
------------------
$(function() {
// 追加 option 内容大专
// 创建元素
var $newNode = $("<option value='大专'>大专</option>");
//内部插入
//$("#edu").append($newNode); // 内部结尾，将B追加到A里面去
//$("#edu").prepend($newNode); // 内部开始，将B追加到A里面去
//外部插入
//$("option[value='本科']").after($newNode);
$newNode.insertBefore($("option:contains('硕士')"));
});
--------------
<body>
<select id="edu">
<option value="博士">博士</option>
<option value="硕士">硕士</option>
<option value="本科">本科</option>
<option value="高中">高中</option>
</select>
</body>
- 文档处理_复制操作
* 1.clone()：克隆匹配的DOM元素并且选中这些克隆的副本。
* 2.clone()：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
$(function(){
//点击li列表项，将当选点击的li内容追加到ul末尾
$("ul li").click(function(){
//$(this).clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到<ul>元素
$(this).clone(true).appendTo("ul");//设置参数true后，复制后的内容也具备单击事件
})
});
- 文档处理_替换操作
$(function(){
//将B的内容替换掉A处的内容
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");
// 同样的实现： $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");
});
- 文档处理_删除操作
* 1.remove()：删除节点后，事件也会删除
* 2.detach()：删除节点后，事件会保留 从1.4新API
* 3.empty():清空元素中的所有后代节点。(这个案例是要删除而不是清空，需要注意)
$(function() {
$("p").click(function() {
alert($(this).text());
});
// 使用remove方法删除 p元素，连同事件一起删除
//var $p = $("p").remove();
// 使用detach删除，事件会保留
var $p = $("p").detach();
$("div").append($p);
});
- 使用对象访问方式遍历
$(function(){
// 全选/ 全不选
$("#checkallbox").click(function(){
var isChecked = this.checked;
//使用对象访问的方式进行遍历，语法：$().each(function(){})
$("input[name='hobby']").each(function(){
this.checked = isChecked;
});
});
});
----------------------
<body>
请选择您的爱好<br/>
<input type="checkbox" id="checkallbox" /> 全选/全不选 <br/>
<input type="checkbox" name="hobby" value="足球" /> 足球
<input type="checkbox" name="hobby" value="篮球" /> 篮球
<input type="checkbox" name="hobby" value="游泳" /> 游泳
<input type="checkbox" name="hobby" value="唱歌" /> 唱歌 <br/>
</body>
-------------------------
$(function(){
// 全选/ 全不选
$("#checkallbox").click(function(){
var isChecked = this.checked;
//使用工具类遍历方式，语法：$.each(array，function(i,j){}) 其中array代表被遍历的对象，i代表角标，j代表遍历后的内容。
$.each($("input[name='hobby']"), function(i,j) {
j.checked = isChecked;
});
});
});
- 属性操作_CSS类
* 1.css(name, value) 设置一个CSS样式属性
* 2.css(properties) 传递key - value对象， 设置多个CSS样式属性
* CSS操作方法汇总：
* 1.通过attr属性设置 / 获取 style属性
* attr('style', 'color:red'); // 添加style属性
* 2.设置CSS样式属性
* css(name, value) 设置一个CSS样式属性
* css(properties) 传递key - value对象， 设置多个CSS样式属性
* 3.设置class属性
* addClass(class) 添加一个class属性
* removeClass([class]) 移除一个class属性
* toggleClass(class) 如果存在(不存在)就删除(添加) 一个类
$(function() {
// 1.点击button，使一个div的背景颜色变为绿色
//方式一
/*$("#button1").click(function() {
$("#div1").css("background-color","green");
});*/
//方式二：
$("#button1").click(function() {
$("#div1").attr("style","background-color:green");
});
// 2.点击button，使一个div的背景颜色变为绿色，内容字体颜色变成红色
$("#button2").click(function() {
$("#div1").css({"background-color":"green","color":"red"});
});
});
- 页面未加载执行失败
<script type="text/javascript">
document.getElementById("panel").onclick = function() {
alert("元素已经加载完毕 !");
}
/*
执行错误，为什么？
因为dom还未加载完毕。
*/
</script>
</head>
<body>
<div id="panel">click me.</div>
</body>
------------------------------
<!--解决办法：
方式一：将JS代码移到需要操作的html代码后面，一般建议放到body的外面
方式二：将JS代码放到一个页面加载函数中去-->
<body>
<div id="panel">click me.</div>
<script type="text/javascript">
document.getElementById("panel").onclick = function() {
alert("元素已经加载完毕 !");
}
/*正确执行*/
</script>
- 事件移除
$(function() {
$('#btn').bind("click", function() {
$('#test').append("<p>我的绑定函数1</p>");
});
$('#delAll').click(function() {
$('#btn').unbind("click");
});
})
- 鼠标滑过
$(function() {
$(".head").mouseover(function() {
$(this).next().show();
}).mouseout(function() {
$(this).next().hide();
})
})
- 合成事件
$(function() {
$(".head").hover(function() {
$(this).next().show();
}, function() {
$(this).next().hide();
})
})
---------------------------
$(function() {
$(".head").toggle(function() {
$(this).next().hide();
}, function() {
$(this).next().show();
})
})
