2、jQuery基本使用
一、jQuery内容选择器（选择器部分可参考jQuery文档查询）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>14-jQuery内容选择器</title>
<style>
div{
width: 50px;
height: 100px;
background: red;
margin-top: 5px;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
// 编写jQuery相关代码
// :empty 作用:找到既没有文本内容也没有子元素的指定元素
// var $div = $("div:empty");
// console.log($div);
// :parent 作用: 找到有文本内容或有子元素的指定元素
// var $div = $("div:parent");
// console.log($div);
// :contains(text) 作用: 找到包含指定文本内容的指定元素
// var $div = $("div:contains(‘我是div‘)");
// console.log($div);
// :has(selector) 作用: 找到包含指定子元素的指定元素
var $div = $("div:has(‘span‘)");
console.log($div);
});
</script>
</head>
<body>
<div></div>
<div>我是div</div>
<div>他们我是div123</div>
<div><span></span></div>
<div><p></p></div>
</body>
</html>二、jQuery的attr方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>16-jQuery的attr方法</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
/*
1.attr(name|pro|key,val|fn)
作用: 获取或者设置属性节点的值
可以传递一个参数, 也可以传递两个参数
如果传递一个参数, 代表获取属性节点的值
如果传递两个参数, 代表设置属性节点的值
注意点:
如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
如果是设置:找到多少个元素就会设置多少个元素
如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增
2.removeAttr(name)
删除属性节点
注意点:
会删除所有找到元素指定的属性节点
*/
// console.log($("span").attr("class"));
$("span").attr("class", "box");
// $("span").attr("abc", "123");
// $("span").removeAttr("class name");
});
</script>
</head>
<body>
<span class="span1" name="it666"></span>
<span class="span2" name="lnj"></span>
</body>
</html>三、jQuery的prop方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>17-jQuery的prop方法</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
/*
1.prop方法
特点和attr方法一致
2.removeProp方法
特点和removeAttr方法一致
*/
/*
$("span").eq(0).prop("demo", "it666");
$("span").eq(1).prop("demo", "lnj");
console.log($("span").prop("demo"));
$("span").removeProp("demo");
*/
/*
注意点:
prop方法不仅能够操作属性, 他还能操作属性节点
官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
*/
// console.log($("span").prop("class"));
// $("span").prop("class", "box");
console.log($("input").prop("checked")); // true / false
console.log($("input").attr("checked")); // checked / undefined
});
</script>
</head>
<body>
<span class="span1" name="it666"></span>
<span class="span2" name="lnj"></span>
<input type="checkbox">
</body>
</html>四、jQuery操作类（修改class属性）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>19-jQuery操作类相关的方法</title>
<style>
*{
margin: 0;
padding: 0;
}
.class1{
width: 100px;
height: 100px;
background: red;
}
.class2{
border: 10px solid #000;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
/*
1.addClass(class|fn)
作用: 添加一个类
如果要添加多个, 多个类名之间用空格隔开即可
2.removeClass([class|fn])
作用: 删除一个类
如果想删除多个, 多个类名之间用空格隔开即可
3.toggleClass(class|fn[,sw])
作用: 切换类
有就删除, 没有就添加
*/
var btns = document.getElementsByTagName("button");
btns[0].onclick = function () {
// $("div").addClass("class1");
$("div").addClass("class1 class2");
}
btns[1].onclick = function () {
// $("div").removeClass("class2");
$("div").removeClass("class2 class1");
}
btns[2].onclick = function () {
$("div").toggleClass("class2 class1");
}
});
</script>
</head>
<body>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>
<div></div>
</body>
</html>五、jQuery操作html，操作文本，操作value的相关方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>20-jQuery文本值相关的方法</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
/*
1.html([val|fn])
和原生JS中的innerHTML一模一样
2.text([val|fn])
和原生JS中的innerText一模一样
3.val([val|fn|arr])
*/
var btns = document.getElementsByTagName("button");
btns[0].onclick = function () {
$("div").html("<p>我是段落<span>我是span</span></p>");
}
btns[1].onclick = function () {
console.log($("div").html());
}
btns[2].onclick = function () {
$("div").text("<p>我是段落<span>我是span</span></p>");
}
btns[3].onclick = function () {
console.log($("div").text());
}
btns[4].onclick = function () {
$("input").val("请输入内容");
}
btns[5].onclick = function () {
console.log($("input").val());;
}
});
</script>
</head>
<body>
<button>设置html</button>
<button>获取html</button>
<button>设置text</button>
<button>获取text</button>
<button>设置value</button>
<button>获取value</button>
<div></div>
<input type="text">
</body>
</html>六、jQuery操作css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>21-jQuery操作CSS样式的方法</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
// 编写jQuery相关代码
// 1.逐个设置
$("div").css("width", "100px");
$("div").css("height", "100px");
$("div").css("background", "red");
// 2.链式设置
// 注意点: 链式操作如果大于3步, 建议分开
$("div").css("width", "100px").css("height", "100px").css("background", "blue");
// 3.批量设置
$("div").css({
width: "100px",
height: "100px",
background: "red"
});
// 4.获取CSS样式值
console.log($("div").css("background"));;
});
</script>
</head>
<body>
<div></div>
</body>
</html>七、jQuery操作尺寸和位置的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>22-jQuery位置和尺寸操作的方法</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
border: 50px solid #000;
margin-left: 50px;
position: relative;
}
.son{
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 50px;
top: 50px;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
// 编写jQuery相关代码
var btns = document.getElementsByTagName("button");
// 监听获取
btns[0].onclick = function () {
// 获取元素的宽度
// console.log($(".father").width());
// offset([coordinates])
// 作用: 获取元素距离窗口的偏移位
// console.log($(".son").offset().left);
// position()
// 作用: 获取元素距离定位元素的偏移位
console.log($(".son").position().left);
}
// 监听设置
btns[1].onclick = function () {
// 设置元素的宽度
// $(".father").width("500px")
// $(".son").offset({
// left: 10
// });
// 注意点: position方法只能获取不能设置
// $(".son").position({
// left: 10
// });
$(".son").css({
left: "10px"
});
}
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
</body>
</html>八、jQuery中scrollTop方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>23-jQuery的scrollTop方法</title>
<style>
*{
margin: 0;
padding: 0;
}
.scroll{
width: 100px;
height: 200px;
border: 1px solid #000;
overflow: auto;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
// 编写jQuery相关代码
var btns = document.getElementsByTagName("button");
// 监听获取
btns[0].onclick = function () {
// 获取滚动的偏移位
// console.log($(".scroll").scrollTop());
// 获取网页滚动的偏移位
// 注意点: 为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法
console.log($("body").scrollTop()+$("html").scrollTop());
}
btns[1].onclick = function () {
// 设置滚动的偏移位
$(".scroll").scrollTop(300);
// 设置网页滚动偏移位
// 注意点: 为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法
$("html,body").scrollTop(300);
}
});
</script>
</head>
<body>
<div class="scroll">我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div</div>
<button>获取</button>
<button>设置</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br>
</body>
</html> 相关推荐
83510998 2020-08-08
tthappyer 2020-07-25
tztzyzyz 2020-07-05
87281248 2020-07-04
82244951 2020-06-28
89510194 2020-06-27
牵手白首 2020-06-14
开心就好 2020-06-10
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15