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 ...
随机推荐
- Pattern recognition and machine learning 疑难处汇总
不断更新ing......... p141 para 1. 当一个x对应的t值不止一个时,Gaussian nosie assumption就不合适了.因为Gaussian 是unimodal的,这意 ...
- linux基础命令用法
目录管理 ls.cd.pwd.mkdir.rmdir.tree ls(list) 列出,列表 用法: ls -l:长格式 文件类型: -:普通文件 (f) d: 目录文件 b: 块设备文件 (bloc ...
- Linux系统根目录各文件夹的含义
centos7文件结构截图如下: 首先,我要说明我在安装centos系统的过程中,勾选了GNOME的图形界面,功能当中勾选了办公工具和开发工具,办公工具就是类似于微软的office,现在在微软offi ...
- SQL关于IN和EXISTS的用法和区别的比较
1.exist,not exist一般都是与子查询一起使用. In可以与子查询一起使用,也可以直接in (a,b.....).2.exist会针对子查询的表使用索引. not exist会对主子查询都 ...
- mac下的readelf和objdump
ELF文件包括: (1)可重定位的目标文件 (2)可执行的目标文件 (3)可被共享的目标文件 可以用file命令来看目标文件是否是ELF文件 在linux下,用readelf来看ELF头部或者其它各s ...
- 并发库应用之十三 & 并发集合类的应用
传统集合实现同步的问题 举了一个例子:Map集合线程不同步导致的问题. 解决办法:使用同步的Map集合 使用集合工具类中的方法将不同步的集合转为同步的Collections.synchronizedM ...
- vue-quasar-admin 一个包含通用权限控制的后台管理系统
vue-quasar-admin Quasar-Framework 是一款基于vue.js开发的开源的前端框架, 它能帮助web开发者快速创建以下网站:响应式网站,渐进式应用,手机应用(通过Cor ...
- 微信公众号 模板消息 定时推送 java
前提:业务需要,要做一个关于月报的微信消息推送.即每个月定时自动发送一条消息 给关注 公众号的人 用的是 公众号的测试账号(实际开发需要认证的公众号) 微信官网的 模板消息接口规则: 1.所有服务号都 ...
- 如何深度复制一个javascript对象
前言 最近有人问我,如何将一个对象复制一份,因为他遇到了一个需求,需要将后端获取的数据,保存一份,原始数据会因为交互而发生变化,最终需要对比两份数据的异同. 他是一个刚入行的小朋友,他的实现方式就是新 ...
- eclipse工具的使用心得
一.eclipse工具的使用 eclipse是一个开源的IDE,进行javaEE开发一般使用myeclipse插件比较方便 1. java代码的位置 1)选择工作空间workspace 选择一个文件夹 ...