jQuery基础之操作属性或文本及其样式 位置 尺寸的方法（重点，常用）
相关知识点导航
1 ，$.holdReady(true); 作用: 暂停ready执行；
2，jQuery内容选择器
$(“div:empty”);
$(“div:parent”);
$(“div:contains(‘我是div’)”);
$(“div:has(‘span’)”);
3，属性和属性节点
3.1通过js进行操作
3.2通过jQuery进行操作
attr(name|pro|key,val|fn)
removeAttr(name)
prop(),removeProp()以及和attr的区别
4，切换类的方法即调用class（js className）
添加一个类.addClass(class|fn)
删除一个类.removeClass([class|fn])
切换类.toggleClass(class|fn[,sw])
5，文本取值
1.html([val|fn])
和原生JS中的innerHTML一模一样
2.text([val|fn])
和原生JS中的innerText一模一样
3.val([val|fn|arr])
6,操作css样式的方法
$(“div”).css(“width”, “100px”);
在js中可通过cssTest进行设置，element.style.cssText = ‘height: 100px；’
7，jQuery位置和尺寸的操作方法
offset([coordinates])；获取元素距离窗口的偏移位
position()；获取元素距离定位元素的偏移位，只能获取不能设置
8，jQuery中scrollTop方法及其兼容方法
1 , $.holdReady(true);
作用: 暂停ready执行；可用于想当一个元素执行过后再渲染页面；实例如下：
<script>
$.holdReady(true);
$(document).ready(function () {
alert("ready");
});
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
$.holdReady(false);
}
</script>
2，jQuery内容选择器
$(“div:empty”);
$(“div:parent”);
$(“div:contains(‘我是div’)”);
$(“div:has(‘span’)”);
实例代码如下：
<div></div>
<div>我是div</div>
<div>他们我是div123</div>
<div><span></span></div>
<div><p></p></div>
$(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);
});
3，属性和属性节点
1.什么是属性?
对象身上保存的变量就是属性
2.如何操作属性?
对象.属性名称 = 值;
对象.属性名称;
对象[“属性名称”] = 值;
对象[“属性名称”];
3.什么是属性节点?
<span name = “it666”></span>
在编写HTML代码时,在HTML标签中添加的属性就是属性节点
在浏览器中找到span这个DOM元素之后, 展开看到的都是属性
在attributes属性中保存的所有内容都是属性节点
4.如何操作属性节点?
DOM元素.setAttribute(“属性名称”, “值”);
DOM元素.getAttribute(“属性名称”);
5.属性和属性节点有什么区别?
任何对象都有属性, 但是只有DOM对象才有属性节点
3.1通过js进行操作属性
$(function () {
//通过js进行操作
function Person() {
}
var p = new Person();
// p.name = "lnj";
p["name"] = "zs";
// console.log(p.name);
console.log(p["name"]);
var span = document.getElementsByTagName("span")[0];
span.setAttribute("name", "lnj");
console.log(span.getAttribute("name"));
});
3.2通过jQuery进行操作属性
通过attr(),removeAttr()
$(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");
});
通过prop(),removeProp()
$(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
});
4，jQuery切换类的方法（js className）
添加一个类.addClass(class|fn)
删除一个类.removeClass([class|fn])
切换类.toggleClass(class|fn[,sw])
<!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>
5，jQuery文本取值
1.html([val|fn])
和原生JS中的innerHTML一模一样
2.text([val|fn])
和原生JS中的innerText一模一样
3.val([val|fn|arr])
<button>设置html</button>
<button>获取html</button>
<button>设置text</button>
<button>获取text</button>
<button>设置value</button>
<button>获取value</button>
<div></div>
<input type="text">
$(function () {
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());;
}
});
6,jQuery操作css样式的方法
$(“div”).css(“width”, “100px”);
在js中可通过cssTest进行设置，element.style.cssText = ‘height: 100px；’
$(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"));;
});
在这里插入代码片
7，jQuery位置和尺寸的操作方法
offset([coordinates])
作用: 获取元素距离窗口的偏移位
position()
作用: 获取元素距离定位元素的偏移位
position方法只能获取不能设置
<div class="father">
<div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
<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>
$(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>
8，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>
<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>
</body>
</html>
