JQuery入门
一、什么是JQuery
1.定义
Jquery是Java Script的一个框架,帮我们简化js的书写,封装了很多的api,并且提供方法库,供我们使用。
2.语法格式
$(selectoror).方法()
使用之前一定要先导入jquery的js文件(可以去Jquery的官网下载),否则无法使用Jquery的语法
二、DOM元素操作
1.获取DOM元素
//$("css选择器")
//标签选择器
$("p")
//类选择器
$(".box")
//id选择器
$("#account")
2.对DOM元素进行操作
(1)获取DOM元素的内容(值/文字)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery练习</title>
<script src="static/js/jquery.min.js"></script>
</head>
<body>
<p>今天来学习JQuery</p>
<div>
<div>
<span>账号:</span>
<input type="text" id="account">
</div>
<div>
<span>密码:</span>
<input type="password" id="password">
</div>
<div>
<input id="login" type="button" value="登录">
</div>
</div>
</body>
</html>
获取p标签里的内容 and 获取账号输入框里的内容
//一般方法为空,则为获取。若方法内有参数,则为设置
//获取p标签的文字
console.log($("p").text());//等同于js的console.log(document.getElementById("p").innerText);
$("#login").click(function (){
console.log($("#account").val())//获取账号输入框的值
});
(2)修改DOM元素的内容(值/文字)
一般方法为空,则为获取。若方法内有参数,则为设置
修改p标签里的内容 and 点击登录后修改账号输入框里的内容为“123”
$("p").css("color");//返回第一个p标签的color值
console.log($("p").css("color"));
//修改p标签的文字
$("p").text("我修改内容啦!")//等同于js的console.log(document.getElementById("p").innerText);
$("p").css("color","red");//修改p标签的样式,字体为红色
$("#login").click(function (){
//点击登录按钮后,会给账号输入框设置“123”
$("#account").val("123");//设置账号输入框的值
});
如果要标签要添加多个样式要怎么办呢?
/*$(selector).css({
//要修改的样式(键值对形式)
})*/
//修改标签的多个样式
$("p").css({
"color":"red",
"font-size":"30px",
//不加双引号则用驼峰命名
fontFamily:"楷体",
})
(3)DOM元素的类选择器进行操作
①添加类选择器(addClass)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery练习</title>
<script src="static/js/jquery.min.js"></script>
<style>
.test{
display: none;
}
</style>
</head>
<body>
<p>今天来学习JQuery</p>
</body>
</html>
//给p标签添加"test"类选择器
$("p").addClass("test");
②删除类选择器(removeClass)
//删除p标签的"test"类选择器
$("p").removeClass("test");
③是否存在该类选择器(hasClass)
//判断p标签是否存在"test"类选择器
$("p").hasClass("test");
console.log($("p").hasClass("test"));
(4)DOM元素的attr()和prop()
①attr()
定义:专门操作熟属性为非布尔值的属性(如:width,height),并且读写一体(根据参数而定)。
格式:$(selector).arrt(“属性名”)和$(selector).arrt(“属性名”,“修改的值”);
//获取p标签的宽度
$("p").attr("width");
console.log($("p").attr("width"));
//修改p标签的宽度
$("p").attr("width","200px");
console.log($("p").attr("width"));
②prop()
定义:专门操作熟属性为布尔值的属性(如:checked,disabled),并且读写一体(根据参数而定)。
格式:$(selector).prop(“属性名”)和$(selector).prop(“属性名”,“修改的值”);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery练习</title>
</head>
<body>
<input type="checkbox" checked>
<script src="static/js/jquery.min.js"></script>
<script>
//复选框
if($("input[type=checkbox]").prop("checked")){
$("input[type=checkbox]").prop("checked",false);
}else{
$("input[type=checkbox]").prop("checked",true);
}
</script>
</body>
</html>
三、对于结点的操作
1.创建结点
格式:$(“HTML结点”)
var span = $("<span style='color: red'>我是span标签,新创建的结点哦!<span>");//创建结点的内容
2.添加结点
格式:
①$(selector).prepend(“HTML结点”); prepend()用于在被选元素的所有子节点开头位置插入元素
②$(selector).append(“HTML结点”); append()用于在被选元素的所有子节点结尾位置插入元素
③$(selector).before(“HTML结点”); before()用于在被选元素之前插入内容
④$(selector).after(“HTML结点”); after()用于在被选元素之后插入内容
$("p").append(span);//往后追加
$("p").prepend(span);//往前追加
3.删除结点
格式:
①$(selector).remove(); remove()删除的是整个结点,包括该结点中的子节点(父亲删除,儿子也删除)
②$(selector).remove(); empty()删除的是子结点,但是该结点仍然存在(父亲保留,儿子删除)
$("div").remove();//清除div(清除有关div的全部)
$("div").empty();//清空div内容,但是div还在!!!
4.父亲和兄弟结点
格式:
①父亲结点
i.$(selector).parent() parent()获取选中元素的父级元素
②兄弟结点
i.$(selector).prev() prev()获取选中元素的上一个兄弟元素
ii.$(selector).prev() next()获取选中元素的下一个兄弟元素
iii.$(selector).prev() siblings()获取选中元素的所有兄弟元素
5.指定结点
格式:$(selectoror1).find(selector2) find()通过selecotor1找到它的子类结点selector2
案例
点击按钮,使div消失,再此点击div出现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
background-color: red;
width: 100px;
height: 100px;
}
.test {
display: none;
}
</style>
<script src="../static/js/jquery.min.js"></script>
</head>
<body>
<button id="Btn">点我</button>
<div></div>
</body>
<script>
$("#Btn").click(function () {
$("div").toggleClass("test");
})
</script>
</html>