JQuery --- 第二期 (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>
JQuery --- 第二期 (jQuery属性操作)的更多相关文章
- JQuery处理DOM元素-属性操作
JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...
- JQuery第二天——JQuery的DOM操作
JQuery拥有隐式迭代和显式迭代 因为JQuery为类数组对象,可以使用手动遍历实现显式 .each():也可以使用 $("p").click(function(){ var t ...
- jQuery - 02. 样式表属性操作/类操作、动画、显示隐藏、滑入、淡入、停止动画、节点操作、添加对象、清空节点
样式表属性操作.css $("div").css({'width':100,'height':100,'background':'red'}); $("div" ...
- jQuery样式及html属性操作
样式及html属性操作1,行内样式 css(); a:获取样式 元素.css(样式名称); b:设置单个样式 元素.css("样式名称":"样式值"); c:设 ...
- jQuery 第二章 实例方法 DOM操作选择元素相关方法
进一步选择元素相关方法: .get() .eq() .find() .filter() .not() .is() .has() .add()集中操作 .end()回退操作 .get() $(&qu ...
- Jquery选择器大全、属性操作、css操作、文档、事件等
一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. jQuery对象 jQuery产 ...
- jQuery 第二章 实例方法 DOM操作取赋值相关方法
取赋值相关方法: .html() .text() .val() .size() .addClass() .removeClass() .hasClass() .html() html方法干嘛的呢,底 ...
- jquery 标签中的属性操作
.arrt() 获取匹配的元素集合中的第一个元素的属性值,或设置每一个元素中的一个或多个属性值. .attr(attributeName) $("em").attr("t ...
- select元素选择时间以及jQuery对select的属性操作
<select class="input04" id="1" name="in_class1" onchange="setc ...
随机推荐
- 一文读懂 Spring Boot、微服务架构和大数据治理三者之间的故事
微服务架构 微服务的诞生并非偶然,它是在互联网高速发展,技术日新月异的变化以及传统架构无法适应快速变化等多重因素的推动下诞生的产物.互联网时代的产品通常有两类特点:需求变化快和用户群体庞大,在这种情况 ...
- webpack4 splitChunksPlugin && runtimeChunkPlugin 配置杂记
webpack2 还没研究好,就发现升级到4了,你咋这么快~ 最近要做项目脚手架,项目构建准备重新做,因为之前写的太烂了...然后发现webpack大版本已经升到4了(又去看了一眼,4.5了),这么快 ...
- PAT1121:Damn Single
1121. Damn Single (25) 时间限制 300 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue "Dam ...
- Spring BeanWrapper分析
最近在读DispatcherServlet 源代码,看到父级类org.springframework.web.servlet.HttpServletBean中关于BeanWrapper的一段代码, 继 ...
- SSM-SpringMVC-32：SpringMVC中灌顶传授文件上传
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 我将用自认为最简单的语言,描述Springmvc的文件上传,来将老夫毕生功力灌顶传授给你 首先文件上传,又简至 ...
- MVP架构在xamarin android中的简单使用
好几个月没写文章了,使用xamarin android也快接近两年,还有一个月职业生涯就到两个年了,从刚出来啥也不会了,到现在回头看这个项目,真jb操蛋(真辛苦了实施的人了,无数次吐槽怎么这么丑),怪 ...
- Linux时间子系统之三：时间的维护者：timekeeper
专题文档汇总目录 Notes: 原文地址:Linux时间子系统之三:时间的维护者:timekeeper 本系列文章的前两节讨论了用于计时的时钟源:clocksource,以及内核内部时间的一些表示方法 ...
- maven入门 （二）_私服安装与上传下载
本篇文章主要介绍maven的私服安装和 jar包的上传与下载.毕竟大家还是在公司需要上传jar包到自己公司私服的. 1.安装私服 下载链接: https://pan.baidu.com/s/17dbQ ...
- JavaScript-点击任意点显示隐藏
//开/关 var only = document.getElementById('only'); var centerBox = document.getElementById('centerBox ...
- ECS上搭建Docker(CentOS7)
本文讲述Docker在CentOS系统上的部署过程.Ubuntu系统下安装docker,您可以点击此处查看.更多详细的实践您可以参考docker实践文档 适用对象 适用于熟悉Linux操作系统,刚开始 ...