一、jQuery的核心方法
我们在上一篇文章中提到了jQuery的核心方法，接下来详细讲解一下核心方法。
jQuery的核心方法的方法名为jQuery(),别名为$()，一般使用别名调用核心方法。
jQuery核心方法的功能
- 设置页面加载完成之后要执行的代码
$(function(){
alert("页面加载完成了！");
});
上面核心方法的使用是一个简写版本，完整版本是：
jQuery(document).ready(fucntion(){
alert("页面加载完成了！");
});
- 获取标签的对象
var div01 = $("#div01");
alert(div01.html());
- 将字符串形式的标签转换成jQuery对象
var jQueryA = $("<a href = 'https://www.baidu.com'>百度</a>");
var div01 = $("#div01");
div01.html(jQueryA);
- 把dom对象转换成jQuery对象
var div01 = $(document.getElementById("#div01"));
alert(div01.html());
二、使用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">
$(function() {
var divList = $("div");
//alert(divList[0].html());
//方式1：普通for循环
//for(var x = 0; x < divList.size(); x++) {
// var div = $(divList[x]);
// alert(div.html());
//}
//方式2：each方法
//divList.each(function() {
// alert($(this).html());
//});
divList.each(function(index, element) {
alert(index + ":" + $(element).html())
});
});
</script>
</head>
<body>
<div>传智播客</div>
<br />
<div>黑马程序员</div>
<br />
<div>传智专修学院</div>
<br />
</body>
</html>
三、jQuery的常用方法
1、使用jQuery获取标签的标签体
- html()
如果方法没有参数，则用于获取标签的标签体，有返回值
如果有参数，用于设置标签的标签体
类似于dom的innerHTML属性,能够解析html标签 - text()
如果方法没有参数，则用于获取标签的标签体，有返回值
如果有参数，用于设置标签的标签体
不解析html标签，类似dom的innerText属性
2、使用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">
$(function(){
var jQueryDiv = $("#div01");
//html()
//如果方法无参，方法用于获取标签的标签体
alert(jQueryDiv.html());
//如果方法有参，方法用于设置标签的标签体，能够解析html标签
//实现标签的替换
jQueryDiv.html("黑马程序员");
//实现内容的拼接
jQueryDiv.html(jQueryDiv.html()+",黑马程序员");
//修改div标签的内容
jQueryDiv.html("<a href='https://www.baidu.com/'>百度</a>");
//text()
//如果方法无参，方法用于获取标签的标签体
alert(jQueryDiv.text());
//如果方法有参，方法用于设置标签的标签体，但是不能解析HTML标签
//实现内容的拼接
jQueryDiv.text(jQueryDiv.text()+",黑马程序员");
//val()
var inputList = $("[name=username]");
//注意：如果集合只有一个元素，可以直接使用集合名称调用方法
//如果方法无参，方法用于获取标签的值
alert(inputList.val());
//如果方法有参，方法用于获取标签的值
inputList.val("lisi");
});
</script>
</head>
<body>
<div id="div01">传智播客</div>
<br />
<input type="text" name="username" value="zhangsan" />
<br />
<a href='https://www.baidu.com/'>百度</a>
</body>
</html>
3、使用jQuery获取标签属性的值
- attr()
如果方法只有一个参数，方法用于获取标签属性的值
如果方法有两个参数，方法用于设置标签属性的值 - removeAttr()
方法的参数为标签的属性名，用于删除这个标签
<!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(){
//attr()：查询和修改标签的属性
var aList = $("a");
var inputList = $("input");
//如果方法只有一个参数，方法用于获取标签属性的值
alert(aList.attr("href"));
alert(inputList.attr("value"));
//如果方法有两个参数，方法用于设置标签属性的值
aList.attr("href","http://www.qq.com/");
inputList.attr("value","lisi");
//removeAttr():删除标签的属性
inputList.removeAttr("value");
});
</script>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<br />
<input type="text" name="username" value="zhangsan" />
</body>
</html>
4、使用jQuery设置获取CSS样式
- css()
如果方法只有一个参数，方法用于获取标签CSS属性的值，参数为CSS标签属性的名称
如果方法有两个参数，方法用于设置标签属性的值，参数为CSS标签属性的名称和修改的属性 - addClass()
为标签添加CSS属性，参数为CSS样式名 - removeClass()
为标签删除CSS属性，参数为CSS样式名
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
height:100px;
width:300px;
border:1px solid blue;
}
.css01{
height:200px;
width:500px;
}
.css02{
border:2px solid red;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//使用jQuery设置获取CSS样式
//css()
var divList = $("#div01");
//如果方法只有一个参数，方法用于获取标签CSS属性的值
alert(divList.css("height"));
alert(divList.css("width"));
//如果方法有两个参数，方法用于设置标签CSS属性的值
divList.css("height","300px");
divList.css("width","500px");
//可以通过attr()方法来为div标签设置class属性的值
var spanList = $("#span01");
//spanList.attr("class","css01 css02");
//除了上面的方式，还可以通过addClass()设置class属性的值
spanList.addClass("css01 css02");
//removeClass()
divList.removeClass("css01");
});
</script>
</head>
<body>
<div id="div01">
你好！
</div>
<span id="span01">hello!</span>
</body>
</html>
5、判断选择器能否与调用方法的jQuery对象匹配
- is()
参数为一个选择器，可以是各种类型的选择器，返回值类型是boolean类型。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.css01{
height:200px;
width:500px;
}
.css02{
border:2px solid red;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//is()
var divList = $("#div01");
//id选择器
alert(divList.is("#div01"));
//类选择器
alert(divList.is(".css01"));
//元素选择器
alert(divList.is("div"));
//其他的选择器
alert(divList.is(":hidden"));
});
</script>
</head>
<body>
<div id="div01" class="css01 css02">
你好！
</div>
</body>
</html>
四、jQuery的事件处理
1、点击事件
我们在之前JavaScript中介绍了点击事件的处理方法，现在我们使用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">
$(function(){
//点击事件的处理
//使用dom完成事件处理
var domButton01 = document.getElementById("button01");
domButton01.onclick = function(){
alert("点击事件触发了！")
}
//jQuery的事件处理
//click()
var button01 = $("#button01");
button01.click(function(){
alert("点击事件触发了！")
});
});
</script>
</head>
<body>
<input type="button" id="button01" value="按钮"/>
</body>
</html>
2、失去焦点时触发的事件
当我们点击一个文本框时，称为获得焦点；然后当我们点击别的位置时，称为失去焦点。这个事件在用户注册和登陆时使用较多。
<!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(){
//失去焦点时触发的事件
//blur()
var username = $("#username");
username.blur(function(){
//var value = username.val();
//事件的内置对象this，代表触发事件的对象
var value = $(this).val();
if(value == ""){
alert("请输入用户名！");
}
});
});
</script>
</head>
<body>
<input type="text" id="username" name="username"/>
</body>
</html>
3、标签值发生变化时触发的事件
当我们的下拉选择框的选项发生变化时，可以通过change()方法来处理。
<!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(){
//标签值发生变化时触发的事件
//change()
var select01 = $("#select01");
select01.change(function(){
alert($(this).val());
});
});
</script>
</head>
<body>
<select id="select01">
<option value="篮球">篮球</option>
<option value="足球">足球</option>
<option value="乒乓球">乒乓球</option>
<option value="羽毛球">羽毛球</option>
</select>
</body>
</html>
网友评论