JQuery基础学习
一、简介
JS框架
- 框架
- 使用原生的代码完成某些功能过于繁琐(代码量太大、冗余代码过多)
- 在开发过程中,大部分程序员会对这些复杂的代码进行封装
- 封装之后,提高了代码的编程效率
- 这种高度封装的代码被我们称为框架
- JDBC(7个步骤) ----> JDBCTemplate(JDBC框架)
- JQuery就是别人提供的对原生js代码进行了封装的代码
- 要想使用
JQuery
需要将别人写好的代码引入到我们的项目中
二、使用JQuery
1、在项目文件夹中存放一份JQuery
文件
2、在需要使用该框架的文件中引入文件
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- 在当前文件中引入JQuery框架 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
</head>
<body>
</body>
</html>
三、节点操作
1、获取节点
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- 在当前文件中引入JQuery框架 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
function test(){
// 使用原生js获取节点
var h1 = document.getElementById("h1");
var h1s_name = document.getElementsByName("h1");
var h1s_class = document.getElementsByClassName("h1");
var h1s_tag = document.getElementsByTagName("h1");
// 使用JQuery获取节点
var $h1 = $("#h1");//id选择器
var $h1s_name = $("*[name='h1']")//条件选择器 在所有标签中寻找name=h1的节点
var $h1s_class = $(".h1");//类选择器
var $h1s_tag = $("h1");//标签选择器
console.log(h1);
console.log($h1);
}
</script>
</head>
<body>
<h1 id="h1">Java170</h1>
<h1 name="h1">Java170</h1>
<h1 name="h1">Java170</h1>
<h1 class="h1">Java170</h1>
<h1 class="h1">Java170</h1>
<input type="button" value="点击" onclick="test()">
</body>
</html>
2、DOM对象和JQuery对象
- 区别
- 都可以获取指定的节点
- 对节点的表现形式不一样
- DOM对象只能使用原生JS提供的一些对节点操作的方法
- JQuery对象只能使用JQuery提供的一些对节点操作的方法
- DOM对象和JQuery对象可以互相转换
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- 在当前文件中引入JQuery框架 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
function test(){
// 使用原生js获取节点
var h1 = document.getElementById("h1");
// 使用JQuery获取节点
var $h1 = $("#h1");//id选择器
// dom ---> jquery
var dom$ = $(h1);
console.log(dom$);
// jquery ---> dom
var $dom = $h1.get(0);
console.log($dom);
// console.log(h1.innerHTML);//dom对象
// console.log($h1.innerHTML);//jquery对象 innerHTML是属于原生js的代码 jquery对象不能使用
}
</script>
</head>
<body>
<h1 id="h1">Java170</h1>
<input type="button" value="点击" onclick="test()">
</body>
</html>
四、JQuery对象的常用方法
语法 | 作用 |
---|---|
$(function(){}); | 写在{}中的内容在页面加载完成之后再被执行 |
$(“选择器”); | 根据选择器获取对应的节点(JQuery对象) |
jquery对象.click(function(){}); | 给jquery对象绑定点击事件 |
jquery对象.html(); | innerHTML |
jquery对象.val(); | value |
jquery对象.attr(“属性名”); | 获取该节点指定的属性值,新版本被prop取代 |
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
// 页面加载完成后执行
$(function(){
//获取h节点对象
var h = document.getElementById("h");
console.log(h);
// 给JQuery对象动态绑定点击事件
$("#button").click(function(){
// 获取表单元素的value值
var loginName = $("#loginName").val();
console.log(loginName);
// 设置表单元素的value值
$("#loginName").val("方方土");
});
// 相当于innerHTML 获取节点中的内容
console.log($("#h").html());
// 设置节点中的内容
$("#h").html("大家好");
// 获取当前节点中指定属性的值
var a = $("#h").attr("aaa");
console.log(a);
// 设置当前节点中指定属性的值
$("#h").attr("aaa","1234");
});
</script>
</head>
<body>
<h1 id="h" aaa="qwer">Java170</h1>
<input type="text" id="loginName">
<input type="button" value="点我" id="button">
</body>
</html>
五、CSS处理
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<style type="text/css" media="screen">
.h{
font-size: 80px;
}
</style>
<script type="text/javascript">
$(function(){
$("#button").click(function(){
// var h = document.getElementById("h");
// h.style.color = "red";
// 修改css属性值
$("#h").css("color","red");
// 获取css属性值
console.log($("#h").css("color"));
// 为对象JQuery对象添加一个类选择器
$("#h").addClass('h');
});
$("#button1").click(function(){
$("#h").removeClass('h');
});
});
</script>
</head>
<body>
<h1 id="h">Java170</h1>
<input type="button" value="点我" id="button">
<input type="button" value="点我" id="button1">
</body>
</html>
六、JQuery效果
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#b1").click(function(){
$("#d").hide();//隐藏效果
});
$("#b2").click(function(){
$("#d").show();//展示效果
});
$("#b3").click(function(){
$("#d").fadeOut(5000);//淡出效果
});
$("#b4").click(function(){
$("#d").fadeIn(5000);//淡入效果
});
});
</script>
</head>
<body>
<div id="d" style="background-color: skyblue;width: 400px;height: 400px"></div>
<input type="button" value="点我" id="b1">
<input type="button" value="点我" id="b2">
<input type="button" value="点我" id="b3">
<input type="button" value="点我" id="b4">
</body>
</html>
七、文档处理
1、内部插入
- a.append(b)
- 将b的内容插入到a节点标签中的末尾(识别标签)
- a.appendTo(b)
- 将a的内容插入到b节点标签中的末尾(识别标签)
2、外部插入
- a.before(b)
- 将b的内容插入到a之前(兄弟节点)
3、删除
- empty()
- 清空节点中的内容
- remove()
- 删除节点本身