JQuery --- 第二期 (jQuery属性操作)
程序员文章站
2022-12-23 09:09:27
个人学习笔记 1.JQuery的内容选择器 2. 属性和属性节点 3.JQuery-attr方法 4.JQuery-prop方法 5.attr和prop方法练习 6.JQuery相关类操作方法 7.JQuery文本值相关的方法 8.jQuery操作CSS样式的方法 9.JQuery位置和尺寸操作的方 ......
个人学习笔记
1.jquery的内容选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery的内容选择器</title>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//:contains(text) 作用:找到包含指定文本内容的指定元素
var $div1 = $("div:contains('div')");
console.log($div1);
//:empty 作用:找到既没有文本内容,也没有子元素的指定元素
var $div2 = $("div:empty");
console.log($div2);
//:has(selector) 作用:找到包含指定子元素的指定元素
var $div3 = $("div:has('p')");
console.log($div3);
//:parent 作用:找到包含指定文本内容或子元素的指定元素
var $div4 = $("div:parent");
console.log($div4);
});
</script>
<style>
div{
width: 100px;
height: 100px;
margin-top: 20px;
background: green;
}
</style>
</head>
<body>
<div></div>
<div>div 1号</div>
<div>div 2号</div>
<div><p></p></div>
<div><span></span></div>
</body>
</html>
2. 属性和属性节点
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>属性和属性节点</title>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
/*
什么是属性
对象身上的变量就是属性
如何操作属性
对象.属性名称 = 值
对象.属性名称
对象['属性名称'] = 值
对象['属性名称']
什么是属性节点
<span name="myspan"></span>
给html标签添加的属性就是属性节点
在浏览器找到span标签后,展开看到的就是属性
在attributes属性中的内容就是属性节点
如何操作属性节点使用get和set方法
var span = document.getelementsbytagname('span')[0];
span.setattribute("name","newspan");
console.log(span.getattribute("name"));
属性和属性节点的区别
任何元素都有属性,但是只有dom元素有属性节点
*/
var span = document.getelementsbytagname('span')[0];
span.setattribute("name","newspan");
console.log(span.getattribute("name"));
});
</script>
</head>
<body>
<span name="myspan"></span>
</body>
</html>
3.jquery-attr方法
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery-attr方法</title>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
/**
* 获取或者设置或新增属性节点的值
*
* 传递一个参数:获得指定属性节点的值,无论找到多少个元素,只会返回第一个属性节点的值
* 传递两个参数:如果存在,就更改,不存在就新增.有多少元素就设置多少元素
*/
console.log($('span').attr("class", "newspan1"));
console.log($('span').attr("new", "haha"));
console.log($('span').attr("new"));
/**
* 删除属性节点:会删除所有被找到的元素的属性节点
* 如果想要删除多个属性节点,直接敲一个空格就行了
*/
$('span').removeattr("class new");
console.log($('span'));
});
</script>
</head>
<body>
<span class="span1" name="第一个span"></span>
<span class="span2" name="第二个span"></span>
</body>
</html>
4.jquery-prop方法
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery-prop方法</title>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//和attr方法基本一样
$('span').eq(0).prop("test","moti");
console.log($("span").prop("test"));
$('span').removeprop("class");
console.log($('span'));
/*
官方推荐在操作属性节点的时候,具有true和false两个属性的属性节点,
如checkbox,selected,或者disabled使用prop,
其他的时候attr()
*/
console.log($('input').prop("checked"));//返回true和false
console.log($('input').attr("checked"));//返回checked和undefined
});
</script>
</head>
<body>
<span class="span1" name="第一个span"></span>
<span class="span2" name="第二个span"></span>
<input type="checkbox" checked>
</body>
</html>
5.attr和prop方法练习
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attr和prop方法练习</title>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//给button添加点击事件
var btn = document.getelementsbytagname("button")[0];
btn.onclick = function () {
//获取输入框的内容
var input = document.getelementsbytagname("input")[0];
var text = input.value;
//修改img的src属性
$('img').attr("src",text);//推荐
// $('img').prop("src",text);
}
});
</script>
</head>
<img>
<input type="text"> <button>切换图片</button><br>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super">
</body>
</html>
6.jquery相关类操作方法
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery相关类操作方法</title>
<script src="jquery-1.12.4.js"></script>
<style>
.class1{
background: rebeccapurple;
width: 200px;
height: 10px;
}
.class2{
background: green;
height: 100px;
}
</style>
<script>
$(function () {
var btn0 = document.getelementsbytagname("button")[0];
var btn1 = document.getelementsbytagname("button")[1];
var btn2 = document.getelementsbytagname("button")[2];
/**
* addclass:添加一个类,如果要添加多个,多个类名之间用空格隔开
*/
btn0.onclick = function () {
$("div").addclass("class2 class1");
}
/**
* removeclass:删除一个类,如果要删除多个,多个类名之间用空格隔开
*/
btn1.onclick = function () {
$("div").removeclass("class2");
}
/**
* toggleclass:切换类,有就删除,没有就添加
*/
btn2.onclick = function () {
$("div").toggleclass("class2 class1");
}
});
</script>
</head>
<body>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>
<div></div>
</body>
</html>
7.jquery文本值相关的方法
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery文本值相关的方法</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
var btn0 = document.getelementsbytagname("button")[0];
var btn1 = document.getelementsbytagname("button")[1];
var btn2 = document.getelementsbytagname("button")[2];
var btn3 = document.getelementsbytagname("button")[3];
var btn4 = document.getelementsbytagname("button")[4];
var btn5 = document.getelementsbytagname("button")[5];
btn0.onclick = function () {
$("div").html("<p>我是段落<span>我是span</span></p>")
};
btn1.onclick = function () {
console.log($("div").html());
};
btn2.onclick = function () {
$("div").text("我是文本内容");
};
btn3.onclick = function () {
console.log($("div").text());
};
btn4.onclick = function () {
$("input").val("请输入内容");
};
btn5.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>
8.jquery操作css样式的方法
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery操作css样式的方法</title>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
/**
* 逐个设置
*/
// $("div").css("width","100px");
// $("div").css("height","100px");
// $("div").css("background","green");
/**
* 链式设置
* 注意:链式操作如果大于三步,建议分开
*/
$("div").css("width","100px").css("height","100px").css("background","red");
/**
* 批量设置
* (推荐)
*/
$("div").css({
width:"100px",
height:"100px",
background:"blue"
});
/**
* 获取css样式值
*/
console.log($("div").css("background"));
});
</script>
</head>
<body>
<div></div>
</body>
</html>
9.jquery位置和尺寸操作的方法
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery位置和尺寸操作的方法</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
border: 20px solid #000;
margin-left: 50px;
position: relative;
}
.son{
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 50px;
top: 50px;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
var btn0 =document.getelementsbytagname("button")[0];
var btn1 =document.getelementsbytagname("button")[1];
/**
* 监听获取
*/
btn0.onclick = function () {
//获取元素的宽度
console.log("father的宽度:",$(".father").width());
//获得元素距离窗口的偏移位
console.log("son距离窗口的左偏移位",$(".son").offset().left);
//获得元素距离定位元素的偏移位
console.log("son距离父元素的左偏移位",$(".son").position().left);
};
/**
* 监听设置
*/
btn1.onclick = function () {
//设置元素的宽度
$(".father").width("500px")
//设置元素距离窗口的偏移位
$(".son").offset({
top:40
});
//注意position方法只能获取不能设置,可以使用css方法设置
$(".son").css({
left:"10px"
});
};
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
</body>
</html>
10.jquery-scrolltop方法
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery-scrolltop方法</title>
<style>
*{
margin: 0;
padding: 0;
}
.scroll{
width: 100px;
height: 200px;
border: 2px solid #000;
overflow: auto;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
var btn0 =document.getelementsbytagname("button")[0];
var btn1 =document.getelementsbytagname("button")[1];
/**
* 监听获取
*/
btn0.onclick = function () {
//获取元素滚动的偏移位
console.log("scroll 的div滚动的偏移位:",$(".scroll").scrolltop());
//获取整个网页滚动的偏移位,为了保证浏览器兼容性,需要按照以下的写法
console.log("整个网页滚动的偏移位:",$("body").scrolltop() + $("html").scrolltop());
};
/**
* 监听设置
*/
btn1.onclick = function () {
//设置元素滚动的偏移位
$(".scroll").scrolltop(200);
//设置整个网页的偏移位,为了保证浏览器兼容性,需要按照以下的写法
$("html,body").scrolltop(300);
};
});
</script>
</head>
<body>
<div class="scroll">
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
</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>
</body>
</html>