Web 基础28 JQuery简介及其入门案例 （二）
2018-04-06 本文已影响17人
小熊先生很不开心
1.1 jQuery的核心方法
1.1.1 jQuery的核心方法
$(); == jQuery();
//完整版本
jQuery(document).ready(function() {
alert("页面加载完成了！");
});
底层:先将document对象转成jQuery对象,然后调用ready方法,并且传一个匿名的函数,最后才实现这个功能
1.1.2 核心方法的作用
- 设置页面加载完成之后要执行的代码
- $(function(){代码});
- 作为选择器获取标签的对象
- var div01 = $("#div01");
- 把字符串形式的标签,转化成jQuery对象
- var jQueryA = $("<a href='http://www.itheima.com'>黑马程序员</a>");
- 把dom对象转换成jQuery对象
- var div01 = $(document.getElementById("#div01"));
1.2 使用jQuery遍历集合对象
通过选择器的到的对象通常是集合对象，但是这里要注意的是这个集合是一个JQ对象，只能使用JQ的方法
- 方式1 普通for循环
for(var x = 0;x < divList.size();x++) {
var div = $(divList[x]);
//var div = divList.get(x);
alert(div.html());
}
- 方式2.1 使用jQuery方法each来遍历集合对象
//function不带参数
divList.each(function() {
//this:集合中的每一个元素对象,this是dom对象，不能直接调用jQuery的方法
alert($(this).html());
});
- 方式2.2 使用jQuery方法each来遍历集合对象
//function带参数
divList.each(function(index,element) {
//element == this
alert(index + ":" + $(element).html());
});
- 注意:
- 普通for循环获得集合的长度用size()或者length都可以
- 两种方式遍历得到的元素对象都是dom对象,需要转换之后才能调用jQuery方法
1.3 JQ的常用方法
1.3.1 html()&text()&val()
- 使用jQuery设置获取标签的标签体
//html()
//类似于dom的innerHTML属性
alert(jQueryDiv.html());// 如果没有参数,获取标签的标签体
jQueryDiv.html("小熊先生");//如果有参数,设置标签的标签体
//text()
//不解析html标签,类似于dom的innerText属性
alert(jQueryDiv.text());//如果没有参数,获取标签的标签体
jQueryDiv.text("小熊先生");//如果有参数,设置标签的标签体
- 使用jQuery设置获取标签的值
//val()
alert(inputList.val());//无参,获取
inputList.val("lisi");//有参,设置
1.3.2 attr()
alert(aList.attr("href"));//获取
aList.attr("href","http://www.itcast.cn");//设置
removeAttr(name)//移除属性
1.3.3 css()&addClass()
- css()
alert(div01.css("height"));//获取
div01.css("height","300px");//设置
//css可以一次设置多个属性,接收一个对象
//{属性:属性值,属性2:属性值2}
div01.css({"height":"800px","width":"800px"});
- addClass()
div01.addClass("css01 css02");//添加
- removeClass()
div01.removeClass("css01 css02");//移除
- 说明
- 这些方法一般用来控制页面的显示,涉及跟前端的配合
- 对于前端: 经常做css层叠样式表,供我们导入
- 对于后端:一般不需要单独设置某一个css样式的值,一般给元素添加一个class属性
1.3.4 is(选择器)
其实判断前面这个jQuery对象是否符合参数中的选择器(是否包含在选择器中),返回一个布尔值
var div01 = $("#div01");
//id选择器
alert(div01.is("#div01"));
//类选择器
alert(div01.is(".css01"));
1.4 jQuery的事件处理
&esmp;这里我也只能简单的说一个,很多具体的需要去看JQ的手册，官网有下载的。
- click() 按钮点击时触发事件所对应的方法
var button01 = $("#button01");
button01.click(function() {
alert("点击事件触发了1！");
});
- blur() 失去焦点时触发事件所对应的方法
var username = $("#username");
username.blur(function() {
//var value = username.val();
var value = $(this).val();
if(value == "") {
alert("请输入用户名！");
return;
}
});
- change() 标签值发生变化时触发事件所对应的方法
var select01 = $("#select01");
select01.change(function() {
alert($(this).val());
});
-
事件处理其实就是调用它相应时间的方法,传一个匿名的函数
- 当这个事件发生的时候,这个匿名函数就会执行
- 例如：键盘按下去就会触发keydown事件 ,接下来每个几毫秒触发 keypress事件,最后抬起来的时候会触发 keyup事件
-
其实讲道理，很多功能在手册上都可以找到，不需要记住，使用前一定要看手册是说明真的，千万别忘记了，不然容易闹笑话
1.5 几个案例
可以先自己写一下，把我的脚本先删除
1.5.1 实现表单校验的案例
在用户提交注册表单时在信息框显示提示如图。
登录案例1.png
用户未输入
登录案例2.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery的案例</title>
<style type="text/css">
table tr td{
border:1px solid darkblue;
}
table {
margin-left:30%;
position:relative ;
border:1px solid darkblue;
width: 500px;
}
span {
color: red;
}
</style>
<script type="text/javascript" src="lib/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
//使用jQuery实现表单校验的案例
var spanList = $("span");
//遍历集合对象
spanList.each(function() {
//$(this).css("display","none");
//hide() 隐藏标签
//show() 显示标签
$(this).hide();
});
$("form").submit(function() {
if($("#username").val() == "") {
//显示span标签
$(spanList[0]).show();
}
else {
//隐藏span标签
$(spanList[0]).hide();
}
if($("#password").val() == "") {
//显示span标签
$(spanList[1]).show();
}
else {
//隐藏span标签
$(spanList[1]).hide();
}
//判断是否有span标签显示，如果有span标签显示，那说明用户名或者密码为空，表单不可以提交，返回false
if(spanList.is("span:visible")) {
return false;
}
else {
return true;
}
});
});
</script>
</head>
<body>
<form method="get" action="success.html">
<table>
<tr>
<th colspan="2">用户登陆</th>
</tr>
<tr>
<td>用户名称</td>
<td>
<input type="text" id="username" name="username" />
<span>请输入用户名！</span>
</td>
</tr>
<tr>
<td>用户密码</td>
<td>
<input type="password" id="password" name="password"/>
<span>请输入密码！</span>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交"/>
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>
1.5.2 多选框案例
实现 多选与反选按钮 以及 计算按钮
商品列表统计.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JQ代码案例2</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
var allCheck = $("#allCheck");
allCheck.click(function(){
$("input[name=item]").each(function(){
$(this).prop("checked",allCheck.prop("checked"))
});
});
var otherCheck = $("#otherCheck");
otherCheck.click(function(){
$("input[name=item]").each(function(){
if($(this).prop("checked")){
$(this).removeProp("checked");
}else{
$(this).prop("checked","checked");
}
});
});
var sumBtn = $("#sumBtn");
sumBtn.click(function(){
var sum = 0;
var item = $("input[name=item]:checked");
item.each(function(){
sum = sum + parseInt($(this).val());
});
$("#sumId").html(sum);
});
});
</script>
<body>
<div>商品列表</div>
<input type="checkbox" name="item" value="3000" />笔记本3000元<br />
<input type="checkbox" name="item" value="2500"/>HTC手机2500元<br />
<input type="checkbox" name="item" value="8000" />苹果电脑8000元<br />
<input type="checkbox" name="item" value="1500" />IPAD1500元<br />
<input type="checkbox" name="item" value="400" />玩具汽车400元<br />
<input type="checkbox" name="all" id="allCheck" />全选<br />
<input type="checkbox" name="all" id="otherCheck"/>反选<br />
<input type="button" value="总金额" id="sumBtn" /><span id="sumId"></span>
</body>
</html>
1.5.2 表格关联
就是完成类似地址的选择
省份选择.png
<!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">
$(function(){
//定义一个json数组
var arr = [
{name:"河南省",cities:["郑州","洛阳","开封"]},
{name:"辽宁省",cities:["沈阳","大连","鞍山"]},
{name:"山东省",cities:["青岛","济南","烟台"]},
];
//将省份添加到省份列表中
for(var i=0;i<arr.length;i++){
$("#province").html($("#province").html()+"<option>"+arr[i].name+"</option>");
}
//为省份添加事件,当省份被选中之后,添加城市到城市列表中
$("#province").click(function(){
for(var i=0;i<arr.length;i++){
var name = arr[i]["name"];
var cities = arr[i]["cities"];
if($("select[id=province] option:selected").html() == name){
$("#city").html("<option>--选择市--</option>");
for(var j=0;j<cities.length;j++){
$("#city").html($("#city").html()+"<option>"+cities[j]+"</option>");
}
}
}
});
});
</script>
</head>
<body>
<select id="province">
<option>--选择省--</option>
</select>
<select id="city">
<option>--选择市--</option>
</select>
</body>
</html>
